/* ============================================================================
   CHARTVEIL — marketing site
   Built on the REDLINE design system. Tokens mirror the platform's own
   redline-tokens.css so the site and the app are visibly one product.

   THE THREE-ROLE RULE (carried over from the app):
     red   #E5352F — brand identity AND "down". Never an active state.
     amber #FFB020 — every active / selected / focused state.
     blue  ramp    — liquidity, and only liquidity.
   ========================================================================== */

/* ---- fonts (self-hosted from the platform's own assets/fonts) ------------- */
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/ChakraPetch-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('assets/fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Variable.ttf') format('truetype');font-weight:100 800;font-display:swap}

:root{
  /* ---------- SURFACES — four steps, never pure black ---------------------- */
  --surface-base:#0A0A0A;
  --surface-panel:#141414;
  --surface-raised:#1C1C1C;
  --surface-input:#202020;
  --surface-overlay:rgba(0,0,0,.72);

  /* ---------- BORDERS ------------------------------------------------------ */
  --line:#262626;
  --line-strong:#333333;
  --line-grid:#1A1A1A;

  /* ---------- TEXT --------------------------------------------------------- */
  --text-primary:#E8E8E8;
  --text-secondary:#A0A0A0;
  --text-muted:#6E6E6E;
  --text-on-brand:#FFF0F0;
  --text-on-select:#2B1A00;

  /* ---------- BRAND — one red -------------------------------------------- */
  --brand:#E5352F;
  --brand-hover:#F04B45;
  --brand-press:#C22823;
  --brand-dim:#8A2222;
  --brand-wash:#1E0C0C;

  /* ---------- DIRECTIONAL ------------------------------------------------- */
  --up:#22C55E;
  --up-dim:#15803D;
  --up-wash:#0B1A11;
  --down:#E5352F;
  --down-dim:#8A2222;
  --down-wash:#1E0C0C;

  /* ---------- SELECTION & STATE ------------------------------------------- */
  --select:#FFB020;
  --select-dim:#8A5E0F;
  --select-wash:#1F1608;
  --focus-ring:0 0 0 2px #0A0A0A,0 0 0 4px #FFB020;

  /* ---------- STATUS ------------------------------------------------------- */
  --warn:#FF8C42;
  --info:#2680E3;
  --connected:#22C55E;
  --disconnected:#6E6E6E;

  /* ---------- LIQUIDITY RAMP ---------------------------------------------- */
  --liq-1:#0F2A4A;
  --liq-2:#16437A;
  --liq-3:#1D5FAD;
  --liq-4:#2680E3;
  --liq-5:#6FB3FF;

  /* ---------- TYPE --------------------------------------------------------- */
  --font-display:'Chakra Petch',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-data:'JetBrains Mono',ui-monospace,monospace;

  --display-xl:clamp(38px,6.4vw,72px);   /* site hero  */
  --display-lg:clamp(26px,3.4vw,44px);   /* section    */
  --display-md:19px;                     /* panel title, wordmark */
  --display-sm:13px;                     /* button     */
  --display-xs:11px;                     /* eyebrow    */
  --display-track:.06em;
  --display-track-tight:.02em;
  --display-track-wide:.14em;

  --body-lg:17px;
  --body-md:15px;
  --body-sm:13px;

  --data-lg:18px;
  --data-md:13px;
  --data-sm:11px;

  /* ---------- SPACE — marketing site uses 32–160 -------------------------- */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px; --sp-6:32px;  --sp-8:48px;  --sp-10:64px;
  --sp-12:96px;--sp-16:128px;--sp-20:160px;

  /* ---------- RADIUS — tight; Chakra Petch is a squared face -------------- */
  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-pill:999px;

  /* ---------- MOTION ------------------------------------------------------- */
  --dur-instant:60ms;
  --dur-fast:140ms;
  --dur-base:240ms;
  --ease:cubic-bezier(0.2,0,0,1);

  --maxw:1180px;
  --pad:clamp(20px,5vw,32px);
  --sect:clamp(var(--sp-12),11vw,var(--sp-20));
}

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface-base);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--body-lg);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
::selection{background:var(--brand);color:var(--text-on-brand)}

/* Display type: ALWAYS uppercase, ALWAYS tracked, never below 11px. */
h1,h2,h3,h4,h5{
  margin:0;font-family:var(--font-display);font-weight:700;line-height:1.06;
  text-transform:uppercase;letter-spacing:var(--display-track);
}
h1{font-size:var(--display-xl);letter-spacing:var(--display-track-tight)}
h2{font-size:var(--display-lg)}
h3{font-size:var(--display-md)}

/* Data: JetBrains Mono, every number, always. */
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums}

/* AMBIENT LIGHT
   Layered blooms plus a vignette, rather than one flat wash. Two offset
   sources read as light in a room; one centred source reads as a gradient.
   The vignette is what stops the blooms looking like a sticker — it pulls the
   corners down so the middle has something to be brighter than.
   All of it is fixed, behind everything, and pointer-events:none. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1150px 780px at 20% -12%, rgba(229,53,47,.15), transparent 58%),
    radial-gradient(820px 620px at 97% 14%, rgba(229,53,47,.06), transparent 62%),
    radial-gradient(120% 96% at 50% 38%, transparent 44%, rgba(0,0,0,.58) 100%);
}
main,header,footer{position:relative;z-index:1}

/* ---- layout --------------------------------------------------------------- */
html{scroll-padding-top:calc(var(--sbar-h,0px) + 84px)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:calc(var(--sect)*.62)}

.eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);
}
.eyebrow::before{
  content:'';width:20px;height:2px;background:var(--brand);
  box-shadow:0 0 10px rgba(229,53,47,.9);
}
.eyebrow--center{justify-content:center}

.lede{
  color:var(--text-secondary);font-size:var(--body-lg);max-width:62ch;margin-top:var(--sp-5);
}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:46px;padding:0 var(--sp-6);border-radius:var(--r-md);border:1px solid transparent;
  font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
/* the primary button carries its own light — the glow is the brand colour bled
   out below it, not a generic drop shadow */
.btn--primary{
  background:var(--brand);color:var(--text-on-brand);
  box-shadow:0 6px 22px -10px rgba(229,53,47,.9);
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn--primary:hover{
  background:var(--brand-hover);
  box-shadow:0 0 0 1px rgba(229,53,47,.45),0 10px 34px -8px rgba(229,53,47,.95);
  transform:translateY(-1px);
}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease)}
.btn--ghost:hover{box-shadow:0 0 22px -8px rgba(255,176,32,.6)}
.btn--primary:active{background:var(--brand-press)}
.btn--ghost{border-color:var(--line-strong);color:var(--text-primary);background:transparent}
.btn--ghost:hover{border-color:var(--select);color:var(--select)}
.btn--sm{height:36px;padding:0 var(--sp-4);font-size:var(--display-xs)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---- nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:var(--sbar-h,0px);z-index:60;border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.nav.is-stuck{
  background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line);
  box-shadow:0 12px 40px -28px rgba(229,53,47,.9);
}
.nav__in{display:flex;align-items:center;gap:var(--sp-8);height:68px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative}

/* the wordmark: CHART in text-primary, VEIL in brand red — as on the app header */
.logo{display:flex;align-items:center;gap:var(--sp-3)}
.logo__mark{width:28px;height:28px;flex:none}
.logo__text{
  font-family:var(--font-display);font-weight:700;font-size:var(--display-md);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.logo__text b{font-weight:700;color:var(--text-primary)}
.logo__text i{font-style:normal;color:var(--brand)}

.nav__links{display:flex;align-items:center;gap:var(--sp-6);margin-left:auto}
.nav__links a{
  font-family:var(--font-display);font-weight:500;font-size:var(--display-sm);
  letter-spacing:var(--display-track);text-transform:uppercase;color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease);
}
.nav__links a:hover{color:var(--select)}
/* current page — amber owns active states, same as everywhere else */
.nav__links a.is-on{color:var(--select)}
.nav__links a.btn{color:var(--text-on-brand)}
.nav__links a.btn--ghost{color:var(--text-primary)}
.nav__burger{display:none;margin-left:auto;background:none;border:0;color:var(--text-primary);font-size:22px;cursor:pointer;padding:6px;line-height:1}

/* the action pair sits together and stacks on small screens */
.nav__cta{display:flex;align-items:center;gap:var(--sp-3)}
.nav__cta .btn.is-on{border-color:var(--select);color:var(--select)}

/* ---- nav dropdowns --------------------------------------------------------
   Opened on hover for pointers and on click for touch, so a tap does not have
   to guess. The trigger is a <button>, not an <a>: it does not navigate, and
   the panel carries a "See all" link for the section landing page. */
.nav__item{position:relative;display:flex;align-items:center}
.nav__trigger{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--display-sm);
  letter-spacing:var(--display-track);text-transform:uppercase;color:var(--text-secondary);
  display:inline-flex;align-items:center;gap:7px;
  transition:color var(--dur-fast) var(--ease);
}
.nav__trigger::after{
  content:'';width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-fast) var(--ease);
}
.nav__trigger:hover,.nav__trigger.is-on,.nav__item.is-open .nav__trigger{color:var(--select)}
.nav__item.is-open .nav__trigger::after{transform:rotate(-135deg) translateY(1px)}
.nav__trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.nav__menu{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  min-width:236px;padding:var(--sp-4);z-index:70;display:none;
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 20px 46px rgba(0,0,0,.6);
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.nav__item::after{content:'';position:absolute;top:100%;left:0;right:0;height:20px;display:none}
.nav__item:hover::after{display:block}
.nav__item.is-open .nav__menu{display:block}
.nav__menu--wide{min-width:472px}
.nav__item.is-open .nav__menu--wide{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-5)}
.nav__menu h6{
  margin:0 0 var(--sp-2) var(--sp-3);font-family:var(--font-display);font-weight:600;font-size:10px;
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-muted);
}
.nav__menu a{
  display:flex;align-items:center;gap:var(--sp-2);padding:7px var(--sp-3);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:var(--body-sm);font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav__menu a:hover{background:var(--surface-panel);color:var(--text-primary)}
.nav__soon{
  margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:9px;
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--select);
  border:1px solid var(--select-dim);padding:1px 5px;
}
.nav__all{
  grid-column:1/-1;margin-top:var(--sp-2);padding-top:var(--sp-3);
  border-top:1px solid var(--line);color:var(--select)!important;
}
.nav__all:hover{background:transparent!important}

@media (hover:hover) and (min-width:901px){
  .nav__item:hover .nav__menu{display:block}
  .nav__item:hover .nav__menu--wide{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-5)}
}

/* ---- hero ----------------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(var(--sp-8),8vw,var(--sp-12));padding-bottom:var(--sect);overflow:hidden}
/* a blurred orb behind the headline — the light source the vignette implies */
.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-22%;width:min(760px,88vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(229,53,47,.26),rgba(229,53,47,.05) 46%,transparent 70%);
  filter:blur(90px);
  animation:orb 22s var(--ease) infinite alternate;
}
@keyframes orb{
  from{transform:translateX(-50%) scale(1);opacity:.85}
  to{transform:translateX(-42%) scale(1.14);opacity:1}
}
/* the sub-page orb is not centre-anchored, so it drifts on its own keyframes */
@keyframes orb-sub{
  from{transform:scale(1);opacity:.8}
  to{transform:translateX(9%) scale(1.16);opacity:1}
}
.hero__grid{
  position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--line-grid) 1px,transparent 1px),linear-gradient(90deg,var(--line-grid) 1px,transparent 1px);
  background-size:56px 56px;
  animation:gridpan 34s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 76% 56% at 50% 32%,#000 28%,transparent 100%);
          mask-image:radial-gradient(ellipse 76% 56% at 50% 32%,#000 28%,transparent 100%);
}
@keyframes gridpan{from{background-position:0 0}to{background-position:56px 56px}}

.hero h1{max-width:16ch;position:relative}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero__sub{color:var(--text-secondary);font-size:var(--body-lg);max-width:56ch;margin-top:var(--sp-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero__note{
  margin-top:var(--sp-5);font-family:var(--font-data);font-size:var(--data-sm);
  color:var(--text-muted);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);
  text-transform:uppercase;letter-spacing:.08em;
}
.hero__note span{display:flex;align-items:center;gap:var(--sp-2)}
.dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--connected);flex:none}
.dot--live{animation:pulse 2s var(--ease) infinite;box-shadow:0 0 8px rgba(34,197,94,.9)}
/* every status dot is lit, not just the live one — an unlit dot next to a lit
   one reads as broken rather than as a different kind of fact */
.dot--info{background:var(--info);box-shadow:0 0 8px rgba(38,128,227,.95)}
.dot--muted{background:var(--text-muted);box-shadow:0 0 8px rgba(160,160,160,.55)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- app frame ------------------------------------------------------------ */
.frame{
  position:relative;margin-top:clamp(var(--sp-8),6vw,var(--sp-10));
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-panel);overflow:hidden;
  box-shadow:0 0 0 1px rgba(229,53,47,.06),0 40px 90px -50px rgba(229,53,47,.5),0 30px 70px -40px rgba(0,0,0,.9);
}
/* a slow sheen along the top edge — the window looks powered rather than printed */
.frame__bar::after{
  content:'';position:absolute;left:0;top:0;height:1px;width:36%;
  background:linear-gradient(90deg,transparent,rgba(229,53,47,.85),transparent);
  animation:sheen 7s var(--ease) infinite;
}
@keyframes sheen{
  0%{transform:translateX(-100%);opacity:0}
  12%{opacity:1}
  60%{opacity:1}
  100%{transform:translateX(320%);opacity:0}
}
.frame__bar{position:relative}
/* title bar: identity left, window controls right — like the real window */
.frame__bar{
  display:flex;align-items:center;gap:var(--sp-2);height:38px;padding:0 var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-panel);
}
.frame__id{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.frame__logo{width:16px;height:16px;flex:none}
.frame__brand{
  font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
}
.frame__brand b{font-weight:700;color:var(--text-primary)}
.frame__brand i{font-style:normal;color:var(--brand)}
.frame__title{
  font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* minimize · maximize · close — green, amber, red */
.frame__win{display:flex;align-items:center;gap:7px;margin-left:auto;flex:none}
.win{
  width:9px;height:9px;border-radius:var(--r-pill);display:block;
  transition:filter var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  filter:saturate(.75) brightness(.85);
}
.win--min{background:var(--up)}
.win--max{background:var(--select)}
.win--close{background:var(--brand)}
.frame:hover .win{filter:none}
.win:hover{filter:brightness(1.15);box-shadow:0 0 7px currentColor}
.win--min:hover{color:var(--up)}
.win--max:hover{color:var(--select)}
.win--close:hover{color:var(--brand)}

/* status bar: feed state bottom-left, ET clock + session phase bottom-right */
.frame__foot{
  display:flex;align-items:center;gap:var(--sp-4);height:30px;padding:0 var(--sp-3);
  border-top:1px solid var(--line);background:var(--surface-panel);
  font-family:var(--font-data);font-size:var(--data-sm);
}
.frame__status{display:flex;align-items:center;gap:var(--sp-2);color:var(--connected);letter-spacing:.06em}
.frame__clock{margin-left:auto;color:var(--text-muted);letter-spacing:.06em;white-space:nowrap}
.frame__body{position:relative;aspect-ratio:16/9;background:var(--surface-base)}
.frame__body canvas{width:100%;height:100%}
.frame__body img,.frame__body video{width:100%;height:100%;object-fit:cover}
.frame__ph{
  position:absolute;left:50%;bottom:var(--sp-3);transform:translateX(-50%);
  font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);
  background:rgba(10,10,10,.85);border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-sm);
}
.frame--sm .frame__body{aspect-ratio:16/10}

/* ---- hero carousel ---------------------------------------------------------
   Four generated previews behind one frame. Only the active slide is laid out,
   so the inactive canvases measure 0x0 and cannot be drawn until shown — the
   JS draws each one the first time it becomes visible, same as the feature
   scroller does. */
.stage__wrap{position:relative;margin-top:clamp(var(--sp-8),6vw,var(--sp-10))}
.stage__wrap .frame{margin-top:0}
.stage{position:relative;width:100%;height:100%}
.stage__slide{display:none;position:absolute;inset:0}
.stage__slide.is-active{display:block}
.stage__slide canvas{width:100%;height:100%}

.stage__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(10,10,10,.82);border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.stage__arrow::before{
  content:'';position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-top:2px solid var(--text-primary);border-right:2px solid var(--text-primary);
}
.stage__arrow--next::before{transform:translate(-65%,-50%) rotate(45deg)}
.stage__arrow--prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.stage__arrow:hover{background:var(--surface-raised);border-color:var(--select)}
.stage__arrow:hover::before{border-color:var(--select)}
.stage__arrow:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.stage__arrow--prev{left:14px}
.stage__arrow--next{right:14px}
/* once the viewport is wide enough, move them off the chart entirely */
@media (min-width:1320px){
  .stage__arrow--prev{left:-62px}
  .stage__arrow--next{right:-62px}
}

.stage__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);margin-top:var(--sp-5);flex-wrap:wrap}
.stage__name{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-md);
  letter-spacing:var(--display-track);text-transform:uppercase;
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
}
.stage__name em{
  font-style:normal;font-family:var(--font-data);font-size:var(--data-md);
  letter-spacing:.06em;text-transform:none;color:var(--text-muted);font-weight:400;
}
.stage__dots{display:flex;gap:var(--sp-2);align-items:center}
.stage__dot{
  width:26px;height:4px;padding:0;border:0;cursor:pointer;background:var(--line-strong);
  transition:background var(--dur-fast) var(--ease),width var(--dur-base) var(--ease);
}
.stage__dot:hover{background:var(--text-muted)}
.stage__dot.is-active{background:var(--select);width:38px}
.stage__dot:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@media (max-width:600px){
  .stage__arrow{width:38px;height:38px}
  .stage__arrow--prev{left:8px}
  .stage__arrow--next{right:8px}
  .stage__meta{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}

/* ---- trust strip — a running tape, not a row of labels ---------------------
   Five static grey words sitting under a live heatmap read as dead space. The
   strip runs like an exchange tape instead, and every claim carries its own
   mark: the feed pulses because it is the one thing that is live right now,
   the rest are keyed to the tool they belong to. It parks on hover so a claim
   can actually be read, and holds still for prefers-reduced-motion.          */
.trust{position:relative;border-block:1px solid var(--line);background:var(--surface-panel);overflow:hidden}
/* a hairline of brand across the seam — the strip should not open on grey */
.trust::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:.7;
  background:linear-gradient(90deg,transparent,var(--brand-dim) 26%,var(--brand) 50%,var(--brand-dim) 74%,transparent);
}
/* the ends dissolve rather than hard-cutting a word in half */
.trust__tape{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.trust__track{display:flex;width:max-content;animation:trust-run 46s linear infinite}
.trust:hover .trust__track,.trust:focus-within .trust__track{animation-play-state:paused}
/* Each set carries its OWN trailing gap, so the two are exactly equal in width
   and the -50% wrap lands seam-free. A gap on the track instead would leave a
   visible stutter every lap. */
.trust__set{
  display:flex;align-items:center;gap:var(--sp-8);list-style:none;
  margin:0;padding:var(--sp-5) 0;padding-inline-end:var(--sp-8);
}
.trust__item{
  --mark:var(--text-muted);
  position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  font-family:var(--font-display);font-weight:500;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-secondary);
  transition:color var(--dur-base) var(--ease);
}
/* a hairline between claims, half a gap out, so the tape reads as one strip */
.trust__item::after{
  content:'';position:absolute;right:calc(var(--sp-8) / -2);top:50%;
  transform:translateY(-50%);width:1px;height:11px;background:var(--line-strong);
}
.trust__item:hover{color:var(--text-primary)}
.trust__ico{width:13px;height:13px;flex:none;color:var(--mark);overflow:visible}
.trust__ico *{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.trust__ico .is-solid{fill:currentColor;stroke:none}
.trust__item:hover .trust__ico{filter:drop-shadow(0 0 5px currentColor)}
.trust__item[data-mark="live"]{--mark:var(--connected)}
.trust__item[data-mark="flow"]{--mark:var(--info)}
.trust__item[data-mark="prop"]{--mark:var(--select)}
.trust__item[data-mark="tick"]{--mark:#A855F7}   /* the ask violet the tools use */
.trust__item[data-mark="os"]{--mark:var(--text-secondary)}
.trust__ping{transform-origin:6px 6px;animation:trust-ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes trust-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes trust-ping{0%{transform:scale(.55);opacity:.85}70%,100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .trust__track{animation:none;width:100%}
  .trust__set{flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-8);padding-inline-end:0}
  .trust__set + .trust__set{display:none}
  .trust__ping{animation:none;opacity:.45;transform:scale(1)}
}

/* ---- sticky feature scroller --------------------------------------------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(var(--sp-6),5vw,var(--sp-10));align-items:start}
/* the trailing pad is travel room: without it the sticky panel runs out of
   container before the last feature and rides back up the screen */
.feat__list{display:flex;flex-direction:column;gap:clamp(var(--sp-10),9vw,var(--sp-16));padding-bottom:clamp(64px,13vh,160px)}
/* amber owns the active state — never red */
.feat__item{opacity:.3;border-left:2px solid transparent;padding-left:var(--sp-5);transition:opacity var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.feat__item.is-active{opacity:1;border-left-color:var(--select)}
.feat__item h3{margin-bottom:var(--sp-3)}
.feat__item p{color:var(--text-secondary);font-size:var(--body-md)}
.feat__num{
  font-family:var(--font-data);font-size:var(--data-sm);color:var(--brand);
  letter-spacing:.12em;margin-bottom:var(--sp-3);text-transform:uppercase;
}
.feat__bullets{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:flex;flex-direction:column;gap:var(--sp-2)}
.feat__bullets li{position:relative;padding-left:var(--sp-5);font-size:var(--body-md);color:var(--text-secondary)}
.feat__bullets li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--brand)}

/* Each tool is keyed to the colour it actually uses in the product, rather than
   to an arbitrary palette: bid-liquidity blue for the heatmap, up-green for
   executed volume, ask-violet for the depth ladder, POC gold for profiles.
   The active border stays amber — amber owns active states everywhere. */
.feat__item[data-feat="0"]{--tool:var(--liq-4)}
.feat__item[data-feat="1"]{--tool:var(--up)}
.feat__item[data-feat="2"]{--tool:#A855F7}
.feat__item[data-feat="3"]{--tool:var(--poc,#FFD23F)}
.feat__item[data-feat] .feat__num{
  color:var(--tool);
  text-shadow:0 0 14px color-mix(in srgb,var(--tool) 65%,transparent);
}
.feat__item[data-feat] .feat__bullets li::before{
  background:var(--tool);
  box-shadow:0 0 8px color-mix(in srgb,var(--tool) 70%,transparent);
}
/* Sits low enough to read level with the copy beside it. Track the viewport
   rather than a fixed offset (the panel is ~336-392px tall depending on column
   width, so half of it is ~160px), but keep the box at content height — a tall
   sticky box would hit the bottom of the list early and shove the panel off the
   top of the screen by the last feature. */
.feat__sticky{position:sticky;top:clamp(88px,calc(50vh - 160px),280px)}
.feat__panels{position:relative}
.feat__panel{opacity:0;visibility:hidden;position:absolute;inset:0;transition:opacity var(--dur-base) var(--ease)}
.feat__panel.is-active{opacity:1;visibility:visible;position:relative}

/* ---- stack replacement (one platform, not four) --------------------------- */
.stack{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-5);align-items:center;margin-top:var(--sp-8)}
.stack__col{border:1px solid var(--line);background:var(--surface-panel);padding:var(--sp-6) var(--sp-5)}
.stack__col--us{border-color:var(--brand);background:var(--brand-wash)}
.stack__head{
  font-size:var(--display-xs);letter-spacing:var(--display-track-wide);
  color:var(--text-muted);margin:0 0 var(--sp-4);
}
.stack__col--us .stack__head{color:var(--brand)}
.stack__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.stack__list li{position:relative;padding-left:var(--sp-6);font-size:var(--body-sm);color:var(--text-secondary)}
.stack__list--old li{color:var(--text-muted)}
/* a struck-through dash for the old stack, a tick for the new one */
.stack__list--old li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--text-muted)}
/* inline "not shipped yet" marker — amber, so it never reads as available */
.li__soon{
  display:inline-block;margin-left:var(--sp-2);padding:1px 6px;vertical-align:1px;
  font-family:var(--font-display);font-weight:600;font-size:9px;
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  color:var(--select);border:1px solid var(--select-dim);background:var(--select-wash);
}
.stack__list--new li::before{
  content:'';position:absolute;left:0;top:6px;width:12px;height:7px;
  border-left:2px solid var(--up);border-bottom:2px solid var(--up);transform:rotate(-45deg);
}
.stack__arrow{color:var(--brand);width:28px}
/* who it's for */
.styles{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-6)}
.styles__label{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-muted);
  margin-right:var(--sp-1);
}
.styles__chip{
  padding:5px var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:var(--body-sm);color:var(--text-secondary);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.styles__chip:hover{border-color:var(--brand);color:var(--text-primary)}
.styles__note{margin-top:var(--sp-4);max-width:64ch;font-size:var(--body-sm);color:var(--text-muted)}
@media (max-width:820px){
  .stack{grid-template-columns:1fr}
  .stack__arrow{transform:rotate(90deg);margin:0 auto}
}

/* ---- card grid ------------------------------------------------------------ */
/* Separators are drawn BY the cards, not by a background showing through 1px
   gaps. auto-fit leaves the last row partly empty whenever the card count is
   not a multiple of the column count, and with the old technique that leftover
   track rendered as a solid grey block. */
.grid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));margin-top:var(--sp-8);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{
  position:relative;
  padding:var(--sp-6) var(--sp-5) var(--sp-6);background:var(--surface-base);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background var(--dur-fast) var(--ease);
}
.card:hover{background:var(--surface-panel)}
/* a light bar wipes in along the top edge on hover */
.card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;transition:opacity var(--dur-base) var(--ease);
}
.card:hover::before{opacity:.9}
.card__ico{transition:transform var(--dur-base) var(--ease),filter var(--dur-base) var(--ease)}
.card:hover .card__ico{transform:translateY(-2px);filter:drop-shadow(0 0 9px rgba(229,53,47,.75))}
/* the one card that should catch the eye first */
.card--feature{background:var(--brand-wash);box-shadow:inset 2px 0 0 var(--brand)}
.card--feature:hover{background:#22100f}
.card__ico{width:28px;height:28px;margin-bottom:var(--sp-4);color:var(--brand)}
/* roadmap status chip — amber, the "in flight" colour, never brand red */
.card__soon{
  display:inline-block;margin-bottom:var(--sp-3);padding:3px var(--sp-2);float:right;
  font-family:var(--font-display);font-weight:600;font-size:10px;
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  color:var(--select);border:1px solid var(--select-dim);background:var(--select-wash);
}
.card h4{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);
  letter-spacing:var(--display-track);text-transform:uppercase;margin-bottom:var(--sp-2);
}
.card p{color:var(--text-secondary);font-size:var(--body-sm);line-height:1.6}

/* ---- comparison table ----------------------------------------------------- */
.tablewrap{margin-top:var(--sp-8);overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--line);font-size:var(--body-sm)}
thead th{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  color:var(--text-muted);background:var(--surface-panel);
}
thead th.is-us{color:var(--brand)}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--text-primary)}
td.is-us{background:var(--brand-wash);color:var(--text-primary)}
td:not(:first-child):not(.is-us){color:var(--text-muted)}
.yes{color:var(--up);font-weight:600}
.no{color:var(--text-muted);opacity:.6}
.table__note{margin-top:var(--sp-4);font-size:var(--body-sm);color:var(--text-muted);max-width:88ch}
.table__note--center{margin-inline:auto;text-align:center}
/* a two-column self-claim table needs no horizontal scroll at any width */
.table--own{min-width:0}
.table--own td:last-child,.table--own th:last-child{width:1%;white-space:nowrap;text-align:right}
.tablewrap--own{overflow-x:visible}
/* only shown once the table actually needs scrolling — see the phone block */
.tablehint{display:none}

/* ---- pricing -------------------------------------------------------------- */
.plans{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:var(--sp-8);max-width:840px;margin-inline:auto;text-align:left}
/* Plan cards carry their own light: a corner bloom, a lift on hover, and on the
   featured plan a sheen that runs the top edge. All CSS, so the pricing page
   and the landing section get it without duplicating markup. */
.plan{
  position:relative;overflow:hidden;
  padding:var(--sp-6);border:1px solid var(--line);background:var(--surface-panel);
  display:flex;flex-direction:column;
  transition:transform var(--dur-base) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.plan::after{
  content:'';position:absolute;right:-28%;top:-42%;width:72%;aspect-ratio:1;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(229,53,47,.13),transparent 70%);
  filter:blur(42px);
}
.plan > *{position:relative;z-index:1}
.plan:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.plan--hero{
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(229,53,47,.18),0 30px 70px -45px rgba(229,53,47,.8);
}
.plan--hero::after{background:radial-gradient(circle,rgba(229,53,47,.3),transparent 70%)}
.plan--hero:hover{
  border-color:var(--brand-hover);
  box-shadow:0 0 0 1px rgba(229,53,47,.3),0 38px 84px -42px rgba(229,53,47,1);
}
/* the light runs the top edge of the plan you are meant to pick */
.plan--hero::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:42%;z-index:2;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  animation:sheen 6s var(--ease) infinite;
}
.plan__tag{
  position:absolute;top:-1px;right:-1px;z-index:3;font-family:var(--font-display);font-weight:600;
  font-size:var(--display-xs);letter-spacing:var(--display-track-wide);text-transform:uppercase;
  background:var(--brand);color:var(--text-on-brand);padding:5px var(--sp-3);
  box-shadow:0 6px 20px -8px rgba(229,53,47,1);
}
.plan h3{font-size:var(--display-sm);color:var(--text-secondary)}
/* the number falls off into shadow, which reads as weight rather than as flat
   white text sitting on a panel */
.plan__price{
  font-family:var(--font-data);font-weight:700;font-size:44px;line-height:1;
  margin:var(--sp-4) 0 var(--sp-1);
  background-image:linear-gradient(180deg,#FFFFFF 12%,#9C9C9C 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.plan__price span{
  font-size:var(--body-md);font-weight:400;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
/* background-image, NOT the background shorthand — the shorthand resets
   background-clip to border-box and the gradient renders as a solid bar */
.plan--hero .plan__price{background-image:linear-gradient(180deg,#FFFFFF 10%,#C98B88 100%)}
.plan__note{font-size:var(--body-sm);color:var(--text-muted)}
.plan__note s{opacity:.75}
/* The intro offer is a highlight, and per the three-role rule amber owns every
   highlight — red is brand and "down" only, so it cannot be used here. The
   "then $200/mo" is inside the callout deliberately: the renewal price has to
   sit with the offer, not in small print further down the page. */
.plan__offer{
  margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--select-dim);background:var(--select-wash);
  font-size:var(--body-sm);color:var(--select);
}
.plan__offer b{font-family:var(--font-data);font-weight:700;font-size:var(--data-lg)}
.plan__list{list-style:none;padding:0;margin:var(--sp-5) 0 var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--body-sm);color:var(--text-secondary);flex:1}
.plan__list li{position:relative;padding-left:var(--sp-5)}
/* a tick, not a square — these are things you get, and the shape should say so */
.plan__list li::before{
  content:'';position:absolute;left:2px;top:5px;width:5px;height:9px;
  border-right:2px solid var(--up);border-bottom:2px solid var(--up);
  transform:rotate(45deg);
  filter:drop-shadow(0 0 5px rgba(34,197,94,.75));
}
.plan .btn{width:100%}

/* ---- faq ------------------------------------------------------------------ */
/* The block is centred under a centred heading, but its CONTENTS stay left:
   .center on the wrap would otherwise centre every question and answer, and
   centred body copy is markedly harder to read down a list. */
.faq{max-width:820px;margin:var(--sp-8) auto 0;text-align:left;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--sp-5) var(--sp-8) var(--sp-5) 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);
  letter-spacing:var(--display-track);text-transform:uppercase;
  transition:color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--select)}
.faq summary::after{
  content:'';position:absolute;right:6px;top:calc(var(--sp-5) + 7px);width:9px;height:9px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);transition:transform var(--dur-base) var(--ease),border-color var(--dur-fast) var(--ease);
}
.faq details[open] summary{color:var(--select)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--select)}
.faq p{color:var(--text-secondary);font-size:var(--body-md);padding:0 var(--sp-6) var(--sp-5) 0}

/* ---- waitlist ------------------------------------------------------------- */
.cta{border:1px solid var(--line);background:var(--surface-panel);padding:clamp(var(--sp-6),6vw,var(--sp-10));text-align:center}
.form{display:flex;gap:var(--sp-2);max-width:460px;margin:var(--sp-6) auto 0;flex-wrap:wrap}
.form input{
  flex:1;min-width:210px;height:46px;padding:0 var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--surface-input);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--body-md);outline:none;
  transition:border-color var(--dur-fast) var(--ease);
}
.form input::placeholder{color:var(--text-muted)}
.form input:focus{border-color:var(--select);box-shadow:var(--focus-ring)}
.form__msg{margin-top:var(--sp-3);font-family:var(--font-data);font-size:var(--data-sm);min-height:18px;color:var(--up)}

/* ---- sign in ---------------------------------------------------------------
   The fields are DISABLED, not merely non-submitting. There are no accounts
   yet, so every password typed here would be a password for some other site —
   a dead form that still accepts input is how you end up handling credentials
   you never wanted. Re-enable when auth actually exists. */
.auth{max-width:420px;margin:var(--sp-10) auto 0;border:1px solid var(--line);background:var(--surface-panel);padding:clamp(var(--sp-6),5vw,var(--sp-8))}
.auth h1{font-size:26px;text-align:center}
.auth__sub{margin-top:var(--sp-3);text-align:center;color:var(--text-secondary);font-size:var(--body-sm)}
.auth__form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
.auth__field{display:flex;flex-direction:column;gap:var(--sp-2)}
.auth__field label{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-muted);
}
.auth__field input{
  height:48px;padding:0 var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--surface-input);color:var(--text-primary);
  font-family:var(--font-body);font-size:16px;outline:none;
}
.auth__field input:disabled{opacity:.5;cursor:not-allowed}
.auth .btn{width:100%}
.auth .btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.auth__alt{margin-top:var(--sp-5);text-align:center;font-size:var(--body-sm);color:var(--text-muted)}
.auth__alt a{color:var(--select)}

/* ---- footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:var(--sp-10) var(--sp-8);background:var(--surface-panel)}
.footer__top{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:space-between;margin-bottom:var(--sp-8)}
.footer__blurb{max-width:290px;font-size:var(--body-sm);color:var(--text-muted);margin-top:var(--sp-3)}
.footer__links{display:flex;gap:var(--sp-10);flex-wrap:wrap}
.social{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.social__link{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-md);color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);
}
.social__link svg{width:17px;height:17px}
.social__link:hover{
  color:var(--brand);border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 0 20px -4px rgba(229,53,47,.85);
}
.social__link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.footer__col h5{font-size:var(--display-xs);letter-spacing:var(--display-track-wide);color:var(--text-muted);margin:0 0 var(--sp-3)}
.footer__col a{display:block;font-size:var(--body-sm);color:var(--text-secondary);margin-bottom:var(--sp-2);transition:color var(--dur-fast) var(--ease)}
.footer__col a:hover{color:var(--select)}
.disclaimer{
  border:1px solid var(--line);border-left:2px solid var(--brand-dim);
  padding:var(--sp-5);font-size:12px;line-height:1.7;color:var(--text-muted);background:var(--surface-base);
}
.disclaimer strong{color:var(--text-secondary)}
.footer__base{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;margin-top:var(--sp-5);
  font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);
}

/* ============================================================================
   SUB-PAGE PATTERNS
   Everything below is for the pages beyond the landing page — feature pages,
   docs, legal, changelog. Same tokens, same three-role rule.
   ========================================================================== */

/* ---- page hero (shorter than the landing hero) ---------------------------- */
/* Sub-pages get the same lighting as the landing hero, at a smaller scale —
   the grid, the orb and the vignette, so a feature page does not drop into flat
   black the moment you leave the home page. */
.phero{
  padding-block:var(--sp-10) var(--sp-8);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;isolation:isolate;
}
.phero::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--line-grid) 1px,transparent 1px),linear-gradient(90deg,var(--line-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 30%,#000 20%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 30% 30%,#000 20%,transparent 100%);
  animation:gridpan 34s linear infinite;
}
.phero::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:14%;top:-70%;width:min(560px,70vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,53,47,.22),rgba(229,53,47,.04) 48%,transparent 70%);
  filter:blur(80px);
  animation:orb-sub 22s var(--ease) infinite alternate;
}
.phero h1{font-size:clamp(30px,4.6vw,52px);margin-top:var(--sp-3)}
.phero .lede{margin-top:var(--sp-5)}
.crumb{
  font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);
  letter-spacing:.04em;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
}
.crumb a:hover{color:var(--select)}
.crumb i{font-style:normal;color:var(--line-strong)}

/* status chip for a feature that has not shipped */
.state{
  display:inline-block;margin-bottom:var(--sp-4);padding:4px var(--sp-3);
  font-family:var(--font-display);font-weight:600;font-size:10px;
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  color:var(--select);border:1px solid var(--select-dim);background:var(--select-wash);
}
/* an unshipped page says so once, loudly, above the fold */
.notice{
  margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--select-dim);background:var(--select-wash);
  font-size:var(--body-md);color:var(--text-secondary);max-width:70ch;
}
.notice b{color:var(--select);font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:var(--display-xs)}

/* ---- prose (legal, docs, posts) ------------------------------------------- */
.prose{max-width:74ch;color:var(--text-secondary);font-size:var(--body-md)}
.prose h2{font-size:22px;margin-top:var(--sp-10);margin-bottom:var(--sp-4);color:var(--text-primary)}
.prose h3{font-size:var(--display-sm);margin-top:var(--sp-6);margin-bottom:var(--sp-3);color:var(--text-primary)}
.prose p{margin-bottom:var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-5);padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.prose li{padding-left:var(--sp-1)}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--text-primary)}
.prose code{
  font-family:var(--font-data);font-size:.88em;background:var(--surface-raised);
  border:1px solid var(--line);padding:1px 5px;border-radius:var(--r-sm);color:var(--text-primary);
}
.prose a{color:var(--select);text-decoration:underline;text-underline-offset:3px}
.prose--wide{max-width:none}

/* ---- two-column: sticky side nav + body ----------------------------------- */
.split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-10);align-items:start}
.sidenav{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--sp-1);border-left:1px solid var(--line)}
.sidenav a{
  padding:var(--sp-2) var(--sp-4);font-size:var(--body-sm);color:var(--text-muted);
  border-left:2px solid transparent;margin-left:-1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.sidenav a:hover{color:var(--text-primary)}
.sidenav a.is-on{color:var(--select);border-left-color:var(--select)}
.sidenav h6{
  margin:var(--sp-4) 0 var(--sp-1) var(--sp-4);font-family:var(--font-display);font-weight:600;
  font-size:10px;letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-muted);
}
.sidenav h6:first-child{margin-top:0}

/* ---- numbered steps -------------------------------------------------------- */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-8)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);align-items:start}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--font-data);font-size:var(--data-lg);font-weight:700;color:var(--brand);
  line-height:1.1;
}
.step h4{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:var(--display-track);text-transform:uppercase;margin-bottom:var(--sp-2)}
.step p{color:var(--text-secondary);font-size:var(--body-md)}

/* ---- spec / key-value table ------------------------------------------------ */
.spec{border:1px solid var(--line);margin-top:var(--sp-6)}
.spec__row{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);border-bottom:1px solid var(--line)}
.spec__row:last-child{border-bottom:0}
.spec__k{
  padding:var(--sp-3) var(--sp-4);font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-muted);
  background:var(--surface-panel);border-right:1px solid var(--line);
}
.spec__v{padding:var(--sp-3) var(--sp-4);font-size:var(--body-sm);color:var(--text-secondary)}
.spec__v .data{color:var(--text-primary)}

/* ---- download builds -------------------------------------------------------- */
.builds{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--sp-8);border:1px solid var(--line);background:var(--line)}
.build{background:var(--surface-panel);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.build__os{font-family:var(--font-display);font-weight:700;font-size:var(--display-md);letter-spacing:var(--display-track);text-transform:uppercase}
.build__meta{font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted)}
.build .btn{margin-top:auto}

/* ---- changelog -------------------------------------------------------------- */
.log{display:flex;flex-direction:column;gap:var(--sp-10);margin-top:var(--sp-8)}
.log__item{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.log__meta{position:sticky;top:100px}
.log__ver{font-family:var(--font-data);font-weight:700;font-size:var(--data-lg);color:var(--text-primary)}
.log__date{font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);margin-top:var(--sp-1)}
.log__body h4{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:var(--display-track);text-transform:uppercase;margin-bottom:var(--sp-3)}
.log__body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.log__body li{position:relative;padding-left:var(--sp-5);font-size:var(--body-md);color:var(--text-secondary)}
.log__body li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--brand)}
.tag{
  display:inline-block;margin-right:var(--sp-2);padding:2px 7px;font-family:var(--font-display);
  font-weight:600;font-size:10px;letter-spacing:var(--display-track-wide);text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--text-muted);
}
.tag--new{color:var(--up);border-color:var(--up-dim)}
.tag--fix{color:var(--select);border-color:var(--select-dim)}
.tag--perf{color:var(--info);border-color:#1D5FAD}
.tag--live{color:var(--up);border-color:var(--up-dim);background:var(--up-wash)}
.tag--soon{color:var(--select);border-color:var(--select-dim);background:var(--select-wash)}

/* feed matrix — a table per asset class */
.feeds{margin-top:var(--sp-6)}
.feeds table{min-width:600px}
.feeds td:first-child{color:var(--text-primary);font-weight:500;white-space:nowrap}
.feeds td:last-child{text-align:right;white-space:nowrap}
.feeds .tag{margin-right:0}

/* ---- VEIL study branding ---------------------------------------------------
   Our own studies carry the mark and the VEIL prefix, the way DeepCharts brands
   Deep Print and DeepGamma. The generic term always sits next to it — someone
   searching for "footprint" must still find VEIL Print. */
.veil{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap}
.veil__mark{width:.86em;height:.86em;flex:none;color:var(--brand)}
.veil b{font-weight:inherit;color:var(--brand);letter-spacing:.06em}
h1 .veil,h2 .veil,h3 .veil{gap:.3em}
h1 .veil__mark,h2 .veil__mark{width:.78em;height:.78em}
/* the generic name, sitting under a branded heading */
.veil__generic{
  display:block;margin-top:var(--sp-3);font-family:var(--font-data);
  font-size:var(--data-md);letter-spacing:.06em;text-transform:none;
  color:var(--text-muted);font-weight:400;
}

/* ---- knowledge base -------------------------------------------------------
   DeepCharts' help center is a list of links with no search. Ours keeps the
   answers on the page and filters them as you type, so the common case — "I
   have one question, right now" — never costs a page load. */
.kb__search{position:relative;margin-top:var(--sp-8)}
.kb__search input{
  width:100%;height:56px;padding:0 var(--sp-6) 0 52px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface-input);color:var(--text-primary);
  font-family:var(--font-body);font-size:16px;outline:none;
  transition:border-color var(--dur-fast) var(--ease);
}
.kb__search input::placeholder{color:var(--text-muted)}
.kb__search input:focus{border-color:var(--select)}
.kb__search::before{
  content:'';position:absolute;left:20px;top:50%;width:13px;height:13px;margin-top:-8px;
  border:2px solid var(--text-muted);border-radius:50%;pointer-events:none;
}
.kb__search::after{
  content:'';position:absolute;left:31px;top:50%;width:7px;height:2px;margin-top:3px;
  background:var(--text-muted);transform:rotate(45deg);pointer-events:none;
}
.kb__count{
  margin-top:var(--sp-3);font-family:var(--font-data);font-size:var(--data-sm);
  color:var(--text-muted);letter-spacing:.04em;
}

.kb__cat{margin-top:var(--sp-10)}
.kb__cat h3{
  font-size:var(--display-sm);color:var(--text-primary);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.kb__cat[hidden]{display:none}
.kb__item{border-bottom:1px solid var(--line)}
.kb__item[hidden]{display:none}
.kb__item summary{
  list-style:none;cursor:pointer;padding:var(--sp-4) var(--sp-8) var(--sp-4) 0;position:relative;
  font-size:var(--body-md);color:var(--text-primary);
  transition:color var(--dur-fast) var(--ease);
}
.kb__item summary::-webkit-details-marker{display:none}
.kb__item summary:hover{color:var(--select)}
.kb__item summary::after{
  content:'';position:absolute;right:6px;top:calc(var(--sp-4) + 6px);width:8px;height:8px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);transition:transform var(--dur-base) var(--ease),border-color var(--dur-fast) var(--ease);
}
.kb__item[open] summary{color:var(--select)}
.kb__item[open] summary::after{transform:rotate(-135deg);border-color:var(--select)}
.kb__body{padding:0 var(--sp-8) var(--sp-5) 0;color:var(--text-secondary);font-size:var(--body-md)}
.kb__body p{margin-bottom:var(--sp-3)}
.kb__body p:last-child{margin-bottom:0}
.kb__body ul{margin:0 0 var(--sp-3);padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1)}
.kb__body li::marker{color:var(--brand)}
.kb__body a{color:var(--select)}
.kb__body code{
  font-family:var(--font-data);font-size:.88em;background:var(--surface-raised);
  border:1px solid var(--line);padding:1px 5px;border-radius:var(--r-sm);color:var(--text-primary);
}
.kb__empty{
  display:none;margin-top:var(--sp-8);padding:var(--sp-6);border:1px solid var(--line);
  background:var(--surface-panel);text-align:center;color:var(--text-secondary);
}
.kb__empty a{color:var(--select)}
.kb.is-empty .kb__empty{display:block}

/* quick links across the top — the DeepCharts category grid, but the cards
   scroll to answers already on the page instead of loading another one */
/* borders on the cards, not a background showing through gaps — otherwise the
   leftover tracks in the last row render as a solid grey block (same fix as .grid) */
.kb__cats{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:var(--sp-8);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kb__cats a{background:var(--surface-base);padding:var(--sp-5);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background var(--dur-fast) var(--ease)}
.kb__cats a:hover{background:var(--surface-panel)}
.kb__cats b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:var(--display-track);text-transform:uppercase;margin-bottom:var(--sp-2)}
.kb__cats span{font-size:var(--body-sm);color:var(--text-muted)}

/* ---- blog filters ---------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-8)}
.chip{
  padding:7px var(--sp-4);border:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--text-secondary);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.chip:hover{border-color:var(--line-strong);color:var(--text-primary)}
.chip.is-on{border-color:var(--select);color:var(--select);background:var(--select-wash)}
.post[hidden]{display:none}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted)}
.post__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.post__tag{
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:var(--display-track-wide);
  text-transform:uppercase;color:var(--text-muted);border:1px solid var(--line);padding:2px 7px;
}
.post--lead{border-left:2px solid var(--brand);padding-left:var(--sp-5);background:var(--brand-wash)}
.post--lead h4{font-size:var(--display-md)}

/* ---- post list --------------------------------------------------------------- */
.posts{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:var(--sp-8)}
.post{
  display:grid;grid-template-columns:minmax(110px,140px) minmax(0,1fr);gap:var(--sp-5);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);align-items:baseline;
  transition:background var(--dur-fast) var(--ease);
}
.post:hover{background:var(--surface-panel)}
.post__date{font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted)}
.post h4{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:var(--display-track);text-transform:uppercase;margin-bottom:var(--sp-2)}
.post p{font-size:var(--body-sm);color:var(--text-secondary)}

/* ---- next / prev page rail ---------------------------------------------------- */
.rail{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--sp-12);border:1px solid var(--line);background:var(--line)}
.rail a{background:var(--surface-base);padding:var(--sp-5);transition:background var(--dur-fast) var(--ease)}
.rail a:hover{background:var(--surface-panel)}
.rail small{font-family:var(--font-data);font-size:var(--data-sm);color:var(--text-muted);display:block;margin-bottom:var(--sp-2)}
.rail b{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:var(--display-track);text-transform:uppercase}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
  .sidenav{position:relative;top:0;flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:1px solid var(--line);padding-bottom:var(--sp-3)}
  .sidenav a{border-left:0;border-bottom:2px solid transparent;margin-left:0;padding:var(--sp-2) var(--sp-3)}
  .sidenav a.is-on{border-left-color:transparent;border-bottom-color:var(--select)}
  .sidenav h6{display:none}
  .log__item{grid-template-columns:1fr;gap:var(--sp-3)}
  .log__meta{position:relative;top:0;display:flex;gap:var(--sp-3);align-items:baseline}
  .log__date{margin-top:0}
  .post{grid-template-columns:1fr;gap:var(--sp-2)}
  .spec__row{grid-template-columns:1fr}
  .spec__k{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---- reveal --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:68px;left:0;right:0;
    background:var(--surface-raised);border-bottom:1px solid var(--line);
    padding:var(--sp-5) var(--pad) var(--sp-6);gap:var(--sp-4);margin-left:0;
  }
  .nav__burger{display:block;min-width:44px;min-height:44px}
  /* 21px of text is not a touch target — give each row the full width and
     enough height to hit without aiming. */
  .nav__links.is-open a{display:block;width:100%;padding-block:var(--sp-3)}
  .nav__item{display:block;width:100%}
  .nav__trigger{width:100%;justify-content:space-between;padding-block:var(--sp-3)}
  .nav__item::after{display:none}
  .nav__menu,.nav__item.is-open .nav__menu--wide{
    position:static;transform:none;min-width:0;padding:0 0 var(--sp-3) var(--sp-3);
    background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none;
    grid-template-columns:1fr;
  }
  .nav__menu h6{margin-top:var(--sp-3)}
  /* .nav__links.is-open a forces display:block; the menu rows need flex back
     or the Soon chip loses its margin-left:auto and hugs the label */
  .nav__links.is-open .nav__menu a{display:flex}
  .nav__all{border-top:0;padding-top:0}
  /* Full-width, stacked, and set apart by a rule — a shrink-wrapped button in a
     stacked column reads as a stray block rather than the menu's main action. */
  .nav__cta{
    width:100%;flex-direction:column;align-items:stretch;gap:var(--sp-2);
    margin-top:var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--line);
  }
  .nav__links.is-open .nav__cta a.btn{
    /* display:flex, not the inherited block — otherwise .btn's justify-content
       has no effect and both labels sit hard against the left edge */
    display:flex;justify-content:center;
    width:100%;height:48px;padding-block:0;font-size:var(--display-sm);
  }
  .feat{grid-template-columns:1fr}
  /* placePanels() empties this and moves each preview inside its own feature */
  .feat__sticky{display:none}
  .feat__list{gap:var(--sp-10);padding-bottom:0}   /* no sticky here, so no travel room needed */
  .feat__item{opacity:1;border-left-color:var(--line)}
  .feat__panel{position:relative;opacity:1;visibility:visible;display:block;margin-top:var(--sp-5)}

  /* Keep the capability name pinned while the competitor columns scroll —
     otherwise you swipe away from the row label and the comparison stops
     being a comparison. */
  .tablewrap{position:relative}
  th:first-child,td:first-child{position:sticky;left:0;z-index:1}
  tbody td:first-child{background:var(--surface-base);box-shadow:1px 0 0 var(--line)}
  thead th:first-child{box-shadow:1px 0 0 var(--line)}
}

/* ---- phone ---------------------------------------------------------------- */
@media (max-width:600px){
  /* A 16:9 frame is only ~187px tall at this width, which is not enough room
     for a price axis. Taller aspect, so the depth ladder stays readable. */
  .frame__body,.frame--sm .frame__body{aspect-ratio:4/3}
  /* "RITHMIC · CONNECTED" wrapped to two lines and broke the status bar */
  .frame__foot{gap:var(--sp-2);font-size:9px}
  .frame__status,.frame__clock{white-space:nowrap}
  .frame__bar{gap:var(--sp-2)}

  /* full-width tap targets rather than ragged part-width buttons */
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  /* .form input carries flex:1 for the desktop ROW layout. In a column that
     becomes the main axis, so its flex-basis:0 beat height:46px and collapsed
     the field to 21px beside a 46px button. Reset flex, then size both. */
  .form{flex-direction:column;max-width:none;gap:var(--sp-3)}
  .form input,.form button{width:100%;flex:0 0 auto;height:52px}
  .form input{font-size:16px}   /* below 16px iOS Safari zooms the page on focus */

  /* the tape keeps scrolling on a phone — it is the wrapping that made five
     claims a tall thin column, and a tape does not wrap */
  .trust__set{gap:var(--sp-6);padding-inline-end:var(--sp-6);padding-block:var(--sp-4)}
  .trust__item{font-size:10px}
  .trust__item::after{right:calc(var(--sp-6) / -2)}
  .trust__track{animation-duration:34s}

  /* Nothing signals that a table scrolls, so say so — and shrink it enough
     that comparing takes one short swipe rather than three. */
  .tablehint{
    display:block;margin:var(--sp-6) 0 calc(var(--sp-2) * -1);
    font-family:var(--font-data);font-size:11px;color:var(--text-muted);
    letter-spacing:.04em;text-align:right;
  }
  table{min-width:560px}
  .table--own{min-width:0}
  th,td{padding:var(--sp-2) var(--sp-3);font-size:12px}
  thead th{font-size:10px}

  h1{font-size:34px}
  .hero__sub,.lede{font-size:var(--body-md)}
  .section{padding-block:calc(var(--sect)*.78)}
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  /* the glows stay — they are static light. Only the movement stops. */
  .hero::after{animation:none}
  .hero__grid{animation:none}
  .frame__bar::after{display:none}
}


/* ---- LAUNCH SALE — bar, price scale, popup ---------------------------------
   ONE switch drives all of it. app.js compares SALE.endsAt against the clock
   and, once the sale is over, puts .sale-over on <html>: the bar and the popup
   stop rendering and every .is-sale price is replaced by its .is-list twin, so
   an expired sale can never keep advertising itself on a page nobody edited. */
.is-list{display:none}
html.sale-over .is-sale{display:none}
html.sale-over p.is-list,html.sale-over div.is-list{display:block}
html.sale-over span.is-list{display:inline}
html.sale-over .sbar,html.sale-over .modal{display:none!important}

/* the announcement bar sits ABOVE the sticky nav, so it scrolls away and the
   nav takes over — an offer worth reading once, not a permanent band */
.sbar{
  position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--brand-wash),var(--surface-panel) 40%,var(--surface-panel) 60%,var(--brand-wash));
}
.sbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;opacity:.8;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.sbar__in{
  max-width:var(--maxw);margin-inline:auto;padding:var(--sp-2) var(--pad);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
}
.sbar__tag{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;
  background:var(--brand);color:var(--text-on-brand);padding:3px var(--sp-2);
}
.sbar__txt{margin:0;font-size:var(--body-sm);color:var(--text-secondary)}
.sbar__txt b{color:var(--text-primary)}
/* the clock is data, so it is set in the data face and tabular — a countdown
   that reflows its own width every second reads as a broken widget */
.sbar__count{
  font-family:var(--font-data);font-size:var(--body-sm);color:var(--select);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sbar__count:empty{display:none}
.sbar__cta{font-size:var(--body-sm);color:var(--select);white-space:nowrap}
.sbar__cta:hover{color:var(--text-primary)}

/* ---- the price scale ------------------------------------------------------
   Drawn the way the terminal draws one: a price axis with the list price
   struck out up top, the launch rate tagged in amber the way an active level
   is tagged, and the first month down at the bottom in the up colour. */
.pscale{width:100%;max-width:340px;height:auto;display:block;margin-inline:auto}
.pscale__axis,.pscale__tick{stroke:var(--line-strong);stroke-width:1}
.pscale__lab{
  fill:var(--text-muted);font-family:var(--font-display);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;text-anchor:end;
}
.pscale__tag{fill:var(--surface-raised);stroke:var(--line-strong);stroke-width:1}
.pscale__tx{fill:var(--text-muted);font-family:var(--font-data);font-size:13px;text-anchor:middle}
.pscale__strike{stroke:var(--text-muted);stroke-width:1.3}
.pscale__tag--lock{fill:var(--select);stroke:none}
.pscale__tx--lock{fill:var(--text-on-select);font-weight:700}
.pscale__tag--first{fill:var(--up-wash);stroke:var(--up-dim)}
.pscale__tx--first{fill:var(--up);font-weight:700}
.pscale__arrow{stroke:var(--select);stroke-width:1.4;stroke-dasharray:4 3;fill:none}
.pscale__head{fill:var(--select)}
.pscale__off{
  fill:var(--select);font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.06em;
}
.pscale__wrap{margin-top:var(--sp-8);display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.pscale__cap{max-width:52ch;font-size:var(--body-md);color:var(--text-secondary);text-align:center;margin:0}
.pscale__wrap + .table__note{margin-top:var(--sp-6)}
/* the struck list price, above the number that replaced it */
.plan__was{font-family:var(--font-data);font-size:var(--body-sm);color:var(--text-muted);margin-top:var(--sp-4)}
.plan__was + .plan__price{margin-top:var(--sp-1)}

/* ---- the popup ------------------------------------------------------------ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:var(--surface-overlay);backdrop-filter:blur(3px)}
.modal__card{
  position:relative;width:min(780px,100%);max-height:88vh;overflow:auto;
  padding:var(--sp-8);background:var(--surface-panel);border:1px solid var(--brand-dim);
  box-shadow:0 44px 120px -40px #000,0 0 0 1px rgba(229,53,47,.18);
  animation:modal-in var(--dur-base) var(--ease) both;
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:6px;right:10px;z-index:2;background:none;border:0;cursor:pointer;
  color:var(--text-muted);font-size:26px;line-height:1;padding:4px 8px;
}
.modal__x:hover{color:var(--text-primary)}
.modal__eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);
  letter-spacing:var(--display-track-wide);text-transform:uppercase;color:var(--brand);
}
.modal__card h2{font-size:var(--display-sm);margin-top:var(--sp-2)}
.modal__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-6);align-items:center;margin-top:var(--sp-5)}
.modal__lede{font-size:var(--body-md);color:var(--text-secondary);margin-bottom:var(--sp-3)}
.modal__lede b{color:var(--text-primary)}
.modal__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.modal__fine{margin-top:var(--sp-5);font-size:var(--body-sm);color:var(--text-muted)}

@media (max-width:600px){
  .sbar__in{gap:var(--sp-1) var(--sp-3);padding-block:var(--sp-2)}
  .sbar__txt{font-size:11px;text-align:center}
  /* the bar is sticky now, so every wrapped line is viewport held open for
     the whole visit — the offer and the price stay, the clause goes */
  .sbar__more{display:none}
  /* the tag was costing a whole row of sticky height, and the sentence
     under it already says what the tag says */
  .sbar__tag{display:none}
  .sbar__count,.sbar__cta{font-size:11px}
  .modal__card{padding:var(--sp-5)}
  .modal__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .pscale{max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  .modal__card{animation:none}
}