/* ==========================================================================
   CLUE v3 — design system + motion
   Type/colour discipline from gladia.io (bar.md). Motion built for the product:
   the page has to *show* the pipeline, not describe it.
   ========================================================================== */

:root{
  /* ----------------------------------------------------------------------
     Surfaces. The page is white and stays white wherever it is reading; the
     story runs on true black so the scroll has one hard cut in it instead of
     six soft ones. Everything else is a half-step of grey.
     Class names keep their meaning: .s-white is paper, .s-smoke the faint
     grey panel, .s-black the deep section.
     ---------------------------------------------------------------------- */
  --bg-white:#FFFFFF;
  --bg-smoke:#FAFAFA;
  --bg-black:#000000;
  --bg-sunken:#FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-raised:#F5F5F5;

  /* Ink and lines default to "on a light surface", because that is what the
     component layer was written against and what most of the page is. The
     dark sections flip both families below; a light card nested inside a dark
     section flips them straight back. */
  --ink-on-light:#0A0A0A;
  --ink-on-light-2:#56565C;
  --ink-on-light-3:#6C6C74;
  --ink-on-dark:#0A0A0A;
  --ink-on-dark-2:#56565C;
  --ink-on-dark-3:#6C6C74;

  --line-light:rgba(10,10,10,.10);
  --line-light-2:rgba(10,10,10,.18);
  --line-dark:rgba(10,10,10,.10);
  --line-dark-2:rgba(10,10,10,.18);
  --line-strong:#8A8A90;   /* borders a visitor can act on: 3:1 on white */

  /* ----------------------------------------------------------------------
     One accent: a warm vermilion. It is a light-end colour, so it is used
     for fills, washes and large type, never for small body copy — that is
     what --accent-deep is for, which clears 4.5:1 on white.
     --accent-rgb feeds every translucent use so one edit moves all of them.
     ---------------------------------------------------------------------- */
  --accent-rgb:240,86,58;
  --accent:rgb(var(--accent-rgb));
  --accent-deep:#C2341B;                  /* accent as readable text on white */
  --accent-link:var(--accent-deep);       /* accent text; flips with the surface */
  --accent-ink:#FFFFFF;                   /* type that sits on the accent */
  --accent-dim:rgba(var(--accent-rgb),.55);
  --accent-soft:rgba(var(--accent-rgb),.12);
  --accent-faint:rgba(var(--accent-rgb),.06);

  /* the hero wash, white at the top into the accent at the floor */
  --wash-1:#FFFFFF;
  --wash-2:#FFF6F3;
  --wash-3:#FFE3D9;
  --wash-4:#FFC7B4;
  --wash-edge:#FFE4DA;   /* the colour the hero hands to the section below it */

  /* semantic, and deliberately not the accent: with a warm brand colour the
     negative signal has to move somewhere the accent cannot be confused with */
  --pos:#12A150;
  --neg:#B4231B;
  --warn:#B4700C;

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --size-hero:clamp(2.25rem,4.4vw,3.5rem);
  --size-section:clamp(1.625rem,2.6vw,2.25rem);
  --size-card:clamp(1.125rem,1.4vw,1.3125rem);
  --size-body:1.0625rem;
  --size-body-lg:1.125rem;
  --size-label:.75rem;

  --w-regular:400; --w-book:450; --w-medium:500;
  --ls-tight:-.02em; --ls-tighter:-.035em; --ls-label:.14em;

  --r-card:12px; --r-panel:24px; --r-pill:999px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;

  --wrap:1200px; --wrap-lead:820px; --page-x:24px; --nav-h:64px;

  --d-fast:160ms; --d-mid:240ms; --d-slow:480ms;
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--size-body);
  font-weight:var(--w-regular);line-height:1.55;
  background:var(--bg-white);color:var(--ink-on-light);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img, svg, video, canvas{max-width:100%;display:block}
h1, h2, h3, h4{margin:0;font-weight:var(--w-regular);letter-spacing:var(--ls-tight);line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul, ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;
      padding:var(--s3) var(--s5);border-radius:var(--r-pill)}
.skip:focus{left:var(--s4);top:var(--s4)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--page-x)}
.lead{max-width:var(--wrap-lead)}
section{padding-block:clamp(56px,6.5vw,96px);position:relative}

.s-white{background:var(--bg-white);color:var(--ink-on-light)}
.s-smoke{background:var(--bg-smoke);color:var(--ink-on-light)}
.s-black{background:var(--bg-black);color:var(--ink-on-dark)}
.s-white .sub, .s-smoke .sub{color:var(--ink-on-light-2)}
.s-black .sub{color:var(--ink-on-dark-2)}

.eyebrow{font-size:var(--size-label);font-weight:var(--w-medium);letter-spacing:var(--ls-label);
  text-transform:uppercase;line-height:1;margin-bottom:var(--s5);font-family:var(--font-mono);
  display:flex;align-items:center;gap:var(--s3)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.45;flex:none}
.s-black .eyebrow{color:var(--ink-on-dark-3)}
.s-white .eyebrow, .s-smoke .eyebrow{color:var(--ink-on-light-3)}

.h-hero{font-size:var(--size-hero);letter-spacing:var(--ls-tighter);line-height:1.06}
.h-sec{font-size:var(--size-section);max-width:18ch}
.h-sec.wide{max-width:24ch}
.sub{font-size:var(--size-body-lg);line-height:1.55;max-width:58ch}
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ========================= buttons ========================= */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:12px 24px;
  border-radius:var(--r-pill);font-size:.9375rem;font-weight:var(--w-medium);
  border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform var(--d-mid) var(--ease-spring),background-color var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform var(--d-mid) var(--ease-spring)}
.btn:hover .arw{transform:translateX(3px)}
.s-black .btn-primary{background:var(--ink-on-light);color:#fff}
.s-black .btn-primary:hover{background:#252D31}
.s-white .btn-primary, .s-smoke .btn-primary{background:var(--ink-on-light);color:#fff}
.s-white .btn-primary:hover, .s-smoke .btn-primary:hover{background:#252D31}
.s-black .btn-ghost{border-color:var(--line-strong);color:var(--ink-on-light)}
.s-black .btn-ghost:hover{background:rgba(15,20,23,.05)}
.s-white .btn-ghost, .s-smoke .btn-ghost{border-color:var(--line-strong);color:var(--ink-on-light)}
.s-white .btn-ghost:hover, .s-smoke .btn-ghost:hover{background:rgba(0,0,0,.04)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ========================= nav ========================= */
.nav{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.7);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dark);
  transition:background var(--d-mid) var(--ease-out)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:var(--s6)}
.brand{display:inline-flex;align-items:flex-start;gap:5px;color:var(--ink-on-light);
  transition:opacity var(--d-fast) var(--ease-out)}
.brand:hover{opacity:.78}
/* the source art is already black on transparent, which is what a light bar wants */
.brand-word{height:19px;width:auto;display:block}
.brand-tm{font-size:.5625rem;opacity:.45;line-height:1;margin-top:1px;font-family:var(--font-sans)}
.nav-links{display:none;gap:var(--s6);font-size:.9375rem}
.nav-links a{color:var(--ink-on-dark-2);position:relative;padding-block:4px;
  transition:color var(--d-fast) var(--ease-out)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width var(--d-mid) var(--ease-out)}
.nav-links a:hover{color:var(--ink-on-light)}
.nav-links a:hover::after{width:100%}
.nav .btn{padding:8px 18px;font-size:.875rem}
@media(min-width:940px){.nav-links{display:flex}}

/* ========================= hero ========================= */
.hero{background:var(--bg-sunken);padding-block:clamp(80px,12vw,150px) clamp(56px,7vw,96px);
  overflow:hidden;position:relative}
.js .hero-art{animation:drift 34s var(--ease-in-out,ease-in-out) infinite alternate}
@keyframes drift{
  from{transform:translate(-51%,-50%) scale(1.02)}
  to{transform:translate(-49%,-48%) scale(1.09)}
}
.hero-in{position:relative;z-index:2;text-align:center;max-width:920px;margin-inline:auto}
.hero .h-hero{margin-inline:auto;max-width:14ch}
.hero .sub{margin:var(--s6) auto 0;max-width:54ch}
.hero .btn-row{justify-content:center}

/* live pill */
.live{display:inline-flex;align-items:center;gap:var(--s3);padding:7px 16px 7px 12px;
  border-radius:var(--r-pill);border:1px solid var(--line-dark-2);
  background:rgba(15,20,23,.03);font-size:.8125rem;color:var(--ink-on-dark-2);
  margin-bottom:var(--s8)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--accent);animation:ping 2.2s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.live b{font-weight:var(--w-medium);color:var(--ink-on-light);font-family:var(--font-mono)}
#wave{width:100%;height:140px;display:block}

/* word-by-word hero reveal */
.rvw{display:inline-block;opacity:0;transform:translateY(14px);filter:blur(5px)}
.js .rvw{animation:wordIn .62s var(--ease-out) forwards}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ========================= pipeline (centrepiece) ========================= */
.pipe-scroll{position:relative}
.pipe-sticky{position:sticky;top:var(--nav-h);min-height:calc(100vh - var(--nav-h));
  display:flex;align-items:center;padding-block:var(--s10)}
.pipe-layout{display:grid;gap:var(--s10);width:100%;grid-template-columns:1fr}
@media(min-width:960px){.pipe-layout{grid-template-columns:300px 1fr;gap:var(--s16);align-items:center}}

/* rail */
.rail{position:relative;display:flex;flex-direction:column;gap:2px}
.rail::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:1px;
  background:var(--line-dark-2)}
.rail-fill{position:absolute;left:13px;top:14px;width:1px;background:var(--accent);
  box-shadow:0 0 10px var(--accent-dim);height:0;transition:height 320ms var(--ease-out)}
.node{display:flex;align-items:center;gap:var(--s4);padding:9px 0;position:relative;z-index:1;
  opacity:.34;transition:opacity var(--d-mid) var(--ease-out)}
.node.on{opacity:1}
.node.done{opacity:.62}
.knob{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-dark-2);background:var(--bg-black);
  transition:border-color var(--d-mid) var(--ease-out),background var(--d-mid) var(--ease-out),
             transform var(--d-mid) var(--ease-spring)}
.knob i{width:6px;height:6px;border-radius:50%;background:var(--ink-on-dark-3);display:block;
  transition:background var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.node.on .knob{border-color:var(--accent);transform:scale(1.13);background:var(--accent-faint)}
.node.on .knob i{background:var(--accent);transform:scale(1.35)}
.node.done .knob{border-color:var(--accent-dim)}
.node.done .knob i{background:var(--accent-dim)}
.node-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.node-k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;
  color:var(--ink-on-dark-3);text-transform:uppercase}
.node-l{font-size:.9375rem;letter-spacing:-.01em}

/* stage viewport */
.stage{position:relative;border:1px solid var(--line-dark);border-radius:var(--r-panel);
  background:var(--bg-sunken);overflow:hidden;min-height:420px}
.stage-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-dark)}
.stage-tag{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.stage-time{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-on-dark-3)}
.stage-body{padding:var(--s6);position:relative;min-height:340px}
.panel{position:absolute;inset:var(--s6);opacity:0;transform:translateY(10px);
  pointer-events:none;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.panel.on{opacity:1;transform:none;pointer-events:auto}
.panel h3{font-size:1.0625rem;font-weight:var(--w-book);letter-spacing:-.01em;margin-bottom:var(--s2)}
.panel .why{font-size:.9375rem;color:var(--ink-on-dark-2);margin-bottom:var(--s5);max-width:52ch}

/* file / transfer bar */
.bar{height:3px;border-radius:2px;background:var(--line-dark-2);overflow:hidden;margin-top:var(--s3)}
.bar span{display:block;height:100%;background:var(--accent);width:0;border-radius:2px}
.panel.on .bar span{animation:fill 1.6s var(--ease-out) forwards}
@keyframes fill{to{width:100%}}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s5);font-family:var(--font-mono);
  font-size:.75rem;color:var(--ink-on-dark-2)}
.kv b{color:var(--ink-on-dark-3);font-weight:var(--w-regular)}

/* transcript typing */
.tsc{display:flex;flex-direction:column;gap:var(--s3)}
.tl{display:flex;gap:var(--s4);align-items:baseline;opacity:0;transform:translateY(6px)}
.panel.on .tl{animation:lineIn .4s var(--ease-out) forwards}
.panel.on .tl:nth-child(1){animation-delay:.05s}
.panel.on .tl:nth-child(2){animation-delay:.5s}
.panel.on .tl:nth-child(3){animation-delay:.95s}
.panel.on .tl:nth-child(4){animation-delay:1.4s}
@keyframes lineIn{to{opacity:1;transform:none}}
.tl .who{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-on-dark-3);
  flex:none;min-width:92px}
.tl.b .said{color:var(--ink-on-dark-2)}
.said{font-size:.9375rem}
.mark{color:var(--accent);border-bottom:1px solid var(--accent-soft)}

/* signal chips populating */
.sig{display:flex;flex-wrap:wrap;gap:6px}
.sig span{font-family:var(--font-mono);font-size:.6875rem;padding:4px 10px;
  border-radius:var(--r-pill);border:1px solid var(--line-dark);color:var(--ink-on-dark-2);
  opacity:0;transform:scale(.9)}
.panel.on .sig span{animation:chipIn .34s var(--ease-spring) forwards}
@keyframes chipIn{to{opacity:1;transform:none}}

/* score dial */
.score{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s5)}
.dial{position:relative;width:96px;height:96px;flex:none}
.dial svg{transform:rotate(-90deg)}
.dial .trk{stroke:var(--line-dark-2)}
.dial .val{stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264}
.panel.on .dial .val{animation:dial 1.5s var(--ease-out) .35s forwards}
@keyframes dial{to{stroke-dashoffset:66}}
.dial b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;
  font-weight:var(--w-regular);font-variant-numeric:tabular-nums}
.score ul{display:flex;flex-direction:column;gap:var(--s2);font-size:.875rem;
  color:var(--ink-on-dark-2)}
.score li{display:flex;align-items:center;gap:var(--s3)}
.tick{width:14px;height:14px;flex:none;color:var(--accent)}
#tracechart{width:100%;height:200px}
.js .trace-path{stroke-dasharray:2400;stroke-dashoffset:2400}
.js .in .trace-path{animation:draw 2.1s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .in .trace-area{animation:fadeIn .9s var(--ease-out) 1.1s forwards}
@keyframes fadeIn{to{opacity:1}}
.js .in .evt{animation:fadeIn .5s var(--ease-out) forwards}
.js .in .evt:nth-of-type(1){animation-delay:1.35s}
.js .in .evt:nth-of-type(2){animation-delay:1.6s}
.js .in .evt:nth-of-type(3){animation-delay:1.85s}
.wall{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.wall{grid-template-columns:repeat(4,1fr)}}
.cell .n{font-family:var(--font-mono);font-size:1.75rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-on-light)}
.cell .t{font-size:.875rem;color:var(--ink-on-dark-2);margin-top:var(--s2)}
.cell .d{font-size:.8125rem;color:var(--ink-on-dark-3);margin-top:var(--s3);line-height:1.5}

/* stage effectiveness bars */
.eff{display:flex;flex-direction:column;gap:var(--s4)}
.eff-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;gap:var(--s5);
  align-items:center;font-size:.9375rem}
.eff-bar{height:6px;border-radius:3px;background:var(--line-light);overflow:hidden}
.eff-bar span{display:block;height:100%;border-radius:3px;background:#000;width:0;
  transition:width 1s var(--ease-out)}
.in .eff-bar span{width:var(--w)}
.eff-n{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-on-light-2);
  font-variant-numeric:tabular-nums}
@keyframes mq{to{transform:translateX(-50%)}}
.pill .st.live{background:var(--pos)}
.pill .st.beta{background:var(--accent)}

/* ========================= cards / quotes / faq ========================= */
.grid{display:grid;gap:var(--s4)}
@media(min-width:760px){}
.card{border-radius:var(--r-card);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s4);
  transition:transform var(--d-mid) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
.s-black .card{background:var(--bg-sunken);border:1px solid var(--line-dark)}
.s-black .card:hover{border-color:var(--line-dark-2);transform:translateY(-2px)}
.s-white .card{background:var(--bg-smoke);border:1px solid var(--line-light)}
.s-smoke .card{background:#fff;border:1px solid var(--line-light)}
.s-white .card:hover, .s-smoke .card:hover{border-color:var(--line-light-2);transform:translateY(-2px)}
.card p{font-size:1rem}
.s-black .card p{color:var(--ink-on-dark-2)}
.s-white .card p, .s-smoke .card p{color:var(--ink-on-light-2)}

.quote{border-radius:var(--r-card);padding:var(--s10);background:var(--bg-sunken);
  border:1px solid var(--line-dark);display:flex;flex-direction:column;gap:var(--s6)}
.quote blockquote{margin:0;font-size:clamp(1.125rem,1.8vw,1.375rem);line-height:1.45;letter-spacing:-.01em}

.faq{border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{display:flex;gap:var(--s5);align-items:flex-start;padding:var(--s6) 0;cursor:pointer;
  list-style:none;font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:-.01em;
  transition:opacity var(--d-fast) var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{opacity:.62}
.faq .q{flex:1}
.faq .sign{flex:none;width:20px;height:20px;position:relative;margin-top:6px;opacity:.45;
  transition:transform var(--d-mid) var(--ease-out)}
.faq .sign::before, .faq .sign::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.faq .sign::before{width:13px;height:1px}
.faq .sign::after{width:1px;height:13px;transition:opacity var(--d-fast) var(--ease-out)}
.faq details[open] .sign{transform:rotate(90deg)}
.faq details[open] .sign::after{opacity:0}
.faq .a{padding:0 0 var(--s8);max-width:70ch;color:var(--ink-on-light-2);font-size:1.0625rem}
.faq details[open] .a{animation:lineIn .34s var(--ease-out)}
.faq .flag{display:block;margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-card);
  background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.28);font-size:.9375rem}

/* ========================= cta / footer ========================= */
.cta{border-radius:var(--r-panel);background:var(--bg-sunken);border:1px solid var(--line-dark);
  padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;left:50%;top:-60%;width:140%;aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,var(--accent-faint),transparent 62%);pointer-events:none}
.cta>*{position:relative}
.form{display:flex;flex-direction:column;gap:var(--s3);max-width:540px;margin:var(--s10) auto 0}
@media(min-width:620px){.form{flex-direction:row;align-items:center}}
.fineprint{font-size:.8125rem;color:var(--ink-on-dark-3);margin-top:var(--s6)}

.foot{background:var(--bg-black);border-top:1px solid var(--line-dark);padding-block:var(--s16) var(--s10)}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--s10);justify-content:space-between;margin-bottom:var(--s16)}
.foot-col h3{font-size:var(--size-label);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--ink-on-dark-3);font-family:var(--font-mono);font-weight:var(--w-medium);margin-bottom:var(--s5)}
.foot-col li{margin-bottom:var(--s3)}
.foot-col a{font-size:.9375rem;color:var(--ink-on-dark-2);transition:color var(--d-fast) var(--ease-out)}
.foot-col a:hover{color:var(--ink-on-light)}
.foot-bot{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  padding-top:var(--s8);border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--ink-on-dark-3)}

/* ========================= reveal (JS-gated, fail-safe) ========================= */
.rv{transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none}
.js .stag>*{opacity:0;transform:translateY(14px);
  transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.js .stag.in>*{opacity:1;transform:none}
.js .stag.in>*:nth-child(1){transition-delay:0ms}
.js .stag.in>*:nth-child(2){transition-delay:70ms}
.js .stag.in>*:nth-child(3){transition-delay:140ms}
.js .stag.in>*:nth-child(4){transition-delay:210ms}
.js .stag.in>*:nth-child(5){transition-delay:280ms}
.js .stag.in>*:nth-child(6){transition-delay:350ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .rv, .js .stag>*, .rvw{opacity:1!important;transform:none!important;filter:none!important}
  .js .hero-art{animation:none}
  .js .trace-path{stroke-dashoffset:0}
}

/* ==========================================================================
   Product line — 4 products, the map{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:820px){}
.prod{position:relative;display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s8);border-radius:var(--r-card);background:var(--bg-sunken);
  border:1px solid var(--line-dark);
  transition:border-color var(--d-fast) var(--ease-out),transform var(--d-mid) var(--ease-out),
             background var(--d-fast) var(--ease-out)}
.prod:hover{border-color:var(--line-dark-2);transform:translateY(-2px);background:var(--bg-elevated)}
.prod.lead-prod{border-color:var(--accent-dim)}
.prod-list{display:flex;flex-direction:column;gap:7px;font-size:.9375rem;color:var(--ink-on-dark-2)}
.prod-list li{display:flex;gap:var(--s3);align-items:flex-start;line-height:1.45}
.prod-list li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:8px;
  background:var(--ink-on-dark-3)}
.prod-list.out li::before{background:none;width:9px;height:1px;margin-top:11px;
  background:var(--ink-on-dark-3);opacity:.7}
.prod-list.out li{color:var(--ink-on-dark-3)}
.prod .btn{padding:9px 18px;font-size:.875rem}
.tier .amt{font-family:var(--font-mono);font-size:.875rem;color:var(--ink-on-light);font-variant-numeric:tabular-nums}
#map{width:100%;min-width:640px;height:auto;display:block}
.js .map-g{opacity:0;transform:translateY(10px)}
.js .in .map-g{animation:mapIn .5s var(--ease-out) forwards}
.js .in .map-g:nth-of-type(1){animation-delay:.05s}
.js .in .map-g:nth-of-type(2){animation-delay:.16s}
.js .in .map-g:nth-of-type(3){animation-delay:.27s}
.js .in .map-g:nth-of-type(4){animation-delay:.38s}
@keyframes mapIn{to{opacity:1;transform:none}}
.js .map-l{stroke-dasharray:300;stroke-dashoffset:300}
.js .in .map-l{animation:draw 1s var(--ease-out) .45s forwards}

/* ---- who buys what ---- */
.buys{width:100%;border-collapse:collapse;font-size:.9375rem}
.buys th{text-align:left;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-on-light-3);font-weight:var(--w-medium);
  padding:0 var(--s5) var(--s4) 0;border-bottom:1px solid var(--line-light)}
.buys td{padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:1px solid var(--line-light);
  vertical-align:top;line-height:1.5}
.buys tr:last-child td{border-bottom:0}
.buys td:last-child, .buys th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.buys .who-c{color:var(--ink-on-light-2)}
.tagp{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-light-2);font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.04em;white-space:nowrap}
@media(max-width:640px){
  .buys, .buys tbody, .buys tr, .buys td{display:block;width:100%}
  .buys thead{display:none}
  .buys tr{padding:var(--s5) 0;border-bottom:1px solid var(--line-light)}
  .buys td{border:0;padding:0 0 var(--s3) 0}
  .buys td:last-child{text-align:left}
}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Mega-menu, rich bento, inline CTA band, compliance badges
   ========================================================================== */

/* ---- mega-menu ---- */
.has-mega{position:relative}
.mega-t{display:inline-flex;align-items:center;gap:6px;color:var(--ink-on-dark-2);
  font-size:.9375rem;padding-block:4px;transition:color var(--d-fast) var(--ease-out)}
.mega-t .chev{width:9px;height:9px;transition:transform var(--d-mid) var(--ease-out)}
.has-mega:hover .mega-t, .has-mega:focus-within .mega-t{color:var(--ink-on-light)}
.has-mega:hover .chev, .has-mega:focus-within .chev{transform:rotate(180deg)}

.mega{position:fixed;left:0;right:0;top:var(--nav-h);z-index:99;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out),
             visibility 0s linear var(--d-mid)}
.has-mega:hover .mega, .has-mega:focus-within .mega{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega-in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--page-x)}
.mega-card{background:#fff;border:1px solid var(--line-dark-2);border-radius:var(--r-panel);
  overflow:hidden;box-shadow:0 24px 60px -18px rgba(15,20,23,.22)}
.mega-cols{display:grid;grid-template-columns:1fr;gap:var(--s8);padding:var(--s8)}
@media(min-width:900px){.mega-cols{grid-template-columns:1.1fr 1fr 1fr .9fr;gap:var(--s10)}}
.mega-col .mega-h{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-on-dark-3);font-weight:var(--w-medium);margin:0 0 var(--s5)}
.mega-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:start;
  padding:9px 10px;margin-left:-10px;border-radius:10px;
  transition:background var(--d-fast) var(--ease-out)}
.mega-item:hover, .mega-item:focus-visible{background:rgba(15,20,23,.04)}
.mega-ic{width:17px;height:17px;color:var(--ink-on-dark-3);margin-top:2px;flex:none;
  transition:color var(--d-fast) var(--ease-out)}
.mega-item:hover .mega-ic{color:var(--accent)}
.mega-item b{display:block;font-weight:var(--w-regular);font-size:.9375rem;color:var(--ink-on-light);line-height:1.35}
.mega-item span{display:block;font-size:.8125rem;color:var(--ink-on-dark-3);line-height:1.45;margin-top:2px}
.mega-item .go{opacity:0;transform:translateX(-4px);color:var(--accent);font-size:.875rem;
  transition:opacity var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.mega-item:hover .go{opacity:1;transform:none}

.mega-feat{border-left:1px solid var(--line-dark);padding-left:var(--s8);
  display:flex;flex-direction:column;gap:var(--s3);justify-content:center}
@media(max-width:899px){.mega-feat{border-left:0;border-top:1px solid var(--line-dark);
  padding-left:0;padding-top:var(--s6)}}
.mega-feat .tagn{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.mega-feat b{font-size:1.0625rem;font-weight:var(--w-book);letter-spacing:-.01em;color:var(--ink-on-light)}
.mega-feat p{font-size:.8125rem;color:var(--ink-on-dark-3);line-height:1.5}
.mega-feat a{font-size:.875rem;color:var(--accent);display:inline-flex;align-items:center;gap:6px}

.mega-news{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) var(--s8);border-top:1px solid var(--line-dark);background:rgba(15,20,23,.03)}
.mega-news .np{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);
  border-radius:var(--r-pill);padding:3px 9px;flex:none}
.mega-news b{font-size:.875rem;font-weight:var(--w-regular);color:var(--ink-on-light)}
.mega-news span{font-size:.8125rem;color:var(--ink-on-dark-3)}

/* ---- rich bento ---- */
.bento2{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:860px){.bento2{grid-template-columns:5fr 7fr}}
.bcard{position:relative;border-radius:var(--r-panel);border:1px solid var(--line-dark);
  background:var(--bg-sunken);padding:var(--s8);overflow:hidden;min-height:400px;
  display:flex;flex-direction:column;
  transition:border-color var(--d-fast) var(--ease-out)}
.bcard:hover{border-color:var(--line-dark-2)}
.bcard h3{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:var(--w-regular);
  letter-spacing:-.02em;line-height:1.2;max-width:16ch;position:relative;z-index:2}
.bcard p{font-size:.9375rem;color:var(--ink-on-dark-2);margin-top:var(--s3);max-width:38ch;
  position:relative;z-index:2}

/* language cloud */
.cloud{position:relative;margin-top:auto;padding-top:var(--s8);
  display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;
  max-height:160px;overflow:hidden;
  mask-image:linear-gradient(#000 52%,transparent 96%);
  -webkit-mask-image:linear-gradient(#000 52%,transparent 96%)}
.lg{font-size:1.0625rem;color:var(--ink-on-dark-3);white-space:nowrap;opacity:.55}
.lg.on{color:var(--ink-on-light);opacity:1;border:1px solid var(--line-dark-2);border-radius:var(--r-pill);
  padding:8px 16px;background:var(--bg-raised);display:inline-flex;align-items:center;gap:9px;
  font-size:.9375rem}
.lg.on svg{width:15px;height:15px;color:var(--accent)}
.js .in .tile{animation:tileIn .7s var(--ease-spring) .15s backwards}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.94)}}
.tile .cap{font-size:.8125rem;color:var(--ink-on-dark-2)}
.bcard .glow{position:absolute;left:50%;top:60%;width:120%;aspect-ratio:1.6;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.09),transparent 62%)}

/* ---- compliance badges ---- */
.comply{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s10)}
.cbadge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);color:var(--ink-on-dark-2);font-size:.8125rem;
  transition:border-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}
.cbadge:hover{border-color:var(--line-dark-2);color:var(--ink-on-light)}
.cbadge svg{width:13px;height:13px;color:var(--ink-on-dark-3);flex:none}

/* explicit open state — click/tap and keyboard, not just hover */
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.has-mega.open .mega-t{color:var(--ink-on-light)}
.has-mega.open .chev{transform:rotate(180deg)}

/* ==========================================================================
   Ambient cyan drift on dark sections
   z-index:-1 needs its own stacking context, otherwise the layer escapes to
   the root and hides behind the body background. isolation:isolate gives it
   one without touching children — so .pipe-sticky keeps working.
   ========================================================================== */
/* the drift layers this isolated are gone, and an extra stacking context
   around a sticky stage is one more thing between it and the compositor */

.s-black:not(.hero)::before, .s-black:not(.hero)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  border-radius:50%;
}
.s-black:not(.hero)::before{
  left:-12%;top:-14%;width:62%;aspect-ratio:1.15;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.09),transparent 63%);
  animation:aurA 34s ease-in-out infinite alternate;
}
.s-black:not(.hero)::after{
  right:-16%;bottom:-18%;width:56%;aspect-ratio:1.3;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.07),transparent 66%);
  animation:aurB 46s ease-in-out infinite alternate;
}
@keyframes aurA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(16%,10%,0) scale(1.22)}
}
@keyframes aurB{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-14%,-9%,0) scale(.92)}
}

/* the closing CTA already carries its own glow — don't stack a second one */
#early::after{display:none}

/* hero keeps the generated artwork as its atmosphere, plus one slow drift */
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  left:8%;bottom:-24%;width:52%;aspect-ratio:1.4;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.08),transparent 64%);
  animation:aurB 40s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion:reduce){
  .s-black:not(.hero)::before, .s-black:not(.hero)::after, .hero::after{animation:none}
}

/* the drift only runs on sections in view — set by IntersectionObserver */
.s-black.aur-idle::before, .s-black.aur-idle::after{animation-play-state:paused}

/* ==========================================================================
   Legal & company pages
   ========================================================================== */
.doc-hero{padding-block:clamp(56px,7vw,96px) clamp(32px,4vw,48px);
  border-bottom:1px solid var(--line-dark)}
.doc-hero .h-sec{max-width:20ch}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.doc-upd{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-on-dark-3)}

.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  overflow:hidden}
.lang button{padding:6px 15px;font-size:.75rem;font-family:var(--font-mono);letter-spacing:.08em;
  color:var(--ink-on-dark-3);background:none;
  transition:color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out)}
.lang button[aria-pressed="true"]{background:var(--ink-on-light);color:#fff}
.lang button:not([aria-pressed="true"]):hover{color:var(--ink-on-light);background:rgba(15,20,23,.05)}

.doc-layout{display:grid;grid-template-columns:1fr;gap:var(--s10);
  padding-block:clamp(40px,5vw,72px) clamp(72px,9vw,128px)}
@media(min-width:1000px){.doc-layout{grid-template-columns:250px 1fr;gap:var(--s16)}}

/* table of contents */
.toc{display:none}
@media(min-width:1000px){
  .toc{display:block;position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;
    max-height:calc(100vh - var(--nav-h) - 60px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--line-dark-2) transparent}
}
.toc h2{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-on-dark-3);font-weight:var(--w-medium);margin:0 0 var(--s4)}
.toc ol{display:flex;flex-direction:column;gap:1px;counter-reset:none}
.toc a{display:block;padding:6px 10px;margin-left:-10px;border-radius:7px;font-size:.8125rem;
  line-height:1.4;color:var(--ink-on-dark-3);
  transition:color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out)}
.toc a:hover{color:var(--ink-on-light);background:rgba(15,20,23,.05)}
.toc a.cur{color:var(--accent);background:var(--accent-faint)}

/* prose */
.prose{max-width:74ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-on-dark-2)}
.prose h2{font-size:clamp(1.375rem,2.2vw,1.75rem);color:var(--ink-on-light);letter-spacing:-.02em;
  line-height:1.25;margin:var(--s16) 0 var(--s5);scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.125rem;font-weight:var(--w-book);color:var(--ink-on-light);letter-spacing:-.01em;
  margin:var(--s10) 0 var(--s3);scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose p{margin:0 0 var(--s5)}
.prose ul, .prose ol{margin:0 0 var(--s5);padding-left:0;display:flex;flex-direction:column;gap:9px}
.prose li{display:flex;gap:var(--s4);line-height:1.6}
.prose ul>li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:10px;
  background:var(--ink-on-dark-3)}
.prose ol{counter-reset:n}
.prose ol>li{counter-increment:n}
.prose ol>li::before{content:counter(n) ".";flex:none;color:var(--ink-on-dark-3);
  font-family:var(--font-mono);font-size:.8125rem;margin-top:3px;min-width:1.4em}
.prose a{color:var(--ink-on-light);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-dark-2);
  transition:text-decoration-color var(--d-fast) var(--ease-out)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong, .prose b{font-weight:var(--w-medium);color:var(--ink-on-light)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:.9375rem}
.prose th, .prose td{text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--line-dark);vertical-align:top}
.prose th{color:var(--ink-on-light);font-weight:var(--w-medium)}
[data-lang-block]{display:none}
[data-lang-block].on{display:block}
span[data-lang-block].on{display:inline}

/* real logos, normalised to one weight so a mixed wall still reads as one system.
   the stack section is white, so marks are driven to black{height:17px;width:auto;max-width:96px;object-fit:contain;
  filter:brightness(0);opacity:.72;
  transition:opacity var(--d-fast) var(--ease-out)}

/* ---- built-on strip ---- */
.tech{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){.tech{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tech{grid-template-columns:repeat(4,1fr)}}
.tw{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);
  border:1px solid var(--line-light);border-radius:var(--r-card);background:#fff;
  transition:border-color var(--d-fast) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.tw:hover{border-color:var(--line-light-2);transform:translateY(-2px)}
.tw-mark{width:26px;height:26px;flex:none;display:grid;place-items:center}
.tw-mark img{width:22px;height:22px;object-fit:contain;filter:brightness(0);opacity:.78}
.tw-mark .dotm{width:6px;height:6px;border-radius:50%;background:var(--ink-on-light-3)}
.tw b{display:block;font-size:.9375rem;font-weight:var(--w-regular);letter-spacing:-.01em}
.tw span{display:block;font-size:.75rem;color:var(--ink-on-light-3);margin-top:2px;
  font-family:var(--font-mono);letter-spacing:.02em}

/* ==========================================================================
   Logo wall — a dark panel inside the light section, so the section
   alternation stays intact while the marks get the dark ground they need
   ========================================================================== */
.wall-panel{background:var(--bg-black);border:1px solid var(--line-dark);
  border-radius:var(--r-panel);padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px);
  position:relative;overflow:hidden}
.wall-panel::before{content:"";position:absolute;left:50%;top:-70%;width:120%;aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,var(--accent-faint),transparent 60%)}
.wall-lead{position:relative;text-align:center;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-on-dark-3);margin-bottom:clamp(32px,4vw,48px)}
.wall-lead b{color:var(--ink-on-light);font-weight:var(--w-regular)}

/* The wall wraps and centres instead of filling fixed columns. With a column
   grid, any count that is not a clean multiple leaves the last row's marks
   stranded at the left edge — which is exactly what happened the moment the
   list went from eighteen marks to nineteen. This lays out correctly for any
   number of marks, so adding the next provider needs no layout change. */
.wall-grid{position:relative;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:clamp(22px,3vw,38px) clamp(26px,3.4vw,52px)}

.wl{display:flex;align-items:center;justify-content:center;height:30px;
  flex:0 0 auto;width:clamp(96px,13vw,148px);
  opacity:.55;transition:opacity var(--d-mid) var(--ease-out),filter var(--d-mid) var(--ease-out)}
.wl:hover{opacity:1}
/* cap width as well as height so wide wordmarks (Kommo) do not tower over
   square marks (Slack) at the same height — optical balance, not literal equality */
.wl img{max-height:30px;max-width:min(108px,100%);width:auto;object-fit:contain;
  filter:brightness(0);opacity:.9}
/* brands without a supplied mark sit as wordmarks — the reference wall is mostly
   wordmarks too, so they read as part of the same set rather than as a gap */
.wl .wm{font-size:1.0625rem;letter-spacing:-.015em;color:var(--ink-on-light);white-space:nowrap;
  font-weight:var(--w-book)}
.js .wall-grid .wl{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .wall-grid.in .wl{opacity:.55;transform:none}
.js .wall-grid.in .wl:hover{opacity:1}
.wall-note{position:relative;text-align:center;font-size:.8125rem;color:var(--ink-on-dark-3);
  margin-top:clamp(28px,3.5vw,40px);line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .js .wall-grid .wl{opacity:.55;transform:none}
}

/* ==========================================================================
   CRO pass — new sections. Reuses the existing tokens and surface classes;
   no new colours, radii or type sizes are introduced.
   ========================================================================== */

/* risk reversal directly under the primary CTA.
   This was display:flex with a gap, which is right for a row of chips and wrong
   for what every page actually puts in it: one sentence with a <b> inside. Flex
   blockifies the <b> and makes the three runs separate items, so the sentence
   rendered as "5 дзвінків на місяць,  $0  , без картки." — the gap pushed the
   comma off the number. It is running text, so it is laid out as running text. */
.risk{font-size:.8125rem;margin-top:var(--s4)}
.s-black .risk, .hero .risk{color:var(--ink-on-dark-3)}
.s-white .risk, .s-smoke .risk{color:var(--ink-on-light-3)}
.hero .risk{text-align:center}
.risk b{font-weight:var(--w-regular)}
.s-black .risk b, .hero .risk b{color:var(--ink-on-dark-2)}
.s-white .risk b, .s-smoke .risk b{color:var(--ink-on-light-2)}

/* product screenshot frame — crops to the top band via object-position
   instead of editing the source file */
.shot{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--line-dark);
  background:var(--bg-sunken);position:relative}
.s-white .shot, .s-smoke .shot{border-color:var(--line-light)}
/* a product screenshot is the product's own face: show it whole, never
   cover-cropped, or the crop slices words in half */
.shot img{width:100%;height:auto;display:block}
/* atmospheric stills are texture, so a band crop suits them; a screenshot is
   never cropped, which is why the two cases are separate classes */
.shot.wide img{aspect-ratio:16/6;object-fit:cover;object-position:center}
.shot-cap{font-size:.8125rem;margin-top:var(--s4);display:block}
.s-white .shot-cap, .s-smoke .shot-cap{color:var(--ink-on-light-3)}
.s-black .shot-cap{color:var(--ink-on-dark-3)}

/* three optics — leader / manager / coach */
.optics{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:860px){.optics{grid-template-columns:repeat(3,1fr)}}
.optic{border-radius:var(--r-card);padding:var(--s8);display:flex;flex-direction:column;
  gap:var(--s4);border:1px solid var(--line-light);background:#fff;
  transition:border-color var(--d-fast) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.s-smoke .optic{background:#fff}
.s-white .optic{background:var(--bg-smoke)}
.optic:hover{border-color:var(--line-light-2);transform:translateY(-2px)}
.optic-role{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-on-light-3)}
.optic h3{font-size:1.0625rem;font-weight:var(--w-book);letter-spacing:-.01em;line-height:1.35}
.optic p{font-size:.9375rem;color:var(--ink-on-light-2);line-height:1.55}
.optic .quote-s{font-size:.9375rem;color:var(--ink-on-light);line-height:1.5;
  padding-left:var(--s4);border-left:2px solid var(--line-light-2)}

/* security strip */
.sec-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){.sec-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.sec-grid{grid-template-columns:repeat(4,1fr)}}
.sec-item{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  border-radius:var(--r-card);border:1px solid var(--line-light);background:#fff}
.sec-item svg{width:18px;height:18px;color:var(--ink-on-light-3)}
.sec-item b{font-size:.9375rem;font-weight:var(--w-regular)}
.sec-item span{font-size:.8125rem;color:var(--ink-on-light-2);line-height:1.5}

/* pricing */
.prices{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:900px){.prices{grid-template-columns:repeat(3,1fr);align-items:start}}
.price{border-radius:var(--r-panel);border:1px solid var(--line-dark);background:var(--bg-sunken);
  padding:var(--s8);display:flex;flex-direction:column;gap:var(--s5);position:relative;
  transition:border-color var(--d-fast) var(--ease-out)}
.price:hover{border-color:var(--line-dark-2)}
.price.feat{border-color:var(--accent-dim);background:var(--bg-elevated)}
.price-name{display:flex;align-items:center;gap:var(--s3);font-size:1.0625rem;
  font-weight:var(--w-book);letter-spacing:-.01em}
.price-tag{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--accent-dim);color:var(--accent)}
.price-amt{display:flex;align-items:baseline;gap:6px}
.price-amt b{font-size:2.5rem;font-weight:var(--w-regular);letter-spacing:var(--ls-tighter);
  line-height:1;font-variant-numeric:tabular-nums}
.price-amt span{font-size:.875rem;color:var(--ink-on-dark-3)}
.price-note{font-size:.8125rem;color:var(--ink-on-dark-3);line-height:1.5}
.price ul{display:flex;flex-direction:column;gap:9px;font-size:.9375rem;
  color:var(--ink-on-dark-2)}
.price li{display:flex;gap:var(--s3);align-items:flex-start;line-height:1.5}
.price li svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--ink-on-dark-3)}
.price.feat li svg{color:var(--accent)}
.price .btn{margin-top:auto;justify-content:center}
.price-fine{font-size:.75rem;color:var(--ink-on-dark-3);text-align:center;
  margin-top:var(--s8);line-height:1.6}
@media(min-width:680px){}
@media(min-width:1000px){}

/* mobile navigation */
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  flex:none;width:44px;height:44px;
  align-items:center;margin-right:-8px}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink-on-light);border-radius:2px;
  transition:transform var(--d-mid) var(--ease-out),opacity var(--d-fast) var(--ease-out)}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:940px){.burger{display:none}}
.mnav{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:98;background:#fff;
  border-bottom:1px solid var(--line-dark-2);padding:var(--s6) var(--page-x) var(--s8);
  display:flex;flex-direction:column;gap:var(--s2);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out),
             visibility 0s linear var(--d-mid);max-height:calc(100vh - var(--nav-h));
  overflow-y:auto}
.nav.open+.mnav, .mnav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out),
             visibility 0s linear 0s}
.mnav a{padding:12px 0;font-size:1.0625rem;color:var(--ink-on-dark-2);
  border-bottom:1px solid var(--line-dark)}
.mnav a:last-of-type{border-bottom:0}
/* .mnav a sets padding:12px 0 and a bottom rule, and it outranks .btn's own
   padding — so the one conversion button in the mobile menu was rendering as a
   25px-tall text row with no horizontal padding. It gets its button back. */
.mnav .btn{margin-top:var(--s5);justify-content:center;
  padding:14px 22px;border-bottom:0;min-height:48px;align-items:center}
@media(min-width:940px){.mnav{display:none}}

/* below the nav breakpoint the header CTA and the burger fight for the same row —
   the CTA already lives inside the mobile panel, so drop it from the bar */
@media(max-width:939px){
  .nav-cta .btn{display:none}
  .nav-in{gap:var(--s4)}
}

/* ==========================================================================
   v3.1 — full site: floating nav, page chrome, new sections
   Reference discipline: gladia.io (floating pill nav, calm rhythm, one accent).
   Tokens are unchanged; nothing below introduces a new colour or radius scale.
   ========================================================================== */

:root{
  --nav-h:56px;
  --nav-pad:12px;
  --nav-total:80px;          /* nav-h + nav-pad + breathing room */
  --r-pill-box:16px;
}

/* anchors land below the floating bar */
section[id]{scroll-margin-top:calc(var(--nav-total) + 8px)}

/* ---------- floating pill nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:transparent;border-bottom:0;
  backdrop-filter:none;padding-top:var(--nav-pad);padding-bottom:0}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);
  pointer-events:none;opacity:0;transition:opacity var(--d-mid) var(--ease-out);
  background:linear-gradient(180deg,rgba(250,250,250,.92),transparent)}
.nav.stuck::before{opacity:1}
.nav-in{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s4);
  height:var(--nav-h);padding:0 8px 0 18px;border-radius:var(--r-pill-box);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -22px rgba(15,20,23,.32);
  transition:background var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out)}
.nav.stuck .nav-in{background:rgba(255,255,255,.94);border-color:var(--line-dark-2)}
.nav-links{margin-left:var(--s5);flex:1}
.nav-cta{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.nav-login{font-size:.9375rem;color:var(--ink-on-dark-2);white-space:nowrap;
  transition:color var(--d-fast) var(--ease-out)}
.nav-login:hover{color:var(--ink-on-light)}
@media(max-width:939px){.nav-login{display:none}}
.nav .btn{padding:9px 18px;font-size:.875rem}
.nav-links a.cur{color:var(--ink-on-light)}
.nav-links a.cur::after{width:100%}

/* mega hangs from the pill, not from the viewport top */
.mega{top:calc(var(--nav-pad) + var(--nav-h) + 10px)}
.mnav{top:calc(var(--nav-pad) + var(--nav-h) + 8px);inset-inline:0;bottom:auto;
  border-radius:var(--r-panel);margin-inline:var(--page-x);
  border:1px solid var(--line-dark-2);max-height:calc(100vh - var(--nav-total) - 24px);
  box-shadow:0 24px 60px -18px rgba(15,20,23,.22)}
.mnav .mega-h{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-on-dark-3);font-weight:var(--w-medium);margin:var(--s5) 0 var(--s2)}
.mnav .mega-h:first-child{margin-top:0}
.mnav a small{display:block;font-size:.75rem;color:var(--ink-on-dark-3);margin-top:2px}

/* sticky pipeline sits under the floating bar */
.pipe-sticky{top:var(--nav-total)}
@media(min-width:1000px){.toc{top:calc(var(--nav-total) + 24px);
  max-height:calc(100vh - var(--nav-total) - 60px)}}
.prose h2, .prose h3{scroll-margin-top:calc(var(--nav-total) + 24px)}

/* ---------- sub-page hero ---------- */
.page-hero{background:var(--bg-sunken);overflow:hidden;position:relative;
  padding-block:clamp(44px,5vw,76px) clamp(40px,5vw,68px);
  border-bottom:1px solid var(--line-dark)}
.page-hero .hero-grid{opacity:.26}
.page-hero .h-hero{font-size:clamp(1.875rem,3.4vw,2.75rem);max-width:22ch}
.page-hero.center{text-align:center}
.page-hero.center .h-hero, .page-hero.center .sub{margin-inline:auto}
.page-hero.center .btn-row, .page-hero.center .eyebrow{justify-content:center}
.page-hero-in{position:relative;z-index:2}
.page-hero .sub{margin-top:var(--s6)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-on-dark-3);
  margin-bottom:var(--s6)}
.crumb a{transition:color var(--d-fast) var(--ease-out)}
.crumb a:hover{color:var(--ink-on-light)}
.crumb span{opacity:.5}

/* ---------- key-figure strip ---------- */
.figs{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr);margin-top:clamp(40px,5vw,64px)}
@media(min-width:820px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{border-top:1px solid var(--line-dark);padding-top:var(--s5)}
.s-white .fig, .s-smoke .fig{border-color:var(--line-light)}
.fig b{display:block;font-size:clamp(1.75rem,3vw,2.25rem);letter-spacing:var(--ls-tighter);
  line-height:1;font-weight:var(--w-regular);font-variant-numeric:tabular-nums}
.fig span{display:block;font-size:.875rem;margin-top:var(--s3);line-height:1.45}
.s-black .fig span{color:var(--ink-on-dark-2)}
.s-white .fig span, .s-smoke .fig span{color:var(--ink-on-light-2)}

/* ---------- problem section ---------- */
.prob{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:820px){.prob{grid-template-columns:repeat(3,1fr)}}
.prob-c{border-radius:var(--r-card);border:1px solid var(--line-dark);background:var(--bg-sunken);
  padding:var(--s8);display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color var(--d-fast) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.prob-c:hover{border-color:var(--line-dark-2);transform:translateY(-2px)}
.prob-c .pn{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  color:var(--ink-on-dark-3)}
.prob-c b{font-size:1.0625rem;font-weight:var(--w-book);letter-spacing:-.01em;line-height:1.35}
.prob-c p{font-size:.9375rem;color:var(--ink-on-dark-2);line-height:1.55}
.stat-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4);
  margin-bottom:clamp(32px,4vw,48px)}
.stat-line b{font-size:clamp(3rem,8vw,5.5rem);line-height:.95;letter-spacing:var(--ls-tighter);
  font-weight:var(--w-regular)}
.stat-line span{font-size:1.0625rem;max-width:34ch;color:var(--ink-on-dark-2)}

/* ---------- four-step flow (dark) ---------- */
.flow4{display:grid;gap:var(--s4);grid-template-columns:1fr;counter-reset:f}
@media(min-width:700px){.flow4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.flow4{grid-template-columns:repeat(4,1fr)}}
.f4{position:relative;padding-top:var(--s8);counter-increment:f}
.f4::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--line-dark)}
.s-white .f4::before, .s-smoke .f4::before{background:var(--line-light)}
.f4::after{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line-dark-2);background:var(--bg-black)}
.s-white .f4::after, .s-smoke .f4::after{border-color:var(--line-light-2);background:#fff}
.f4:first-child::after{border-color:var(--accent);background:var(--accent-faint)}
.f4 .fk{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  color:var(--ink-on-dark-3);display:block;margin-bottom:var(--s3)}
.s-white .f4 .fk, .s-smoke .f4 .fk{color:var(--ink-on-light-3)}
.f4 b{display:block;font-size:1.125rem;font-weight:var(--w-book);letter-spacing:-.015em;
  line-height:1.3;margin-bottom:var(--s3)}
.f4 p{font-size:.9375rem;line-height:1.55;color:var(--ink-on-dark-2)}
.s-white .f4 p, .s-smoke .f4 p{color:var(--ink-on-light-2)}
.f4 .ft{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-on-dark-3);
  margin-top:var(--s4);display:block}
.s-white .f4 .ft, .s-smoke .f4 .ft{color:var(--ink-on-light-3)}

/* ---------- benefit grid ---------- */
.bens{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:700px){.bens{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.bens{grid-template-columns:repeat(3,1fr)}}
.ben{border-radius:var(--r-card);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s3);
  border:1px solid var(--line-dark);background:var(--bg-sunken);
  transition:border-color var(--d-fast) var(--ease-out),transform var(--d-mid) var(--ease-out),
             background var(--d-fast) var(--ease-out)}
.ben:hover{border-color:var(--line-dark-2);transform:translateY(-2px);background:var(--bg-elevated)}
.s-white .ben, .s-smoke .ben{background:#fff;border-color:var(--line-light)}
.s-white .ben:hover, .s-smoke .ben:hover{border-color:var(--line-light-2);background:#fff}
.ben-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-dark);background:var(--bg-elevated);margin-bottom:var(--s2)}
.s-white .ben-ic, .s-smoke .ben-ic{border-color:var(--line-light);background:var(--bg-smoke)}
.ben-ic svg{width:17px;height:17px;color:var(--accent)}
.s-white .ben-ic svg, .s-smoke .ben-ic svg{color:var(--ink-on-light)}
.ben b{font-size:1.0625rem;font-weight:var(--w-book);letter-spacing:-.01em;line-height:1.35}
.ben p{font-size:.9375rem;line-height:1.55;color:var(--ink-on-dark-2)}
.s-white .ben p, .s-smoke .ben p{color:var(--ink-on-light-2)}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line-light);border-radius:var(--r-panel);
  background:#fff}
.s-black .cmp-wrap{border-color:var(--line-dark);background:var(--bg-sunken)}
.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:640px}
.cmp th, .cmp td{text-align:left;padding:var(--s5) var(--s6);border-bottom:1px solid var(--line-light);
  vertical-align:top;line-height:1.5}
.s-black .cmp th, .s-black .cmp td{border-color:var(--line-dark)}
.cmp thead th{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-on-light-3);font-weight:var(--w-medium)}
.cmp tbody th{font-weight:var(--w-regular);color:var(--ink-on-light-2);width:26%}
.cmp .col-us{background:var(--accent-faint)}
.cmp thead .col-us{color:var(--ink-on-light);font-family:var(--font-sans);font-size:1rem;
  letter-spacing:-.01em;text-transform:none}
.cmp tr:last-child td, .cmp tr:last-child th{border-bottom:0}
.yes, .no, .mid{display:inline-flex;align-items:center;gap:8px}
.yes::before, .no::before, .mid::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:1px solid currentColor;opacity:.5}
.yes::before{background:var(--pos);border-color:transparent;opacity:1}
.no::before{background:transparent}
.mid::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);opacity:.35}

/* ---------- code block ---------- */
.code{border-radius:var(--r-panel);border:1px solid var(--line-dark);background:var(--bg-smoke);
  overflow:hidden}
.code-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-dark)}
.code-top span{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--ink-on-dark-3);text-transform:uppercase}
.copy{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-on-dark-3);border:1px solid var(--line-dark);border-radius:var(--r-pill);
  padding:5px 12px;transition:color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
.copy:hover{color:var(--ink-on-light);border-color:var(--line-dark-2)}
.code pre{margin:0;padding:var(--s6);overflow-x:auto;font-family:var(--font-mono);font-size:.8125rem;
  line-height:1.7;color:var(--ink-on-dark-2);tab-size:2}
.code .k{color:var(--accent)}
.code .s{color:var(--ink-on-light)}
.code .c{color:var(--ink-on-dark-3)}
.code-2{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:960px){.code-2{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- endpoint rows ---------- */
.eps{display:flex;flex-direction:column}
.ep{display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--line-dark)}
.ep:last-child{border-bottom:0}
.ep .m{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;padding:4px 9px;
  border-radius:6px;border:1px solid var(--line-dark-2);color:var(--accent);flex:none}
.ep .u{font-family:var(--font-mono);font-size:.875rem;color:var(--ink-on-light)}
.ep p{grid-column:1/-1;font-size:.9375rem;color:var(--ink-on-dark-2);margin-top:-8px}
@media(min-width:720px){.ep{grid-template-columns:auto auto 1fr}.ep p{grid-column:auto;margin-top:0;
  text-align:right}}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:var(--s10);grid-template-columns:1fr}
@media(min-width:900px){.contact-grid{grid-template-columns:1.1fr .9fr;gap:var(--s16)}}
.form-card{border-radius:var(--r-panel);border:1px solid var(--line-dark);background:var(--bg-sunken);
  padding:clamp(24px,4vw,40px)}
.form-col{display:flex;flex-direction:column;gap:var(--s4)}
.form-col label{display:flex;flex-direction:column;gap:var(--s2);font-size:.875rem;
  color:var(--ink-on-dark-2)}
.form-col input, .form-col select, .form-col textarea{width:100%;padding:13px 16px;border-radius:12px;
  background:#fff;border:1px solid var(--line-strong);color:var(--ink-on-light);font-family:inherit;
  font-size:.9375rem;transition:border-color var(--d-fast) var(--ease-out)}
.form-col textarea{min-height:120px;resize:vertical;line-height:1.55}
/* Every other control on the site takes the global :focus-visible ring; these
   opted out with outline:none and offered a 1px border tint instead, which a
   keyboard user can easily miss. Pointer focus keeps the quiet tint, keyboard
   focus gets the same ring as everything else. */
.form-col input:focus, .form-col select:focus, .form-col textarea:focus{border-color:var(--accent)}
.form-col input:focus-visible, .form-col select:focus-visible, .form-col textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.form-col input::placeholder, .form-col textarea::placeholder{color:var(--ink-on-dark-3)}
.form-col .btn{justify-content:center;margin-top:var(--s2)}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.form-msg{font-size:.875rem;color:var(--ink-on-dark-2);min-height:1.2em}
.form-msg.ok{color:var(--pos)}
.form-msg.err{color:var(--neg)}
.contact-list{display:flex;flex-direction:column;gap:var(--s6)}
.contact-item{display:flex;flex-direction:column;gap:6px;padding-bottom:var(--s6);
  border-bottom:1px solid var(--line-dark)}
.contact-item:last-child{border-bottom:0}
.contact-item .ck{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-on-dark-3)}
.contact-item a, .contact-item b{font-size:1.0625rem;font-weight:var(--w-regular)}
.contact-item a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-dark-2);transition:text-decoration-color var(--d-fast)}
.contact-item a:hover{text-decoration-color:var(--accent)}
.contact-item span{font-size:.875rem;color:var(--ink-on-dark-2)}

/* ---------- misc ---------- */
.split{display:grid;gap:var(--s10);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:var(--s16)}}
.split.wide-l{grid-template-columns:1fr}
@media(min-width:960px){.split.wide-l{grid-template-columns:1.15fr .85fr}}
.note-card{border-radius:var(--r-card);border:1px solid var(--line-dark);background:var(--bg-sunken);
  padding:var(--s6);font-size:.9375rem;color:var(--ink-on-dark-2);line-height:1.6}
.s-white .note-card, .s-smoke .note-card{border-color:var(--line-light);background:#fff;
  color:var(--ink-on-light-2)}
.note-card b{color:var(--ink-on-light);font-weight:var(--w-regular)}
.s-white .note-card b, .s-smoke .note-card b{color:var(--ink-on-light)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{font-family:var(--font-mono);font-size:.6875rem;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);color:var(--ink-on-dark-2)}
.s-white .chip, .s-smoke .chip{border-color:var(--line-light);color:var(--ink-on-light-2)}
.list-check{display:flex;flex-direction:column;gap:10px;font-size:.9375rem}
.list-check li{display:flex;gap:var(--s3);align-items:flex-start;line-height:1.5}
.list-check svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--accent)}
.s-black .list-check li{color:var(--ink-on-dark-2)}
.s-white .list-check li, .s-smoke .list-check li{color:var(--ink-on-light-2)}
.s-white .list-check svg, .s-smoke .list-check svg{color:var(--ink-on-light)}

/* provider table */
.prov{width:100%;border-collapse:collapse;font-size:.9375rem}
.prov th{text-align:left;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-on-light-3);font-weight:var(--w-medium);
  padding:0 var(--s5) var(--s4) 0;border-bottom:1px solid var(--line-light)}
.prov td{padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:1px solid var(--line-light);
  vertical-align:top;line-height:1.5;color:var(--ink-on-light-2)}
.prov td:first-child{color:var(--ink-on-light);white-space:nowrap}
.prov tr:last-child td{border-bottom:0}
.prov .rg{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-on-light-3);white-space:nowrap}
@media(max-width:700px){
  .prov, .prov tbody, .prov tr, .prov td{display:block;width:100%}
  .prov thead{display:none}
  .prov tr{padding:var(--s5) 0;border-bottom:1px solid var(--line-light)}
  .prov td{border:0;padding:0 0 6px}
}

/* team / values */
.vals{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.vals{grid-template-columns:repeat(3,1fr)}}
.val{padding:var(--s8) 0;border-top:1px solid var(--line-dark)}
.s-white .val, .s-smoke .val{border-color:var(--line-light)}
.val b{display:block;font-size:1.125rem;font-weight:var(--w-book);letter-spacing:-.015em;
  margin-bottom:var(--s3)}
.val p{font-size:.9375rem;line-height:1.6;color:var(--ink-on-dark-2)}
.s-white .val p, .s-smoke .val p{color:var(--ink-on-light-2)}

/* footer refinements */
.foot-col ul{display:flex;flex-direction:column}

/* reduced motion additions */
@media (prefers-reduced-motion:reduce){
  .nav-in{transition:none}
}

/* ==========================================================================
   v3.1 fixes found in self-test
   ========================================================================== */

/* The horizontal clip that used to live on html and body is gone.
   It was added to contain the ambient drift layers, and those are switched off
   now, so nothing needed clipping — every page measures scrollWidth == the
   viewport without it.
   Removing it matters beyond dead code: WebKit only keeps position:sticky on
   the compositor while the root scroller's overflow is visible. With the clip
   in place Safari fell back to updating sticky on the main thread, which lags
   the asynchronously-scrolled page by a pixel or two every frame — the pinned
   stage juddered under a trackpad swipe while the fixed header beside it was
   perfectly still. */

/* the hero headline is longer than the original one line, so let it breathe */
.hero .h-hero{max-width:19ch}
.page-hero .h-hero{max-width:22ch}

/* the tall pipeline section cannot take a clip without risking its sticky
   child, so it simply does not run the drift layers */
.s-black.pipe-scroll::before, .s-black.pipe-scroll::after{display:none}

/* legal pages on narrow screens: a grid item defaults to min-width:auto, so a
   wide table inside the prose stretched the whole column past the viewport */
.doc-layout>*{min-width:0}
.prose{overflow-wrap:anywhere}
/* A wide table used to become display:block on narrow screens so it could
   scroll — which strips its row/column semantics and a screen reader stops
   announcing it as a table at all. The scrolling belongs to a wrapper around
   it; the table stays a table. The wrapper is focusable because a region that
   scrolls has to be reachable from the keyboard. */
.table-wrap{max-width:100%;overflow-x:auto;margin:0 0 var(--s5);
  -webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.table-wrap>table{margin-bottom:0}
.prose table{min-width:34rem}
@media(min-width:760px){.prose table{min-width:0}}

/* the assistant question chips wrap instead of being clipped on phones */
.bcard .cloud .lg.on{white-space:normal;max-width:100%}

/* the mobile panel is fixed, but a clipped ancestor can become its containing
   block, so it inherits a width that is not the viewport. 100vw pins it. */
.mnav{left:var(--page-x);right:auto;margin-inline:0;width:calc(100vw - var(--page-x) * 2)}

/* ==========================================================================
   Language switch
   ========================================================================== */
.lang-switch{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;
  color:var(--ink-on-dark-2);white-space:nowrap;padding:6px 10px;border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out)}
.lang-switch svg{width:15px;height:15px;opacity:.75}
.lang-switch:hover{color:var(--ink-on-dark);border-color:var(--line-dark-2);
  background:rgba(255,255,255,.5)}
@media(max-width:1100px){.lang-switch span, .lang-switch{font-size:0}
  .lang-switch svg{width:17px;height:17px;opacity:.9}}
@media(max-width:939px){.lang-switch{display:none}}
.mnav-lang{display:flex;align-items:center;gap:8px}

/* ==========================================================================
   ==========================================================================
   THE SYSTEM LAYER
   Everything above is components. Everything below is the page itself: its
   type scale, its nav, its hero, and the one hard cut from paper to black
   where the story runs. This layer is the last word, so a component that
   disagrees with it loses.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type
   One display size that is genuinely large, one body size that stays calm, and a wide gap between them. Display runs at regular weight with tight
   tracking — the size does the work, not the weight.
   -------------------------------------------------------------------------- */
:root{
  --size-hero:clamp(2.75rem,5.9vw,5rem);
  --size-section:clamp(2rem,3.6vw,3rem);
  --size-card:clamp(1.0625rem,1.3vw,1.1875rem);
  --ls-tight:-.02em;
  --ls-tighter:-.026em;
  --nav-h:60px;
}
body{font-size:1.0625rem;line-height:1.55;letter-spacing:-.005em}
h1, h2, h3, h4{font-weight:400}
.h-hero{font-size:var(--size-hero);letter-spacing:var(--ls-tighter);line-height:1.08}
.h-sec{font-size:var(--size-section);letter-spacing:var(--ls-tight);line-height:1.12;max-width:20ch}
.h-sec.wide{max-width:26ch}
.eyebrow{font-size:.6875rem;letter-spacing:.14em;font-family:var(--font-mono)}

/* --------------------------------------------------------------------------
   Nav — a dark pill that floats over the page
   It never changes on scroll: no colour swap, no resize. One shape, present
   identically at the top of the document and at the bottom of it.
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:14px;left:0;right:0;z-index:100;
  background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding-inline:var(--page-x);
}
.nav::before{display:none}
.nav .wrap{padding-inline:0}
.nav-in{
  height:var(--nav-h);gap:var(--s5);
  padding:0 10px 0 22px;border-radius:var(--r-pill);
  /* No backdrop blur. A full-width backdrop-filter is re-sampled and re-blurred
     on every scroll frame, and over a pill that is already 94% opaque it buys
     almost nothing to look at while costing the most of anything here. */
  background:rgba(28,28,32,.94);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 34px -14px rgba(0,0,0,.5);
}
.nav.stuck .nav-in{background:rgba(28,28,32,.96);border-color:rgba(255,255,255,.09);transform:none}
/* the bar is dark on every page, so everything inside it reads light */
.nav .brand{color:#fff}
.brand-word{height:17px;width:auto;display:block;filter:invert(1) brightness(2)}
.brand-tm{opacity:.5}
.nav-links{gap:var(--s5);font-size:.875rem}
.nav-links a, .nav .mega-t{color:rgba(255,255,255,.72)}
.nav-links a:hover, .nav .mega-t:hover, .has-mega.open .mega-t{color:#fff}
.nav-links a::after{background:#fff}
.nav .lang-switch{color:rgba(255,255,255,.72)}
.nav .lang-switch:hover{color:#fff;background:rgba(255,255,255,.1);border-color:transparent}
.nav .btn{padding:9px 18px;font-size:.8125rem}
.nav .btn-ghost{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
.nav .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.nav .btn-primary{background:#fff;color:#0A0A0A;border-color:#fff}
.nav .btn-primary:hover{background:rgba(255,255,255,.86);border-color:transparent}
/* the pill floats, so the page starts underneath it, not below it */
.nav+*, main{--nav-total:calc(var(--nav-h) + 14px)}
.burger{color:#fff}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{padding:13px 26px;font-size:.9375rem;font-weight:450}
.btn-primary{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.btn-primary:hover{background:#2A2A2E;border-color:#2A2A2E}
.btn-ghost{border-color:var(--line-light-2);color:var(--ink-on-light);background:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff;border-color:var(--line-strong)}
.s-black .btn-primary{background:#fff;color:#0A0A0A;border-color:#fff}
.s-black .btn-primary:hover{background:rgba(255,255,255,.86);border-color:transparent}
.s-black .btn-ghost{border-color:rgba(255,255,255,.24);color:#fff;background:none}
.s-black .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
body{background:var(--bg-white);color:var(--ink-on-light)}
.s-white{background:var(--bg-white);color:var(--ink-on-light)}
.s-smoke{background:var(--bg-smoke);color:var(--ink-on-light)}
.s-black{background:var(--bg-black);color:var(--ink-on-dark)}
.s-black .sub, .s-black p{color:var(--ink-on-dark-2)}
.s-black .h-sec, .s-black h1, .s-black h2, .s-black h3, .s-black h4{color:var(--ink-on-dark)}
.s-black .eyebrow{color:var(--ink-on-dark-3)}
/* the ambient drift belonged to a pale page; on true black it is haze */
.s-black::before, .s-black::after{display:none!important}

/* --------------------------------------------------------------------------
   Hero
   White at the top, the accent pooling at the floor, and a set of hairline
   arcs sweeping through it. The type is the subject: it sits centred, large
   and at regular weight, and it is plain readable text from the first frame —
   no scrub, no split, nothing that can leave a headline invisible.
   -------------------------------------------------------------------------- */
.hero-v5{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,860px);
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 76px) clamp(64px,8vw,110px);
  text-align:center;
  background:var(--bg-white);
}

/* the wash: one vertical ramp plus a wide bloom, so the floor glows rather
   than banding into a stripe */
.hero-v5::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    /* The blooms sit just above the floor and are already decaying by the time
       they reach it. The ramp peaks a little before the bottom edge and eases
       back to --wash-edge, which is exactly where the next section picks the
       wash up again — so the section boundary has no step in it. */
    radial-gradient(86% 48% at 24% 98%,rgba(var(--accent-rgb),.28) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(82% 44% at 80% 102%,rgba(255,142,96,.20) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,var(--wash-1) 38%,var(--wash-2) 62%,var(--wash-3) 82%,
                    var(--wash-4) 93%,var(--wash-edge) 100%);
}
/* a soft white veil over the middle so the headline always has clean ground */
.hero-v5::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 40% at 50% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 74%);
}

/* the arcs: three enormous circles, hairline, drifting on a long cycle */
.hero-arcs{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:100%;height:100%;overflow:visible;
}
.hero-arcs circle{fill:none;stroke:rgba(10,10,10,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-arcs .a2{stroke:rgba(10,10,10,.14)}
.hero-arcs .a3{stroke:rgba(var(--accent-rgb),.45)}
/* The arcs are engraved, not animated. A transform on an SVG <g> is not handed
   to the compositor, so drifting them meant re-rasterising a full-viewport SVG
   every frame, for ever, on all 22 pages that carry them — continuous
   main-thread work whose only real effect was to compete with scrolling. The
   drift was 1.5% over 48 seconds, which nobody could see anyway. */

.hero-v5-in{position:relative;z-index:1;width:100%;max-width:1060px;margin-inline:auto}

/* the live counter, the one piece of running data above the headline */
.hero-live{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 15px 6px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);border:1px solid rgba(10,10,10,.09);
  box-shadow:0 1px 2px rgba(10,10,10,.04);
  font-size:.8125rem;color:var(--ink-on-light-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  margin-bottom:clamp(26px,3.4vw,40px);
}
.hero-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;position:relative}
.hero-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--accent);animation:ping 2.4s var(--ease-out) infinite}
.hero-live b{font-family:var(--font-mono);font-weight:500;color:var(--ink-on-light);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* the pill doubles as the announcement slot, so it has to behave like a link */
a.hero-live{
  text-decoration:none;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out);
}
a.hero-live:hover{background:rgba(255,255,255,.96);border-color:rgba(10,10,10,.17)}
a.hero-live:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hl-arw{display:inline-block;transition:transform .2s var(--ease-out)}
/* the pill must never wrap; the trailing descriptor goes first on narrow screens */
a.hero-live{white-space:nowrap;max-width:calc(100vw - 2*var(--gut,20px))}
@media (max-width:600px){.hl-more{display:none}}
a.hero-live:hover .hl-arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  a.hero-live .hl-arw,a.hero-live:hover .hl-arw{transition:none;transform:none}
}

.hero-v5 .h-hero{margin-inline:auto;max-width:17ch;color:var(--ink-on-light)}
.hero-v5 .sub{margin:clamp(22px,2.6vw,32px) auto 0;max-width:56ch;
  font-size:1.0625rem;color:var(--ink-on-light-2)}
.hero-v5 .btn-row{justify-content:center;margin-top:clamp(28px,3.4vw,40px)}
/* The risk-reversal line under the hero CTA. It was carrying class="is-risk",
   which only exists in this file as .a-chip.is-risk — so it inherited nothing,
   kept the global p{margin:0} and sat flush against the buttons. It also needs
   a measure of its own: centred text running the full 1060px column has no
   shape to it. */
.hero-note{margin:clamp(18px,2.2vw,26px) auto 0;max-width:52ch;text-align:center;
  text-wrap:balance}
.hero-v5 .risk{margin-top:var(--s5);font-size:.8125rem;color:var(--ink-on-light-3)}
.hero-v5 .risk b{color:var(--ink-on-light-2);font-weight:500}

/* the scroll cue: a label and a hairline that runs down out of the section */
.hero-cue{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(10,10,10,.45);z-index:1;
}
.hero-cue span{display:block}
.hero-cue i{display:block;width:1px;height:58px;background:linear-gradient(
  180deg,rgba(10,10,10,.3),rgba(10,10,10,0))}
.js .hero-cue i{animation:cueRun 2.6s var(--ease-out) infinite}
@keyframes cueRun{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
                  40%{opacity:1}
                  100%{transform:scaleY(1);transform-origin:top;opacity:0}}

@media(max-width:720px){
  .hero-v5{min-height:0;padding-block:calc(var(--nav-h) + 56px) 84px}
  .hero-v5 .h-hero{max-width:none}
  .hero-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .hero-arcs g, .js .hero-cue i, .hero-live i::after{animation:none}
}

/* --------------------------------------------------------------------------
   The story
   One black section that carries the whole argument: a call ends, it becomes
   text, CLUE marks the moments that matter, the team acts. Four acts on a
   pinned stage, driven by scroll position only — no canvas, no per-frame
   painting, nothing that can leave content invisible.
   The section is written to read as four stacked blocks. Only once the script
   has taken it over does it become a pinned stage (.story.is-pinned), so a failed
   script degrades to a plain, complete, readable section.
   -------------------------------------------------------------------------- */
/* no overflow clipping here: an `overflow:hidden` ancestor turns itself into
   the sticky child's scroll container, which silently kills the pin */
.story{padding-bottom:0}
.story-head{max-width:var(--wrap);margin-bottom:clamp(40px,5vw,72px)}
.story-head .h-sec{max-width:22ch}
.story-head .sub{margin-top:var(--s6);color:var(--ink-on-dark-2)}

.story-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media(min-width:1000px){
  .story-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
}

/* ---- the rail: four steps, the live one lit ---- */
.story-rail{display:flex;flex-direction:column;gap:2px;position:relative}
.story-step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4) var(--s4) var(--s4) 0;border-radius:var(--r-card);
  cursor:default;
}
.story-step .sn{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.6875rem;flex:none;
  border:1px solid rgba(255,255,255,.22);color:var(--ink-on-dark-3);
  transition:background var(--d-mid) var(--ease-out),color var(--d-mid) var(--ease-out),
             border-color var(--d-mid) var(--ease-out);
}
/* An inactive step is still text a visitor reads, so it dims by colour only —
   never below 4.5:1 on black. The earlier version stacked a .55 opacity on top
   of the tertiary ink, which put it under 2:1. */
.story-step b{
  display:block;font-size:1.0625rem;font-weight:400;letter-spacing:-.015em;
  color:#9A9AA3;
  transition:color var(--d-mid) var(--ease-out);
}
.story-step span{
  display:block;font-size:.9375rem;line-height:1.5;color:#83838C;
  margin-top:6px;max-width:38ch;
  transition:color var(--d-mid) var(--ease-out);
}
.story-step.on .sn{background:var(--accent);border-color:var(--accent);color:#fff}
.story-step.on b{color:var(--ink-on-dark)}
.story-step.on span{color:var(--ink-on-dark-2)}

/* ---- the stage: one artefact per act ---- */
.story-acts{position:relative}
.act{
  border-radius:var(--r-panel);border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(168deg,#141418,#0B0B0E 70%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -44px #000;
  padding:var(--s6);overflow:hidden;
}
.act-h{
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.05em;
  color:var(--ink-on-dark-3);
}
.act-h .pip{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.act-h .rt{margin-left:auto;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(var(--accent-rgb),.14);color:#FFB4A0;
  border:1px solid rgba(var(--accent-rgb),.3)}

/* stacked and readable with no script; pinned and swapped once live */
.story.is-pinned .story-scroll{height:400vh}
.story.is-pinned .story-stage{position:sticky;top:0;height:100svh;
  /* grid, not flex: a flex child does not grow, so the .wrap inside shrank to
     its content and the two columns collapsed to a few hundred pixels */
  display:grid;align-content:center;justify-items:stretch}
.story.is-pinned .story-acts{min-height:396px}
/* Opacity and a small vertical offset only. A scale on a panel this size
   re-rasterises every glyph inside it for the whole transition, which reads as
   shimmer laid over the scroll. */
.story.is-pinned .act{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .42s var(--ease-out),transform .42s var(--ease-out);
  pointer-events:none}
.story.is-pinned .act.on{opacity:1;transform:none;pointer-events:auto}
.story:not(.is-pinned) .act+.act{margin-top:var(--s5)}
.story:not(.is-pinned) .story-scroll{padding-bottom:clamp(56px,6.5vw,96px)}

/* ---- act 1: the call lands ---- */
.a-call{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;
  padding:var(--s5);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);
  background:rgba(255,255,255,.03)}
.a-call .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.14);color:var(--accent);flex:none}
.a-call .ic svg{width:18px;height:18px}
.a-call b{display:block;font-size:1rem;font-weight:400;color:var(--ink-on-dark)}
.a-call em{display:block;font-style:normal;font-size:.8125rem;color:var(--ink-on-dark-3);
  font-family:var(--font-mono);margin-top:4px}
.a-states{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s5)}
.a-states i{font-style:normal;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;
  padding:5px 11px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);
  color:var(--ink-on-dark-3);opacity:.4;transition:all var(--d-mid) var(--ease-out)}
.act.on .a-states i{animation:stateIn .5s var(--ease-out) forwards}
.act.on .a-states i:nth-child(1){animation-delay:.15s}
.act.on .a-states i:nth-child(2){animation-delay:.5s}
.act.on .a-states i:nth-child(3){animation-delay:.85s}
.act.on .a-states i:nth-child(4){animation-delay:1.2s}
@keyframes stateIn{to{opacity:1;color:#FFB4A0;border-color:rgba(var(--accent-rgb),.36);
  background:rgba(var(--accent-rgb),.1)}}

/* ---- act 2: the transcript writes itself ---- */
.a-feed{display:flex;flex-direction:column;gap:13px}
.a-line{opacity:0;transform:translateY(8px)}
.act.on .a-line{animation:lineIn .5s var(--ease-out) forwards}
.act.on .a-line:nth-child(1){animation-delay:.1s}
.act.on .a-line:nth-child(2){animation-delay:.55s}
.act.on .a-line:nth-child(3){animation-delay:1s}
.act.on .a-line:nth-child(4){animation-delay:1.45s}
@keyframes lineIn{to{opacity:1;transform:none}}
.a-line .who{display:block;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-on-dark-3);margin-bottom:4px}
.a-line .said{display:block;font-size:.9375rem;line-height:1.5;color:var(--ink-on-dark);max-width:46ch}
.a-line.c{padding-left:var(--s4);border-left:2px solid rgba(var(--accent-rgb),.45)}
.a-line.c .said{color:#D6D6DC}

/* ---- act 3: the moments get marked ---- */
.a-trace{position:relative;margin-top:var(--s2)}
.a-trace svg{width:100%;height:170px;display:block;overflow:visible}
.a-trace .a-tline{fill:none;stroke:#FF9878;stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55));
  stroke-dasharray:1400;stroke-dashoffset:1400}
.act.on .a-trace .a-tline{animation:draw 1.9s var(--ease-out) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.a-trace .a-tarea{fill:url(#agrad)}
.act.on .a-trace .a-tarea{animation:fadeIn .8s var(--ease-out) 1.3s forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.a-trace .a-tmark{opacity:0}
.act.on .a-trace .a-tmark{animation:fadeIn .45s var(--ease-out) forwards}
.act.on .a-trace .a-tmark.m1{animation-delay:1.1s}
.act.on .a-trace .a-tmark.m2{animation-delay:1.5s}
.act.on .a-trace .a-tmark.m3{animation-delay:1.9s}
.a-trace .a-tmark line{stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:3 3}
.a-trace .a-tmark circle{fill:#0B0B0E;stroke-width:2}
.a-trace .a-tmark text{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em}
.a-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.a-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.03em;
  border:1px solid transparent;opacity:0}
.a-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.act.on .a-chip{animation:chipIn .45s var(--ease-spring) forwards}
.act.on .a-chip:nth-child(1){animation-delay:1.15s}
.act.on .a-chip:nth-child(2){animation-delay:1.55s}
.act.on .a-chip:nth-child(3){animation-delay:1.95s}
@keyframes chipIn{from{opacity:0;transform:translateX(-10px) scale(.94)}to{opacity:1;transform:none}}
.a-chip.is-obj{color:#FFB4A0;background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.32)}
.a-chip.is-risk{color:#F2A08F;background:rgba(200,60,40,.16);border-color:rgba(200,60,40,.4)}
.a-chip.is-ok{color:#7BD9A2;background:rgba(18,161,80,.16);border-color:rgba(18,161,80,.4)}

/* ---- act 4: the verdict ---- */
.a-verdict{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.a-dial{position:relative;flex:none;display:grid;place-items:center}
.a-dial svg{transform:rotate(-90deg)}
.a-dial .a-trk{stroke:rgba(255,255,255,.1)}
.a-dial .a-val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:239;stroke-dashoffset:239}
.act.on .a-dial .a-val{animation:dial 1.5s var(--ease-out) .2s forwards}
@keyframes dial{to{stroke-dashoffset:60}}   /* 7.5 of 10 on r=38 */
.a-dial b{position:absolute;font-size:1.75rem;letter-spacing:-.02em;color:var(--ink-on-dark);
  font-variant-numeric:tabular-nums}
.a-recs{flex:1 1 240px;min-width:220px;display:flex;flex-direction:column;gap:10px}
.a-recs li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;
  color:var(--ink-on-dark-2);opacity:0;transform:translateX(-8px)}
.act.on .a-recs li{animation:recIn .5s var(--ease-out) forwards}
.act.on .a-recs li:nth-child(1){animation-delay:.6s}
.act.on .a-recs li:nth-child(2){animation-delay:.85s}
.act.on .a-recs li:nth-child(3){animation-delay:1.1s}
@keyframes recIn{to{opacity:1;transform:none}}
.a-recs svg{width:15px;height:15px;flex:none;margin-top:3px;color:#12A150}
.a-recs li:last-child svg{color:#FF8464}
.a-note{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:var(--s3);font-size:.8125rem;color:var(--ink-on-dark-3);
  font-family:var(--font-mono)}

/* mirrors the script's pin gate, so the two can never disagree */
@media (max-width:999px), (max-height:759px), (prefers-reduced-motion:reduce){
  .story.is-pinned .story-scroll{height:auto}
  .story.is-pinned .story-stage{position:static;height:auto;display:block}
  .story.is-pinned .story-acts{min-height:0}
  .story.is-pinned .act{position:static;opacity:1;transform:none;pointer-events:auto}
  .story.is-pinned .act+.act{margin-top:var(--s5)}
  .story-step.on .sn{background:var(--accent);border-color:var(--accent);color:#fff}
  .story-step b,.story-step.on b{color:var(--ink-on-dark)}
  .story-step span{opacity:1;color:var(--ink-on-dark-2)}
}
@media (prefers-reduced-motion:reduce){
  .act.on *{animation:none!important}
  .a-trace .a-tline{stroke-dashoffset:0}
  .a-trace .a-tmark, .a-chip, .a-line, .a-recs li{opacity:1;transform:none}
  .a-dial .a-val{stroke-dashoffset:60}
  .a-states i{opacity:1}
}

/* --------------------------------------------------------------------------
   Sub-page heroes
   The nav floats now, so every page has to start underneath it rather than
   below it — otherwise the first line of every sub-page sits behind the pill.
   The sub-page hero also inherits the homepage's wash, at a fraction of the
   strength, so the two read as the same site.
   -------------------------------------------------------------------------- */
.page-hero{
  background:var(--bg-white);position:relative;isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(56px,6vw,92px)) clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line-light);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(84% 54% at 20% 104%,rgba(var(--accent-rgb),.24) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(76% 46% at 84% 108%,rgba(255,142,96,.16) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#fff 38%,#FFF4F0 66%,#FFE7DE 90%,#FFEDE6 100%);
}
.page-hero .hero-grid, .page-hero .hero-art{display:none}   /* the grid is gone site-wide */
.page-hero .h-hero{font-size:clamp(2rem,3.7vw,3.1rem);max-width:20ch;letter-spacing:var(--ls-tighter)}
.page-hero .sub{color:var(--ink-on-light-2)}

/* pages with no .page-hero still must clear the floating pill */
main>section:first-child:not(.page-hero):not(.hero-v5){padding-top:calc(var(--nav-h) + 56px)}

/* --------------------------------------------------------------------------
   Surface inversion
   The component layer was written for a light page: it says --ink-on-dark
   and means "the ink this page uses". A dark section flips both ink families
   and both line families for its whole subtree, and any light-surfaced card
   inside it flips them back — otherwise a white price card inherits white
   type and disappears.
   -------------------------------------------------------------------------- */
.s-black, .story .act, .nav-in{
  --accent-link:#FF9878;
  --ink-on-light:#FFFFFF;
  --ink-on-light-2:#A8A8B0;
  --ink-on-light-3:#78787F;
  --ink-on-dark:#FFFFFF;
  --ink-on-dark-2:#A8A8B0;
  --ink-on-dark-3:#78787F;
  --line-light:rgba(255,255,255,.12);
  --line-light-2:rgba(255,255,255,.22);
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.22);
  --line-strong:#9A9AA2;
}
.s-black .trace-card, .s-black .quote, .s-black .cta, .s-black .map-wrap, .s-black .mega-card, .s-black .price, .s-black .prob-c, .s-black .form-card, .s-black .note-card, .s-black .card, .s-black .cmp-wrap, .s-black .ben, .s-black .prod, .s-black .bcard, .s-black .stage, .s-black .optic, .s-black .tw, .s-black .sec-item, .s-black .cell, .s-black .shot, .s-black .wall-panel{
  --accent-link:var(--accent-deep);
  --ink-on-light:#0A0A0A;
  --ink-on-light-2:#56565C;
  --ink-on-light-3:#6C6C74;
  --ink-on-dark:#0A0A0A;
  --ink-on-dark-2:#56565C;
  --ink-on-dark-3:#6C6C74;
  --line-light:rgba(10,10,10,.10);
  --line-light-2:rgba(10,10,10,.18);
  --line-dark:rgba(10,10,10,.10);
  --line-dark-2:rgba(10,10,10,.18);
  --line-strong:#8A8A90;
  color:var(--ink-on-light);
}
/* the story's own panels are dark by construction, so they keep the dark ink */
.story .act{color:var(--ink-on-dark)}

/* --------------------------------------------------------------------------
   Two consequences of the inversion, fixed at the source
   -------------------------------------------------------------------------- */

/* The logo wall is a dark panel that sits inside a light section, so it is a
   dark surface in its own right and needs the dark ink, not the page's. */
.wall-panel{
  background:#0A0A0A;border-color:rgba(255,255,255,.12);
  --accent-link:#FF9878;
  --ink-on-light:#FFFFFF;  --ink-on-light-2:#A8A8B0; --ink-on-light-3:#78787F;
  --ink-on-dark:#FFFFFF;   --ink-on-dark-2:#A8A8B0;  --ink-on-dark-3:#78787F;
  --line-light:rgba(255,255,255,.12); --line-light-2:rgba(255,255,255,.22);
  --line-dark:rgba(255,255,255,.12);  --line-dark-2:rgba(255,255,255,.22);
  color:var(--ink-on-dark);
}
.wall-panel .wl img{filter:brightness(0) invert(1);opacity:.92}
.wall-panel .wall-lead b{color:#fff}

/* A ghost button inside a light card that sits inside a dark section: the
   section's button rule is more specific than the card's tokens, so it has to
   be answered directly or the button goes white on white. */
.s-black .cta .btn-ghost, .s-black .price .btn-ghost, .s-black .form-card .btn-ghost{
  border-color:var(--line-light-2);color:var(--ink-on-light);background:rgba(255,255,255,.6)}
.s-black .cta .btn-ghost:hover, .s-black .price .btn-ghost:hover, .s-black .form-card .btn-ghost:hover{background:#fff;border-color:var(--line-strong)}
.s-black .cta .btn-primary, .s-black .price .btn-primary, .s-black .form-card .btn-primary{
  background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.s-black .cta .btn-primary:hover, .s-black .price .btn-primary:hover, .s-black .form-card .btn-primary:hover{background:#2A2A2E;border-color:#2A2A2E}

/* The footer is the page's second dark surface: it takes the same inversion
   the dark sections do. */
.foot{
  background:#0A0A0A;border-top:0;
  --accent-link:#FF9878;
  --ink-on-light:#FFFFFF;  --ink-on-light-2:#A8A8B0; --ink-on-light-3:#78787F;
  --ink-on-dark:#FFFFFF;   --ink-on-dark-2:#A8A8B0;  --ink-on-dark-3:#78787F;
  --line-light:rgba(255,255,255,.12); --line-light-2:rgba(255,255,255,.22);
  --line-dark:rgba(255,255,255,.12);  --line-dark-2:rgba(255,255,255,.22);
  --line-strong:#9A9AA2;
  color:var(--ink-on-dark);
}
.foot .brand-word{filter:invert(1) brightness(2)}
.foot .cbadge{border-color:var(--line-dark);color:var(--ink-on-dark-2)}
.foot .cbadge:hover{border-color:var(--line-dark-2);color:#fff}
.foot .cbadge svg{color:var(--ink-on-dark-3)}

/* --------------------------------------------------------------------------
   Accent contrast
   The brand vermilion is a light-end colour: it carries fills and large type, but as small type on white it only reaches 3.4:1. Anywhere it has to be
   read at label size it becomes the deep end of the same hue instead.
   -------------------------------------------------------------------------- */
.price-tag, .mega-feat .tagn{color:var(--accent-deep)}
.price-tag{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.34)}
/* white on the accent is 3.4:1, which a 11px numeral cannot carry; the lit
   step marker uses the deep end so the numeral clears 4.5 */
.story-step.on .sn{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* Small accent type on paper takes the deep end of the hue, same rule as the
   badges above: the light vermilion only clears 3.4:1. */
.mark{color:var(--accent-deep);border-bottom:0;
  background:rgba(var(--accent-rgb),.13);border-radius:3px;padding:0 3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stage-tag{color:var(--accent-deep)}
/* only the story's own dark panels take the light-end accent; the white cards
   that sit inside dark sections keep the deep one */
.story .act .mark{color:#FFB4A0;background:rgba(var(--accent-rgb),.16)}

/* The code block carries a light surface wherever it is placed, so it pins the
   light ink rather than inheriting the section's. */
.code{
  background:#F7F7F8;
  --accent-link:var(--accent-deep);
  --ink-on-light:#0A0A0A;  --ink-on-light-2:#3C3C42; --ink-on-light-3:#6C6C74;
  --ink-on-dark:#0A0A0A;   --ink-on-dark-2:#3C3C42;  --ink-on-dark-3:#6C6C74;
  --line-light:rgba(10,10,10,.10); --line-light-2:rgba(10,10,10,.18);
  --line-dark:rgba(10,10,10,.10);  --line-dark-2:rgba(10,10,10,.18);
}
.code .k{color:var(--accent-deep)}
.code .s{color:#166534}
.code .c{color:var(--ink-on-light-3)}

/* The legal pages' language toggle took its fill from an ink token, so wherever
   that token is inverted the active button went white on white. It is a
   control, not body copy — it gets explicit colours. */
.lang button[aria-pressed="true"]{background:#0A0A0A;color:#FFFFFF}
.lang button:not([aria-pressed="true"]){color:var(--ink-on-light-2)}
.lang button:not([aria-pressed="true"]):hover{color:#0A0A0A;background:rgba(10,10,10,.06)}

/* The mega-menu and the mobile panel hang off the dark nav but are light
   panels themselves, so they pin the light ink instead of inheriting the
   bar's. Without this the item titles go white on white. */
.mega-card, .mnav{
  --accent-link:var(--accent-deep);
  --ink-on-light:#0A0A0A;  --ink-on-light-2:#56565C; --ink-on-light-3:#6C6C74;
  --ink-on-dark:#0A0A0A;   --ink-on-dark-2:#56565C;  --ink-on-dark-3:#6C6C74;
  --line-light:rgba(10,10,10,.10); --line-light-2:rgba(10,10,10,.18);
  --line-dark:rgba(10,10,10,.10);  --line-dark-2:rgba(10,10,10,.18);
  --line-strong:#8A8A90;
  color:var(--ink-on-light);
}
.mnav a, .mnav .mnav-lang{color:var(--ink-on-light)}
.mnav .btn-primary{background:#0A0A0A;color:#fff;border-color:#0A0A0A}

/* --------------------------------------------------------------------------
   The wash does not stop at the hero
   A gradient that runs to full strength and then meets the next section's flat
   white draws a hard horizontal line across the page. The section after a hero
   picks the wash up at exactly the colour the hero handed over (--wash-edge)
   and carries it out to nothing, so the boundary disappears.
   Uses an adjacent sibling, so no page needs new markup — and dark sections
   opt out, because there the colour change is the point.
   -------------------------------------------------------------------------- */
.hero-v5+section:not(.s-black), .page-hero+section:not(.s-black){position:relative;isolation:isolate}
.hero-v5+section:not(.s-black)::before, .page-hero+section:not(.s-black)::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;
  height:clamp(240px,30vw,460px);
  background:linear-gradient(180deg,var(--wash-edge) 0%,rgba(255,228,218,0) 100%);
}
/* a page-hero hands over a lighter edge than the homepage's */
.page-hero+section:not(.s-black)::before{
  height:clamp(180px,22vw,340px);
  background:linear-gradient(180deg,#FFEDE6 0%,rgba(255,237,230,0) 100%);
}

/* --------------------------------------------------------------------------
   Where the accent shows up
   One hue, used in small, repeatable places rather than in large fills, so it
   reads as the brand rather than as decoration. These are the marks a visitor
   passes on every page: the rule before a section label, the step dots, the
   icon in a benefit tile, the tick in a list.
   -------------------------------------------------------------------------- */

/* the rule before every section label — the single most repeated mark on the
   site, so it is where the colour earns the most */
.eyebrow::before{background:var(--accent);opacity:1;width:22px;height:2px;border-radius:1px}
.s-black .eyebrow::before{background:var(--accent)}

/* the four-step flow: every dot carries the hue, the live one fills */
.f4::after{border-color:rgba(var(--accent-rgb),.45)}
.s-white .f4::after, .s-smoke .f4::after{border-color:rgba(var(--accent-rgb),.45);background:#fff}
.f4:first-child::after{border-color:var(--accent);background:var(--accent)}
.f4 .fk{color:var(--accent-link)}

/* benefit and security tiles: the icon is the accent on every surface */
.s-white .ben-ic svg, .s-smoke .ben-ic svg{color:var(--accent-deep)}
.s-white .ben-ic, .s-smoke .ben-ic{border-color:rgba(var(--accent-rgb),.28);
  background:rgba(var(--accent-rgb),.07)}
.sec-item svg{color:var(--accent-link)}

/* a quotation gets its mark back */
.quote blockquote::before{content:"\201C";color:var(--accent);
  font-size:2.5em;line-height:0;vertical-align:-.32em;margin-right:.06em}

/* links inside long-form copy are the deep accent, underlined */
.prose a:not(.btn){color:var(--accent-link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:not(.btn):hover{text-decoration-thickness:2px}

/* the sub-page arcs are shorter than the homepage's, so they need their own box */
.page-hero .hero-arcs{height:100%}

/* --------------------------------------------------------------------------
   An act performs once
   Every act runs a two-second entrance when it becomes current. Replaying that
   on every pass means scrolling up and down through the section makes the
   panel's contents fly in over and over, which reads as the panel jumping
   rather than as a reveal. Once an act has been seen and left, it comes back
   already resolved and only the panel itself cross-fades.
   -------------------------------------------------------------------------- */
.act.played .a-states i, .act.played .a-line, .act.played .a-chip, .act.played .a-recs li{animation:none!important;opacity:1;transform:none}
.act.played .a-states i{color:#FFB4A0;border-color:rgba(var(--accent-rgb),.36);
  background:rgba(var(--accent-rgb),.1)}
.act.played .a-trace .a-tline{animation:none!important;stroke-dashoffset:0}
.act.played .a-trace .a-tarea, .act.played .a-trace .a-tmark{animation:none!important;opacity:1}
.act.played .a-dial .val{animation:none!important;stroke-dashoffset:60}

/* --------------------------------------------------------------------------
   Pin markers
   Zero-width bands spanning the pinned run, one per act. They exist only to be
   observed: an IntersectionObserver watching them against a line at the middle
   of the viewport tells the page which act is current without a scroll handler
   and without reading layout — which is what keeps Safari's compositor from
   fighting the main thread over the sticky offset.
   -------------------------------------------------------------------------- */
.story-marks, .pipe-marks{
  position:absolute;left:0;right:0;top:0;pointer-events:none;
  /* the bands span the pinned travel, not the whole section: the stage is
     pinned for (section height - one viewport), so dividing that is what makes
     every act hold the screen for the same distance */
  height:calc(100% - 100vh);      /* fallback where svh is unknown */
  height:calc(100% - 100svh);
  display:grid;grid-auto-rows:1fr;
}
.story-marks i, .pipe-marks i{display:block;width:0}
.story-scroll, .pipe-scroll{position:relative}

/* --------------------------------------------------------------------------
   The story rail, on a track
   Same mechanic the pipeline rail uses: one hairline track through the knobs
   and a lit fill that advances with the story. The track tells you how long
   the run is before you start it, and the fill tells you where in it you are —
   which a set of disconnected numbers never did.
   Track and fill are positioned from the real knob centres (measured once on
   layout, never during scroll), so uneven step heights cannot skew them.
   -------------------------------------------------------------------------- */
.story-track, .story-fill{
  position:absolute;left:13px;width:1px;pointer-events:none;
}
.story-track{background:rgba(255,255,255,.16)}
.story-fill{
  background:var(--accent);height:0;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.55);
  transition:height 420ms var(--ease-out);
}
.story-step{position:relative;z-index:1}

/* a knob that has been passed keeps the hue but steps back */
.story-step.done .sn{
  border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.12);
  color:#FFB4A0;
}
.story-step.done b{color:#B9B9C1}

/* the live knob is filled and carries the glow the fill carries */
.story-step.on .sn{
  background:var(--accent);border-color:var(--accent);color:#1A0D08;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16),0 0 16px rgba(var(--accent-rgb),.5);
  transform:scale(1.08);
}
.story-step .sn{transition:background var(--d-mid) var(--ease-out),
  color var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out),
  box-shadow var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-spring)}

/* stacked (no pin): the run is not a progression, so the track is not drawn */
.story:not(.is-pinned) .story-track, .story:not(.is-pinned) .story-fill{display:none}

@media (prefers-reduced-motion:reduce){
  .story-fill{transition:none}
  .story-step.on .sn{transform:none}
}

/* A beta channel named inside the story has to say so where it is named —
   /integrations and /about disclosed it, the homepage did not. */
.a-beta{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:var(--r-pill);
  font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-on-dark-3);border:1px solid var(--line-dark);
}

/* --------------------------------------------------------------------------
   Product list
   The list inside a product card: a dotted item by default, a dashed one
   under .out for what a tier does NOT include. Used on /about and
   /transcribe. Kept when the surrounding product-card layout was removed.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Product list
   The feature list inside a product card: a dot per included item, a dash
   under .out for what a tier does not include. It outlived the product-card
   layout that used to wrap it — /about and /transcribe still use it.
   -------------------------------------------------------------------------- */
.prod-list{display:flex;flex-direction:column;gap:7px;font-size:.9375rem;color:var(--ink-on-dark-2)}
.prod-list li{display:flex;gap:var(--s3);align-items:flex-start;line-height:1.45}
.prod-list li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:8px;
  background:var(--ink-on-dark-3)}
.prod-list.out li::before{background:none;width:9px;height:1px;margin-top:11px;
  background:var(--ink-on-dark-3);opacity:.7}
.prod-list.out li{color:var(--ink-on-dark-3)}


/* The mobile nav panel is fixed and scrolls on its own; without this the page
   behind it scrolls too, which on iOS reads as the menu sliding off its own
   content. Set from clue-v3.js while the panel is open. */
body.nav-locked{overflow:hidden}

/* The cookie-settings control is injected into the footer's legal column only
   when a consent layer is actually running. It reopens the consent dialog, so
   it is a button — and has to read as one of the links beside it. */
.cookie-settings{
  font:inherit;font-size:.9375rem;color:var(--ink-on-dark-2);
  padding:0;background:none;border:0;cursor:pointer;text-align:left;
  transition:color var(--d-fast) var(--ease-out);
}
.cookie-settings:hover{color:var(--ink-on-light)}

/* ==========================================================================
   Product menu after the API column was removed
   The grid was cut for three link columns plus a feature card. With the API
   column and that card gone, a four-track grid left two columns stranded on
   a full-width sheet. The panel now sizes to the columns it actually has.
   ========================================================================== */
@media(min-width:900px){
  .mega-cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .mega-card{max-width:840px;margin-right:auto}
}