/* ==========================================================================
   swapscenter — following the shipping brand.

   This brand already exists. It runs on the platform build at
   swapscenter.com, and its design was refreshed there
   (monease/platform, feat/swapscenter-landing-redesign). Rather than invent a
   look for the rewrite, this file follows that one: near-black ground, a
   single cyan primary, Inter at medium weight with tight tracking, 16px
   planes and 12px controls, and a bracket mark before every section heading.

   Where the two differ this follows the platform's rendered result rather
   than its React source: the source composes semantic tokens (surface /
   on-surface / outline / primary) whose values come from the tenant theme
   generator, so the token block below was read off the running site.

   Everything is scoped under body.sc, which the brand's layout override sets
   on every non-admin page. The admin panel keeps the base daylight look: it
   is the shared operator tool, not the brand.

   Raw CSS served after the compiled app.css; unlayered, so it wins over the
   base's @layer rules. The .sc prefix is scoping, not weight.

   Inter is vendored under /static/fonts (SIL OFL, see fonts/README.txt) with
   latin and cyrillic subsets: the site serves en, ru and uk, and the brand
   face has to speak all three.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-cyrillic-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* Stack Sans Notch, the display face. Variable 400-700, latin and latin-ext
   only — it has no Cyrillic, so the unicode-ranges below let a Russian or
   Ukrainian heading fall through to Inter rather than render as tofu. The
   display tier is therefore a Latin-only part of the identity. */
@font-face {
  font-family: "Stack Sans Notch";
  src: url("/static/fonts/stack-sans-notch-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Stack Sans Notch";
  src: url("/static/fonts/stack-sans-notch-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens. Set on body.sc so they beat the base's :root values inside the
   page while leaving the unbranded admin alone.
   -------------------------------------------------------------------------- */

body.sc {
  color-scheme: dark;

  /* Read off the shipping build of this brand rather than invented: the
     platform renders swapscenter on a near-black ground with one cyan
     primary, and these are its resolved values.

       surface-container  #0c0d0e   the page
       surface            #1a1b1d   cards and panels
       on-surface         #efefef   headings and body
       on-surface-container #cfcfcf secondary text
       outline            #1f2937   every border
       primary            #32c5d2   the one accent
       on-primary         #121417   text on it

     Measured on the ground: ink 17.4:1, ink-2 13.1:1, ink-3 5.3:1, and the
     dark label on primary 10.4:1. */
  --color-paper: #0c0d0e;
  --color-surface: #1a1b1d;
  --color-surface-2: #232427;
  --color-ink: #efefef;
  --color-ink-2: #cfcfcf;
  --color-ink-3: #8b8d90;

  --color-rule: #1f2937;
  --color-rule-strong: #2b3543;
  /* Control boundaries, held to WCAG 1.4.11's 3:1 against the surfaces this
     brand actually uses rather than the lighter ones the token was first
     chosen against. Measured: 3.6:1 on the card, 3.2:1 on the inset plane,
     3.9:1 on a sunk field. The previous #55606e cleared the ground at 3.0:1
     and failed on every surface a control is actually drawn on. */
  --color-control: #6b7280;
  --color-control-hover: #868e9c;

  /* Fields sit below the plane holding them. Neutral, like the rest of the
     ramp: these were oklch(0.14 0.018 255), chroma at hue 255, left over from
     a slate-indigo direction that was never built — navy islands in a grey
     card. */
  --color-input: #101112;
  --color-input-sunk: #0e0f10;

  --color-signal: #32c5d2;
  --color-signal-ink: #121417;
  --color-signal-wash: rgb(50 197 210 / 0.12);

  /* Status keeps the semantic four; ok moves off the brand's own cyan so a
     completed exchange and the accent are never the same colour. */
  --color-ok: #4ade80;
  --color-ok-wash: rgb(74 222 128 / 0.13);
  --color-warn: #fbbf24;
  --color-warn-wash: rgb(251 191 36 / 0.13);
  --color-bad: #f87171;
  --color-bad-wash: rgb(248 113 113 / 0.14);
  --color-busy: #32c5d2;
  --color-busy-wash: rgb(50 197 210 / 0.13);

  /* The base's graph paper does not exist here; the ground is plain. */
  --grid-line: transparent;

  /* 16px on anything that holds things, 12px on anything you press —
     rounded-2xl and the primary button, as the reference sets them. */
  --radius-plane: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
  /* The smallest shape on the site, for things too small to take the control
     radius without turning into circles — the consent checkbox. */
  --radius-mark: 4px;
  /* The room a section heading leaves above its own text for the bracket. */
  --mark-lead: 22px;
  /* One band to the next. It has to clearly outrank the 40px a band puts
     between its own header and its content, or a reader cannot tell "new
     section" from "next thing in this section" — at 72px against 40px the
     ratio was 1.8x and the short bands at the foot of the landing read as one
     undifferentiated run. Fluid, because 112px of air on a phone is a hole. */
  --band-gap: clamp(64px, 7.5vw, 112px);
  /* The page-level plane: the affiliates hero and the how-it-works panel.
     Measured off the shipping build, which sets 64px and 48px respectively. */
  --radius-stage: 48px;
  /* A QR code is only scannable on white, whatever the page is. */
  --color-qr-plate: #fff;

  --font-ui: "Inter", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  /* The display face falls back to the UI face by name, so a Cyrillic heading
     resolves to Inter through the same stack rather than through a fallback
     that has to be restated at every call site. */
  --font-display: "Stack Sans Notch", "Inter", "Helvetica Neue", "Segoe UI",
    Roboto, sans-serif;

  --veil-edge: var(--color-rule);
  --veil-hairline: rgb(255 255 255 / 0.06);
  --shade-plane: rgb(0 0 0 / 0.4);
  --shade-popup: rgb(0 0 0 / 0.5);
}

/* The scheme belongs on the root, not only on the body: the viewport canvas
   beyond the page, the overscroll area and the scrollbars all read it from
   the root element, so a machine in light OS mode framed a near-black page
   in light furniture. */
html:has(body.sc) { color-scheme: dark; }

/* The ground is flat near-black. The light in the hero comes from the wave
   field drawn behind it, not from a wash under everything. */
body.sc {
  background-color: var(--color-paper);
  background-image: none;
  font-family: var(--font-ui);
}

/* --------------------------------------------------------------------------
   Type: one grotesk voice; mono only where digits align
   -------------------------------------------------------------------------- */

.sc h1,
.sc h2,
.sc h3,
.sc .section-title,
.sc .brand,
.sc .label,
.sc .xfield-label,
.sc .stat-label,
.sc .flow-meta,
.sc .flow-actor,
.sc .flow-time,
.sc .statement,
.sc .tally dt,
.sc .btn,
.sc button:not([class]),
.sc .nav a,
.sc .footer-group h2,
.sc .badge,
.sc .notice,
.sc .input,
.sc select,
.sc .hint,
.sc .muted,
.sc .lede {
  font-family: var(--font-ui);
}

/* The base's micro-label — 10.9px, uppercase, 0.13em tracking, monospace —
   is the instrument's voice, not this brand's. Converting the family alone
   left the case and the tracking behind, so it survived on every page the
   overlay does not template: the how-it-works flow, the form labels, the
   figure captions, the footer headings. Sentence case at a readable size,
   the same move the navigation already made.

   This is the complete customer-surface label family, taken from every base
   rule that sets `text-transform: uppercase` outside the admin. Listing them
   one at a time as each page was noticed is how the site ended up carrying
   both voices at once: a form in sentence case beside a spec sheet in tracked
   caps. The admin's own labels are deliberately absent — it keeps the base
   instrument. */
.sc .label,
.sc .xfield-label,
.sc .stat-label,
.sc .flow-meta,
.sc .footer-group h2,
.sc .facts-grid dt,
.sc .fact dt,
.sc .proof dt,
.sc .tally-row dt,
.sc .reading-label,
.sc .order-head-label,
.sc .deal-meta,
.sc .conf-label,
.sc .countdown-label,
.sc .qr-plate figcaption {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-xs);
}
/* The display tier. Stack Sans Notch sets close to Inter's width, so the
   clamps sit near the scale the grotesk used, with the tracking opened back to
   zero — the face carries its own rhythm and the -0.025em was closing it up.
   Display only: the text tier stays Inter, which is also what keeps ru and uk
   readable, since this face has no Cyrillic. */
.sc .sc-hero-copy h1,
.sc main > h1:has(+ .lede),
.sc .sc-hero-plate h1,
.sc .sc-display,
.sc .statement,
.sc .section-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

/* Medium weight, tight tracking, tight leading. The reference's headings are
   large and light rather than heavy, which is most of why it reads modern. */
.sc h1 {
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.sc h2,
.sc h3,
.sc .section-title {
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.375;
}

/* Figures and codes keep the mono stack: a column of amounts is only
   comparable when the digits align, and that rule outranks the brand voice. */
.sc .num,
.sc .code,
.sc .pair,
.sc .xfield-amount,
.sc .stat-value,
.sc .deal-amount,
.sc .address,
.sc .tx,
.sc .countdown-clock {
  font-family: var(--font-mono);
}

/* The rate line is a sentence with figures in it, not a figure. Setting the
   whole line in mono put "Enter an amount to see a rate" and "our fee is
   already in this rate" in the machine voice. The rate itself keeps mono;
   the min and max are inline in phrases rather than stacked in a column, so
   tabular figures give them even widths without the machine voice. */
.sc .xrate {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.sc .xrate b { font-family: var(--font-mono); }

/* A heading is not a divider. The base rules every h2 and drops it to the
   secondary ink, which inside a brand card left the heading dimmer and
   barely larger than the paragraph under it. */
.sc h2:not(.section-title) {
  border: 0;
  padding-block-end: 0;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

/* The header floats over the ground on a blur, the one specific use of
   glass on the site: a sticky bar over scrolling content. */
.sc .site-header {
  background: rgb(12 13 14 / 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--veil-hairline);
}
.sc .site-header::after { display: none; }

/* The phone menu must be opaque here, and the header must not blur.
   The base sheet obscures the page with its own backdrop-filter. An element
   carrying a backdrop-filter becomes a backdrop root for its descendants, so
   the moment the header above took one, the sheet's blur had nothing left to
   sample and silently became a no-op — leaving 85% translucent paper, through
   which the hero headline read clearly and "Sign in" printed across "receive
   another". Opaque paper is the fix; the header keeps its glass only where no
   sheet is open under it. */
@media (max-width: 40rem) {
  .sc .site-header:has(.nav-toggle[aria-expanded="true"]) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-paper);
  }
  .sc .nav {
    background: var(--color-paper);
    border-block-end: 1px solid var(--color-rule);
  }
}

/* The ground is dark in both OS schemes, so the light-background logotype
   never applies. */
.sc .brand-logo .logo-light { display: none; }
.sc .brand-logo .logo-dark { display: inline; }

/* Sentence case, not the base instrument's tracked uppercase: the reference
   sets its navigation as plain words. The sign-out control is a button in a
   form, so the rule names both or that one row shouts in caps. */
.sc .nav :is(a, button) {
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink-2);
}
.sc .nav :is(a, button):hover { color: var(--color-ink); }
.sc .nav a[aria-current="page"] { color: var(--color-signal); }

/* The account CTA keeps a quiet outline so it reads as a door rather than a
   headline — the page's loud act belongs to the wizard's submit. Wide layout
   only: in the phone sheet it is one row among the rows. */
@media (min-width: 40.0625rem) {
  .sc .nav a[href="/signup"] {
    padding: 7px 17px;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    font-weight: 500;
  }
  .sc .nav a[href="/signup"]:hover {
    border-color: var(--color-control);
    color: var(--color-ink);
  }
}

/* The footer opens with the mark, then the three groups. The base lays the
   groups on a two-column grid, which with three of them orphans the third and
   leaves the bottom-right quadrant of the page empty. */
.sc .site-footer {
  background: transparent;
  border-top: 1px solid var(--color-rule);
}
.sc .sc-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px 64px;
  align-items: start;
  margin-block-end: 40px;
}
.sc .sc-foot-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sc .sc-foot-mark .brand { display: inline-flex; }
.sc .sc-foot-mark img { block-size: 26px; inline-size: auto; }
.sc .footer-presence {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-block-end: 0;
}
.sc .footer-social a {
  inline-size: 40px;
  block-size: 40px;
  border-color: var(--color-rule-strong);
  transition:
    border-color 0.15s var(--ease-out-quart),
    color 0.15s var(--ease-out-quart),
    translate 0.15s var(--ease-out-quart);
}
.sc .footer-social a:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
  translate: 0 -2px;
}
.sc .footer-social .icon { inline-size: 20px; block-size: 20px; }
.sc .footer-rated { gap: 12px 20px; }
.sc .footer-rated a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink);
  transition: opacity 0.15s var(--ease-out-quart);
}
.sc .footer-rated a:hover { opacity: 0.75; }
.sc .footer-rated img { display: block; inline-size: auto; }
.sc .footer-rated b { font-size: var(--text-base); font-weight: 700; }
.sc .footer-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-block-end: 0;
}
.sc .footer-group h2 { margin-block-end: 10px; color: var(--color-ink-3); }
.sc .footer-group a { color: var(--color-ink-2); }
.sc .footer-group a:hover { color: var(--color-ink); }
.sc .footer-end { border-block-start: 1px solid var(--color-rule); }

@media (max-width: 48rem) {
  .sc .sc-foot { grid-template-columns: 1fr; gap: 28px; }
  .sc .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}

/* --------------------------------------------------------------------------
   Planes: elevated cards
   -------------------------------------------------------------------------- */

.sc .panel {
  background: var(--color-surface);
  /* 0.07 measured 1.27:1 against the ground, so the card was delineated by
     its drop shadow alone — which is nothing at all on a phone outdoors. */
  border: 1px solid var(--veil-edge);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.06) inset,
    0 12px 32px var(--shade-plane);
}
.sc .panel::before,
.sc .panel::after { content: none; }

.sc .toolbar,
.sc .address {
  background: var(--color-surface);
  border-color: var(--veil-edge);
}

/* .stats is not a plane, it is a grid whose 1px gaps show the background
   through as dividers. Painting it --color-surface, the same value as its own
   cells, erased them and left four figures floating in one undivided box —
   while .facts-grid, the identical base mechanism the overlay never named,
   went on rendering correctly. Only the outer edge is the brand's to set. */
.sc .stats { border-color: var(--veil-edge); }

/* --------------------------------------------------------------------------
   The centered swap card
   -------------------------------------------------------------------------- */

/* The card's one action runs the card's width, as the canon has it. */
.sc #place-order > .btn {
  inline-size: 100%;
  justify-content: center;
}

/* Channel planes inside the card: one inset step, softly rounded. */
/* The two money planes are the subject of the card, and they were held by a
   transparent border at 1.10:1 against it — no perceptible container on the
   one thing the page exists to show. */
.sc .xfield {
  background: var(--color-surface-2);
  /* --color-rule-strong is the decorative hairline and measured 1.39:1 here,
     so the two planes holding the money had no perceptible boundary at all.
     A control's edge is a 1.4.11 boundary: --color-control clears 3:1. */
  border: 1px solid var(--color-control);
  border-radius: var(--radius-control);
}
.sc .xfield:focus-within {
  border-color: var(--color-signal);
  box-shadow: 0 0 0 3px var(--color-signal-wash);
}
.sc .xfield-amount { font-size: var(--text-xl); font-weight: 500; }

/* --color-rule-strong is the decorative hairline the Boundary-Contrast Rule
   says may divide and may never bound a control. The one control sitting
   between the two planes that hold the money was drawn with it. */
.sc .xswap {
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-control);
  box-shadow: 0 4px 12px var(--shade-plane);
}
.sc .xswap:hover { border-color: var(--color-signal); color: var(--color-signal); }

.sc .picker-trigger,
.sc .picker-popup {
  background: var(--color-surface);
  border-color: var(--color-control);
  border-radius: var(--radius-control);
}
.sc .picker-trigger:hover { border-color: var(--color-control-hover); }
.sc .picker[data-open="true"] .picker-trigger { border-color: var(--color-signal); }

/* The popup is a card, so it takes the card idiom's elevation rather than
   the base's flat paper halo, and its internals keep to its own radius. */
.sc .picker-popup {
  border-radius: var(--radius-control);
  box-shadow: 0 12px 32px var(--shade-popup);
}
.sc .picker-filter {
  background: var(--color-surface);
  border-start-start-radius: 11px;
  border-start-end-radius: 11px;
}
.sc .picker-list {
  border-end-start-radius: 11px;
  border-end-end-radius: 11px;
}
/* Selection is the wash and the weight; the base's 2px inset side stripe
   comes off. */
.sc .picker-option[aria-selected="true"] {
  box-shadow: none;
  font-weight: 600;
}
/* A drawn chevron in place of the base's glyph. */
.sc .picker-chevron::after {
  content: "";
  display: block;
  inline-size: 9px;
  block-size: 6px;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 18%, 14% 0, 50% 58%, 86% 0, 100% 18%);
}
.sc .xrate { color: var(--color-ink-2); }
.sc .xrate b { color: var(--color-ink); font-weight: 600; }


/* --------------------------------------------------------------------------
   The rate line
   -------------------------------------------------------------------------- */

/* The figure this audience came for was the smallest text in the card —
   smaller than the marketing sub beside it — on a product whose first
   principle is that digits are the subject. It reads at body scale now, with
   the rate itself at the weight of a value rather than of a caption. */
.sc .xrate {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: 1.5;
}
.sc .xrate b {
  color: var(--color-ink);
  font-weight: 600;
}
/* The limits are the qualification, not the measurement. The base draws the
   info control and its note from --color-ink-3, --color-signal and the signal
   wash, all of which this brand already redefines, so they follow on their
   own. */
.sc .xlimits { color: var(--color-ink-3); }

/* A refusal takes the notice vocabulary: colour, a drawn shape and a word,
   never hue alone. It was arriving in the same grey mono as a successful
   quote, which is the voice of good news. */
.sc .xrate-fault {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  margin-block-end: 16px;
  font-family: var(--font-ui);
  color: var(--color-bad);
  background: var(--color-bad-wash);
  border: 1px solid var(--color-bad);
  border-radius: var(--radius-control);
}
.sc .xrate-fault .icon { flex: none; }

/* The figure offered as something to adopt. It is a control, so it reads as
   one — and it carries the bad hue rather than the brand's, because it
   belongs to the refusal it resolves. */
.sc .xrate-fix {
  font: inherit;
  font-weight: 600;
  color: var(--color-bad);
  background: transparent;
  border: 1px solid var(--color-bad);
  border-radius: var(--radius-control);
  padding: 3px 12px;
  min-block-size: 0;
  cursor: pointer;
}
.sc .xrate-fix:hover {
  background: var(--color-bad);
  color: var(--color-signal-ink);
}
.sc .xrate-fix:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-signal);
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

/* The primary action is the one place the identity's gradient lives. Both
   gradient stops carry the dark label at 6:1 or better. */
.sc .btn,
.sc button:not([class]):not(.nav *) {
  background: var(--color-signal);
  border: none;
  color: var(--color-signal-ink);
  font-weight: 600;
  /* Sentence case at body scale: the base's tracked uppercase micro-label
     is the instrument's voice, not this brand's. */
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-base);
  box-shadow: none;
}
.sc .btn:hover,
.sc button:not([class]):not(.nav *):hover {
  filter: brightness(1.1);
  box-shadow: none;
}
.sc .btn:active { transform: translateY(1px); filter: brightness(0.97); }
.sc .btn:disabled,
.sc .btn[aria-disabled="true"] {
  background: var(--color-surface-2);
  color: var(--color-ink-3);
  box-shadow: none;
  filter: none;
}

.sc .btn-secondary {
  background: var(--color-surface-2);
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  box-shadow: none;
}
.sc .btn-secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-signal);
  color: var(--color-signal);
  filter: none;
}

/* The keyboard ring, restored explicitly.
   The base draws focus as two bands — ground, then signal — from @layer base.
   This file is unlayered, so every box-shadow above outranks that rule and
   erased the ring on exactly the controls the brand restyled: the primary
   action, the secondary, and the reverse knob. Links and the picker trigger
   kept it, which is what made the loss easy to miss by tabbing. The rings are
   stated here beside the shadows that displaced them, composed with the glow
   where there is one, so the two cannot be separated again. */
.sc .btn:focus-visible,
.sc button:not([class]):not(.nav *):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-paper),
    0 0 0 4px var(--color-signal);
}
.sc .btn-secondary:focus-visible,
.sc .xswap:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-paper),
    0 0 0 4px var(--color-signal);
}

/* Control borders take --color-control, the token the base documents as
   "≥3:1, WCAG 1.4.11". They were on --color-rule-strong, which is the
   decorative hairline at 1.83:1 — and hover then restored the accessible
   value, so a control was more visible on hover than at rest. */
.sc .input,
.sc input:not([class]):not([type="checkbox"]):not([type="hidden"]),
.sc select:not([class]),
.sc textarea:not([class]) {
  background: var(--color-input);
  border-color: var(--color-control);
  color: var(--color-ink);
}
.sc .input:hover,
.sc input:not([class]):hover { border-color: var(--color-control-hover); }
.sc .input:focus,
.sc input:not([class]):focus,
.sc select:not([class]):focus,
.sc textarea:not([class]):focus {
  border-color: var(--color-signal);
  box-shadow: 0 0 0 3px var(--color-signal-wash);
}
.sc .input::placeholder { color: var(--color-ink-3); }

/* Declared after the :focus wash above, which it must outrank: a pointer
   focus gets the quiet halo, a keyboard focus gets the ring that survives
   any surface. Same rule, stated in the order the cascade reads. */
.sc .input:focus-visible,
.sc input:not([class]):focus-visible,
.sc select:not([class]):focus-visible,
.sc textarea:not([class]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-paper),
    0 0 0 4px var(--color-signal);
}

/* A checkbox, not a radio: --radius-control is 12px, which on an 18px box is
   a 65% radius and renders as a circle — so the two consent boxes read as a
   mutually exclusive pair when both are required. */
.sc .check input {
  background: var(--color-input);
  border-color: var(--color-control);
  border-radius: var(--radius-mark);
}
.sc .check input:checked {
  background: var(--color-signal);
  border-color: var(--color-signal);
}
.sc .check input::before { background: var(--color-signal-ink); }

/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */

.sc .badge {
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
.sc .notice { border-radius: var(--radius-control); }

/* --------------------------------------------------------------------------
   Data surfaces
   -------------------------------------------------------------------------- */

.sc .chips { margin-block-start: 40px; }
.sc .chips li {
  background: var(--color-surface);
  border: 1px solid var(--veil-hairline);
  border-radius: var(--radius-pill);
}

.sc .icon-plate {
  background: var(--color-signal-wash);
  color: var(--color-signal);
  border-radius: var(--radius-control);
}

.sc .table tbody tr:hover td { background: var(--color-signal-wash); }

/* The teaser reads as one line: plate, sentence, control. Only where the
   panel really is one sentence — where it carries a heading too, the base's
   grid is right, and flexing it turned the h2 into a squeezed left-hand
   label with its underline running past it. */
.sc .panel-lead:not(:has(h2)) { display: flex; align-items: center; gap: 16px; }
.sc .panel-lead:not(:has(h2)) p { flex: 1; margin: 0; }

/* --------------------------------------------------------------------------
   The journey's four moments

   Values arrive; live things stay visibly live. One motion vocabulary and one
   liveness vocabulary, spent only where the product is genuinely doing
   something — a statement does not wink at you, but it does tick. Everything
   here degrades to its end state under prefers-reduced-motion, which the base
   neutralises universally.
   -------------------------------------------------------------------------- */

/* 1 — THE QUOTE LANDS.
   A real measurement just happened and the figure said nothing about it. The
   receiving amount now resolves rather than appears: it rises a hair and
   settles, on the element htmx marks as genuinely new, so typing into the
   other side never replays it. The one place the interface raises its voice. */
.sc .xfield-amount[data-arrived] {
  animation: sc-resolve 0.28s var(--ease-out-quart);
}
@keyframes sc-resolve {
  from { opacity: 0.55; transform: translateY(2px); letter-spacing: 0.01em; }
  to { opacity: 1; transform: none; letter-spacing: normal; }
}
/* The rate beneath it settles a beat later, so the two read as one arrival
   rather than two events. */
.sc #quote-state[data-arrived] .xrate b {
  animation: sc-settle 0.34s var(--ease-out-quart) 0.04s backwards;
}
@keyframes sc-settle {
  from { opacity: 0; transform: translateY(1px); }
  to { opacity: 1; transform: none; }
}

/* 2 — THE INSTRUCTION.
   The highest-stakes surface in the product: the amount, the address, the
   network and the code, on a plane that is unmistakably the subject rather
   than a panel among equals. Lifted a step, edged in the signal, and given
   the room the rest of the page does not get. */
.sc .deposit {
  background: var(--color-surface-2);
  border-color: var(--color-signal);
  box-shadow:
    0 0 0 1px var(--color-signal-wash),
    0 16px 40px var(--shade-plane);
}
.sc .deposit .section-title {
  color: var(--color-signal);
  border: 0;
  padding-block-end: 0;
}
.sc .deposit .deal-amount { font-size: var(--text-2xl); }
/* The address is the thing being copied, so it reads as the field it is. */
.sc .deposit .copy-row .input {
  font-family: var(--font-mono);
  background: var(--color-input-sunk);
}

/* 3 — THE WAIT.
   The page is alive and was saying so in a grey sentence. The step that is
   happening now carries the live pulse the badge vocabulary already uses, so
   "live" means one thing across the site — and the written label beside it is
   still what carries the meaning. */
.sc .rail-step[data-state="current"] .rail-mark {
  animation: sc-alive 2.4s ease-in-out infinite;
}
@keyframes sc-alive {
  0%, 100% { box-shadow: 0 0 0 4px var(--color-signal-wash); }
  50% { box-shadow: 0 0 0 7px transparent; }
}
.sc .conf-count { color: var(--color-signal); }
.sc .conf-bar::-webkit-progress-value { background: var(--color-signal); }
.sc .conf-bar::-moz-progress-bar { background: var(--color-signal); }

/* 4 — THE SETTLE.
   The ending, and the only place on the customer surface where a figure is
   allowed to be the largest thing on screen. */
.sc .settled-figure b {
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--color-ok);
}

/* --------------------------------------------------------------------------
   The order page
   -------------------------------------------------------------------------- */

.sc .deal-amount { font-weight: 600; }

/* Completed steps are green because done is a state, not a brand moment:
   the accent stays on the primary action and on what is happening now. */
.sc .rail-step[data-state="done"] .rail-mark {
  background: var(--color-ok);
  border-color: var(--color-ok);
  color: var(--color-signal-ink);
}
.sc .rail-step[data-state="current"] .rail-mark {
  border-color: var(--color-signal);
  color: var(--color-signal);
  box-shadow: 0 0 0 4px var(--color-signal-wash);
}

.sc .countdown-clock { color: var(--color-warn); }
.sc .countdown-bar { background: var(--color-rule); }
.sc .countdown-bar > span { background: var(--color-warn); }

/* The QR plate stays white in every scheme: a scanner expects the polarity
   the specification assumes. */
.sc .qr-plate { background: var(--color-qr-plate); }

/* --------------------------------------------------------------------------
   The signatures carried over from the shipping brand
   -------------------------------------------------------------------------- */

/* The ribbon field. It sits behind the hero and is painted by wave.js, which
   inserts the canvas as the hero's first child.

   It is the page's background, so it is not the content column's width. The
   canvas breaks the 70rem wrap with 100vw and centres itself on the viewport;
   the hero keeps `isolation` so the field cannot rise above the copy, and
   drops `overflow: hidden`, which was clipping the bleed straight back to the
   wrap. It also reaches above and below the hero's own box, because a field
   that stops exactly where the copy stops reads as a picture rather than as
   light behind the page.

   The clip that stops 100vw becoming a horizontal scrollbar sits on the root,
   and it is `clip`, not `hidden`. `hidden` on the body would make it a scroll
   container and the sticky header would stop sticking. And the body alone is
   not enough: with the root at `visible` the body's overflow propagates to the
   viewport and the body itself computes back to `visible`, so the 8px of
   scrollbar that 100vw overshoots stayed scrollable. Setting the root stops
   the propagation and the clip finally applies. */
html:has(body.sc),
body.sc { overflow-x: clip; }

/* An anchor jump must land below the sticky header, with a breath of air —
   without this the target's top rides up underneath the glass. */
html:has(body.sc) { scroll-padding-block-start: 94px; }
@media (max-width: 48rem) {
  html:has(body.sc) { scroll-padding-block-start: 64px; }
}
.sc .sc-hero {
  position: relative;
  isolation: isolate;
}
.sc .sc-hero > * { position: relative; z-index: 1; }
.sc .sc-wave {
  position: absolute;
  /* Explicit height, not inset-block stretch: a canvas is a replaced element,
     so with a set inline-size a `block-size: auto` resolves from the bitmap's
     aspect ratio and the bottom inset is ignored — on a phone that collapsed
     the field to a 2:1 slab cut off mid-hero. */
  inset-block-start: -96px;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 0;
  display: block;
  inline-size: 100vw;
  max-inline-size: none;
  block-size: calc(100% + 256px);
  pointer-events: none;
}

/* The bracket that precedes every section heading — a 12px corner drawn from
   two borders, the reference's own mark. Hidden on narrow screens there, and
   here too: at that width it sits alone above the heading and reads as a
   stray rule. */
.sc .section-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* The base sets these as a small tracked uppercase label with a coloured
     tick. Here a section heading is a heading: sentence case, at size. */
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  text-transform: none;
  line-height: 1.25;
  color: var(--color-ink);
  border: 0;
  padding: 0;
  margin: 0;
  /* Room for the mark to sit above the text rather than beside it. The lead is
     a token because it is not only the heading's: anything that has to line up
     with the heading's first line rather than with the mark above it — the
     section header's action pill — reads the same value, and the two cannot
     then drift apart when the mark is hidden or resized. */
  position: relative;
  padding-block-start: var(--mark-lead);
}
/* The mark opens the section from the page's own left edge.
   It used to be a flex item, which pushed the heading text 24px right of
   everything the heading introduced — the spec sheet, the steps, the chips
   and the hero above all start at the measure, and only the headings did
   not. Taking it out of flow puts the text back on that line. Hanging it
   into the margin instead would have worked only above 70rem, where the
   wrap stops being flush to the viewport. */
.sc .section-title::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 12px;
  block-size: 12px;
  /* Two borders, not a filled tick — the reference's bracket corner. */
  background: none;
  border-inline-start: 1px solid rgb(207 207 207 / 0.4);
  border-block-start: 1px solid rgb(207 207 207 / 0.4);
}
/* One mark per label: a title carrying its own icon does not also take the
   bracket, or the row starts to look like a toolbar. The base states this
   for its tick, but the brand's unlayered rule outranked it — so the deposit
   heading, the highest-stakes heading in the product, drew both. */
.sc .section-title:has(.icon)::before { content: none; }
.sc .section-title:has(.icon) { --mark-lead: 0px; }
@media (max-width: 40rem) {
  .sc .section-title::before { display: none; }
  body.sc { --mark-lead: 0px; }
}
/* The second line of a section heading: the same size, the muted colour. The
   statement and its elaboration are one typographic object. */
.sc .section-sub {
  margin: 8px 0 0;
  max-inline-size: 52ch;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-ink-2);
}
/* The elaboration needs no compensating indent now that the heading above it
   sits on the measure; it was only ever matching the text the mark displaced. */

/* The badge above the hero heading. Its dot used to ping, which is the
   vocabulary this site reserves for something genuinely running — the current
   step of a live order. This is a fixed catalogue string, so the one pulsing
   element above the fold was measuring nothing. The dot stays as a mark; the
   pulse goes back to the things that earn it. */
.sc .sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: rgb(26 27 29 / 0.7);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-2);
}
.sc .sc-badge::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-signal);
}

/* Inline links that are their own target rather than words inside a sentence
   — the aggregator listings, the consent documents beside the checkboxes, the
   FAQ teaser — were 15 to 21px tall. WCAG 2.2 AA (2.5.8) wants 24. Padding
   them as inline-blocks clears it without moving anything: the extra height
   is added symmetrically inside a line box that already has leading. */
.sc .sc-listed a,
.sc #wizard .hint a,
.sc .sc-cta-aside,
.sc .sc-tile a.channel-value {
  display: inline-block;
  padding-block: 5px;
}

/* --------------------------------------------------------------------------
   The landing
   -------------------------------------------------------------------------- */

/* Split hero: the offer on the left, the instrument of it on the right.
   Aligned to the top, not centred — centring a short copy column against a
   tall card put the headline 44% down an 800px screen with a void above it
   and the primary action below the fold. */
.sc .sc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 29rem);
  gap: 32px 56px;
  align-items: start;
  padding-block: 8px 32px;
}

/* The card carries the whole first viewport, and on a 800px laptop screen it
   was finishing three pixels past the fold — which puts the one control the
   page exists to get pressed out of sight. Its own rhythm tightens by a step
   inside the hero, and nowhere else. */
.sc .sc-hero-card .field { margin-bottom: 12px; }
.sc .sc-hero-card hr { margin-block: 16px; }
.sc .sc-hero-card .check { margin-bottom: 8px; }

/* The card comes first in the source and is ordered back into the second
   column here. It used to come last, which read correctly on a wide screen
   and put the calculator behind seven aggregator links in the tab order on
   every narrow one — visual order and focus order disagreeing on the one
   control the page exists to get pressed. */
.sc .sc-hero-copy { order: 1; }
.sc .sc-hero-card { order: 2; }

.sc .sc-hero-copy h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
  margin-block: 8px 16px;
}
.sc .sc-hero-sub {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-ink-2);
  max-inline-size: 34ch;
  margin-block: 20px 0;
}

/* Three short facts, stated inline; the dot before each is the signal. */
.sc .sc-hero-facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.sc .sc-hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.sc .sc-hero-facts li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-signal);
}

/* The compressed board. Hairline-separated rows on the ground itself rather
   than another panel: the hero already holds one card and a second surface
   beside it would read as a competing offer. */
.sc .sc-ticker {
  margin: 0 0 20px;
  border-block-start: 1px solid var(--color-rule);
  max-inline-size: 34rem;
}
.sc .sc-ticker > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  border-block-end: 1px solid var(--color-rule);
}
.sc .sc-ticker dt {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
}
.sc .sc-ticker dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.sc .sc-listed { font-size: var(--text-xs); color: var(--color-ink-3); }
.sc .sc-listed a { color: var(--color-ink-2); }
.sc .sc-listed a:hover { color: var(--color-signal); }

/* Inside the hero the card fills its own column. */
.sc .sc-hero #wizard { max-inline-size: none; margin: 0; }

/* Stacked: the card follows the headline and sub directly; the facts, the
   board and the listings wait below it. display:contents lifts the copy
   column's children into the hero grid so they can be ordered.

   This block sits after the declarations it overrides, not before them. It
   used to precede them at equal specificity, so the later unconditional
   margins won inside it and two of these rules did nothing: the sub kept its
   24px and the facts their 0, the stacked gaps compounded to 48px and 56px,
   and the card started 343px down an 844px screen — the opposite of what the
   block asks for. */
@media (max-width: 64rem) {
  /* Stacked, every child is a grid row, so the 32px column-and-row gap that
     separates two columns on a wide screen was also separating the badge from
     the headline and the headline from the card. The per-element margins below
     do the spacing here; the grid just stacks. */
  .sc .sc-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block-start: 8px;
  }
  .sc .sc-hero-copy { display: contents; }
  /* display:contents lifts every child into the hero grid, so each one needs
     its own order — an element without one falls to 0 and lands above the
     headline. The badge holds 0 deliberately; everything else is stated. */
  .sc .sc-badge { order: 0; }
  .sc .sc-hero-copy h1 { order: 1; }
  .sc .sc-hero-sub { order: 2; margin-block-end: 4px; }
  .sc .sc-hero-card { order: 3; }
  .sc .sc-strip { order: 4; margin-block: 12px 0; }
  .sc .sc-terms { order: 5; }
  .sc .sc-hero-facts { order: 6; margin-block: 8px 0; }
  .sc .sc-ticker { order: 7; }
  .sc .sc-listed { order: 8; }
}

/* Band rhythm. A flat gap between every section fused five arguments into one
   continuous run; a band gets more air above it than below its own heading,
   so a reader can tell where one thing ends and the next begins. */
.sc .sc-band { margin-block-start: var(--band-gap); }

/* The specification sheet: one plane, four readings, shared hairlines. This
   is what replaced four metric tiles with icon plates — the arrangement
   PRODUCT.md names as an anti-reference and the detector calls the
   hero-metric template. Term, figure and qualification sit on one baseline
   grid so the four read as one instrument rather than four objects. */
.sc .sc-spec {
  margin: 40px 0 0;
  border-block-start: 1px solid var(--color-rule-strong);
}
.sc .sc-spec-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(9rem, auto) minmax(0, 2fr);
  gap: 4px 32px;
  align-items: baseline;
  padding-block: 20px;
  border-block-end: 1px solid var(--color-rule);
}
/* The same sentence-case term the rest of the site now sets its labels in.
   This was the last tracked uppercase label on the page, which left the spec
   sheet speaking the base instrument's voice beside a form that had stopped. */
.sc .sc-spec dt {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.sc .sc-spec-value {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-ink);
}
.sc .sc-spec-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-inline-size: 46ch;
}
@media (max-width: 48rem) {
  .sc .sc-spec-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 16px;
  }
  .sc .sc-spec-value { font-size: var(--text-lg); }
}

/* The close: a rule and a statement, not another card. */
.sc .sc-cta {
  margin-block-start: var(--band-gap);
  padding-block: 40px 8px;
  border-block-start: 1px solid var(--color-rule-strong);
}
.sc .sc-cta h2 {
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  margin-block-end: 20px;
}
.sc .sc-cta h2 + .sc-cta-actions { margin-block-start: 0; }
.sc .sc-cta p {
  color: var(--color-ink-2);
  max-inline-size: 56ch;
  margin-block-end: 24px;
}
.sc .sc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.sc .sc-cta .btn { inline-size: auto; padding-inline: 32px; }
.sc .sc-cta-aside {
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-control);
  text-underline-offset: 3px;
}
.sc .sc-cta-aside:hover { color: var(--color-signal); text-decoration-color: var(--color-signal); }

/* --- Public pages: the landing vocabulary --------------------------------- */

.sc main > h1:has(+ .lede) {
  text-align: center;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  margin-block-start: 24px;
}
/* Centred text past about three lines makes the eye re-find the left edge on
   every one of them. The measure is the cap that keeps it to three. */
.sc main > .lede {
  text-align: center;
  max-inline-size: 54ch;
  margin-inline: auto;
  color: var(--color-ink-2);
  font-size: var(--text-xl);
  line-height: 1.45;
  margin-block: 16px 48px;
}

/* --- The section header --------------------------------------------------- */

.sc .sc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.sc .sc-head-text { max-inline-size: 42rem; }

.sc .sc-head .sc-pill { margin-block-start: var(--mark-lead); }

/* --- The action pill ------------------------------------------------------ */

.sc .sc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s var(--ease-out-quart),
    border-color 0.15s var(--ease-out-quart);
}
.sc .sc-pill:hover { color: var(--color-paper); filter: brightness(0.9); }

.sc .sc-pill-quiet {
  background: transparent;
  border-color: var(--color-control);
  color: var(--color-ink);
}
.sc .sc-pill-quiet:hover {
  background: var(--color-surface);
  border-color: var(--color-signal);
  color: var(--color-signal);
  filter: none;
}
.sc .sc-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-paper),
    0 0 0 4px var(--color-signal);
}

/* --- Tiles ---------------------------------------------------------------- */

.sc .sc-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  transition: border-color 0.3s var(--ease-out-quart);
}
.sc .sc-tile:hover { border-color: rgb(50 197 210 / 0.4); }
.sc .sc-tile h2,
.sc .sc-tile h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.sc .sc-tile p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-2);
}
.sc .sc-tile .num,
.sc .sc-tile .channel-value {
  font-size: var(--text-base);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.sc .sc-tile a.channel-value { color: var(--color-signal); }

.sc .sc-tile .icon-plate {
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  background: var(--color-signal);
  border: 0;
  border-radius: var(--radius-plane);
  color: var(--color-signal-ink);
}
.sc .sc-col .icon-plate {
  inline-size: 36px;
  block-size: 36px;
  margin: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  color: var(--color-ink-2);
}

/* --- The monitor lattice -------------------------------------------------- */

.sc .sc-monitors {
  margin-block-start: 40px;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
}
/* Flex, not grid. A grid of fixed tracks leaves the tail of the last row as
   visible empty cells — with seven listings in four columns that is a hole in
   the lattice, which reads as a thing that failed to load rather than a list
   that ended. Flexed, the last row's cells simply stretch, and the count stays
   a catalogue decision rather than a number the CSS has to divide evenly. */
.sc .sc-monitors ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-inline-end: -1px;
  margin-block-end: -1px;
  padding: 0;
  list-style: none;
}
.sc .sc-monitors li { display: flex; flex: 1 1 9rem; }
.sc .sc-monitors a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  border-inline-end: 1px solid var(--color-rule);
  border-block-end: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: center;
}
.sc .sc-monitors a:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

/* --- The aside note ------------------------------------------------------- */

/* Two asides side by side. Stacked, each capped at its own reading measure
   under two full-width tiles, the page ran at three different widths down one
   edge and left a ragged void on the other. */
.sc .sc-asides {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  align-items: start;
  margin-block-start: 24px;
}
.sc .sc-asides .sc-note { margin-block-start: 0; max-inline-size: none; block-size: 100%; }

.sc .sc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 24px;
  padding: 14px 16px;
  max-inline-size: 68ch;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.sc .sc-note .icon { flex: none; margin-block-start: 3px; color: var(--color-ink-3); }
.sc .sc-note p { margin: 0; }
.sc .sc-note p + p { margin-block-start: 8px; }
.sc .sc-note b { color: var(--color-ink); font-weight: 500; }

.sc .sc-note-warn {
  border-color: var(--color-warn);
  background: var(--color-warn-wash);
  color: var(--color-ink-2);
}
.sc .sc-note-warn .icon { color: var(--color-warn); }

/* --- The flow timeline ---------------------------------------------------- */

.sc .flow { position: relative; margin-block-start: 40px; }
.sc .flow-mark {
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  color: var(--color-signal);
  font-weight: 600;
}
.sc .flow-step { border-color: var(--color-rule); }

/* --- The disclosure list -------------------------------------------------- */

.sc .faq {
  max-inline-size: none;
  margin: 40px 0 0;
  border-block-start: 1px solid var(--color-rule);
}
.sc .faq-item {
  margin: 0;
  padding-inline: 0;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--color-rule);
  border-radius: 0;
}

.sc .faq-item:last-child { border-block-end: 1px solid var(--color-rule); }
.sc .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.sc .faq-item summary:hover { color: var(--color-signal); }

.sc .faq-item summary::after {
  content: "";
  flex: none;
  inline-size: 11px;
  block-size: 7px;
  background: var(--color-signal);
  clip-path: polygon(50% 100%, 0 18%, 14% 0, 50% 58%, 86% 0, 100% 18%);
  transition: transform 0.3s var(--ease-out-quart);
}
.sc .faq-item[open] summary::after { content: ""; transform: rotate(180deg); }
.sc .faq-item p {
  margin: 0;
  padding-block-end: 20px;
  max-inline-size: 68ch;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* --- The about statement -------------------------------------------------- */

.sc .statement {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.35;
  max-inline-size: 30ch;
  margin: 48px auto;
  text-wrap: balance;
}

/* --- Legal documents ------------------------------------------------------ */

.sc .prose h2,
.sc .prose h3 { color: var(--color-ink); letter-spacing: -0.025em; }
.sc .prose a { color: var(--color-signal); }
.sc .legal-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  margin-block-end: 24px;
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 30rem) {
  .sc .flow-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

@media (max-width: 40rem) {
  
  .sc .sc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sc .sc-head .sc-pill { margin-block-start: 0; }

  
}

@media (min-width: 64rem) {
  .sc .section:has(.faq) { display: block; }
  
  .sc .section:has(.faq) .section-title {
    position: static;
    margin-block: 0;
  }
  .sc .section:has(.faq) .faq { margin-block-end: 0; }
}


/* --- The ported pages ----------------------------------------------------- */

.sc .sc-mark {
  display: flex;
  justify-content: center;
  margin-block: 8px 40px;
}
.sc .sc-mark img { block-size: 44px; inline-size: auto; }

.sc main > .sc-intro { max-inline-size: 58ch; }

.sc .sc-display {
  margin: 0 auto;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
  color: var(--color-ink);
}

.sc .sc-plates {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  margin: 0;
  padding: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
}
.sc .sc-plate-wide { grid-column: 1 / -1; }
.sc .sc-plate-mark {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  padding: 12px;
  background: var(--color-signal);
  border-radius: var(--radius-plane);
}
.sc .sc-plate-mark img { inline-size: 100%; block-size: 100%; }
.sc .sc-plate h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
  color: var(--color-ink);
}
.sc .sc-plate p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink-2);
}

.sc .sc-diagram-wrap { margin-block-start: 40px; }
.sc .sc-diagram {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sc .sc-boxes {
  display: grid;
  gap: 48px 40px;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.sc .sc-box-index {
  flex: none;
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-signal);
}
.sc .sc-box-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
}
.sc .sc-box h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
  font-weight: 700;
  color: var(--color-ink);
}
.sc .sc-box p,
.sc .sc-why p {
  position: relative;
  margin: 0;
  padding-inline-start: 16px;
  color: var(--color-ink-2);
}
.sc .sc-box p { font-size: var(--text-lg); line-height: 1.55; }
.sc .sc-box p::before,
.sc .sc-why p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.4em;
  inline-size: 3px;
  block-size: 20px;
  background: var(--color-signal);
}

.sc .sc-hero-plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 40px;
  margin-block-start: 24px;
  padding: 64px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-stage);
}
.sc .sc-hero-plate h1 {
  margin: 0 0 24px;
  max-inline-size: 18ch;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  text-align: start;
}
.sc .sc-hero-plate p {
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--text-base);
  color: var(--color-ink-3);
}
.sc .sc-hero-plate img {
  inline-size: 100%;
  max-inline-size: 22rem;
  block-size: auto;
}

.sc .sc-why { margin-block-start: var(--band-gap); }
.sc .sc-why h2 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
  color: var(--color-ink);
}
.sc .sc-why p { font-size: var(--text-lg); max-inline-size: 78ch; }

.sc .sc-rows {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: var(--band-gap) 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 40px;
}
.sc .sc-row h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
}
.sc .sc-row p {
  margin: 0;
  max-inline-size: 60ch;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}
.sc .sc-row img {
  inline-size: 100%;
  max-inline-size: 18rem;
  block-size: auto;
}

.sc .sc-stage {
  margin-block-start: 40px;
  padding: 56px clamp(28px, 5vw, 64px);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-stage);
}
/* The reference sets the points beside a video. Without one the panel would be
   half empty on one side, so the column centres in it instead. */
.sc .sc-stage-body { max-inline-size: 52rem; margin-inline: auto; }
.sc .sc-points {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding-inline-start: 1.7em;
  list-style: decimal;
}
.sc .sc-points li::marker {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-signal);
}
.sc .sc-points h2 {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}
.sc .sc-points p {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-2);
}
.sc .sc-stage .btn {
  margin-block-start: 40px;
  inline-size: auto;
  padding-inline: 28px;
}

.sc .sc-benefits {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
}
.sc .sc-benefit .icon {
  inline-size: 32px;
  block-size: 32px;
  color: var(--color-signal);
}
.sc .sc-benefit h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}
.sc .sc-benefit p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-2);
}

/* The index turns to read bottom-to-top beside its box, as the reference sets
   it. writing-mode rather than a rotate: a rotated inline box keeps its
   horizontal footprint and pushes the text it labels across the column. */
@media (min-width: 48rem) {
  .sc .sc-box-index {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

@media (max-width: 48rem) {
  .sc .sc-plates { grid-template-columns: 1fr; }
  .sc .sc-plate { padding: 28px; gap: 24px; }
  .sc .sc-plate-mark { inline-size: 56px; block-size: 56px; padding: 10px; }
  .sc .sc-hero-plate,
  .sc .sc-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sc .sc-hero-plate { padding: 28px; }
  .sc .sc-hero-plate img,
  .sc .sc-row img { max-inline-size: 14rem; margin-inline: auto; }
  .sc .sc-stage { padding: 24px; }
  .sc .sc-boxes { gap: 32px; margin-block-start: 32px; }
  /* The diagram is a wide drawing with labels in it: squeezed to a phone it
     is 60px tall and unreadable, so it keeps its size and scrolls instead. */
  .sc .sc-diagram-wrap { overflow-x: auto; margin-block-start: 32px; }
  .sc .sc-diagram { min-inline-size: 40rem; }
  .sc .sc-rows { gap: 40px; margin-block-start: 48px; }
}

/* --- Inside the swap card ------------------------------------------------- */

/* The network. Sending on the wrong chain destroys funds, and this was the
   smallest text on the page — 10.9px, uppercase, tracked — while the ticker
   beside it read larger and brighter. It is also the last tracked-uppercase
   micro-label under .sc, which the One-Label-Voice Rule bans by name and which
   survived here because the picker is the one component nothing templated. */
.sc .picker-network,
.sc #payout-network,
.sc .picker-option .picker-network {
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink-2);
}

/* The card holds one action, and the accent belongs to it. The consent
   sentence named three documents in full signal, which put four saturated
   cyan runs above the button and left the button competing with its own
   small print. The base's reason for colouring them stands — a consent whose
   documents cannot be seen is a consent form that has failed — so the words
   go to ink and the accent moves to the underline, which is what says "link"
   without shouting it. */
.sc .check a {
  color: var(--color-ink);
  text-decoration-color: var(--color-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sc .check a:hover { color: var(--color-signal); }

/* A hint explains the control above it; it is not itself worth reading first. */
.sc #wizard .hint { color: var(--color-ink-3); line-height: 1.55; }

/* Where the quote ends and the destination begins. The card ran as one
   undifferentiated column — two money planes, a rate, then four more controls
   with nothing saying which belonged to which. */
.sc #wizard .field:has(#payout_address) {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-rule);
}

/* The rate line carried 32px under it, which on the empty state left one short
   sentence marooned between the money planes and the first field. It belongs
   to the planes above it.

   The note that opens beneath it has to move with it. The base pulls the note
   up by `calc(--gap-block * -1 + 2)` — a negative margin keyed to the rate
   line's own bottom margin — so changing one alone drove the note's top border
   straight through the limits line. The pair is decoupled here: the rate line
   states its gap, the note starts at zero, and neither has to know the other's
   number. */
.sc #wizard .xrate { margin-block-end: 20px; }
.sc #wizard .xnote { margin-block: 0 20px; }

/* The limits are a second sentence on the rate line, not a continuation of the
   first: on a narrow card they wrap to their own row and were sitting hard
   against the figure above them. */
.sc #wizard .xlimits { display: inline-block; margin-block-start: 6px; }
/* Standing alone under a refusal, they are the remedy rather than a footnote. */
.sc #wizard .xlimits-alone {
  display: block;
  margin: -8px 0 20px;
  color: var(--color-ink-2);
}

/* The submit before there is anything to submit. Surface-2 on surface is half
   a step, so the one control the page exists to get pressed had no perceptible
   edge at all — it read as absent rather than as not-yet-available. It carries
   aria-disabled rather than disabled, so it is still in the tab order, and a
   focusable control with no boundary is the worst of both. */
.sc .btn[aria-disabled="true"] {
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink-2);
}

/* The rate line before there is a rate. It reads at body size once it carries
   a figure, because that figure is what the page is for — but the placeholder
   standing in for it should not hold the same weight as the answer. The fault
   state keeps its own voice. */
.sc .xrate:not(.xrate-fault):not(:has(b)) {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* --- The landing bands ---------------------------------------------------- */


.sc .sc-rates {
  margin-block-start: 8px;
  padding-block: 14px;
  border-block: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}
.sc .sc-rates-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.sc .sc-rates-label::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-signal);
}
.sc .sc-rates ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sc .sc-rates ul::-webkit-scrollbar { display: none; }
.sc .sc-rates a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 5px;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.sc .sc-rates a:hover { color: var(--color-ink); }
.sc .sc-rates-pair { color: var(--color-ink-2); }
.sc .sc-rates-pair i { font-style: normal; color: var(--color-ink-3); }
.sc .sc-rates b { color: var(--color-ink); font-weight: 500; }

.sc .sc-trust {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  margin-block-start: var(--band-gap);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
}
.sc .sc-trust-lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
  border-inline-end: 1px solid var(--color-rule);
}
.sc .sc-trust-lead p { margin: 0; font-size: var(--text-base); line-height: 1.55; }
.sc .sc-trust .sc-monitors {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.sc .sc-trust .sc-monitors,
.sc .sc-trust .sc-monitors ul { block-size: 100%; }
.sc .sc-trust .sc-monitors ul { grid-auto-rows: 1fr; }
.sc .sc-monitors img {
  max-block-size: 26px;
  inline-size: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.15s var(--ease-out-quart), filter 0.15s var(--ease-out-quart);
}
.sc .sc-monitors a:hover img { opacity: 1; filter: none; }

/* The four facts, in the hero's own column, and the paragraph they summarise.
   That paragraph used to sit open above the fold as the largest block of text
   on the page, saying exactly what these four chips say — the same facts
   twice, once as a wall. The chips carry it now; the wall is one line that
   opens for whoever wants the whole of it. */
.sc .sc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 28px 0 0;
  padding: 0;
  max-inline-size: 44ch;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.sc .sc-strip li { display: inline-flex; align-items: center; gap: 8px; }
.sc .sc-strip li::before {
  content: "";
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--color-signal);
}

.sc .sc-terms { margin-block-start: 22px; max-inline-size: 44ch; }
.sc .sc-terms summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.sc .sc-terms summary .icon { color: var(--color-signal); flex: none; }
.sc .sc-terms summary::-webkit-details-marker { display: none; }
.sc .sc-terms summary:hover { color: var(--color-ink); border-color: var(--color-control); }
.sc .sc-terms summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-signal);
}
.sc .sc-terms summary::after {
  content: "";
  inline-size: 9px;
  block-size: 6px;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 18%, 14% 0, 50% 58%, 86% 0, 100% 18%);
  transition: transform 0.3s var(--ease-out-quart);
}
.sc .sc-terms[open] summary::after { transform: rotate(180deg); }
.sc .sc-terms p {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-3);
}

.sc .sc-bento {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-bento > li { gap: 24px; justify-content: space-between; }
.sc .sc-bento-security { grid-column: 1 / -1; }
.sc .sc-tile-caption { display: flex; flex-direction: column; gap: 6px; }
.sc .sc-tile-caption h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.sc .sc-tile-caption p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-2);
}

.sc .sc-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  inline-size: 100%;
  padding: 16px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  font-size: var(--text-2xs);
  color: var(--color-ink-2);
}
.sc .sc-mock-head { display: flex; align-items: center; gap: 8px; }
.sc .sc-mock-title { font-weight: 500; color: var(--color-ink); }
.sc .sc-mock-clock { margin-inline-start: auto; color: var(--color-signal); }
.sc .sc-mock-lock { margin-inline-start: auto; color: var(--color-ink-3); }
.sc .sc-mock-net { color: var(--color-ink-3); }
.sc .sc-mock-plate {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 8px;
  background: var(--color-surface-2);
  color: var(--color-ink-2);
}
.sc .sc-mock-rows { display: flex; flex-direction: column; gap: 6px; }
.sc .sc-mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--color-surface-2);
  border-radius: 8px;
}
.sc .sc-mock-tick {
  inline-size: 12px;
  block-size: 12px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-control);
}
.sc .sc-mock-rail { display: flex; flex-direction: column; }
.sc .sc-mock-step {
  position: relative;
  padding: 0 0 14px 22px;
  color: var(--color-ink-3);
}
.sc .sc-mock-step::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-rule-strong);
}
.sc .sc-mock-step::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block: 14px 0;
  inline-size: 1px;
  background: var(--color-rule-strong);
}
.sc .sc-mock-step:last-child::after { content: none; }
.sc .sc-mock-step:last-child { padding-block-end: 0; }
.sc .sc-mock-step[data-state] { color: var(--color-ink); }
.sc .sc-mock-step[data-state="done"]::before {
  background: var(--color-signal);
  border-color: var(--color-signal);
}
.sc .sc-mock-step[data-state="done"]::after { background: var(--color-signal); }
.sc .sc-mock-step[data-state="now"]::before {
  border-color: var(--color-signal);
  background: var(--color-signal-wash);
}
.sc .sc-mock-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-signal);
}
.sc .sc-mock-said {
  max-inline-size: 85%;
  padding: 8px 11px;
  background: var(--color-surface-2);
  border-radius: 10px;
  border-end-start-radius: 3px;
}
.sc .sc-mock-said-us {
  margin-inline-start: auto;
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: 10px;
  border-end-end-radius: 3px;
}
.sc .sc-mock-nets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc .sc-mock-net-cell {
  padding: 9px 11px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}
.sc .sc-mock-net-cell[data-picked] {
  border-color: var(--color-signal);
  background: var(--color-signal-wash);
  color: var(--color-ink);
}

/* The one gradient on the site. It is a full-bleed programme card — not a
   control, and not the accent doing decorative duty on one.

   Its text is dark, not white. White at 0.7 alpha measured 1.67:1 on the light
   end of the gradient and the headline 2.09:1: the largest and brightest thing
   on the landing was also the least legible on it. Signal-ink measures 8.7:1 on
   the light end and 6.1:1 on the dark one, and the dark end lifted from #1d8e9a
   to #2ba3b0 to hold that margin without dimming the card. The eyebrow above
   the heading is gone rather than recoloured — a label whose only job is to
   announce the heading under it is a rung the heading does not need. */
.sc .sc-program {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  margin-block-start: 40px;
  padding: 44px 48px;
  border-radius: var(--radius-plane);
  background: linear-gradient(135deg, #32c5d2, #2ba3b0);
  color: var(--color-signal-ink);
}
/* The say block takes the slack. Capped, it left 400px of bare gradient
   between the sentence and the action — the void the bar chart used to fill
   badly. The measures live on the lines themselves, so the space lands inside
   the text block as ordinary ragged-right air instead of as a hole. */
.sc .sc-program-say { flex: 1 1 auto; }
.sc .sc-program h3 {
  margin: 0;
  max-inline-size: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-signal-ink);
  text-wrap: balance;
}
.sc .sc-program p {
  margin: 14px 0 0;
  max-inline-size: 54ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgb(18 20 23 / 0.76);
}

/* On the card the pill inverts: the one action is the only light shape on it. */
.sc .sc-pill-light {
  background: var(--color-signal-ink);
  color: #eef7f8;
  border-color: transparent;
}
.sc .sc-pill-light:hover { background: #000; color: #fff; filter: none; }
.sc .sc-pill-light:focus-visible {
  box-shadow: 0 0 0 2px #2ba3b0, 0 0 0 4px var(--color-signal-ink);
}

.sc .sc-figures {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 64px 0 0;
  padding-block-start: 40px;
  border-block-start: 1px solid var(--color-rule);
}
.sc .sc-figure {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 12px;
}
.sc .sc-figure dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
}
/* The "+" marks the count as a floor, not a total. That is a fact about the
   figure, not an action — and an accent spent on a decorative glyph is an
   accent that has stopped meaning "press this". */
.sc .sc-figure dd .hl { color: var(--color-ink-3); font-weight: inherit; }
.sc .sc-figure dt {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-inline-size: 17rem;
}

.sc .sc-col-link:hover { color: var(--color-signal); text-decoration-color: var(--color-signal); }

/* One travelling row. The cards are rendered twice — the second set inert —
   so the -50% loop closes on itself with no script and no visible snap.
   Pointer or keyboard focus stops it, because a reader comparing two reviews
   should not have to chase them. */
.sc .sc-marquee { margin-block-start: 40px; overflow: hidden; }
.sc .sc-marquee ul {
  display: flex;
  gap: 12px;
  inline-size: max-content;
  margin: 0;
  padding: 2px;
  list-style: none;
  animation: sc-drift 120s linear infinite;
}
.sc .sc-marquee:hover ul,
.sc .sc-marquee:focus-within ul,
#reviews-paused:checked ~ .sc-marquee ul { animation-play-state: paused; }
.sc .sc-marquee-hold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 24px;
  padding: 7px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  cursor: pointer;
}
.sc .sc-marquee-hold .icon { color: var(--color-ink-3); flex: none; }
.sc .sc-marquee-hold:hover { color: var(--color-ink); border-color: var(--color-control); }
#reviews-paused:checked ~ .sc-marquee-hold {
  border-color: var(--color-control);
  color: var(--color-ink);
}
#reviews-paused:focus-visible ~ .sc-marquee-hold {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-signal);
}
/* The band's own marquee follows the toggle, so the strip starts below it. */
.sc .sc-marquee-hold + .sc-marquee { margin-block-start: 16px; }
@keyframes sc-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}
.sc .sc-marquee li { flex: none; }
.sc .sc-marquee a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  inline-size: 19rem;
  block-size: 100%;
  min-block-size: 11rem;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  transition: border-color 0.3s var(--ease-out-quart);
}
.sc .sc-marquee a:hover { border-color: rgb(50 197 210 / 0.4); }
.sc .sc-marquee blockquote {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-2);
}
.sc .sc-marquee figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sc .sc-review-who { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink); }
.sc .sc-review-when { font-size: var(--text-2xs); color: var(--color-ink-3); }
.sc .sc-reviews-source {
  margin: 20px 0 0;
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
}

.sc .sc-notes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sc .sc-notes a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  block-size: 100%;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  transition: border-color 0.3s var(--ease-out-quart);
}
.sc .sc-notes a:hover { border-color: rgb(50 197 210 / 0.4); }
.sc .sc-notes-tag {
  align-self: flex-start;
  padding: 4px 11px;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  color: var(--color-ink-2);
}
.sc .sc-notes-title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
}

@media (max-width: 64rem) {
  .sc .sc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc .sc-bento-security { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .sc .sc-rates { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sc .sc-rates ul { inline-size: 100%; }
  .sc .sc-trust { grid-template-columns: 1fr; }
  .sc .sc-trust-lead {
    padding: 24px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--color-rule);
  }
  .sc .sc-bento { grid-template-columns: 1fr; }
  .sc .sc-program { padding: 28px; gap: 24px; }
  .sc .sc-figures {
    gap: 28px;
    margin-block-start: 40px;
    padding-block-start: 28px;
  }
}

/* Where motion is unwelcome the row stops and becomes a plain scroller, so the
   reviews past the fold are still reachable. */
@media (prefers-reduced-motion: reduce) {
  .sc .sc-marquee { overflow-x: auto; scroll-snap-type: x proximity; }
  .sc .sc-marquee ul { animation: none; }
  .sc .sc-marquee li { scroll-snap-align: start; }
  .sc .sc-marquee li[aria-hidden="true"] { display: none; }
}

/* Disclosures unfold. The chevron already turned but the content jumped;
   now the answer opens as the height change it is. Chromium interpolates,
   everywhere else keeps the instant reveal, and the base reduced-motion net
   does not reach this pseudo-element so it carries its own. */
.sc { interpolate-size: allow-keywords; }
.sc .faq-item::details-content,
.sc .sc-terms::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size 0.3s var(--ease-out-quart),
    content-visibility 0.3s allow-discrete;
}
.sc .faq-item[open]::details-content,
.sc .sc-terms[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .sc .faq-item::details-content,
  .sc .sc-terms::details-content { transition-duration: 0.01ms; }
}

/* Pages hand over instead of cutting. A short root crossfade on same-origin
   navigation; the panel keeps its instant cuts (the pseudo tree lives on the
   arriving document, whose body is unclassed under /admin), and a reduced-
   motion visitor never opts in. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: var(--ease-out-quart);
  }
  :root:has(body:not(.sc))::view-transition-group(root),
  :root:has(body:not(.sc))::view-transition-old(root),
  :root:has(body:not(.sc))::view-transition-new(root) {
    animation-duration: 0s;
  }
}