/* ==========================================================================
   SenzFusion redesign — css/base.css
   Design Spec 2.0.0 · Binance.US design system. Shared reset, bands, type,
   components, header / footer chrome and forms. Values come ONLY from
   css/tokens.css. Page stylesheets (css/PAGE.css) load after this file.

   --------------------------------------------------------------------------
   PAGE SKELETON — every page uses exactly this shell
   --------------------------------------------------------------------------
   <!doctype html><html lang="en"><head>
   <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>… — SenzFusion</title><meta name="description" content="…">
   <link rel="icon" type="image/svg+xml" href="assets/brand/senzfusion-mark.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@500;600;700&display=swap">
   <link rel="stylesheet" href="css/tokens.css"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/PAGE.css">
   </head>
   <body data-page="overview|payload|use-cases|partners|talk-to-us|newsletter|legal|404|launcher">
   <a class="skip-link" href="#main">Skip to content</a>
   <div data-site-header></div>
   <main id="main" tabindex="-1"> … </main>
   <div data-site-footer></div>
   <script src="js/site.js" defer></script><script src="js/PAGE.js" defer></script>
   </body></html>

   --------------------------------------------------------------------------
   ICON SET (frozen) — 24x24 viewBox, stroked (2px, round caps / joins),
   inherits currentColor. Copy inline as:
   <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="…"/></svg>
   --------------------------------------------------------------------------
   arrow-up-right  M7 17 17 7M9 7h8v8
   arrow-right     M4 12h16M14 6l6 6-6 6
   arrow-down      M12 4v16M6 14l6 6 6-6
   arrow-left      M20 12H4M10 6l-6 6 6 6
   menu            M4 7h16M4 12h16M4 17h16
   close           M6 6l12 12M18 6 6 18
   chevron-down    M6 9l6 6 6-6
   info            M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v6M12 7.5v.5
   check           M5 12.5l4.5 4.5L19 7
   alert           M12 3 2 20h20L12 3zM12 10v5M12 17.5v.5
   play            M8 5v14l11-7z
   pause           M8 5v14M16 5v14
   reset           M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4
   mail            M3 6h18v12H3zM3 7l9 7 9-7
   (window.TF.icon(name) in js/site.js returns the same markup as a string.)

   --------------------------------------------------------------------------
   BAND CONTRACT — components read these variables, so they adapt per band:
     --fg, --fg-muted, --line, --bg, --bg-elev, --accent-fg, --field-line, --ring
     (+ Spec 2.0.0 helpers: --card-bg, --card-line, --card-shadow,
        --card-hover-shadow, --field-bg, --field-bg-focus, --link-fg, --link-line,
        --btn-shadow, --btn2-*, --track-bg, --chip-signal-*)
   Set by :root / .band-light (white), .band-raised (snow #F5F5F5),
   .band-dark (Binance Dark #222126).
   LIGHT chrome: .site-header, .site-drawer, [data-site-header], .page-intro.
   DARK always: .panel (#2B2F36 card), .site-footer, .next-section.
   --accent-fg is the accent-coloured TEXT/ICON colour: ink on light (yellow text
   fails on white), Binance Yellow on dark. Yellow fills (buttons, bars, dots,
   pressed states) use --c-signal directly on every band.
   Hard cuts between bands — no gradients. The only gradient in the system is
   the golden glow behind product imagery on a light container (product.css).

   MARKUP PATTERNS
     Section head:
       <header class="section-head">
         <div class="section-head-main"><p class="eyebrow">…</p><h2 class="h-section">…</h2></div>
         <div class="section-head-aside"><p class="lede">…</p><a class="arrow-link" href="…">…<svg class="icon">…</svg></a></div>
       </header>          (bare h2 / .lede / .arrow-link children also work)
     Page intro:
       <header class="page-intro"><div class="wrap"><p class="eyebrow">…</p><h1 class="h-display">…</h1><p class="lede">…</p></div></header>
     Concept boundary:
       <p class="concept-tag"><svg class="icon" …info…></svg><span>…</span></p>
     Instrument panel (dark card):
       <div class="panel"><div class="panel-head"><span>LABEL</span><span class="status">LIVE</span></div>
         <div class="panel-body">…svg…</div><div class="panel-foot">…</div></div>
     Next section CTA:
       <section class="next-section"><div class="wrap">
         <div class="next-section-copy"><h2 class="h-section">…</h2><p>…</p></div>
         <a class="btn btn-primary" href="…">…</a></div></section>
     Required label:
       <label for="x">Name <span class="req" aria-hidden="true">*</span><span class="visually-hidden">(required)</span></label>
     Checkbox:
       <label class="checkbox"><input type="checkbox" …><span>…</span></label>
     Reveal with stagger:
       <li class="reveal" style="--i:2">…</li>   or a [data-stagger] parent (site.js sets --i)
   ========================================================================== */

/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */


/* ==========================================================================
   1. Band contract variables
   ========================================================================== */
:root,
.band-light,
.page-intro,
[data-site-header],
.site-header,
.site-drawer {
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-muted);
  --line: var(--c-hair);
  --bg: var(--c-surface);
  --bg-elev: var(--c-surface-raised);
  --accent-fg: var(--c-signal-ink);
  --field-line: var(--c-field-line);
  --ring: var(--focus-ring-light);
  --card-bg: var(--c-surface);
  --card-line: var(--c-hair);
  --card-shadow: var(--elev-card);
  --field-bg: var(--c-surface-raised);
  --field-bg-focus: var(--c-surface);
  --link-fg: var(--c-ink);
  --link-line: var(--c-signal);
  --btn-shadow: var(--elev-pill);
  --btn2-bg: var(--c-surface);
  --btn2-fg: var(--c-ink);
  --btn2-line: var(--c-signal);
  --btn2-hover-bg: var(--c-signal-hover);
  --btn2-hover-fg: var(--c-ink);
  --btn2-hover-line: var(--c-signal-hover);
  --track-bg: var(--c-hair);
  --card-hover-shadow: var(--elev-hover);
  --chip-signal-bg: var(--c-signal-tint);
  --chip-signal-line: var(--c-signal-tint);
  --chip-signal-fg: var(--c-ink);
}

.band-raised {
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-muted);
  --line: var(--c-hair);
  --bg: var(--c-surface-raised);
  --bg-elev: var(--c-surface);
  --accent-fg: var(--c-signal-ink);
  --field-line: var(--c-field-line);
  --ring: var(--focus-ring-light);
  --card-bg: var(--c-surface);
  --card-line: var(--c-hair);
  --card-shadow: var(--elev-card);
  --field-bg: var(--c-surface);
  --field-bg-focus: var(--c-surface);
  --link-fg: var(--c-ink);
  --link-line: var(--c-signal);
  --btn-shadow: var(--elev-pill);
  --btn2-bg: var(--c-surface);
  --btn2-fg: var(--c-ink);
  --btn2-line: var(--c-signal);
  --btn2-hover-bg: var(--c-signal-hover);
  --btn2-hover-fg: var(--c-ink);
  --btn2-hover-line: var(--c-signal-hover);
  --track-bg: var(--c-hair);
  --card-hover-shadow: var(--elev-hover);
  --chip-signal-bg: var(--c-signal-tint);
  --chip-signal-line: var(--c-signal-tint);
  --chip-signal-fg: var(--c-ink);
}

.band-dark,
.panel,
.site-footer,
.next-section {
  --fg: var(--c-on-dark);
  --fg-muted: var(--c-on-dark-muted);
  --line: var(--c-line-dark);
  --bg: var(--c-night);
  --bg-elev: var(--c-panel);
  --accent-fg: var(--c-signal);
  --field-line: var(--c-field-line-dark);
  --ring: var(--focus-ring);
  --card-bg: var(--c-panel);
  --card-line: transparent;
  --card-shadow: none;
  --field-bg: var(--c-panel-raised);
  --field-bg-focus: var(--c-panel-raised);
  --link-fg: var(--c-signal);
  --link-line: var(--c-signal);
  --btn-shadow: none;
  --btn2-bg: transparent;
  --btn2-fg: var(--c-on-dark);
  --btn2-line: var(--c-ghost-line);
  --btn2-hover-bg: var(--c-ghost-fill);
  --btn2-hover-fg: var(--c-on-dark);
  --btn2-hover-line: var(--c-on-dark);
  --track-bg: var(--c-field-line-dark);
  --card-hover-shadow: none;
  --chip-signal-bg: transparent;
  --chip-signal-line: var(--c-signal);
  --chip-signal-fg: var(--c-signal);
}
/* Inside a panel (already #2B2F36) nested surfaces step up one level */
.panel {
  --bg: var(--c-panel);
  --bg-elev: var(--c-panel-raised);
  --card-bg: var(--c-panel-raised);
}

.band-light  { background: var(--c-surface); color: var(--c-ink); }
.band-raised { background: var(--c-surface-raised); color: var(--c-ink); }
.band-dark   { background: var(--c-night); color: var(--c-on-dark); }


/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-22); line-height: var(--lh-snug); }

h4, h5, h6 {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset);
}
@media (hover: hover) {
  a:hover { text-decoration-thickness: var(--underline-hover); }
}

img, video, canvas { display: block; max-width: 100%; height: auto; }
svg { max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }

ul[role="list"],
ol[role="list"],
.list-reset { list-style: none; margin: 0; padding: 0; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

[hidden] { display: none !important; }

::selection { background: var(--c-signal); color: var(--c-ink); }

/* Prose flow: readable measure + vertical rhythm */
.prose > * + * { margin-top: var(--s-4); }
.prose > * + :is(h2, h3) { margin-top: var(--s-8); }
.prose p,
.prose li { max-width: var(--measure); }
.prose ul,
.prose ol { padding-left: var(--s-6); }
.prose a {
  color: var(--link-fg);
  text-decoration-color: var(--link-line);
  text-decoration-thickness: var(--underline);
}


/* ==========================================================================
   3. Focus, skip link, visually hidden
   Focus Blue #1EAEDB, 2px solid, 2px offset on every band.
   ========================================================================== */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--ring);
  outline-offset: var(--focus-offset);
}
main:focus,
main:focus-visible { outline: none; }

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-4);
  z-index: calc(var(--z-header) + 10);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  background: var(--c-signal);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4. Layout
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section       { padding-block: var(--section-pad); }
.section-tight { padding-block: var(--s-12); }

.cols-2,
.cols-3,
.cols-4 {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}
.cols-2 > *,
.cols-3 > *,
.cols-4 > * { min-width: 0; }

@media (min-width: 768px) {
  .cols-2,
  .cols-3,
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. Typography helpers
   ========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lede {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-lede);
  color: var(--fg-muted);
  max-width: var(--measure-lede);
}
@media (min-width: 1024px) {
  .lede { font-size: var(--fs-20); }
}

.fine-print {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.h-display,
.h-section,
.h-item {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.h-display { font-size: var(--fs-h1); }
.h-section { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h-item    { font-size: var(--fs-22); line-height: var(--lh-snug); }


/* ==========================================================================
   6. Section head & page intro
   ========================================================================== */
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.section-head-main,
.section-head-aside {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.section-head .lede,
.section-head-aside .lede { margin: 0; }

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-12);
    row-gap: var(--s-4);
    align-items: end;
    margin-bottom: var(--s-12);
  }
  .section-head > * { grid-column: 2; }
  .section-head > :is(.section-head-main, .eyebrow, h1, h2, h3, .h-display, .h-section, .h-item) { grid-column: 1; }
  .section-head > :only-child { grid-column: 1 / -1; }
}

.page-intro {
  background: var(--c-surface);
  color: var(--c-ink);
  padding-top: var(--section-pad);
  padding-bottom: var(--s-16);
  border-bottom: var(--bw) solid var(--c-hair);
}
.page-intro > .wrap {
  display: grid;
  justify-items: start;
  gap: var(--s-6);
}
.page-intro .eyebrow { margin-bottom: calc(-1 * var(--s-2)); }
.page-intro :is(h1, .h-display) {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}
.page-intro .lede {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
}
@media (max-width: 767px) {
  .page-intro { padding-bottom: var(--s-12); }
  .page-intro .lede { font-size: var(--fs-18); }
}


/* ==========================================================================
   7. Icons
   ========================================================================== */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: -0.2em;
}


/* ==========================================================================
   8. Buttons & links — Binance pill CTAs
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: var(--bw) solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn .icon { transition: transform var(--dur-fast) var(--ease-out); }

.btn-primary {
  background: var(--c-signal);
  border-color: var(--c-signal);
  color: var(--c-ink);
  box-shadow: var(--btn-shadow);
}
.btn-secondary {
  background: var(--btn2-bg);
  border-color: var(--btn2-line);
  color: var(--btn2-fg);
  box-shadow: var(--btn-shadow);
}

/* Hover: Binance hue-shift to Focus Blue. CONTRAST DEVIATION from the DS,
   which puts WHITE text on Focus Blue (2.6:1, fails). Text stays INK (6.3:1). */
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--c-signal-hover);
    border-color: var(--c-signal-hover);
    color: var(--c-ink);
  }
  .btn-secondary:hover {
    background: var(--btn2-hover-bg);
    border-color: var(--btn2-hover-line);
    color: var(--btn2-hover-fg);
  }
  .btn:hover .icon { transform: translateX(var(--nudge)); }
}
.btn-primary:active {
  background: var(--c-signal-active);
  border-color: var(--c-signal-active);
  color: var(--c-ink);
}

.btn-sm {
  min-height: var(--touch-sm);
  padding: 0 var(--s-5);
  font-size: var(--fs-14);
}
@media (pointer: coarse) {
  .btn-sm { min-height: var(--touch); }
}
/* 375px safety: long labels wrap inside the pill instead of forcing scroll */
@media (max-width: 479px) {
  .btn { max-width: 100%; white-space: normal; }
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--c-hair);
  border-color: var(--c-hair);
  color: var(--c-ink-muted);
  box-shadow: none;
}

/* Busy state: <button class="btn btn-primary" aria-busy="true"> */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
  content: "";
  flex: none;
  width: var(--spinner);
  height: var(--spinner);
  border: var(--bw-strong) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tf-spin var(--dur-spin) linear infinite;
}
@keyframes tf-spin { to { transform: rotate(360deg); } }

/* Arrow link — ink + 2px yellow underline on light; yellow text on dark */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--link-fg);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.arrow-link .icon {
  color: var(--link-fg);
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .arrow-link:hover { text-decoration-thickness: var(--underline-hover); }
  .arrow-link:hover .icon { transform: translateX(var(--nudge)); }
}
@media (pointer: coarse) {
  .arrow-link { min-height: var(--touch); }
}


/* ==========================================================================
   9. Concept boundary tag
   ========================================================================== */
.concept-tag {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  color: var(--fg-muted);
  max-width: var(--measure);
}
.concept-tag .icon {
  width: var(--s-4);
  height: var(--s-4);
  margin-top: var(--s-half);
}


/* ==========================================================================
   10. Instrument panel — Binance dark card (#2B2F36), no shadow
   ========================================================================== */
.panel {
  background: var(--c-panel);
  color: var(--c-on-dark);
  border: var(--bw) solid var(--c-line-dark);
  border-radius: var(--r-panel);
  box-shadow: none;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--c-line-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.panel-head .status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.panel-head .status::before {
  content: "";
  flex: none;
  width: var(--dot-sm);
  height: var(--dot-sm);
  border-radius: 50%;
  background: var(--c-signal);
}
.panel-body { padding: var(--s-6); }
.panel-body :where(svg:not(.icon), canvas) {
  display: block;
  width: 100%;
  height: auto;
}
.panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: var(--bw) solid var(--c-line-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  color: var(--c-on-dark-muted);
}
/* Keep focus rings inside the clipped panel */
.panel :focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.panel .btn:focus-visible,
.panel .segmented button:focus-visible { outline-offset: var(--s-half); }

@media (max-width: 767px) {
  .panel-body { padding: var(--s-4); }
}


/* ==========================================================================
   11. Segmented control — role="group" of buttons with aria-pressed
   Pill container, pill buttons; pressed = yellow fill + ink text.
   ========================================================================== */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: var(--s-half);
  padding: var(--s-half);
  border: var(--bw) solid var(--field-line);
  border-radius: var(--r-pill);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--seg-h);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-control);
  text-transform: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.segmented button[aria-pressed="true"] {
  background: var(--c-signal);
  color: var(--c-ink);
}
.segmented button:focus-visible {
  outline: var(--ring);
  outline-offset: var(--s-half);
}
@media (hover: hover) {
  .segmented button:not([aria-pressed="true"]):hover {
    background: var(--bg-elev);
    color: var(--fg);
  }
}
@media (pointer: coarse) {
  .segmented button { min-height: var(--touch); }
}


/* ==========================================================================
   12. Chips, dots, cards, media
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--chip-y) var(--chip-x);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-mono);
  color: var(--fg-muted);
  white-space: nowrap;
}
/* Light: yellow tint + ink text. Dark: yellow border + yellow text (8.9:1). */
.chip-signal {
  background: var(--chip-signal-bg);
  border-color: var(--chip-signal-line);
  color: var(--chip-signal-fg);
}

.dot {
  display: inline-block;
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot, var(--c-signal));
}

.card {
  background: var(--card-bg);
  color: var(--fg);
  border: var(--bw) solid var(--card-line);
  border-radius: var(--r-panel);
  box-shadow: var(--card-shadow);
  padding: var(--s-6);
  transition: box-shadow var(--dur-enter) var(--ease-out);
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--card-hover-shadow); }
}
.card-media {
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-6);
  overflow: hidden;
  border-radius: calc(var(--r-panel) - var(--bw)) calc(var(--r-panel) - var(--bw)) 0 0;
  border-bottom: var(--bw) solid var(--card-line);
  background: var(--c-panel);
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--od-ratio, 3 / 2);
  object-fit: cover;
}

.media-frame { margin: 0; }
.media-frame img,
.media-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel);
  background: var(--c-panel);
}
.media-frame figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   13. Next-section CTA band — Binance Dark, white h2, yellow pill CTA
   ========================================================================== */
.next-section {
  background: var(--c-night);
  color: var(--c-on-dark);
  padding-block: var(--s-16);
  border-top: var(--bw) solid var(--c-line-dark);
}
.next-section :is(h2, .h-section) { color: var(--c-on-dark); }
.next-section > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.next-section-copy { display: grid; gap: var(--s-3); }
.next-section p {
  color: var(--fg-muted);
  max-width: var(--measure);
}
.next-section > .wrap > h2 + p { margin-top: var(--s-3); }
.next-section > .wrap > .btn {
  justify-self: start;
  margin-top: var(--s-6);
}
@media (min-width: 768px) {
  .next-section > .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-12);
  }
  .next-section > .wrap > :not(.btn) { grid-column: 1; }
  .next-section > .wrap > .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
}
@media (max-width: 639px) {
  .next-section { padding-block: var(--s-12); }
}


/* ==========================================================================
   14. Forms
   Error COPY stays ink (Crypto Red #F6465D is 3.3:1 on white); red is used for
   borders and the alert icon only.
   ========================================================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.form > * { min-width: 0; }

.field {
  display: grid;
  gap: var(--s-2);
}
.field label,
.label {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.req {
  color: var(--accent-fg);
  font-weight: var(--fw-semibold);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-3) var(--s-input-x);
  border: var(--bw) solid var(--field-line);
  border-radius: var(--r-control);
  background-color: var(--field-bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-muted); opacity: 1; }
@media (hover: hover) {
  .input:hover,
  .select:hover,
  .textarea:hover { border-color: var(--fg-muted); }
}
.input:focus,
.select:focus,
.textarea:focus {
  background-color: var(--field-bg-focus);
  border-color: var(--fg);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: var(--ring);
  outline-offset: var(--focus-offset);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border: var(--bw-strong) solid var(--c-danger);
  padding: calc(var(--s-3) - var(--bw)) calc(var(--s-input-x) - var(--bw));
}

.textarea {
  min-height: var(--textarea-h);
  resize: vertical;
}

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: calc(var(--s-input-x) + var(--s-8));
  /* chevron drawn with two hard-stop triangles (not a colour wash) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg) 50%),
    linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position:
    calc(100% - var(--s-4) - var(--s-2)) 50%,
    calc(100% - var(--s-4) - var(--s-1)) 50%;
  background-size: var(--s-1) var(--s-1), var(--s-1) var(--s-1);
  background-repeat: no-repeat;
}

.field-hint {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.field-error .icon { color: var(--c-danger); }
.field-error:empty { display: none; }

.error-summary {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw-strong) solid var(--c-danger);
  border-radius: var(--r-panel);
  background: var(--card-bg);
  color: var(--fg);
}
.error-summary :is(h2, h3, .error-summary-title) {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  line-height: var(--lh-snug);
}
.error-summary .icon { color: var(--c-danger); }
.error-summary ul {
  margin: 0;
  padding-left: var(--s-6);
}
.error-summary li + li { margin-top: var(--s-1); }
.error-summary a {
  color: var(--fg);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--c-danger);
  text-decoration-thickness: var(--underline);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--touch);
  padding-block: var(--s-2);
  color: var(--fg);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  cursor: pointer;
}
.checkbox input {
  flex: none;
  width: var(--check);
  height: var(--check);
  margin: 0;
  accent-color: var(--accent-fg);
  cursor: pointer;
}

.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-panel);
  background: var(--card-bg);
  color: var(--fg);
}
.form-status:empty {
  padding: 0;
  border: 0;
  background: none;
}
.form-status.is-success { border: var(--bw-strong) solid var(--c-success); }
.form-status.is-success .icon { color: var(--c-success); }
.form-status.is-failure { border: var(--bw-strong) solid var(--c-danger); }
.form-status.is-failure .icon { color: var(--c-danger); }


/* ==========================================================================
   15. Range — <input type="range" class="range">
   site.js keeps --range-pct in sync for the filled track. The two-stop
   background below is a hard-edged fill, not a gradient wash.
   ========================================================================== */
.range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--touch);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: var(--track);
  border-radius: var(--r-pill);
  background: linear-gradient(to right,
    var(--c-signal) var(--range-pct, 0%),
    var(--track-bg) var(--range-pct, 0%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: var(--bw-strong) solid var(--accent-fg);
  border-radius: 50%;
  background: var(--c-signal);
  box-sizing: border-box;
}
.range::-moz-range-track {
  height: var(--track);
  border-radius: var(--r-pill);
  background: var(--track-bg);
}
.range::-moz-range-progress {
  height: var(--track);
  border-radius: var(--r-pill);
  background: var(--c-signal);
}
.range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: var(--bw-strong) solid var(--accent-fg);
  border-radius: 50%;
  background: var(--c-signal);
  box-sizing: border-box;
}
.range:focus-visible {
  outline: var(--ring);
  outline-offset: var(--focus-offset);
}


/* ==========================================================================
   16. Reveal on scroll (site.js adds .is-in)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   17. Site header (rendered by js/site.js into [data-site-header])
   White, sticky, 64px, hairline bottom border — Binance.US nav.
   ========================================================================== */
[data-site-header] {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: block;
  min-height: var(--header-h);
  background: var(--c-surface);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--c-surface);
  color: var(--c-ink);
  border-bottom: var(--bw) solid var(--c-hair);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  margin-right: auto;
  color: var(--fg);
  text-decoration: none;
}
.brand img {
  flex: none;
  width: var(--logo);
  height: var(--logo);
  border-radius: var(--r-control);
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  line-height: 1;
}
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-brand);
  line-height: 1;
}
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  color: var(--fg-muted);
}
@media (max-width: 479px) {
  .brand-sub { display: none; }
}

.nav-links { display: none; }

.nav-cta { flex: none; }
@media (max-width: 599px) {
  .site-header .nav-cta { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: var(--bw) solid var(--c-hair);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle .icon {
  width: var(--s-6);
  height: var(--s-6);
}
.nav-toggle[aria-expanded="true"] .icon-menu,
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }
@media (hover: hover) {
  .nav-toggle:hover { background: var(--c-surface-raised); }
}

/* Drawer (< 1024px) — white with ink text */
.site-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  color: var(--c-ink);
  border-bottom: var(--bw) solid var(--c-hair);
  box-shadow: var(--elev-hover);
  opacity: 0;
  transform: translateY(calc(-1 * var(--drawer-shift)));
  transition:
    opacity var(--dur-exit) var(--ease-in),
    transform var(--dur-exit) var(--ease-in);
}
.site-drawer.is-open {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-timing-function: var(--ease-out);
}
.site-drawer .wrap { padding-block: var(--s-2) var(--s-8); }
.drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-links a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--s-16);
  padding-block: var(--s-3);
  border-bottom: var(--bw) solid var(--c-hair);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.drawer-links a:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.drawer-num {
  flex: none;
  min-width: 4ch;
  padding: var(--s-half) var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-align: center;
  color: var(--c-ink-muted);
}
.drawer-links a .icon {
  margin-left: auto;
  color: var(--c-ink);
}
.drawer-links a[aria-current="page"] .drawer-num {
  background: var(--c-signal);
  color: var(--c-ink);
}
@media (hover: hover) {
  .drawer-links a:hover { color: var(--c-ink-strong); background: var(--c-surface-raised); }
}
.drawer-cta {
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--s-6);
}

body.drawer-open { overflow: hidden; }
body.drawer-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--c-scrim);
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-8);
  }
  .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav-links a[aria-current="page"] { color: var(--c-ink); }
  .nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc((var(--touch) - var(--header-h)) / 2);
    height: var(--bar);
    background: var(--c-signal);
  }
  .nav-cta { margin-left: var(--s-2); }
  .nav-toggle,
  .site-drawer { display: none !important; }
  body.drawer-open { overflow: visible; }
  body.drawer-open::after { display: none; }
}
@media (hover: hover) and (min-width: 1024px) {
  .nav-links a:hover { color: var(--c-ink-strong); }
}

/* Owner announcement (published from admin; rendered by js/site.js) */
.site-announcement {
  padding-block: var(--s-3);
  background: var(--c-night);
  color: var(--c-on-dark);
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
}
.site-announcement .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-6);
}
.site-announcement a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-signal);
  font-weight: var(--fw-semibold);
  text-decoration-color: var(--c-signal);
}
.site-announcement a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}


/* ==========================================================================
   18. Site footer (rendered by js/site.js into [data-site-footer])
   ========================================================================== */
.site-footer {
  background: var(--c-night);
  color: var(--c-on-dark);
  padding-block: var(--s-16) var(--s-8);
  border-top: var(--bw) solid var(--c-line-dark);
}
.site-footer .brand { color: var(--c-on-dark); }
.footer-top {
  display: grid;
  gap: var(--s-12);
}
.footer-brand {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  align-content: start;
}
.footer-brand .brand { margin-right: 0; }
.footer-statement {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  color: var(--c-on-dark);
}
.footer-credit {
  font-size: var(--fs-14);
  color: var(--c-on-dark-muted);
}
.footer-credit a {
  color: var(--c-on-dark);
  text-decoration-color: var(--c-signal);
}
@media (hover: hover) {
  .footer-credit a:hover { color: var(--c-signal); }
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--gutter);
}
.footer-col {
  display: grid;
  align-content: start;
  gap: var(--s-1);
}
.footer-col .eyebrow {
  color: var(--c-on-dark-muted);
  margin-bottom: var(--s-2);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--touch-sm);
  color: var(--c-on-dark);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  text-decoration-color: var(--c-signal);
  text-underline-offset: var(--underline-offset);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a .icon { color: var(--c-signal); }
@media (pointer: coarse) {
  .footer-col a { min-height: var(--touch); }
}
@media (hover: hover) {
  .footer-col a:hover {
    color: var(--c-signal);
    text-decoration: underline;
    text-decoration-thickness: var(--underline);
  }
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-line-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  color: var(--c-on-dark-muted);
}
.footer-bottom p { max-width: var(--measure); }

@media (min-width: 768px) {
  .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gutter); }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .footer-bottom p:last-child {
    text-align: right;
    white-space: nowrap;
  }
}
@media (min-width: 1024px) {
  .footer-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}


/* ==========================================================================
   19. Reduced motion — complete fallback
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  .site-drawer { transform: none; }
  .btn:hover .icon,
  .arrow-link:hover .icon { transform: none; }
  /* Busy buttons show static dots instead of a rotating ring */
  .btn[aria-busy="true"]::after {
    content: "\00B7\00B7\00B7";
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    letter-spacing: var(--ls-label);
  }
}