merge master in

styles/_code-walkthrough.scss

@@ -0,0 +1,61 @@
+#app_root article .code-walkthrough {
+    margin-right: 112px;
+    max-width: calc(100% - 112px);
+    padding-right: 0;
+    grid-template-columns: 5fr 5fr;
+
+    @media screen and (max-width: 990px) {
+        margin-right: 96px;
+        max-width: calc(100% - 96px);
+    }
+
+    // Wide screens - increase available space
+    @media screen and (min-width: 1600px) {
+        [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
+            margin-left: 96px;
+            max-width: calc(100% - 96px);
+        }
+
+        [class*="CodeWalkthrough__ContentWrapper"] {
+            margin-left: 96px;
+            max-width: calc(100% - 200px);
+        }
+    }
+
+    .tag-size-large {
+        margin: 0 var(--spacing-xs);
+
+        > div {
+            padding: 2px 4px;
+        }
+    }
+
+    [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
+        padding: var(--spacing-xs) var(--spacing-lg);
+
+        > :first-child > :first-child {
+            margin: auto;
+        }
+    }
+
+    [data-component-name="Markdoc/CodeWalkthrough/CodePanel"] {
+        top: var(--navbar-height);
+        border: 0;
+
+        [data-component-name="CodeBlock/CodeBlockContainer"] {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    > :first-child > div {
+        border-radius: var(--border-radius-md);
+    }
+    [data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
+        background-color: var(--code-panel-bg-color);
+    }
+
+    [data-line-number]::before {
+        padding-left: 0.8em;
+    }
+}

styles/_content.scss

@@ -64,11 +64,19 @@
 
   /* Some list items contain <p> tags, some don't. These styles make sure both
    kinds are spaced consistently. */
-  li {
-    margin: 6px;
-    margin-top: 24px;
+  > ul, > ol, .children-display {
+    li {
+      margin: 6px;
+      margin-top: 24px;
+    }
+    li:first-child {
+      margin-top: 16px;
+    }
+    li p {
+      margin: 0;
+    }
   }
-  li p {
+  [data-component-name="Markdoc/Tabs/Tabs"] li {
     margin: 0;
   }
 

styles/_pages.scss

@@ -172,7 +172,7 @@
 }
 
 #wallets {
-  @each $wallet in "ledger", "secalot", "trezor", "xumm", "trust", "gatehub", "towo", "keystone", "dcent", "coin", "gem" {
+  @each $wallet in "ledger", "secalot", "trezor", "xumm", "trust", "gatehub", "towo", "keystone", "dcent", "coin", "gem", "joey" {
     #wallet-#{$wallet} {
       content: url("../img/wallets/#{$wallet}.svg");
     }
@@ -432,6 +432,7 @@
     "ripples-cbdc-platform": "svg",
     "momento": "svg",
     "zerpmon": "png",
+    "joey-wallet": "svg",
     "Crossmark": "png",
     "Edge": "png"
 

styles/_top-nav.scss

@@ -1,6 +1,6 @@
 /* Top navigation ----------------------------------------------------------- */
 $nav-height: 80px;
-$banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
+$banner-height: 0; // Currently no pencil banner.
 
 [data-component-name="layouts/RootLayout"] {
   padding-top: $nav-height + $banner-height;
@@ -530,7 +530,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
           display: none;
         }
 
-        #topnav-search, 
+        #topnav-search,
         #topnav-language,
         #topnav-theme {
           // display: none;

styles/_use-cases.scss

@@ -4,7 +4,7 @@
 $infrastructure-logos: "xrp-ledger", "gatehub", "towolabs", "xrpscan", "xrp-toolkit", "bithomp", "onthedex";
 $developer-tooling-logos: "cryptum", "evernode", "threezy", "tokenize";
 $interoperability-logos: "multichain";
-$wallet-logos: "crossmark", "edge", "gem-wallet", "xumm";
+$wallet-logos: "crossmark", "edge", "gem-wallet", "xumm", "joey-wallet";
 $nfts-logos: "aesthetes", "audiotarky", "nftmaster", "peerkat", "sologenic_dex", "xrp-cafe", "xrp-oval";
 $exchanges-logos: "sologenic_dex", "xpmarket", "orchestra-finance", "moai-finance", "first-ledger-bot";
 $gaming-logos: "forte", "ledger-city", "futureverse", "zerpmon";
@@ -1446,7 +1446,7 @@ body,
       color: #FFF;
       font-size: 20px;
       font-weight: 700;
-      margin-bottom: 16px;
+      margin-bottom: 0px;
     }
     
     .integration-column__subtitle {

styles/light/_light-theme.scss

@@ -573,6 +573,10 @@ pre {
   #wallet-crossmark {
     content: url("../img/wallets/lightmode/crossmark.png");
   }
+
+  #wallet-joey {
+    content: url("../img/wallets/lightmode/joey.svg");
+  }
 }
 
 
@@ -669,6 +673,7 @@ pre {
     'ripples-on-demand-liquidity': 'svg',
     'xumm-wallet': 'svg',
     'sologenic-dex': 'svg',
+    'joey-wallet': 'svg',
     'Crossmark': 'png'
 
   ) {
@@ -1459,6 +1464,7 @@ main article .card-grid {
 /* Light mode battle-tested company logos */
 .use-case-payments .battle-tested-section {
   .payments-project-card {
+     background: #FFF !important;
     .project-logo img {
       &.coinpayments {
         content: url('../img/uses/lightmode/payments/coinpayments.png');

styles/xrpl.scss

@@ -54,6 +54,7 @@ $line-height-base: 1.5;
 @import "_top-banner.scss";
 @import "_content.scss";
 @import "_code-tabs.scss";
+@import "_code-walkthrough.scss";
 @import "_diagrams.scss";
 @import "_external-links.scss";
 @import "_footer.scss";