/* css/amd.css: hand-written additions to the reference sheet (css/site.css).
   site.css only holds the classes the reference site used; everything the AMD site needs on top lives here:
   a few Tailwind-style utilities the new pages use, the motion the reference ran through framer-motion
   (same durations, the [.16,1,.3,1] ease, same delays), the $AMDM pills, the toast, the docs and
   catalog components and the 404 page. Palette tokens stay the reference's (see :root in site.css). */

:root {
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- utilities missing from site.css */
.top-20 { top: 5rem; }
.top-24 { top: 6rem; }
.self-start { align-self: flex-start; }
.justify-start { justify-content: flex-start; }
.whitespace-pre { white-space: pre; }
.object-contain { object-fit: contain; }
.min-h-\[44px\] { min-height: 44px; }
.mt-12 { margin-top: 3rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.scroll-mt-28 { scroll-margin-top: 7rem; }
.cursor-not-allowed { cursor: not-allowed; }
.h-\[120px\] { height: 120px; }
.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\] { --tw-shadow: 0 1px 2px rgba(0,0,0,.04); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.break-words { overflow-wrap: anywhere; }
.break-all { word-break: break-all; }
.tabular { font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .lg\:sticky { position: sticky; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:col-span-9 { grid-column: span 9 / span 9; }
  .lg\:grid-cols-\[220px_1fr\] { grid-template-columns: 220px minmax(0, 1fr); }
  .lg\:block { display: block; }
  .lg\:top-24 { top: 6rem; }
  .lg\:max-h-\[calc\(100vh-7rem\)\] { max-height: calc(100vh - 7rem); }
}

/* ------------------------------------------------------------------------------- shell: nav + footer */
/* Buy $AMDM pill. Disabled ("soon") while js/config.js TOKEN.buyUrl is blank; a real link once it is filled. */
.amd-pill {
  display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap;
  border-radius: var(--r-pill); border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-surface)); padding: .375rem .75rem;
  font-size: .75rem; line-height: 1rem; font-weight: 500; color: rgb(var(--c-ink));
  transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.amd-pill:hover { background: rgb(var(--c-surface-2)); }
.amd-pill:active { transform: scale(.95); }
.amd-pill[disabled], .amd-pill[aria-disabled="true"] { color: rgb(var(--c-muted)); cursor: not-allowed; background: rgb(var(--c-surface-2)); }
.amd-pill[disabled]:active, .amd-pill[aria-disabled="true"]:active { transform: none; }
/* footer text controls keep their look but get a 40px hit area on touch screens */
.amd-tap { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 40px; min-width: 40px; }
.amd-tap-icon { min-width: 40px; justify-content: center; }
/* on wide screens the footer row never wraps, so the 40px hit areas can overlap the row's padding and keep the
   reference's 103px footer; on phones the row wraps and the rows must not overlap each other */
@media (min-width: 768px) {
  .amd-tap { margin-top: -9px; margin-bottom: -9px; }
  .amd-tap-icon { margin-left: -10px; margin-right: -10px; }
}
.gap-x-5 { column-gap: 1.25rem; }
/* the mobile bar's logo link is a 40px target without changing the 68px bar */
.amd-brand { min-height: 40px; margin-top: -2px; margin-bottom: -2px; }
/* the desktop logo link hugs its content instead of stretching over the whole first grid column */
.amd-brand-link { justify-self: start; }
/* the reference's pill only carried a 20px logo; the "Robinhood Chain" text needs the room the 72rem container
   gives it, and it is set a touch tighter to clear the links */
.amd-nav-pill { display: none; padding-left: .5rem; padding-right: .5rem; gap: .375rem; background: rgb(var(--c-paper) / .7); }
.amd-nav-pill .amd-nav-chain { font-size: 11px; line-height: 1rem; }
.amd-pill-nav { display: none; }
/* 1152px, not 1280: the page container is max-w-72rem = 1152px, so from that width up the nav's three columns
   stop moving and the badge clears "Wallets" by the same 11px it has at 1440 (measured over CDP at 1130, 1152,
   1160, 1200, 1279 and 1280: 0, 11, 11, 11, 11, 11). Below 1152 the container shrinks, the centre link group
   slides left and the chain name lands on "Wallets", so there the legal-name lockup stands in. */
@media (min-width: 1152px) { .amd-nav-pill, .amd-pill-nav { display: inline-flex; } }
/* "infrastructure" at 48px does not fit a 272px column: one size down below 360px */
@media (max-width: 359px) { .display-title.text-5xl { font-size: 2.5rem; line-height: 1.05; } }
.amd-tap[disabled] { color: rgb(var(--c-muted-2)); cursor: not-allowed; }
/* the wordmark next to the mark (the reference sets its colour inline; kept here so every page agrees) */
.amd-wordmark { color: #153345; }
/* mobile menu */
.amd-menu[hidden] { display: none; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
/* nav after 10px of scroll (the reference toggles these two class pairs) */
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

/* toast ("$AMDM CA copied") */
.amd-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; transform: translate(-50%, 12px);
  border-radius: var(--r-pill); background: rgb(var(--c-ink)); color: rgb(var(--c-paper));
  padding: .625rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo);
}
.amd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------------------------------ motion */
/* reveal: the reference's motion.div initial {opacity:0, y:6} -> animate {opacity:1, y:0}, .35s [.16,1,.3,1] */
[data-reveal] { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-expo) var(--reveal-delay, 0s), transform .35s var(--ease-expo) var(--reveal-delay, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* a card that enters from y:10, .4s */
[data-reveal="card"] { transform: translateY(10px); transition-duration: .4s; }
/* shimmer text and the blinking cursor come from site.css (.shimmer-text, .cursor-blink) */

/* chat demo (wallet section): each message .35s [.16,1,.3,1] from {opacity:0, y:6} */
.amd-msg { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo); }
.amd-msg.is-in { opacity: 1; transform: none; }
.amd-spent { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease-expo), transform .3s var(--ease-expo); }
.amd-spent.is-in { opacity: 1; transform: none; }
/* the chat pane swaps with {opacity:0, scale:.97} over .25s */
.amd-chat-pane { transition: opacity .25s ease, transform .25s ease; }
.amd-chat-pane.is-out { opacity: 0; transform: scale(.97); }
/* the balance digits (NumberFlow-like): enter from y:-8 blur 3px, leave to y:8 blur 3px, spring .3s */
@keyframes amd-digit-in { 0% { opacity: 0; transform: translateY(-8px); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes amd-digit-out { 0% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.amd-digit-in { animation: amd-digit-in .3s cubic-bezier(.2, 1.2, .4, 1) both; }
.amd-digit-out { animation: amd-digit-out .3s cubic-bezier(.2, 1.2, .4, 1) both; position: absolute; left: 0; top: 0; }
.amd-digit-slot { position: relative; display: inline-block; }
/* the deduction pills on the card: {opacity:0, blur 4px} <-> shown, .25s */
.amd-deduct { transition: opacity .25s ease, filter .25s ease; }
.amd-deduct.is-off { opacity: 0; filter: blur(4px); }

/* gateway demo: three absolutely positioned steps swapped by js/site.js with the Web Animations API */
.amd-gwd-step { will-change: opacity, transform, filter; }
/* the hidden attribute must beat the display classes (.flex, .grid) on swapped steps, scenes and panels */
.amd-gwd-step[hidden], [data-scene][hidden], [data-panel][hidden] { display: none !important; }

/* earnings list rows: enter with {opacity:0, scale:.92, blur 8px} .35s */
.amd-row-in { animation: amd-row-in .35s var(--ease-expo) both; }
@keyframes amd-row-in { 0% { opacity: 0; transform: scale(.92); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
/* the chart area reveals left to right through a clip-path, .6s */
.amd-chart-clip { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-expo); }

/* trade hero card: a card {opacity:0, scale:.97} -> shown over .4s; rows stagger .12s after .15s */
.amd-strat-row { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-expo) var(--d, 0s), transform .3s var(--ease-expo) var(--d, 0s); }
.is-in .amd-strat-row { opacity: 1; transform: none; }
.amd-filled { opacity: 0; transform: scale(.9); transition: opacity .3s var(--ease-expo) .9s, transform .3s var(--ease-expo) .9s; }
.is-in .amd-filled { opacity: 1; transform: none; }

/* progress bar in the demo (kept for the wallet script's progress steps) */
.amd-progress { height: 100%; border-radius: 9999px; background: rgb(var(--c-ink) / .7); width: 0; transition: width var(--dur, 1s) var(--ease-std); }
.amd-progress.is-in { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .amd-msg, .amd-spent, .amd-strat-row, .amd-filled, .amd-deduct, .amd-chat-pane, .amd-progress, .amd-chart-clip, .amd-toast { transition: none !important; }
  [data-reveal], .amd-msg, .amd-spent, .amd-strat-row, .amd-filled { opacity: 1 !important; transform: none !important; }
  .amd-digit-in, .amd-digit-out, .amd-row-in { animation: none !important; }
  .amd-chart-clip { clip-path: none !important; }
}

/* ------------------------------------------------------------------------------------ chain strip */
/* "Settles on Robinhood Chain": three text-styled items in the logo slots of the reference strip */
.amd-chain-item { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; line-height: 1rem; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--c-ink)); white-space: nowrap; }
.amd-chain-item .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(var(--c-ink)); flex-shrink: 0; }
.amd-chain-item .dot-usdg { background: oklch(var(--color-green-9)); }
.amd-chain-item .dot-uni { background: oklch(var(--color-blue-9)); }

/* ------------------------------------------------------------------------------------ new pages */
/* page hero used by /catalog, /skill, /docs and 404 (same rhythm as the /gateway hero column) */
.amd-page-hero h1 { letter-spacing: -.02em; }

/* code blocks (docs, skill)
   The scroller is the <pre>, not the block: the Copy button is absolutely placed against the block (so it stays
   put while the code is scrolled sideways) and the pre clips its long lines inside the padding, so no code line is
   ever drawn under the button or over the block's border. The block reserves a toolbar strip for the button.
   The pre wraps instead of scrolling sideways: a soft wrap is only how the line is drawn, so Copy still hands
   over the original lines and every continued command still ends in its own `\`. Every sample is rewrapped to
   84 columns, which is what the narrowest desktop column (1024) holds, so nothing wraps above a phone; a phone
   cannot hold a shell command on one line at any legible size, and a wrap there beats a hidden half of it.
   `overflow-x: auto` stays as the fallback for a token no wrap can break (a long hex string). */
.amd-code {
  position: relative; border-radius: .75rem; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface-2));
  padding: .875rem 1rem; font-size: .8125rem; line-height: 1.5; color: rgb(var(--c-ink));
}
.amd-code pre { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; tab-size: 2; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The three token colours of the code panel are written as rgb() on purpose. The shared contrast check
   (tools/lib/page-checks.mjs, parseColor) reads rgb()/rgba() only, so an oklch() colour is counted as
   "unparsed colour" and never measured: on /docs that silently skipped 112 text runs. These are the same
   pixels Chrome paints for the palette tokens (verified against a canvas read-back), except .kw, which is
   one step darker than --color-blue-11: oklch(var(--color-blue-11)) is rgb(0 113 227) = 4.49:1 on this
   panel, a hair under AA for 13px text, and rgb(0 104 217) is 5.04:1. */
.amd-code .cm { color: rgb(86 94 107); }                 /* 6.25:1 on the panel */
.amd-code .st { color: rgb(12 120 48); }                 /* = oklch(var(--color-green-11)), 5.36:1 */
.amd-code .kw { color: rgb(0 104 217); }                 /* one step darker than --color-blue-11, 5.04:1 */
/* the reserved strip and its hairline: the button sits in it, the code starts under it */
.amd-code:has(> .amd-code-copy) { padding-top: 2.875rem; }
.amd-code:has(> .amd-code-copy)::before { content: ""; position: absolute; left: 0; right: 0; top: 2.375rem; height: 1px; background: rgb(var(--c-line)); }
.amd-code-copy { position: absolute; right: .5rem; top: .5rem; border-radius: .5rem; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); padding: .25rem .5rem; font-size: .6875rem; line-height: 1rem; font-weight: 500; color: rgb(var(--c-muted)); min-width: 40px; min-height: 28px; }
.amd-code-copy:hover { color: rgb(var(--c-ink)); }
/* touch screens (the layout gate checks 40px targets up to 768px): a taller button and a taller strip for it */
@media (max-width: 768px) {
  .amd-code-copy { min-height: 40px; }
  .amd-code:has(> .amd-code-copy) { padding-top: 3.625rem; }
  .amd-code:has(> .amd-code-copy)::before { top: 3.125rem; }
}
code.amd-inline { border-radius: .375rem; background: rgb(var(--c-ink) / .06); padding: .125rem .375rem; font-size: .8125em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; color: rgb(var(--c-ink)); overflow-wrap: anywhere; }

/* docs layout: sticky TOC on desktop */
.amd-docs-toc a { display: block; padding: .375rem 0; font-size: .8125rem; line-height: 1.25rem; color: rgb(var(--c-muted)); transition: color .15s ease; }
/* on touch screens the rows are 40px tall (the list is the page's own navigation, not inline links) */
@media (max-width: 768px) { .amd-docs-toc a { padding-top: .625rem; padding-bottom: .625rem; } }
.amd-docs-toc a:hover, .amd-docs-toc a.is-active { color: rgb(var(--c-ink)); }
.amd-docs-toc a.is-active { font-weight: 500; }
.amd-docs-prose h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -.02em; color: rgb(var(--c-ink)); }
.amd-docs-prose h3 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: rgb(var(--c-ink)); margin-top: 1.5rem; }
.amd-docs-prose p, .amd-docs-prose li { font-size: .9375rem; line-height: 1.7; color: rgb(var(--c-muted)); }
.amd-docs-prose p { margin-top: .75rem; }
.amd-docs-prose ul { list-style: disc; padding-left: 1.5rem; margin-top: .75rem; }
.amd-docs-prose ol { list-style: decimal; padding-left: 1.5rem; margin-top: .75rem; }
.amd-docs-prose li { margin-top: .375rem; }
.amd-docs-prose li::marker { color: rgb(var(--c-muted-2)); }
.amd-docs-prose a { color: rgb(var(--c-ink)); text-decoration: underline; text-underline-offset: 2px; }
.amd-docs-prose a:hover { text-decoration: none; }
.amd-docs-prose .amd-code { margin-top: .75rem; }
.amd-docs-prose b, .amd-docs-prose strong { color: rgb(var(--c-ink)); font-weight: 600; }
.amd-docs-prose section + section { margin-top: 3.5rem; }
.amd-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.25rem; margin-top: .75rem; }
.amd-table th { text-align: left; font-weight: 600; color: rgb(var(--c-ink)); padding: .5rem .75rem; border-bottom: 1px solid rgb(var(--c-line)); }
.amd-table td { padding: .5rem .75rem; border-top: 1px solid rgb(var(--c-line)); color: rgb(var(--c-muted)); vertical-align: top; }
.amd-table td:first-child { color: rgb(var(--c-ink)); white-space: nowrap; }
.amd-table-wrap { overflow-x: auto; margin-top: .75rem; }
.amd-table-wrap .amd-table { margin-top: 0; min-width: 480px; }

/* catalog */
.amd-search { display: flex; align-items: center; gap: .5rem; border: 1px solid rgb(var(--c-line)); border-radius: .75rem; background: rgb(255 255 255 / .7); padding: .5rem .75rem; }
.amd-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: .875rem; line-height: 1.25rem; color: rgb(var(--c-ink)); min-height: 28px; }
.amd-search input::placeholder { color: rgb(var(--c-muted)); }
.amd-card { display: flex; flex-direction: column; gap: .75rem; border-radius: 1rem; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-paper)); padding: 1.25rem; transition: border-color .15s ease; }
.amd-card:hover { border-color: rgb(var(--c-ink) / .25); }
.amd-favicon { width: 2.25rem; height: 2.25rem; border-radius: .625rem; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface-2)); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: .75rem; font-weight: 600; color: rgb(var(--c-muted)); }
.amd-favicon img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.amd-badge { display: inline-flex; align-items: center; border-radius: .375rem; border: 1px solid rgb(187 247 208); background: rgb(240 253 244); padding: .125rem .5rem; font-size: 10px; line-height: 1rem; font-weight: 600; color: oklch(var(--color-green-11)); }
.amd-empty { border-radius: 1rem; border: 1px dashed rgb(var(--c-line)); padding: 3rem 1.5rem; text-align: center; }

/* 404 */
.amd-404-code { font-size: clamp(4rem, 18vw, 9rem); line-height: 1; font-weight: 500; letter-spacing: -.04em; color: rgb(var(--c-ink)); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; }

/* the fine print under the card is a real sentence: muted (not muted2) so it reads at AA */
.amd-fineprint { color: rgb(var(--c-muted)); }

/* privacy and terms (the reference's two plain pages) carry two standalone links that are one line of text tall:
   the back link at the top and the contact handle in the last section. Both get a 40px hit area without moving a
   single glyph: the box grows around the text and the negative margins give the extra height back to the layout. */
.amd-tap-line { display: inline-flex; align-items: center; min-height: 40px; margin-top: -10px; margin-bottom: -10px; }
/* the back link owns its gap to the heading (mb-8 minus the 10px the box grew downwards) */
.amd-tap-back { display: inline-flex; align-items: center; min-height: 40px; margin-top: -10px; margin-bottom: calc(2rem - 10px); }

/* ------------------------------------------------------------------------------------ page fog */
/* The reference's PixelFog: five layered gradients in the page accent (--fog as "r,g,b"), blurred 22px.
   gridSize 10 on desktop (60px lines) and 4 on phones (48px), exactly what the component computed. */
.amd-fog {
  --fog-grid: 60px;
  background-image:
    radial-gradient(40rem 22rem at 14% 2%, rgba(var(--fog), 0.18), transparent 72%),
    radial-gradient(34rem 18rem at 86% 0%, rgba(var(--fog), 0.12), transparent 68%),
    linear-gradient(180deg, rgba(var(--fog), 0.08), transparent 58%),
    repeating-linear-gradient(90deg, rgba(var(--fog), 0.018) 0, rgba(var(--fog), 0.018) 1px, transparent 1px, transparent var(--fog-grid)),
    repeating-linear-gradient(180deg, rgba(var(--fog), 0.018) 0, rgba(var(--fog), 0.018) 1px, transparent 1px, transparent var(--fog-grid));
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  filter: blur(22px) saturate(115%);
  opacity: .9;
}
@media (max-width: 767px) { .amd-fog { --fog-grid: 48px; } }
/* The fog's densest patch sits at 14% of the width, right under the nav's link row once the container stops
   centring it: "Wallets" (muted, 14px) measured 4.27:1 on / and 4.44:1 on /trade at 1024, 4.35:1 and 4.48:1 at
   1152, 4.46:1 on / at 1280, and only cleared AA from about 1366. The fog is drawn at half strength behind the
   bar and back to full by 128px, above every hero's first line of text, so the nav reads at AA at every width
   (4.82:1 and 4.90:1 at 1024) and the hero below looks as it did. */
.amd-fog {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 48px, #000 128px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 48px, #000 128px);
}
/* Home only: the blue "agent economy" in the h1 is the reference's own --brand, oklch(0.649 0.2031 251.813) =
   #008fff, in the reference's slot (reference/cap/home@*.boxes.json), and it is 3.2:1 on bare paper; over the
   densest patch of the blue fog it measured 2.95:1 at 390, 2.98:1 at 1024 and 2.99:1 at 1440, under the 3:1 that
   large text needs. The colour stays; the wash behind the headline band (200 to 360px) is drawn at .62 and
   returns to full strength by 560px: 3.06, 3.04 and 3.07:1. */
.amd-fog.amd-fog-brand {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 48px, rgba(0, 0, 0, .62) 200px, rgba(0, 0, 0, .62) 360px, #000 560px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 48px, rgba(0, 0, 0, .62) 200px, rgba(0, 0, 0, .62) 360px, #000 560px);
}
/* the trade page's fog is the ink colour: at the reference's .9 it greys the top-left enough to pull the muted
   kicker and the nav links under 4.5:1, so that one fog is drawn lighter (the colours themselves are unchanged) */
.amd-fog-ink { opacity: .55; }
/* /skill and /docs open with the muted kicker (the reference's blue hero pages open with a coloured one, which is
   darker): the blue wash under it is drawn lighter there so the 11px kicker keeps 4.5:1 */
.amd-fog-soft { opacity: .6; }

/* The nav lockup: the legal name sits under the wordmark, tight enough that the two lines together stay
   inside the mark's 36px, so the nav keeps the reference's row height. The colour is darker than --c-muted
   because the nav floats over the blue hero fog, where muted grey only reaches 4.38:1 against #d6e6fc. */
.amd-lockup { gap: 2px; min-width: 0; }
/* The legal name makes the lockup about 150px wide, which squeezed the pill until "Robinhood Chain"
   wrapped to two lines and the nav grew from the reference's 68px to 76px. The pill keeps its own width. */
.amd-nav-pill { flex-shrink: 0; white-space: nowrap; }
.amd-legalname {
  font-size: 8px;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: #42556b;
  white-space: nowrap;
  font-weight: 600;
}
/* No "Built on Robinhood Chain" pill in the nav at any width. The centre link group overflows its grid column, so
   whatever sits after the wordmark competes with "Wallets" for the same pixels, and how much room is left depends
   on the viewer's font rendering and zoom: the pill measured clear in headless Chrome at 1152 to 1920 and still
   painted over "Wallets" on the owner's Mac (reported 2026-09-17). The owner asked for the legal name under the
   wordmark, so that is what the lockup carries at every width from 380px up. The chain is named in the hero, in
   the "Settles on Robinhood Chain" strip and in the footer. */
.amd-nav-pill { display: none !important; }
@media (max-width: 379px) { .amd-legalname { display: none; } }