/* ==========================================================================
   ViewerStock design system. Dark only: Geist text, bold tight Geist headings,
   Geist tabular numbers, electric blue accent, frosted glass pill buttons.
   Motion (reveals, text reveals, SVG draw) is driven by src/ui/motion.js;
   its CSS lives in the "motion" section near the end of this file.

   Cascade layers decide who wins, not file order or specificity:
     reset < base < components < pages < utilities
   Page stylesheets are imported into `pages`, so a page rule beats any
   component rule without !important, and utilities beat both.

   Fonts come only from src/styles/fonts.css (the font slot).
   One stylesheet per page lives in src/styles/pages/.
   ========================================================================== */

@layer reset, base, components, pages, utilities;

@import url('./styles/fonts.css');
@import url('./styles/trade.css'); /* its rules are already wrapped in @layer components */
@import url('./styles/visuals.css') layer(components); /* narrative SVG scenes, src/ui/visuals.js */
@import url('./styles/pages/home.css') layer(pages);
@import url('./styles/pages/live.css') layer(pages);
@import url('./styles/pages/stream.css') layer(pages);
@import url('./styles/pages/campaigns.css') layer(pages);
@import url('./styles/pages/campaign.css') layer(pages);
@import url('./styles/pages/leaderboard.css') layer(pages);
@import url('./styles/pages/portfolio.css') layer(pages);
@import url('./styles/pages/profile.css') layer(pages);
@import url('./styles/pages/start.css') layer(pages);
@import url('./styles/pages/docs.css') layer(pages);
@import url('./styles/pages/not-found.css') layer(pages);

/* ---------------------------------------------------------------- tokens */

@layer base {
  :root {
    color-scheme: dark;

    /* palette: one dark theme, no light theme, no glows */
    --bg: #09090b;
    --bg-alt: #0e0e11;
    --surface: #131316;
    --surface-2: #18181c;
    --line: #232329;
    --line-2: #2e2e35;
    --text: #ededf0;
    --text-2: #b4b4bd;
    --muted: #82828d;
    --faint: #56565f;
    --accent: #5b8cff;           /* electric blue: stock earned, positive values, active states */
    --accent-deep: #3d6cf0;      /* fills and bars */
    --accent-bg: rgba(91, 140, 255, 0.12);
    --accent-line: rgba(91, 140, 255, 0.4);
    --accent-2: #f2a93b;         /* amber, sparingly: the second data colour (above the cap, in review) */
    --accent-2-bg: rgba(242, 169, 59, 0.12);
    --accent-2-line: rgba(242, 169, 59, 0.4);
    --danger: #ff6b6b;           /* errors */
    --danger-bg: rgba(255, 107, 107, 0.12);
    --danger-line: rgba(255, 107, 107, 0.4);
    --live: #ff4d4d;             /* ONLY the LIVE dot and label */
    --live-bg: rgba(255, 77, 77, 0.12);
    --grey-bar: #3a3a42;         /* neutral third data colour in bars */
    --overlay: rgba(5, 5, 7, 0.74);

    /* radii */
    --r-btn: 999px; /* user: heavily rounded buttons, pill shape on every button */
    --r-badge: 2.2px;
    --r-input: 4.2px;
    --r-inset: 5px;
    --r-card: 7px;

    /* layout */
    --w: 1104px;                 /* content width */
    --w-nav: 1232px;             /* nav runs a little wider than content */
    --w-doc: 580px;              /* docs reading column */
    --gutter: 24px;
    --nav-h: 60px;
    --band-pad: clamp(64px, 9vw, 128px);
    --split-col: 248px;          /* eyebrow column in split section heads */

    /* type scale. Headings are Geist 700, tight (-0.04em, ~0.98 line-height),
       large and heavy, per the user. */
    --fs-hero: clamp(36px, 5.6vw, 80px);
    --fs-page: clamp(30px, 4.1vw, 54px);
    --fs-section: clamp(26px, 3.2vw, 42px);
    --fs-doc-h2: clamp(22px, 2.3vw, 28px);
    --fs-h3: 16px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-fine: 11.5px;
    --fs-eyebrow: 11px;
    --track-head: -0.04em;
    --track-eyebrow: 0.18em;
    --lh-head: 0.98;

    /* motion: never the default 'ease' */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* reveals and entrances */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* hover, press, colour */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* state changes: nav, accordions */
    --dur-fast: 180ms;   /* hover in, press */
    --dur-mid: 320ms;    /* hover out, UI state */
    --dur-slow: 800ms;   /* reveals */
    --dur-text: 900ms;   /* text reveals */
    --dur-draw: 1200ms;  /* SVG strokes */

    /* glass buttons */
    --glass: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.16);
    --glass-line: rgba(255, 255, 255, 0.14);
    --glass-line-hover: rgba(255, 255, 255, 0.22);
    --glass-primary: rgba(237, 237, 240, 0.16);
    --glass-primary-hover: rgba(237, 237, 240, 0.22);
    --glass-primary-line: rgba(255, 255, 255, 0.22);
    --glass-primary-line-hover: rgba(255, 255, 255, 0.3);
    --glass-tint: rgba(91, 140, 255, 0.18);
    --glass-blur: blur(12px) saturate(100%);   /* no saturation boost: over the film it tinted buttons brown */
    --glass-blur-hover: blur(9px) saturate(100%);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2);

    /* No drop shadows on this site: depth comes from surface, hairline and light instead. */
    --shadow-pop: none;
    --shadow-lift: none;
  }
}

/* ----------------------------------------------------------------- reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg, video, canvas, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  [hidden] { display: none !important; }
  summary { cursor: pointer; }
}

/* ------------------------------------------------------------------ base */

@layer base {
  html { background: var(--bg); scroll-padding-top: calc(var(--nav-h) + 24px); }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--f);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: var(--w-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  body.modal-open { overflow: hidden; }
  ::selection { background: rgba(91, 140, 255, 0.32); color: var(--text); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  h1, h2, h3, h4 { font-weight: var(--w-semi); line-height: 1.3; color: var(--text); text-wrap: balance; }
  /* every page, section and docs heading: Geist Bold, tight tracking and leading */
  h1, h2, .doc h3, .h-display, .h-page, .h-section {
    font-family: var(--f-head); font-weight: var(--w-head); text-transform: none;
    letter-spacing: var(--track-head); line-height: var(--lh-head);
  }
  p { text-wrap: pretty; }
  strong, b { font-weight: var(--w-semi); color: var(--text); }
  code, kbd, samp { font-family: var(--m-code); font-size: 0.9em; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

  .app { flex: 1 0 auto; outline: none; }
  .boot { min-height: 100vh; min-height: 100svh; } /* keeps the footer below the fold until the first route renders (no footer flash before the home film) */

  .skip {
    position: absolute; left: 12px; top: -48px; z-index: 200;
    background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--r-btn);
    font-size: 13px; font-weight: var(--w-semi);
  }
  .skip:focus { top: 12px; }

  /* thin bar shown by the router while a page is loading */
  .route-bar {
    position: fixed; top: 0; left: 0; z-index: 120; height: 2px; width: 0;
    background: var(--accent); opacity: 0; pointer-events: none;
  }
  html.is-routing .route-bar { opacity: 1; width: 72%; transition: width 6s var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-quart); }

  .ico { width: 16px; height: 16px; flex: none; }
}

/* ============================================================ components */

@layer components {

  /* ---------------------------------------------------------- layout */

  .wrap { width: 100%; max-width: calc(var(--w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .wrap-narrow { max-width: calc(760px + 2 * var(--gutter)); }

  .band { padding-block: var(--band-pad); position: relative; }
  .band-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
  .band + .band-alt, .band-alt + .band { border-top: 1px solid var(--line); }
  .band-tight { padding-block: clamp(48px, 6vw, 80px); }
  .band-flush-top { padding-top: 0; }

  .grid { display: grid; gap: 20px; }
  .grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
  .grid-live { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

  /* ---------------------------------------------------------- type */

  .eyebrow {
    display: block;
    font-family: var(--f);
    font-size: var(--fs-eyebrow);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    line-height: 1.5;
    color: var(--muted);
  }
  .eyebrow-mono { font-family: var(--m); letter-spacing: 0.22em; font-weight: var(--w-regular); }

  .h-display { font-size: var(--fs-hero); line-height: 0.95; }
  .h-page { font-size: var(--fs-page); }
  .h-section { font-size: var(--fs-section); }
  .h-card { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.005em; font-weight: var(--w-semi); }

  .lede { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); max-width: 54ch; }
  .lede-lg { font-size: 15.5px; line-height: 1.7; }
  .body { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
  .small { font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
  .fine { font-size: var(--fs-fine); line-height: 1.6; color: var(--muted); }
  .fine-i { display: flex; gap: 8px; align-items: flex-start; }
  .fine-i::before {
    content: 'i'; flex: none; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%;
    border: 1px solid currentColor; font: 600 8px/10px var(--f); text-align: center; opacity: 0.8;
  }

  .mono, .num { font-family: var(--m); font-variant-numeric: tabular-nums; letter-spacing: 0; }

  .link { color: var(--text); }
  .link:hover { color: var(--accent); }
  .link-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--w-medium); color: var(--text-2); }
  .link-more:hover, .link-more:focus-visible { color: var(--text); }
  .link-more .ico { width: 14px; height: 14px; transition: transform var(--dur-mid) var(--ease-out-quart); }
  .link-more:hover .ico { transform: translateX(2px); transition-duration: var(--dur-fast); }

  /* ---------------------------------------------------------- underline motion
     Text links carry no underline at rest. On hover and keyboard focus a 1px
     line draws in from the left; on the way out it retracts toward the right.
     It is a background image, so it follows an inline link across lines. */

  .link, .link-more, .btn-link, .nav-links a, .foot-col a, .foot-chain a, .crumbs a,
  .doc a:not(.btn), .act-sub a, .toast a, .kcard-name, .nf-links a, .sid-sub a, .pb-tw,
  .earn-camp, .pf-token, .pf-twitch, .pf-ref-name, .st-camp-id .card-row-title, a.pf-rw-name,
  .pf-est .card-row-title a, .u-link {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur-mid) var(--ease-out-quart), color var(--dur-mid) var(--ease-out-quart);
  }
  .link:hover, .link-more:hover, .btn-link:hover:not(:disabled), .nav-links a:hover, .foot-col a:hover, .foot-chain a:hover, .crumbs a:hover,
  .doc a:not(.btn):hover, .act-sub a:hover, .toast a:hover, .kcard-name:hover, .nf-links a:hover, .sid-sub a:hover, .pb-tw:hover,
  .earn-camp:hover, .pf-token:hover, .pf-twitch:hover, .pf-ref-name:hover, .st-camp-id .card-row-title:hover, a.pf-rw-name:hover,
  .pf-est .card-row-title a:hover, .u-link:hover,
  .link:focus-visible, .link-more:focus-visible, .btn-link:focus-visible, .nav-links a:focus-visible, .foot-col a:focus-visible, .foot-chain a:focus-visible, .crumbs a:focus-visible,
  .doc a:not(.btn):focus-visible, .act-sub a:focus-visible, .toast a:focus-visible, .kcard-name:focus-visible, .nf-links a:focus-visible, .sid-sub a:focus-visible, .pb-tw:focus-visible,
  .earn-camp:focus-visible, .pf-token:focus-visible, .pf-twitch:focus-visible, .pf-ref-name:focus-visible, .st-camp-id .card-row-title:focus-visible, a.pf-rw-name:focus-visible,
  .pf-est .card-row-title a:focus-visible, .u-link:focus-visible {
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: background-size var(--dur-mid) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
  }
  /* inline body links draw in the accent */
  .link, .doc a:not(.btn), .toast a { background-image: linear-gradient(var(--accent), var(--accent)); }

  /* ---------------------------------------------------------- section heads */

  .sh { margin-bottom: clamp(36px, 4.4vw, 52px); }
  .sh h2, .sh h1 { font-size: var(--fs-section); }
  .sh .lede { margin-top: 20px; }

  /* eyebrow in a left column, heading + lede to its right (Yieldflare "Your vault") */
  .sh-split { display: grid; grid-template-columns: var(--split-col) minmax(0, 1fr); column-gap: 0; align-items: start; }
  .sh-split > .eyebrow { padding-top: 0.9em; padding-right: 24px; }
  .sh-split h2 { max-width: 28ch; }
  .sh-split .sh-aside { grid-column: 2; margin-top: 28px; }

  /* eyebrow above heading, optional aside on the right (Yieldflare "How it works") */
  .sh-stack { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
  .sh-stack .sh-main { min-width: 0; max-width: 640px; }
  .sh-stack h2 { margin-top: 14px; }
  .sh-stack .sh-aside { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

  /* centred (Yieldflare "Questions") */
  .sh-center { text-align: center; }
  .sh-center h2 { margin-top: 14px; margin-inline: auto; max-width: 30ch; }
  .sh-center .lede { margin-inline: auto; max-width: 46ch; }
  .sh-center .sh-aside { margin-top: 24px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

  .sh-meta { font-size: var(--fs-eyebrow); font-weight: var(--w-medium); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); white-space: nowrap; }

  /* top of a non-hero page (Live, Campaigns, Leaderboard...) */
  .page-head { padding-block: clamp(56px, 8vw, 104px) clamp(32px, 4vw, 48px); }
  .page-head h1 { font-size: var(--fs-page); margin-top: 16px; max-width: 24ch; }
  .page-head .lede { margin-top: 24px; font-size: 15.5px; }
  .page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }

  .crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
  .crumbs a:hover { color: var(--text); }
  .crumbs span[aria-hidden] { color: var(--faint); }

  /* ---------------------------------------------------------- nav */

  .nav {
    position: sticky; top: 0; z-index: 60; height: var(--nav-h);
    background-color: rgba(9, 9, 11, 0.74);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--dur-mid) var(--ease-in-out), border-color var(--dur-mid) var(--ease-in-out), -webkit-backdrop-filter var(--dur-mid) var(--ease-in-out), backdrop-filter var(--dur-mid) var(--ease-in-out);
  }
  /* over the home hero film: transparent until the page scrolls (chrome.js sets the classes) */
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) {
    background-color: rgba(9, 9, 11, 0);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: saturate(100%) blur(0px);
    backdrop-filter: saturate(100%) blur(0px);
  }
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-links a { color: rgba(237, 237, 240, 0.86); }
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-links a:hover,
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-links a.is-active { color: #ffffff; }
  .nav-in {
    height: 100%; max-width: calc(var(--w-nav) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  }
  .logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: var(--text); }
  .nav-l { justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
  .nav-l > .logo { flex: none; } /* the wordmark never shrinks under the Live now badge */
  .nav-live { flex: none; transition: background-color var(--dur-fast) var(--ease-out-quart); }
  .nav-live:hover { background: var(--live-bg); }
  .logo-mark { width: auto; height: 20px; aspect-ratio: 571 / 444; flex: none; } /* the user's ViewerStock mark, assets/brand/viewerstock-mark.svg */
  .logo-word { font-size: 15px; font-weight: var(--w-semi); letter-spacing: -0.01em; }
  .nav-links { display: flex; align-items: center; gap: 28px; }
  .nav-links a { display: inline-flex; align-items: center; gap: 7px; padding-block: 3px; font-size: 13.5px; font-weight: var(--w-medium); color: var(--text-2); white-space: nowrap; }
  .nav-links a:hover, .nav-links a.is-active { color: var(--text); }
  /* the current section keeps a static underline */
  .nav-links a.is-active { background-size: 100% 1px; background-position: 0 100%; }
  .nav-count { font-family: var(--m); font-size: 11px; color: var(--muted); }
  .nav-count .live-dot { --d: 6px; margin-right: 5px; vertical-align: 1px; }
  .nav-r { justify-self: end; display: flex; align-items: center; gap: 10px; }
  .nav-toggle { display: none; width: 40px; height: 40px; place-items: center; border-radius: var(--r-input); color: var(--text); }
  /* CA slot and X link (chrome.js caChip, xLink). The slot stays empty until config.ca is set. */
  .nav-ca {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; flex: none;
    border: 1px solid var(--line-2); border-radius: var(--r-btn); background: rgba(255, 255, 255, 0.03);
    font-family: var(--m); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
  }
  .nav-ca-l { font-family: var(--f); font-size: 10.5px; font-weight: var(--w-semi); letter-spacing: 0.14em; color: var(--muted); }
  .nav-ca .ico { width: 13px; height: 13px; color: var(--muted); }
  button.nav-ca:hover { background: var(--surface-2); border-color: var(--glass-line-hover); }
  button.nav-ca:hover .ico { color: var(--text); }
  .nav-x { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-btn); color: var(--text-2); transition: color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart); }
  .nav-x .ico { width: 15px; height: 15px; }
  .nav-x:hover { color: var(--text); background: var(--surface-2); }
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-ca { background: rgba(9, 9, 11, 0.28); border-color: var(--glass-line); }
  /* muted grey reads about 2.4:1 over the film: match the links */
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-ca-l,
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-ca .ico { color: rgba(237, 237, 240, 0.86); }
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-x { color: rgba(237, 237, 240, 0.86); }
  .nav.is-over-hero:not(.is-scrolled):not(.is-open) .nav-x:hover { color: #ffffff; background: var(--glass); }
  /* min-height: one 17px link row (line-height 1.6 + 32px padding + 1px rule), so the CA row keeps the sheet rhythm even when empty */
  .nav-sheet .nav-sheet-ca { display: flex; align-items: center; gap: 12px; width: 100%; min-height: calc(17px * 1.6 + 33px); padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--m); font-size: 14px; color: var(--text); text-align: left; }
  .nav-sheet .nav-sheet-ca .nav-ca-l { font-size: 13px; }
  .nav-sheet .nav-sheet-ca .ico { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
  .nav-sheet-x { display: inline-flex; align-items: center; gap: 12px; }
  .nav-sheet-x .ico { width: 16px; height: 16px; }

  .nav-toggle:hover { background: var(--surface-2); }
  .nav-toggle .ico { width: 20px; height: 20px; }

  .acct { position: relative; }
  .acct-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 5px;
    border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--surface);
    font-family: var(--m); font-size: 12.5px; color: var(--text); transition: background var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
  }
  .acct-btn:hover, .acct-btn[aria-expanded='true'] { background: var(--surface-2); border-color: var(--line-2); }
  .acct-btn .av { --s: 28px; }
  .acct-menu {
    position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 70;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-inset);
    box-shadow: var(--shadow-pop); overflow: hidden;
  }
  .acct-who { display: flex; gap: 12px; align-items: center; padding: 16px; }
  .acct-who b { display: block; font-size: 14px; line-height: 1.3; }
  .acct-who small { display: block; font-size: 12px; color: var(--muted); }
  .acct-addr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--m); font-size: 12px; color: var(--text-2); }
  .acct-list { border-top: 1px solid var(--line); padding: 6px; display: grid; }
  .acct-list a, .acct-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 2.2px; font-size: 13.5px; color: var(--text-2); }
  .acct-list a:hover, .acct-list button:hover { background: var(--surface-2); color: var(--text); }
  .acct-list .acct-hint { font-size: 11.5px; color: var(--muted); }

  .nav-sheet {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 55; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px;
  }
  .nav-sheet a:not(.btn) { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: var(--w-medium); letter-spacing: -0.005em; color: var(--text); }
  .nav-sheet a.is-active { color: var(--accent); }
  .nav-sheet-l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .nav-sheet .nav-sheet-acct { padding-top: 20px; display: grid; gap: 10px; }

  /* ---------------------------------------------------------- footer */

  .foot { border-top: 1px solid var(--line); background: var(--bg); padding-block: 72px 40px; margin-top: auto; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .foot-brand p { margin-top: 20px; max-width: 36ch; font-size: 13px; line-height: 1.65; color: var(--text-2); }
  .foot-col h4 { font-size: var(--fs-eyebrow); font-weight: var(--w-medium); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); line-height: 1.5; }
  .foot-col ul { margin-top: 20px; display: grid; gap: 12px; list-style: none; padding: 0; }
  .foot-col a { font-size: 13.5px; color: var(--text-2); }
  .foot-col a:hover { color: var(--text); }
  .foot-chain { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 56px; padding-block: 24px; border-block: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  .foot-chain span.eyebrow { display: inline; margin-right: 12px; font-size: 10.5px; }
  .foot-chain a { overflow-wrap: anywhere; font-family: var(--m); color: var(--text-2); }
  .foot-chain a:hover { color: var(--text); }
  .foot-legal { margin-top: 24px; font-size: 11.5px; line-height: 1.7; color: var(--muted); max-width: 110ch; }

  /* ---------------------------------------------------------- buttons */

  /* Frosted glass. Every .btn except the text-only .btn-link: a translucent
     fill over a backdrop blur, a soft border, an inset top highlight and a
     soft drop shadow. Hover sharpens the blur, brightens the fill and lifts
     the scale a touch; press settles to 0.98. */
  .btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border: 1px solid var(--glass-line); border-radius: var(--r-btn);
    background-color: var(--glass); color: var(--text);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    font-family: var(--f); font-size: 13px; font-weight: var(--w-medium); line-height: 1.1; letter-spacing: 0.005em;
    white-space: nowrap; text-align: center; cursor: pointer; user-select: none;
    transition: transform var(--dur-mid) var(--ease-out-quart), background-color var(--dur-mid) var(--ease-out-quart), border-color var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) var(--ease-out-quart), color var(--dur-mid) var(--ease-out-quart), opacity var(--dur-mid) var(--ease-out-quart), -webkit-backdrop-filter var(--dur-mid) var(--ease-out-quart), backdrop-filter var(--dur-mid) var(--ease-out-quart);
  }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.42; cursor: not-allowed; }
  .btn .ico { width: 15px; height: 15px; }

  .btn-primary {
    background-color: var(--glass-primary); border-color: var(--glass-primary-line);
    background-image: linear-gradient(var(--glass-tint), var(--glass-tint));
  }
  .btn-secondary { background-color: var(--glass); border-color: var(--glass-line); }

  /* text-only secondary action: no glass, the underline motion instead */
  .btn-link {
    padding-inline: 0; margin-inline: 4px; border-color: transparent; background-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--text-2);
    background-origin: content-box; background-size: 0% 1px;
    transition: background-size var(--dur-mid) var(--ease-out-quart), color var(--dur-mid) var(--ease-out-quart);
  }
  .btn-link:hover:not(:disabled), .btn-link:focus-visible { color: var(--text); }

  /* positive confirm (buy): accent glass */
  .btn-accent, .btn-green { background-color: rgba(91, 140, 255, 0.2); border-color: rgba(91, 140, 255, 0.46); color: #ffffff; }
  /* destructive or sell: red-tinted glass */
  .btn-danger, .btn-rust { background-color: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.38); color: #ff8f8f; }

  @media (hover: hover) {
    .btn:not(.btn-link):not(:disabled):not([aria-disabled='true']):hover {
      transform: scale(1.03);
      -webkit-backdrop-filter: var(--glass-blur-hover); backdrop-filter: var(--glass-blur-hover);
      box-shadow: var(--glass-shadow-hover);
      transition-duration: var(--dur-fast);
    }
    .btn:not(.btn-link):not(:disabled):hover { background-color: var(--glass-hover); border-color: var(--glass-line-hover); }
    .btn.btn-primary:not(:disabled):hover { background-color: var(--glass-primary-hover); border-color: var(--glass-primary-line-hover); }
    .btn.btn-accent:not(:disabled):hover, .btn.btn-green:not(:disabled):hover { background-color: rgba(91, 140, 255, 0.28); border-color: rgba(91, 140, 255, 0.6); }
    .btn.btn-danger:not(:disabled):hover, .btn.btn-rust:not(:disabled):hover { background-color: rgba(255, 107, 107, 0.16); border-color: rgba(255, 107, 107, 0.5); }
  }
  .btn:not(.btn-link):not(:disabled):not([aria-disabled='true']):active { transform: scale(0.98); transition-duration: var(--dur-fast); }

  /* no backdrop-filter: a solid surface keeps the label readable */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .btn:not(.btn-link) { background-color: var(--surface-2); }
    .btn-primary { background-color: #25252b; }
  }

  .btn-sm { padding: 9px 14px; font-size: 12.5px; }
  .btn-xs { padding: 6px 10px; font-size: 12px; }
  .btn-lg { padding: 15px 24px; font-size: 14px; }
  .btn-block { display: flex; width: 100%; }
  .btn-icon { display: inline-grid; place-items: center; flex: none; padding: 0; width: 36px; height: 36px; border-radius: var(--r-input); color: var(--text-2); }
  .btn-icon:hover { background: var(--surface-2); color: var(--text); }

  .btn[aria-busy='true'] { position: relative; color: transparent !important; pointer-events: none; }
  .btn[aria-busy='true']::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid var(--muted); border-top-color: var(--text); animation: vs-spin 0.7s linear infinite;
  }
  .spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--text); animation: vs-spin 0.7s linear infinite; vertical-align: -2px; }

  /* ---------------------------------------------------------- badges, pills, chips */

  .badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 6px 4px 9px; border-radius: var(--r-badge);
    font-family: var(--m); font-size: 10.5px; font-weight: var(--w-medium); line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.2em; white-space: nowrap;
    background: rgba(237, 237, 240, 0.06); color: var(--text-2);
  }
  .badge-lg { font-size: 13px; letter-spacing: 0.24em; padding: 6px 8px 6px 12px; }
  .badge-accent, .badge-green { background: var(--accent-bg); color: var(--accent); }
  .badge-accent-2, .badge-rust { background: var(--accent-2-bg); color: var(--accent-2); }
  .badge-live { background: var(--live-bg); color: var(--live); }
  .badge-faint { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
  .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

  .live-dot { --d: 8px; position: relative; display: inline-block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--live); flex: none; }
  .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: vs-pulse 1.8s var(--ease-out-quart) infinite; }

  .live-pill, .off-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 8px; border-radius: var(--r-badge);
    font-family: var(--m); font-size: 10.5px; font-weight: var(--w-mono); letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase;
  }
  .live-pill { background: rgba(9, 9, 11, 0.82); color: var(--live); box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.32); }
  .live-pill .live-dot { --d: 6px; }
  .off-pill { background: rgba(9, 9, 11, 0.82); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
  .live-pill.xs, .off-pill.xs { font-size: 9.5px; padding: 2px 5px 2px 6px; }
  .live-pill.lg, .off-pill.lg { font-size: 12px; padding: 5px 8px 5px 10px; }

  .tk {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 7px; border-radius: 1.4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
    font-family: var(--m); font-size: 11px; font-weight: var(--w-medium); line-height: 1.35; letter-spacing: 0.02em; color: var(--text); white-space: nowrap;
  }
  .tk.xs { font-size: 10px; padding: 1px 5px; }
  .tk.sm { font-size: 10.5px; padding: 2px 6px; }
  .tk.lg { font-size: 13px; padding: 4px 9px; }
  .tk.xl { font-size: 16px; padding: 6px 11px; font-weight: var(--w-mono); border-radius: 2.2px; }

  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-badge);
    border: 1px solid var(--line); background: transparent; font-size: 12.5px; font-weight: var(--w-medium); color: var(--text-2);
    transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart); white-space: nowrap;
  }
  .chip:hover { color: var(--text); border-color: var(--line-2); }
  .chip.is-on, .chip[aria-pressed='true'] { background: var(--accent-bg); border-color: var(--accent-line); color: var(--text); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  .seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 3.5px; background: var(--surface); max-width: 100%; overflow-x: auto; }
  .seg button, .seg a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 2.2px; font-size: 13px; font-weight: var(--w-semi); color: var(--muted); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart); }
  .seg button:hover, .seg a:hover { color: var(--text); }
  .seg .is-on, .seg [aria-pressed='true'], .seg [aria-selected='true'] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

  /* ---------------------------------------------------------- avatar */

  .av {
    --s: 40px; position: relative; display: inline-grid; place-items: center; flex: none;
    width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--text-2); font-family: var(--f); font-weight: var(--w-semi); font-size: calc(var(--s) * 0.36); letter-spacing: -0.02em; line-height: 1;
  }
  .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
  .av-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--live); overflow: visible; }
  .av-ring img { border-radius: 50%; }
  .av-stack { display: inline-flex; align-items: center; }
  .av-stack .av + .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }

  /* ---------------------------------------------------------- cards */

  .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .card-pad { padding: 28px 32px; }
  .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 32px; }
  .card-head h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; font-weight: var(--w-semi); line-height: 1.3; }
  .card-head p { margin-top: 4px; font-size: 13px; color: var(--muted); }
  .card-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 32px; }
  .card-row + .card-row, .card-head + .card-row, .card-head + .card-body, .card-body + .card-row, .card-row + .card-body { border-top: 1px solid var(--line); }
  .card-row-title { font-size: 14.5px; font-weight: var(--w-semi); color: var(--text); line-height: 1.35; }
  .card-row-sub { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.5; }
  .card-body { padding: 24px 32px; }
  .card-note { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
  .card-inset { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-inset); }
  .card-inset > .card-row { padding: 16px 16px; }
  .card-glass { background: rgba(19, 19, 22, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); }

  /* key/value box (Yieldflare "Illustrative, on a $10,000 deposit") */
  .kv { border: 1px solid var(--line); border-radius: var(--r-inset); background: var(--bg-alt); padding: 18px 16px; }
  .kv .eyebrow { margin-bottom: 10px; }
  .kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; color: var(--text-2); }
  .kv-row > :last-child { font-family: var(--m); color: var(--text); text-align: right; }

  /* ---------------------------------------------------------- stats */

  .stats { display: flex; flex-wrap: wrap; gap: 24px 40px; }
  .stat-v { display: block; font-family: var(--m); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: var(--w-medium); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
  .stat-v.is-lg { font-size: clamp(30px, 3.4vw, 40px); }
  .stat-v.is-accent, .stat-v.is-green { color: var(--accent); }
  .stat-v.is-accent-2, .stat-v.is-rust { color: var(--accent-2); }
  .stat-l { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; }
  .stat-s { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .stat-grid > .stat { background: var(--surface); padding: 22px 24px; }

  /* ---------------------------------------------------------- bars and meters */

  .bar { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
  .bar.sm { height: 6px; }
  .bar.xs { height: 4px; }
  .bar > i { display: block; height: 100%; background: var(--c, var(--accent-deep)); transition: width var(--dur-slow) var(--ease-out-expo); }
  .bar > i + i { box-shadow: -1px 0 0 var(--bg); }
  .c-accent, .c-green { --c: var(--accent-deep); }
  .c-accent-lt, .c-green-lt { --c: var(--accent); }
  .c-accent-2, .c-rust { --c: var(--accent-2); }
  .c-grey { --c: var(--grey-bar); }
  .c-faint { --c: var(--line-2); }

  .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
  .legend i, .dot-c { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent-deep)); margin-right: 8px; vertical-align: 0; flex: none; }
  .legend b { font-weight: var(--w-semi); color: var(--text); }

  /* rows under an allocation bar (Yieldflare "Where the deposit actually sits") */
  .alloc { border-top: 1px solid var(--line); margin-top: 32px; }
  .alloc-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1.3fr) auto auto; align-items: center; gap: 8px 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
  .alloc-row .dot-c { width: 10px; height: 10px; margin: 0; }
  .alloc-name { font-size: 15px; font-weight: var(--w-medium); color: var(--text); }
  .alloc-desc { font-size: 13px; line-height: 1.6; color: var(--text-2); max-width: 44ch; }
  .alloc-meta { font-family: var(--m); font-size: 12px; color: var(--muted); white-space: nowrap; }
  .alloc-val { font-family: var(--m); font-size: 17px; color: var(--text); text-align: right; min-width: 4ch; }

  /* share of an epoch pool, with the per-creator cap marked */
  .share { position: relative; }
  .share-cap { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--text-2); opacity: 0.6; }

  /* campaign epochs, one segment per week */
  .wbar { display: flex; gap: 4px; width: 100%; }
  .wseg { position: relative; flex: 1; height: 4px; border-radius: 0.7px; background: var(--line-2); overflow: hidden; }
  .wseg > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
  .wseg.is-settled > i { background: var(--accent-deep); }
  .wseg.is-review > i { background: var(--accent-2); }
  .wseg.is-live > i { background: var(--accent); }

  /* viewer series chart (components.sparkline) */
  .spark-wrap { position: relative; height: 120px; }
  .spark { width: 100%; height: 100%; overflow: visible; }
  .spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }


  /* ---------------------------------------------------------- hover motion
     Interactive cards lift to 1.02 with a brighter, accent-tinted border and a
     soft shadow. Hover in is fast, hover out a little slower. Nothing inside a
     scroll container scales (steps, table rows), and touch-only devices get
     no hover effects at all. */

  .ccard, .kcard, a.card, .card-hover, .pf-ref, .stat-grid > .stat, .step, .doc-toc a, .tbl tbody td, .alloc-row, .st-rules .st-rule, .pf-row {
    transition:
      transform var(--dur-mid) var(--ease-out-quart), border-color var(--dur-mid) var(--ease-out-quart),
      box-shadow var(--dur-mid) var(--ease-out-quart), background-color var(--dur-mid) var(--ease-out-quart),
      color var(--dur-mid) var(--ease-out-quart);
  }
  @media (hover: hover) {
    .ccard:hover, .kcard:hover, a.card:hover, .card-hover:hover, .pf-ref:hover {
      transform: scale(1.02);
      border-color: rgba(91, 140, 255, 0.34);
      box-shadow: var(--shadow-lift);
      transition-duration: var(--dur-fast);
    }
    .stat-grid > .stat { position: relative; }
    .stat-grid > .stat:hover {
      z-index: 1; transform: scale(1.02); background-color: var(--surface-2);
      box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.34);
      transition-duration: var(--dur-fast);
    }
    /* inside a scroll container: colour only, no scale */
    .step:hover { background-color: rgba(237, 237, 240, 0.025); transition-duration: var(--dur-fast); }
    .step:hover .step-no { color: var(--accent); }
    .step-no { transition: color var(--dur-mid) var(--ease-out-quart); }
    .tbl tbody tr:hover td { background-color: rgba(237, 237, 240, 0.03); transition-duration: var(--dur-fast); }
    .tbl tr.is-me:hover td { background-color: rgba(91, 140, 255, 0.16); }
    .alloc-row:hover, .pf-row:hover { background-color: rgba(237, 237, 240, 0.02); transition-duration: var(--dur-fast); }
    .doc-toc a:hover { border-left-color: var(--accent); transition-duration: var(--dur-fast); }
  }

  /* ---------------------------------------------------------- horizontal steps */

  .steps {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
    border-block: 1px solid var(--line); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { padding: 48px 32px 52px; scroll-snap-align: start; }
  .step + .step { border-left: 1px solid var(--line); }
  .step-no { font-family: var(--m); font-size: 44px; font-weight: var(--w-medium); line-height: 1; letter-spacing: -0.02em; color: var(--faint); }
  .step h3 { margin-top: 72px; font-size: var(--fs-h3); font-weight: var(--w-semi); letter-spacing: -0.005em; line-height: 1.3; }
  .step p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--text-2); max-width: 40ch; }

  /* ---------------------------------------------------------- tables */

  .table-wrap { width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); -webkit-overflow-scrolling: touch; }
  .tbl { width: 100%; min-width: var(--tbl-min, 640px); font-size: 14px; }
  .tbl th {
    padding: 16px 20px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line);
    font-family: var(--f); font-size: 10.5px; font-weight: var(--w-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  }
  .tbl td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text); }
  .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl .r { text-align: right; }
  .tbl .c { text-align: center; }
  .tbl td.num, .tbl td.mono { font-family: var(--m); font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
  .tbl tr.is-link { cursor: pointer; }
  .tbl tr.is-me td { background: var(--accent-bg); }
  .tbl tr.tbl-detail td { background: var(--bg-alt); }
  .tbl .strike { text-decoration: line-through; color: var(--muted); }
  .cell-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .cell-id b { display: block; font-size: 14px; font-weight: var(--w-semi); line-height: 1.3; }
  .cell-id small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
  .cell-rank { font-family: var(--m); color: var(--muted); width: 1%; white-space: nowrap; }
  .tbl-note { margin-top: 14px; font-size: 12px; color: var(--muted); }

  /* ---------------------------------------------------------- FAQ accordion */

  .faq { max-width: 620px; margin-inline: auto; }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 0; list-style: none; }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-q { display: block; margin-top: 8px; font-size: 15px; font-weight: var(--w-semi); color: var(--text); line-height: 1.45; }
  .faq-btn { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text-2); transition: background var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart); }
  .faq-btn::before, .faq-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; border-radius: 0.3px; transition: transform var(--dur-mid) var(--ease-in-out); }
  .faq-btn::after { transform: rotate(90deg); }
  .faq-item > summary:hover .faq-btn { border-color: var(--text-2); color: var(--text); }
  .faq-item[open] .faq-btn { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }
  .faq-item[open] .faq-btn::after { transform: rotate(0deg); }
  .faq-a { padding: 0 52px 30px 0; }
  .faq-lead { font-size: 15px; font-weight: var(--w-medium); line-height: 1.6; color: var(--text); }
  .faq-a p:not(.faq-lead) { margin-top: 16px; font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
  .faq-a .kv { margin-top: 22px; }

  /* ---------------------------------------------------------- forms */

  .field { display: grid; gap: 8px; }
  .field + .field { margin-top: 18px; }
  .label { font-size: 12.5px; font-weight: var(--w-medium); color: var(--text-2); }
  .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .hint.is-error { color: var(--danger); }
  .input, .select, .textarea {
    width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-input);
    background: var(--bg); border: 1px solid var(--line-2); color: var(--text); font-size: 14px;
    transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
  }
  .textarea { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.6; }
  .select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .input::placeholder, .textarea::placeholder { color: var(--faint); }
  .input:hover, .select:hover, .textarea:hover { border-color: #3a3a42; }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 3px rgba(237, 237, 240, 0.08); }
  .input[aria-invalid='true'] { border-color: var(--danger); }
  .input-mono { font-family: var(--m); font-size: 16px; font-variant-numeric: tabular-nums; }
  .input-group { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 10px 0 14px; border-radius: var(--r-input); background: var(--bg); border: 1px solid var(--line-2); transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart); }
  .input-group:focus-within { border-color: var(--text-2); box-shadow: 0 0 0 3px rgba(237, 237, 240, 0.08); }
  .input-group input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; outline: none; font-family: var(--m); font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
  .input-group .input-prefix { font-family: var(--m); color: var(--muted); }
  .check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
  .check input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }

  /* ---------------------------------------------------------- notices */

  .notice { padding: 14px 16px; border-radius: 3.5px; border: 1px solid var(--line); background: var(--bg-alt); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
  .notice b { color: var(--text); }
  .notice-accent, .notice-green { border-color: rgba(91, 140, 255, 0.32); background: var(--accent-bg); }
  .notice-danger, .notice-rust { border-color: rgba(255, 107, 107, 0.34); background: var(--danger-bg); }

  /* ---------------------------------------------------------- empty, error, skeleton */

  .empty { max-width: 500px; margin-inline: auto; padding: 72px 8px; text-align: center; }
  .empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 24px; border-radius: 2.8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
  /* the empty live state: our mark on a small screen, tagged LIVE (grey, because nobody is) */
  .empty-icon:has(.live-mark) { width: 148px; height: 92px; border-radius: 5px; background: var(--bg); }
  .live-mark { position: relative; display: grid; place-items: center; width: 100%; height: 100%; color: var(--text); }
  .live-mark .logo-mark { height: 30px; }
  .live-mark-tag {
    position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px 3px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; line-height: 1; color: var(--muted);
  }
  .live-mark-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
  .empty-icon .ico { width: 17px; height: 17px; }
  .empty-title { font-size: 20px; line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: var(--w-head); }
  .empty-body { margin: 14px auto 0; max-width: 44ch; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
  .empty-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .empty-fine { margin: 32px auto 0; max-width: 42ch; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
  .empty-page { padding-block: clamp(96px, 14vw, 160px); }
  .empty-page .empty-title { font-size: clamp(24px, 3vw, 32px); }
  .empty-compact { padding: 44px 16px; }
  .empty-compact .empty-icon { margin-bottom: 18px; }
  .empty-compact .empty-title { font-size: 15px; }
  .empty-compact .empty-body { font-size: 13.5px; margin-top: 8px; }
  .empty-compact .empty-actions { margin-top: 20px; }
  .empty.is-error .empty-icon { color: var(--danger); }

  .sk {
    display: block; border-radius: 2.2px;
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%);
    background-size: 220% 100%; animation: vs-shimmer 1.5s linear infinite;
  }
  .sk-line { height: 12px; }
  .sk-line + .sk-line { margin-top: 10px; }
  .sk-title { height: 28px; width: 60%; border-radius: 2.2px; }
  .sk-circle { border-radius: 50%; }
  .sk-block { height: 120px; border-radius: var(--r-card); }
  .sk-card { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
  .sk-card .sk-media { aspect-ratio: 16 / 9; border-radius: 0; }
  .sk-card .sk-body { padding: 16px 18px 20px; }
  .sk-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .sk-row:last-child { border-bottom: 0; }

  /* ---------------------------------------------------------- creator card */

  .ccard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .ccard-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
  .ccard-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ccard-thumb.is-off { display: grid; place-items: center; background: var(--bg-alt); }
  .ccard-top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ccard-bottom { position: absolute; left: 12px; bottom: 12px; }
  .ccard-viewers { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-badge); background: rgba(9, 9, 11, 0.82); font-family: var(--m); font-size: 11.5px; color: var(--text); }
  .ccard-viewers small { font-family: var(--f); font-size: 11px; color: var(--muted); }
  .ccard-rank { padding: 3px 7px; border-radius: var(--r-badge); background: rgba(9, 9, 11, 0.82); font-family: var(--m); font-size: 11px; color: var(--text); }
  .ccard-id { display: flex; gap: 12px; padding: 16px 18px; min-width: 0; }
  .ccard-meta { min-width: 0; }
  .ccard-name { font-size: 15px; font-weight: var(--w-semi); line-height: 1.3; color: var(--text); }
  .ccard-title { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ccard-cat { margin-top: 2px; font-size: 12px; color: var(--muted); }
  .ccard-earn { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
  .ccard-earn .ce-l { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ccard-earn .ce-r { font-family: var(--m); color: var(--text); white-space: nowrap; }
  .ccard-earn .ce-r small { font-family: var(--f); color: var(--muted); margin-left: 4px; }

  /* ---------------------------------------------------------- campaign card */

  .kcard { display: flex; flex-direction: column; }
  .kcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 22px; }
  .kcard-ticker { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  .kcard-ticker b { font-family: var(--m); font-size: 34px; font-weight: var(--w-mono); line-height: 1; letter-spacing: -0.03em; color: var(--text); }
  .kcard-ticker span { font-family: var(--m); font-size: 13px; color: var(--text-2); }
  .kcard-name { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
  .kcard-name:hover { color: var(--text); }
  .kcard-pool { text-align: right; }
  .kcard-pool b { display: block; font-family: var(--m); font-size: 20px; font-weight: var(--w-medium); color: var(--accent); line-height: 1.2; white-space: nowrap; }
  .kcard-pool small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
  .kcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .kcard-stats > div { padding: 16px 28px; }
  .kcard-stats > div + div { border-left: 1px solid var(--line); }
  .kcard-stats b { display: block; font-family: var(--m); font-size: 15px; font-weight: var(--w-medium); color: var(--text); line-height: 1.3; white-space: nowrap; }
  .kcard-stats span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
  .kcard-weeks { padding: 16px 28px; border-top: 1px solid var(--line); }
  .kcard-weeks .wbar { margin-top: 10px; }
  .kcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; border-top: 1px solid var(--line); }
  .kcard-tag { font-size: 13px; line-height: 1.55; color: var(--text-2); }

  /* ---------------------------------------------------------- activity feed */

  .act-list { display: grid; }
  .act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .act:last-child { border-bottom: 0; }
  .act-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
  .act-icon .ico { width: 14px; height: 14px; }
  .act-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
  .act-text b { color: var(--text); font-weight: var(--w-semi); }
  .act-text .num { color: var(--text); }
  .act-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 12px; color: var(--muted); }
  .act-sub a { font-family: var(--m); color: var(--text-2); }
  .act-sub a:hover { color: var(--text); }
  .act time { font-family: var(--m); font-size: 11.5px; color: var(--faint); white-space: nowrap; }
  .act.is-new { animation: vs-in var(--dur-slow) var(--ease-out-expo); }

  /* ---------------------------------------------------------- hero */

  /* Full-bleed film behind a single centred column. The film is bright (white
     mist and water), so a neutral dark scrim sits over it: strongest at the top
     under the nav and at the bottom where it melts into --bg. */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-items: center;
    min-height: clamp(640px, 100svh, 1080px);
    margin-top: calc(-1 * var(--nav-h));
    padding-block: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) clamp(72px, 12vh, 128px);
    background-color: var(--bg);
  }
  .hero-media { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }
  .hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* one flat, even scrim: no haze at the top or smoky fade at the bottom (user: remove the blur).
     0.58 keeps white body text above 4.5:1 over the brightest frame of the film. */
  .hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.58); }
  .hero + .band { border-top-color: transparent; }
  .hero-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-in h1 { margin-top: 24px; max-width: none; }
  .hero-lede { margin-top: 26px; max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--text); }
  .hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }

  /* ---------------------------------------------------------- docs */

  .doc-grid { display: grid; grid-template-columns: minmax(0, var(--w-doc)) minmax(0, 1fr); gap: 64px; padding-left: clamp(0px, 11.6%, 128px); }
  .doc-aside { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; padding-top: clamp(56px, 8vw, 104px); }
  .doc { max-width: var(--w-doc); padding-block: clamp(56px, 8vw, 104px) 120px; }
  .doc-head h1 { margin-top: 16px; font-size: var(--fs-page); }
  .doc-head .lede { margin-top: 28px; font-size: 15.5px; line-height: 1.75; }
  .doc-sec { margin-top: 72px; scroll-margin-top: calc(var(--nav-h) + 32px); }
  .doc-no { display: block; font-family: var(--f); font-size: 10.5px; letter-spacing: var(--track-eyebrow); color: var(--muted); }
  .doc h2 { margin-top: 12px; font-size: var(--fs-doc-h2); }
  .doc h3 { margin-top: 36px; font-size: 14px; line-height: 1.35; }
  .doc p, .doc li { font-size: 15px; line-height: 1.75; color: var(--text-2); }
  .doc p { margin-top: 18px; }
  .doc h2 + p { margin-top: 24px; }
  .doc ul, .doc ol { margin-top: 16px; padding-left: 20px; }
  .doc li + li { margin-top: 8px; }
  .doc li::marker { color: var(--faint); }
  .doc a:not(.btn) { color: var(--text); }
  .doc a:not(.btn):hover { color: var(--accent); }
  .doc code { padding: 2px 6px; border-radius: 1.4px; background: var(--surface-2); color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
  .doc .kv, .doc .notice, .doc .table-wrap { margin-top: 24px; }
  .doc-toc { display: grid; gap: 2px; border-left: 1px solid var(--line); }
  .doc-toc a { display: block; padding: 5px 0 5px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13px; color: var(--muted); transition: color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart); }
  .doc-toc a:hover { color: var(--text); }
  .doc-toc a.is-active { color: var(--text); border-left-color: var(--accent); }

  /* ---------------------------------------------------------- modal */

  .modal-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
  .modal-backdrop { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: vs-fade var(--dur-fast) var(--ease-out-quart); }
  .modal {
    position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 28px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
    animation: vs-pop var(--dur-mid) var(--ease-out-expo);
  }
  .modal-wide { width: min(720px, 100%); }
  .modal-narrow { width: min(380px, 100%); }
  .modal-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-input); color: var(--muted); }
  .modal-x:hover { background: var(--surface-2); color: var(--text); }
  .modal-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 2.8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
  .modal-title { padding-right: 36px; font-size: 18px; line-height: 1.25; }
  .modal-body { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
  .modal-body > * + * { margin-top: 14px; }
  .modal-lead { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
  .modal-foot { margin-top: 24px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
  .modal-foot .fine { margin-right: auto; }

  /* ---------------------------------------------------------- toasts */

  .toast-root { position: fixed; right: 20px; bottom: 20px; z-index: 130; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
  .toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; max-width: 380px;
    padding: 12px 14px 12px 14px; border-radius: 3.5px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop);
    font-size: 13.5px; line-height: 1.5; color: var(--text); animation: vs-in var(--dur-mid) var(--ease-out-expo);
  }
  .toast .dot-c { margin: 6px 0 0; }
  .toast a { color: var(--text); }
  .toast-x { margin-left: 4px; color: var(--muted); font-size: 16px; line-height: 1; }
  .toast-x:hover { color: var(--text); }
  .toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart); }
}

/* ================================================================ motion
   Reveal states for src/ui/motion.js. Unlayered on purpose, so a pre-reveal
   state always wins over component and page rules. None of these classes are
   in the HTML: motion.js adds them, so content is never hidden without JS. */

.rv { opacity: 0; transform: translate3d(0, 20px, 0); }
.rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}

/* headline words: a clip box per word and an inner span that rises into it.
   clip-path (not overflow) keeps the baseline, and the box is padded so
   descenders and accents are never cut. */
.tw { display: inline-block; clip-path: inset(-0.18em -0.12em -0.28em -0.12em); }
.tw > span { display: inline-block; }
.tw-pre .tw > span { opacity: 0; transform: translate3d(0, 105%, 0); }
.tw-pre.tw-in .tw > span {
  opacity: 1; transform: none;
  transition: transform var(--dur-text) var(--ease-out-expo), opacity var(--dur-text) var(--ease-out-expo);
  transition-delay: var(--d, 0ms);
}

/* SVG strokes draw themselves; assembled parts settle into place */
.svg-pre [data-assemble] > *, .svg-pre[data-assemble] > * { opacity: 0; transform: translate3d(var(--ax, 0), var(--ay, 3px), 0) rotate(var(--ar, 0deg)); transform-box: fill-box; transform-origin: center; }
.svg-in [data-assemble] > *, .svg-in[data-assemble] > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--d, 0ms);
}
@keyframes vs-drift {
  from { transform: translate3d(0, calc(var(--drift, 3px) * -1), 0) rotate(calc(var(--drift-r, 0deg) * -1)); }
  to { transform: translate3d(0, var(--drift, 3px), 0) rotate(var(--drift-r, 0deg)); }
}
[data-drift].is-drifting { animation: vs-drift var(--drift-dur, 8s) var(--ease-in-out) infinite alternate; transform-box: fill-box; transform-origin: center; }
[data-drift].is-drifting.is-paused { animation-play-state: paused; }

@media print {
  .rv, .tw-pre .tw > span { opacity: 1 !important; transform: none !important; }
}

@keyframes vs-spin { to { transform: rotate(360deg); } }
@keyframes vs-pulse { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes vs-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes vs-fade { from { opacity: 0; } }
@keyframes vs-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes vs-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .live-dot::after { display: none; }
  .rv, .tw-pre .tw > span, .svg-pre [data-assemble] > * { opacity: 1 !important; transform: none !important; }
  [data-drift] { animation: none !important; }
}

/* ============================================================= utilities */

@layer utilities {
  .muted { color: var(--muted); }
  .faint { color: var(--faint); }
  .text { color: var(--text); }
  .text-2 { color: var(--text-2); }
  .accent, .green, .up { color: var(--accent); }
  .accent-2, .rust { color: var(--accent-2); }
  .danger, .down { color: var(--danger); }
  .live-text { color: var(--live); }
  .center { text-align: center; }
  .right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .break { overflow-wrap: anywhere; }
  .grow { flex: 1 1 auto; min-width: 0; }
  .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .stack { display: grid; gap: 12px; }
  .stack-lg { display: grid; gap: 24px; }
  .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
  .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
  .w-full { width: 100%; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ============================================================ responsive */

@layer components {
  /* Nav: the full CA chip only fits beside centred links on wide bars. Below these widths the chip
     keeps CA and the copy icon; the address stays in its title and aria-label. Signed in needs more room. */
  @media (max-width: 1180px) {
    .nav-r:has(.acct) .nav-ca-v { display: none; }
  }

  @media (max-width: 1100px) {
    .doc-grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
    .doc-grid .doc { margin-inline: auto; }
    .doc-aside { display: none; }
  }

  @media (max-width: 1060px) {
    .nav-r .nav-ca-v { display: none; }
  }

  @media (max-width: 1024px) {
    :root { --split-col: 188px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-links { gap: 20px; }
    .alloc-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
    .alloc-desc { grid-column: 2 / -1; grid-row: 2; }
  }

  /* Menu sheet from 960px, not 860px: below it the logo, Live now badge, links, CA, X and the account pill
     cannot all fit around centred links without overlapping. */
  @media (max-width: 960px) {
    .nav-in { grid-template-columns: 1fr auto; }
    .nav-links { display: none; }
    .nav-toggle { display: grid; }
    .nav-r .nav-signin-label-long { display: none; }
    .nav-r .nav-ca, .nav-r .nav-x { display: none; } /* phones and tablets: CA and X live in the menu sheet */
  }

  @media (max-width: 860px) {
    .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 768px) {
    :root { --gutter: 20px; }
    .hero { min-height: clamp(560px, 92svh, 900px); padding-block: calc(var(--nav-h) + 56px) 88px; }
    .hero-lede { font-size: 15px; }
    .sh-split { grid-template-columns: minmax(0, 1fr); }
    .sh-split > .eyebrow { padding: 0; }
    .sh-split h2 { margin-top: 14px; }
    .sh-split .sh-aside { grid-column: 1; }
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-auto-columns: 84%; }
    .step { padding: 36px 24px 40px; }
    .step h3 { margin-top: 48px; }
    .card-pad, .card-head, .card-row, .card-body { padding-inline: 20px; }
    .kcard-head { padding-inline: 20px; }
    .kcard-stats > div, .kcard-weeks, .kcard-foot { padding-inline: 20px; }
    .tbl th, .tbl td { padding-inline: 16px; }
    .faq-a { padding-right: 0; }
    .modal { padding: 24px 20px; }
  }

  @media (max-width: 480px) {
    :root { --gutter: 16px; }
    .kcard-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kcard-stats > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
    .kcard-ticker b { font-size: 28px; }
    .alloc-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
    .alloc-meta { display: none; }
    .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
    .empty-title { font-size: 20px; }
    .toast-root { left: 16px; right: 16px; bottom: 16px; justify-items: stretch; }
    .toast { max-width: none; }
    .acct-menu { position: fixed; left: 16px; right: 16px; top: calc(var(--nav-h) + 8px); width: auto; }
    .stat-v { font-size: 22px; }
  }
}

@layer utilities {
  @media (max-width: 768px) { .hide-sm { display: none !important; } }
  @media (min-width: 769px) { .show-sm { display: none !important; } }
}