/* DICTATE® v11 — the Apple cut.
   Built on Apple's Human Interface Guidelines, applied to the web:
   · Typography — the system font (San Francisco on Apple devices), weights
     Regular/Medium/Semibold only, a short scale modeled on the HIG text
     styles (Large Title → Body 17 → Footnote 13), tracking tight at body
     size and near zero at display size.
   · Layout — an 8-point spacing scale, one content width (980) and one
     reading width (640), hierarchy by whitespace and alignment,
     progressive disclosure for the FAQ.
   · Color — semantic tokens (label / secondary label / background /
     separator / accent) with light, dark and increased-contrast variants.
     Blue means exactly one thing: the primary action.
   · Motion — brief, purposeful, cancelable, never blocking. Reveals are
     one fade-and-rise on entry; figures draw once; nothing is tied to the
     scroll position and nothing locks the page. Reduce Motion turns it all
     off. Without JavaScript the page is simply fully visible. */

:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --label:#1d1d1f;
  --label2:#6e6e73;
  --label3:#86868b;
  --bg:#fff;
  --bg2:#f5f5f7;
  --sep:rgba(0,0,0,.14);
  --accent:#0115e6;
  --accent-hover:#0b26ff;
  --nav:rgba(29,29,31,.78);
  --ease:cubic-bezier(.25,.1,.25,1);
  --dur:.7s;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --wide:980px;
  --narrow:640px;
  --gutter:22px;
}
.dark{
  --label:#f5f5f7;
  --label2:#a1a1a6;
  --label3:#86868b;
  --bg:#000;
  --bg2:#1d1d1f;
  --sep:rgba(255,255,255,.18);
  --accent:#4d5cff;
  --accent-hover:#6b78ff;
}
@media (prefers-contrast:more){
  :root{--label2:#424245;--label3:#515154;--sep:rgba(0,0,0,.3)}
  .dark{--label2:#d2d2d7;--label3:#a1a1a6;--sep:rgba(255,255,255,.4)}
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;
  color:var(--label);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
strong,b{font-weight:600}
sup{font-size:.55em;vertical-align:super;font-weight:500}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--label);color:var(--bg)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type scale ---------- */
.t-hero{font-size:clamp(40px,7.4vw,92px);font-weight:600;line-height:1.05;letter-spacing:-.012em}
.t-title{font-size:clamp(32px,4.8vw,56px);font-weight:600;line-height:1.07;letter-spacing:-.008em}
.t-sub{font-size:clamp(19px,2.3vw,26px);font-weight:400;line-height:1.3;letter-spacing:.004em;color:var(--label2)}
.t-head{font-size:clamp(21px,2.6vw,28px);font-weight:600;line-height:1.14;letter-spacing:.004em}
.t-body{font-size:17px;line-height:1.47;letter-spacing:-.022em}
.t-cap{font-size:13px;line-height:1.38;letter-spacing:-.006em;color:var(--label2)}
.eyebrow{font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--label2);margin-bottom:var(--s2)}
.stat{font-size:clamp(44px,6vw,76px);font-weight:600;line-height:1;letter-spacing:0}
.acc{color:var(--accent)}
.meta{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label2)}
.note{font-size:13px;line-height:1.5;letter-spacing:-.006em;color:var(--label2)}
.dim{color:var(--label3)}

/* ---------- layout ---------- */
.nav{
  position:sticky;top:0;z-index:10;height:48px;color:#f5f5f7;
  background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.nav-in{max-width:var(--wide);margin:0 auto;height:100%;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between}
.nav a{color:#f5f5f7}
.nav a:hover{text-decoration:none;opacity:.8}
.mark{font-size:15px;font-weight:600;letter-spacing:-.01em}
.nav-cta{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

section{padding:clamp(80px,11vw,140px) var(--gutter);background:var(--bg);color:var(--label)}
.alt{background:var(--bg2)}
.wrap{max-width:var(--wide);margin:0 auto}
.narrow{max-width:var(--narrow);margin-left:auto;margin-right:auto}
.center{text-align:center}
.stack>*+*{margin-top:var(--s3)}
.t-title+.t-sub,.t-title+.t-body{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.mt6{margin-top:var(--s6)}

/* hero */
.hero{padding-top:clamp(88px,13vw,168px);padding-bottom:clamp(88px,12vw,150px);text-align:center}
.hero h1 > span{display:block}
.hero .t-sub{margin:var(--s4) auto 0;max-width:var(--narrow)}
.hero .btn{margin-top:var(--s5)}
.hero .t-cap{margin-top:var(--s2)}
html.js .rot{transition:opacity .28s var(--ease),transform .28s var(--ease)}
html.js .rot.out{opacity:0;transform:translateY(6px)}

/* button — a capsule, the one place the accent lives */
.btn{
  display:inline-block;background:var(--accent);color:#fff;font-family:var(--font);
  font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:15px 30px;border-radius:980px;border:0;cursor:pointer;line-height:1.2;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--accent-hover);text-decoration:none;color:#fff}
.btn:active{transform:scale(.98)}

/* reveal on entry — one fade and rise, staggered by --i */
html.js [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
html.js [data-reveal].in{opacity:1;transform:none}

/* figures — line work that draws once */
.fig{margin-top:var(--s5);color:var(--label)}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig .ln{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fig .faint{stroke:var(--label3);stroke-dasharray:3 7}
.fig .lbl{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;fill:var(--label2)}
.fig .mk{fill:currentColor}
.fig .bar{fill:currentColor;transform-box:fill-box;transform-origin:0 50%}
html.js .fig .draw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease) .15s}
html.js .fig.in .draw{stroke-dashoffset:0}
html.js .fig .pop{opacity:0;transition:opacity .5s var(--ease) 1.1s}
html.js .fig.in .pop{opacity:1}
html.js .fig .bar{transform:scaleX(0);transition:transform .9s var(--ease)}
html.js .fig .bar.b2{transition-delay:.15s}
html.js .fig .bar.b3{transition-delay:.3s}
html.js .fig.in .bar{transform:scaleX(1)}
.figcap{margin-top:var(--s2);text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;margin-top:var(--s7)}
.two .fig{margin-top:0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6);text-align:center}
.stats .stat + p{margin-top:var(--s1);font-size:15px;line-height:1.4;letter-spacing:-.016em;color:var(--label2)}

/* four-up rows (method, product) */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s6)}
.four li{list-style:none;padding-top:var(--s2);border-top:1px solid var(--sep)}
.four b{display:block;font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.four span{display:block;margin-top:6px;font-size:15px;letter-spacing:-.016em;color:var(--label2)}

/* lines — three sentences, one after another */
.lines{margin-top:var(--s6)}
.lines p+p{margin-top:var(--s3)}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);margin-top:var(--s6)}
.steps li{padding-top:var(--s2);border-top:1px solid var(--sep)}
.steps .num{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--label2);margin-bottom:var(--s1)}
.steps h3{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin-bottom:6px}
.steps p{color:var(--label2);font-size:15px;letter-spacing:-.016em}

/* faq — native disclosure */
.faq{max-width:var(--narrow);margin:var(--s7) auto 0}
.faq h2{margin-bottom:var(--s3)}
.faq details{border-top:1px solid var(--sep);padding:var(--s2) 0}
.faq details:last-of-type{border-bottom:1px solid var(--sep)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--label2);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:var(--s1);color:var(--label2);max-width:60ch}

footer{padding:var(--s4) var(--gutter);background:var(--bg2);border-top:1px solid var(--sep)}
.foot-in{max-width:var(--wide);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;font-size:13px;letter-spacing:-.006em;color:var(--label2)}
.foot-in a{color:var(--label)}

/* ---------- v11.1 — the argument, in words ---------- */
.muted{color:var(--label2)}
.mt7{margin-top:var(--s7)}
[hidden]{display:none !important}

/* hero: a static setup line, then the rotating verdict in a fixed two-line box */
.hero-h{display:block}
.hero-l1{display:block;max-width:14em;margin:0 auto}
.rot-box{display:flex;align-items:center;justify-content:center;min-height:2.15em;margin-top:var(--s2)}
.hero .hero-sub{max-width:700px;font-size:clamp(18px,2vw,23px)}

/* figures: per-element delays, vertical bars, a slower second draw */
html.js .fig .pop{transition-delay:var(--d,1.1s)}
html.js .fig .draw.slow{transition-delay:1.1s;transition-duration:1s}
.fig .vbar{transform-origin:50% 100%}
html.js .fig .vbar{transform:scaleY(0);transition:transform .8s var(--ease);transition-delay:var(--d,0s)}
html.js .fig.in .vbar{transform:scaleY(1)}

/* the rebuild: step · industry → dictate · measurement */
.rb{list-style:none;margin-top:var(--s6);border-top:1px solid var(--sep)}
.rb li{display:grid;grid-template-columns:11rem minmax(0,1fr) 12rem;gap:var(--s3) var(--s5);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--sep)}
.rb .num{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--label2);margin-bottom:6px}
.rb h3{font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.rb-t{font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--label2);max-width:52ch}
.rb-t strong{color:var(--label)}
.rb-n{text-align:right;font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-n.rb-word{font-size:clamp(19px,2vw,24px);letter-spacing:-.012em;line-height:1.2;white-space:normal}

/* facts: a bold word, then the line */
.facts{list-style:none;margin-top:var(--s4)}
.facts li{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:var(--s2);align-items:baseline;padding:var(--s2) 0;border-top:1px solid var(--sep)}
.facts b{font-size:19px;font-weight:600;letter-spacing:-.012em}
.facts span{font-size:15px;line-height:1.4;letter-spacing:-.016em;color:var(--label2)}
.stat-s{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}

/* the path: a line that fills, three nodes beneath it */
.tl{position:relative;height:2px;background:var(--sep);margin:var(--s5) 0 var(--s3);overflow:hidden}
.tl i{position:absolute;inset:0;background:var(--label);transform-origin:0 50%;transform:scaleX(0)}
html.js .tl.in i{transform:scaleX(1);transition:transform 1.4s var(--ease) .2s}
.tl-nodes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.tl-nodes .num{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--label2);margin-bottom:var(--s1)}
.tl-nodes h4{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin-bottom:6px}
.tl-nodes p{font-size:15px;line-height:1.4;letter-spacing:-.016em;color:var(--label2)}

/* three-up */
.grid3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s5);margin-top:var(--s6)}
.grid3 li{padding-top:var(--s2);border-top:1px solid var(--sep)}
.grid3 b{display:block;font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.grid3 span{display:block;margin-top:6px;font-size:15px;line-height:1.4;letter-spacing:-.016em;color:var(--label2)}

/* quotes */
.quotes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
.quotes .q{font-size:19px;line-height:1.35;letter-spacing:-.012em}
.quotes .t-cap{margin-top:var(--s2)}

@media (max-width:1024px){
  .rb li{grid-template-columns:9rem minmax(0,1fr) 9rem}
}

/* ---------- v12 — the brand cut ---------- */
:root{--brand:#0115e6}

.rot-h{margin-top:var(--s1)}
.rot-sec .rot-h{color:var(--label)}
.rot-sec .t-sub{margin:var(--s4) auto 0;max-width:720px}
/* the strip */
.tape-wrap{position:relative;z-index:2;overflow:hidden;margin:-26px 0 -26px;padding:26px 0;
  background:linear-gradient(180deg,#000 0,#000 50%,var(--bg) 50%,var(--bg) 100%)}
.tape{background:var(--brand);color:#fff;overflow:hidden;padding:14px 0;transform:rotate(-1.2deg) scale(1.03)}
html,body{overflow-x:clip}
.tape-in{display:flex;align-items:center;gap:26px;width:max-content;white-space:nowrap;
  font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1}
.tape-in i{display:block;width:10px;height:10px;border-radius:50%;background:#fff;flex:none}
html.js .tape-in{animation:tape 36s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}

/* four measurements */
.stats4{grid-template-columns:repeat(4,1fr)}
.stats .stat{font-size:clamp(40px,5vw,68px)}
.two-text{align-items:start;margin-top:var(--s5)}
.two-text p{max-width:none}
.dir-box{max-width:760px;margin:var(--s6) auto 0;padding:clamp(28px,5vw,56px);background:#1d1d1f;color:#f5f5f7;border-radius:4px}
.dir-box p{font-size:clamp(17px,1.7vw,21px);line-height:1.5;letter-spacing:-.014em}
.dir-box strong{font-weight:700;letter-spacing:-.03em}
.fig .brand-fill{fill:var(--brand)}

/* the blue slab */
.brand{background:var(--brand);color:#fff;--label:#fff;--label2:rgba(255,255,255,.8);--sep:rgba(255,255,255,.3)}
.brand .eyebrow,.brand .t-sub,.brand .t-cap{color:rgba(255,255,255,.82)}
.btn-inv{background:#fff;color:var(--brand)}
.btn-inv:hover{background:#e9ecff;color:var(--brand)}

/* ---------- the living figures ---------- */
/* the rates: bars rise in turn, the rate lands above each, a line climbs the tops */
.fig .rate{font-family:var(--font);font-size:17px;font-weight:600;fill:var(--label);letter-spacing:-.01em}
.fig .rate-last{fill:var(--brand)}
html.js .fig .draw.slow2{transition-delay:2.3s;transition-duration:1.2s}

/* the home: the sun feeds the panel, the panel lights the home and charges the
   battery, the grid flickers and fails, the home stays lit. Base styles are the
   finished scene (no JavaScript, Reduce Motion); the sequence runs under html.js */
.fig .flow{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 9}
.fig .win{fill:#f2b100;opacity:.95}
.fig .bfill{fill:var(--brand);transform-box:fill-box;transform-origin:50% 100%}
.fig .gtie{fill:none;stroke:var(--label3);stroke-width:1.5;stroke-dasharray:4 6}
.fig .gridg{opacity:.28}
.fig .spark{fill:none;stroke:var(--label);stroke-width:1.5;stroke-linecap:round;opacity:0}
html.js .fig-home .flow{opacity:0;transition:opacity .4s ease var(--d,0s)}
html.js .fig-home.in .flow{opacity:1;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
html.js .fig-home .win{opacity:0}
html.js .fig-home.in .win{animation:winOn 9s ease forwards}
@keyframes winOn{0%,28%{opacity:0}34%{opacity:.95}100%{opacity:.95}}
html.js .fig-home .bfill{transform:scaleY(.06)}
html.js .fig-home.in .bfill{animation:charge 5s ease-out 2.6s forwards}
@keyframes charge{to{transform:scaleY(1)}}
html.js .fig-home .gridg{opacity:1}
html.js .fig-home.in .gridg{animation:gridFail 9s steps(1,end) forwards}
@keyframes gridFail{0%,66%{opacity:1}67%{opacity:.25}68%{opacity:1}69.5%{opacity:.25}70.5%{opacity:1}72%{opacity:.3}73%{opacity:1}74%,100%{opacity:.28}}
html.js .fig-home.in .spark{animation:spark 9s steps(1,end) forwards}
@keyframes spark{0%,66%{opacity:0}67%{opacity:1}68%{opacity:0}69.5%{opacity:1}70.5%{opacity:0}72%{opacity:1}74%,100%{opacity:0}}
html.js .fig-home.in .rays{animation:sunPulse 2.6s ease-in-out 1.2s infinite}
@keyframes sunPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* the measurements: four small scenes that build on entry. Base styles are
   the finished scene; the build runs under html.js */
.measures{margin-top:var(--s6)}
.measure{text-align:center}
.mfig{display:block;width:100%;max-width:220px;height:auto;margin:0 auto var(--s2);overflow:visible;color:var(--label)}
.mfig .lbl{font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;fill:var(--label2)}
.mfig .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mfig .tick{stroke:var(--label3)}
.mfig .avg,.mfig .check{stroke:var(--brand)}
.mfig .mfill{fill:var(--brand);transform-box:fill-box;transform-origin:50% 100%}
.mfig .track{fill:none;stroke:var(--sep);stroke-width:6}
.mfig .track-l{fill:none;stroke:var(--sep);stroke-width:1.5}
.mfig .ring{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:13}
.mfig .hb{transform-box:fill-box;transform-origin:0 50%}
.mfig .hb-ind{fill:var(--label3)}
.mfig .hb-us{fill:var(--brand)}
.mfig .mk-ink{fill:var(--label)}
.mfig .node{fill:var(--brand)}
html.js .measure .draw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s var(--ease) var(--d,.1s)}
html.js .measure.in .draw{stroke-dashoffset:0}
html.js .measure .pop{opacity:0;transition:opacity .5s ease var(--d,1s)}
html.js .measure.in .pop{opacity:1}
html.js .measure .mfill{transform:scaleY(0);transition:transform 1.4s var(--ease) .3s}
html.js .measure.in .mfill{transform:scaleY(1)}
html.js .measure .ring{stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease) .3s}
html.js .measure.in .ring{stroke-dashoffset:13}
html.js .measure .hb{transform:scaleX(0);transition:transform 1.2s var(--ease) var(--d,.3s)}
html.js .measure.in .hb{transform:scaleX(1)}
html.js .measure .node{opacity:0;transition:opacity .4s ease 1.7s}
html.js .measure.in .node{opacity:1}
html.js .measure.in .live{animation:livePulse 2.6s ease-in-out 2.4s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.5}}

/* the loop: knock → set → close → install → paid, then again. Base styles are
   the finished lap; under html.js the lap plays on a fourteen-second cycle */
.loop-sec .t-sub{color:rgba(255,255,255,.84)}
.fig-loop{max-width:980px;margin:var(--s6) auto 0;color:#f5f5f7}
.fig-loop .ln{stroke-width:1.6}
.fig-loop .faintl{stroke:rgba(255,255,255,.4)}
.fig-loop .dots circle{fill:rgba(255,255,255,.45)}
.fig-loop .knob{fill:#f5f5f7}
.fig-loop .inside{fill:var(--accent);opacity:.9}
.fig-loop .door{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.22)}
.fig-loop .doorp{fill:#000}
.fig-loop .knock{stroke:var(--accent);stroke-width:2;opacity:0}
.fig-loop .lf{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.fig-loop .appt{fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%}
.fig-loop .sig{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.fig-loop .panel{fill:var(--accent)}
.fig-loop .pay{fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%}
.fig-loop .paytxt{font-family:var(--font);font-size:30px;font-weight:700;fill:#fff}
html.js .fig-loop.in .knock{animation:k-knock 9s linear infinite}
html.js .fig-loop.in .door{animation:k-door 9s var(--ease) infinite}
html.js .fig-loop.in .inside{animation:k-inside 9s linear infinite}
html.js .fig-loop.in .lf{animation:flow 1.1s linear infinite,k-f1 9s linear infinite}
html.js .fig-loop.in .lf2{animation:flow 1.1s linear infinite,k-f2 9s linear infinite}
html.js .fig-loop.in .lf3{animation:flow 1.1s linear infinite,k-f3 9s linear infinite}
html.js .fig-loop.in .lf4{animation:flow 1.1s linear infinite,k-f4 9s linear infinite}
html.js .fig-loop.in .appt{animation:k-appt 9s var(--ease) infinite}
html.js .fig-loop.in .sig{animation:k-sig 9s var(--ease) infinite}
html.js .fig-loop.in .panel{animation:k-panel 9s var(--ease) infinite}
html.js .fig-loop.in .pay{animation:k-pay 9s var(--ease) infinite}
html.js .fig-loop.in .paytxt{animation:k-paytxt 9s linear infinite}
@keyframes k-knock{0%,3%{opacity:0}4%,5%{opacity:1}6%{opacity:0}7%,8%{opacity:1}9%,100%{opacity:0}}
@keyframes k-door{0%,10%{transform:scaleX(1)}16%,86%{transform:scaleX(.22)}93%,100%{transform:scaleX(1)}}
@keyframes k-inside{0%,11%{opacity:0}16%,86%{opacity:.9}93%,100%{opacity:0}}
@keyframes k-f1{0%,15%{opacity:0}18%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes k-appt{0%,22%{transform:scale(0)}25%,88%{transform:scale(1)}92%,100%{transform:scale(0)}}
@keyframes k-f2{0%,26%{opacity:0}29%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes k-sig{0%,34%{stroke-dashoffset:100}42%,88%{stroke-dashoffset:0}93%,100%{stroke-dashoffset:100}}
@keyframes k-f3{0%,42%{opacity:0}45%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes k-panel{0%,48%{transform:translateY(-28px);opacity:0}54%,88%{transform:none;opacity:1}93%,100%{transform:translateY(-28px);opacity:0}}
@keyframes k-f4{0%,54%{opacity:0}57%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes k-pay{0%,60%{transform:scale(0)}64%,88%{transform:scale(1)}93%,100%{transform:scale(0)}}
@keyframes k-paytxt{0%,62%{opacity:0}65%,88%{opacity:1}93%,100%{opacity:0}}
.five{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s4);margin-top:var(--s6)}
.five li{flex:0 1 160px;text-align:center;padding-top:var(--s2);border-top:1px solid var(--sep)}
.five b{display:block;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.five span{display:block;margin-top:6px;font-size:15px;letter-spacing:-.016em;color:var(--label2)}

/* the path: eight stages on one track; a traveler moves station to station,
   the line fills behind it, each stage lights as it is reached. Base styles
   are the finished track; the pass runs once under html.js */
.fig-path{max-width:980px;margin:var(--s6) auto 0;color:var(--label)}
.fig-path .ptrack{fill:none;stroke:var(--sep);stroke-width:4;stroke-linecap:round}
.fig-path .pfill{fill:var(--brand);transform-box:fill-box;transform-origin:0 50%}
.fig-path .pn{fill:var(--brand);stroke:var(--brand);stroke-width:1.6}
.fig-path .pt{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.012em;fill:var(--label)}
.fig-path .ps{font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;fill:var(--label2)}
.fig-path .trav{fill:var(--brand);stroke:#fff;stroke-width:2;transform:translateX(900px)}
html.js .fig-path .pfill{transform:scaleX(0);transition:transform 5.6s linear .2s}
html.js .fig-path.in .pfill{transform:scaleX(1)}
html.js .fig-path .pn{fill:var(--bg2);stroke:var(--label3);transition:fill .3s ease var(--d,0s),stroke .3s ease var(--d,0s)}
html.js .fig-path.in .pn{fill:var(--brand);stroke:var(--brand)}
html.js .fig-path .plab{opacity:0;transform:translateY(6px);transition:opacity .4s ease var(--d,0s),transform .4s var(--ease) var(--d,0s)}
html.js .fig-path.in .plab{opacity:1;transform:none}
html.js .fig-path .trav{transform:translateX(0)}
html.js .fig-path.in .trav{animation:trav 5.6s linear .2s forwards}
@keyframes trav{to{transform:translateX(900px)}}
html.js .fig-path.in .pn-last{animation:livePulse 2.6s ease-in-out 6.4s infinite}
.path-list{list-style:none;margin-top:var(--s5)}
.path-list li{padding:var(--s2) 0;border-top:1px solid var(--sep)}
.path-list .num{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label2);margin-bottom:4px}
.path-list h3{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
@media (min-width:735px){.path-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}
@media (max-width:734px){.fig-path{display:none}}

/* questions + footer */
.faq-sec{padding-top:var(--s6)}
.faq-sec .faq{margin-top:0}
.foot{background:#000;color:#f5f5f7;border-top:0;padding:var(--s6) var(--gutter)}
.foot .foot-in{align-items:center;color:rgba(255,255,255,.7)}
.foot .foot-in a{color:#fff}
.foot-slogan{font-weight:600;color:#fff}

/* ---------- compact widths ---------- */
@media (max-width:734px){
  :root{--gutter:20px}
  .stats{grid-template-columns:1fr;gap:var(--s4)}
  .steps{grid-template-columns:1fr;gap:var(--s3)}
  .four{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .two{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
  .btn{padding:14px 26px}
  .rb li{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3) 0}
  .rb-n{text-align:left}
  .facts li{grid-template-columns:1fr;gap:4px}
  .tl-nodes,.grid3,.quotes{grid-template-columns:1fr;gap:var(--s3)}
  .mt7{margin-top:var(--s6)}
  .hero-l1{max-width:none}
  .wm-hero{font-size:clamp(56px,19vw,120px)}
  .stats4{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
  .tape-in{font-size:18px;gap:18px}
  .two-text{gap:var(--s3)}
  .foot .foot-in{flex-direction:column;align-items:flex-start;gap:var(--s2)}
}

/* ---------- reduce motion: everything simply present ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html.js .fig .draw{stroke-dashoffset:0;transition:none}
  html.js .fig .pop{opacity:1;transition:none}
  html.js .fig .bar{transform:none;transition:none}
  html.js .fig .vbar{transform:none;transition:none}
  html.js .tl i,html.js .tl.in i{transform:scaleX(1);transition:none}
  html.js .rot,.btn,.faq summary::after{transition:none}
  html.js .tape-in{animation:none}
  html.js .fig-home .flow,html.js .fig-home.in .flow{opacity:1;animation:none;transition:none}
  html.js .fig-home .win,html.js .fig-home.in .win{opacity:.95;animation:none}
  html.js .fig-home .bfill,html.js .fig-home.in .bfill{transform:none;animation:none}
  html.js .fig-home .gridg,html.js .fig-home.in .gridg{opacity:.28;animation:none}
  html.js .fig-home.in .rays,html.js .fig-home.in .spark{animation:none}
  html.js .measure .draw,html.js .measure.in .draw{stroke-dashoffset:0;transition:none}
  html.js .measure .pop,html.js .measure.in .pop{opacity:1;transition:none}
  html.js .measure .mfill,html.js .measure.in .mfill{transform:none;transition:none}
  html.js .measure .ring,html.js .measure.in .ring{stroke-dashoffset:13;transition:none}
  html.js .measure .hb,html.js .measure.in .hb{transform:none;transition:none}
  html.js .measure .node,html.js .measure.in .node{opacity:1;transition:none}
  html.js .measure.in .live{animation:none}
  html.js .fig-loop.in .knock,html.js .fig-loop.in .door,html.js .fig-loop.in .inside,html.js .fig-loop.in .lf,
  html.js .fig-loop.in .appt,html.js .fig-loop.in .sig,html.js .fig-loop.in .panel,html.js .fig-loop.in .pay,
  html.js .fig-loop.in .paytxt{animation:none}
  html.js .fig-path .pfill,html.js .fig-path.in .pfill{transform:none;transition:none}
  html.js .fig-path .pn,html.js .fig-path.in .pn{fill:var(--brand);stroke:var(--brand);transition:none}
  html.js .fig-path .plab,html.js .fig-path.in .plab{opacity:1;transform:none;transition:none}
  html.js .fig-path .trav,html.js .fig-path.in .trav{transform:translateX(900px);animation:none}
  html.js .fig-path.in .pn-last{animation:none}
}

/* ---------- the full-page second movement ---------- */
.rot-sec{min-height:calc(100svh - 48px);display:flex;align-items:center}
.rot-sec .wrap{width:100%}

/* ---------- v13 — the canvas: white page, bold moments in rounded panels ---------- */
.nav{position:sticky;top:12px;z-index:10;height:48px;margin:12px var(--gutter) 0;border-radius:999px;
  background:rgba(29,29,31,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav-in{padding:0 var(--s3) 0 var(--s4)}
.panel{margin-left:var(--gutter);margin-right:var(--gutter);border-radius:24px;overflow:hidden}
.panel + .panel{margin-top:12px}
.tape-wrap{background:transparent}
.foot.panel{margin-top:12px;margin-bottom:12px}
.measures{gap:var(--s3)}
.measure{background:#fff;border-radius:16px;padding:var(--s4) var(--s3)}
.measure .mfig{max-width:200px;margin:0 auto var(--s3)}
.measure .stat{font-size:clamp(34px,3.6vw,52px)}
.grid3 li{background:#fff;border-radius:16px;padding:var(--s4);border-top:0}
.dir-box{border-radius:20px}
.five{display:grid;grid-template-columns:repeat(5,1fr);max-width:980px;margin:var(--s5) auto 0;gap:var(--s3)}
.five li{flex:none}
.fig-loop{margin-top:var(--s6)}
@media (max-width:734px){
  .nav{margin:12px 12px 0}
  .panel{margin-left:12px;margin-right:12px;border-radius:20px}
  .measures{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .measure{padding:var(--s3) var(--s2)}
  .fig-loop{display:none}
  .five{grid-template-columns:1fr;gap:var(--s2)}
}

/* ---------- v13.3 — the real mark, white canvas ---------- */
:root{--bg:#fff;--bg2:#f5f5f7;--sep:rgba(0,0,0,.12)}
.logo-nav{display:inline-flex;align-items:center}
.logo-nav img{height:15px;width:auto;display:block}
.logo-foot{height:20px;width:auto;display:block}

/* ---------- v14 — the opening: one sentence, written for whoever is reading it.
   A row of audiences; pick one and the sentence rewrites itself word by word.
   Without JavaScript the first sentence simply stands and the row is hidden. ---------- */
.hero-aud{min-height:calc(100svh - 60px);display:flex;align-items:center;text-align:left;
  padding:clamp(72px,9vh,112px) var(--gutter) clamp(56px,8vh,96px);background:#fff;color:var(--label)}
html.js .hero-aud[data-reveal]{opacity:1;transform:none;transition:none}
.aud-in{width:100%;max-width:var(--wide);margin:0 auto}
.aud-tabs{display:flex;align-items:center;gap:2px;margin:0 calc(-1 * var(--gutter)) var(--s3);padding:0 calc(var(--gutter) - 10px);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 var(--gutter)}
.aud-tabs::-webkit-scrollbar{display:none}
html:not(.js) .aud-tabs{display:none}
.aud-for,.aud-tab{flex:none;font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  line-height:1;white-space:nowrap;padding:16px 10px;color:var(--label3)}
.aud-tab{position:relative;background:none;border:0;border-radius:8px;cursor:pointer;margin:0;
  transition:color .25s var(--ease)}
.aud-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:2px;border-radius:1px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.aud-tab:hover{color:var(--label2)}
.aud-tab[aria-selected="true"]{color:var(--label)}
.aud-tab[aria-selected="true"]::after{transform:scaleX(1)}
.aud-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.aud-msg{font-size:clamp(30px,4.7vw,66px);font-weight:600;line-height:1.08;letter-spacing:-.028em;color:var(--label);max-width:24ch;min-height:5.4em;margin:0}
.hero-aud h1 > span{display:inline-block}
.aud-msg .w{display:inline-block;vertical-align:baseline;white-space:nowrap}
.aud-msg .hl{display:inline-block}
.aud-msg .hl,.aud-msg em{position:relative;z-index:0;font-style:normal;color:#fff;padding:0 .17em;margin:0 .02em;white-space:nowrap;line-height:1.02}
.aud-msg .hl::before,.aud-msg em::before{content:"";position:absolute;inset:.02em -.02em .02em;z-index:-1;background:var(--brand);
  transform:skewX(-10deg);border-radius:.06em}
.aud-msg em{display:inline-block}
.aud-cta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.hero-aud .btn{margin:0}
.hero-aud .t-cap{margin:0;color:var(--label2)}
/* the words: rise, settle, sharpen — one after another; leaving, they lift out quickly */
html.js .aud-msg .w{opacity:0;transform:translateY(.4em);filter:blur(7px);
  transition:transform .85s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 42ms),opacity .5s ease calc(var(--i,0) * 42ms),filter .6s ease calc(var(--i,0) * 42ms)}
html.js .aud-msg.on .w{opacity:1;transform:none;filter:blur(0)}
html.js .aud-msg.off .w{opacity:0;transform:translateY(-.22em);filter:blur(5px);
  transition:transform .24s var(--ease) calc(var(--i,0) * 9ms),opacity .2s ease calc(var(--i,0) * 9ms),filter .2s ease calc(var(--i,0) * 9ms)}
html.js .hero-aud .aud-tabs,html.js .hero-aud .aud-cta{opacity:0;transition:opacity .9s ease .25s}
html.js .hero-aud.in .aud-tabs{opacity:1}
html.js .hero-aud.in .aud-cta{opacity:1;transition-delay:1.3s}
@media (max-width:734px){
  .hero-aud{min-height:calc(100svh - 60px);padding:56px var(--gutter) 48px}
  .aud-for,.aud-tab{font-size:11px;padding:15px 9px}
  .aud-msg{font-size:clamp(28px,8vw,36px);max-width:none;min-height:6.5em}
  .aud-cta{margin-top:var(--s4);gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  html.js .aud-msg .w,html.js .aud-msg.off .w{opacity:1;transform:none;filter:none;transition:none}
  html.js .hero-aud .aud-tabs,html.js .hero-aud .aud-cta{opacity:1;transition:none}
  .aud-tab::after{transition:none}
}

/* ---------- v14.1 — the closing: the first-class ticket from the brand book.
   The verdict on the left; on the right a white ticket — route, fields, a barcode,
   the perforation, and the stub that holds the call. It lands like a card dealt onto
   the table, the barcode prints, the stub lights. Base styles are the finished state. ---------- */
.brand.panel{padding:clamp(72px,10vh,128px) var(--gutter);min-height:min(760px,calc(100svh - 84px));display:flex;align-items:center}
.verdict{width:100%}
.verdict{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center;max-width:var(--wide);margin:0 auto;text-align:left}
.verdict .eyebrow{color:rgba(255,255,255,.7)}
.verdict h2{font-size:clamp(36px,4.6vw,64px);font-weight:600;line-height:1.06;letter-spacing:-.028em;color:#fff;margin:0}
.verdict .t-sub{margin:var(--s3) 0 0;max-width:30ch;color:rgba(255,255,255,.86)}
.hl-w{display:inline-block;position:relative;z-index:0;color:var(--brand);padding:0 .16em;margin:0 .02em;white-space:nowrap;line-height:1.02}
.hl-w::before{content:"";position:absolute;inset:.02em -.02em .02em;z-index:-1;background:#fff;transform:skewX(-10deg);border-radius:.06em}
.ticket{position:relative;background:#fff;color:#1d1d1f;border-radius:20px;max-width:440px;margin:0 0 0 auto;
  box-shadow:0 30px 80px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.08);transform:rotate(-3deg)}
.tk-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#86868b;line-height:1}
.tk-mono i{display:inline-block;width:.6em;height:.6em;background:var(--brand);transform:skewX(-14deg);margin-right:.6em}
.tk-top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}
.tk-top img{height:13px;width:auto;display:block}
.tk-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;padding:22px 24px 0}
.tk-route .tk-mono,.tk-grid .tk-mono{display:block;margin-bottom:6px}
.tk-big{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.tk-arrow{color:var(--brand);padding-bottom:5px}
.tk-arrow svg{display:block;width:28px;height:14px}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding:22px 24px 0}
.tk-val{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.tk-code{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 24px 22px}
.tk-bar{height:34px;flex:1;transform-origin:left;
  background:repeating-linear-gradient(90deg,#1d1d1f 0 2px,transparent 2px 4px,#1d1d1f 4px 5px,transparent 5px 9px,#1d1d1f 9px 12px,transparent 12px 14px,#1d1d1f 14px 15px,transparent 15px 19px)}
.tk-perf{position:relative;height:0;border-top:2px dashed rgba(0,0,0,.14);margin:0 14px}
.tk-perf::before,.tk-perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--brand)}
.tk-perf::before{left:-26px}.tk-perf::after{right:-26px}
.tk-stub{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 24px}
.tk-stub .btn{margin:0;padding:13px 24px;font-size:12px;flex:none;background:#1d1d1f;color:#fff}
.tk-stub .btn:hover{background:var(--brand);color:#fff}
/* the call: once the stub lights, a slow blue pulse rings the button */
html.js .ticket.in .tk-stub .btn{animation:tkPulse 2.4s ease-out 1.9s infinite}
@keyframes tkPulse{0%{box-shadow:0 0 0 0 rgba(1,21,230,.65)}70%{box-shadow:0 0 0 16px rgba(1,21,230,0)}100%{box-shadow:0 0 0 0 rgba(1,21,230,0)}}
.tk-cap{font-size:12px;line-height:1.45;color:#6e6e73;margin:0}
html.js .ticket[data-reveal]{opacity:0;transform:translateY(70px) rotate(-10deg) scale(.96);
  transition:opacity .6s ease .2s,transform 1.2s cubic-bezier(.16,1,.3,1) .2s}
html.js .ticket[data-reveal].in{opacity:1;transform:rotate(-3deg)}
html.js .ticket .tk-bar{transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1) 1s}
html.js .ticket.in .tk-bar{transform:scaleX(1)}
html.js .ticket .tk-stub{opacity:0;transform:translateY(8px);transition:opacity .6s ease 1.25s,transform .6s var(--ease) 1.25s}
html.js .ticket.in .tk-stub{opacity:1;transform:none}
@media (max-width:734px){
  .brand.panel{padding:64px var(--gutter) 72px;min-height:0}
  .verdict{grid-template-columns:1fr;gap:var(--s5)}
  .ticket{max-width:none;margin:0;transform:rotate(-1.5deg)}
  html.js .ticket[data-reveal].in{transform:rotate(-1.5deg)}
  .tk-top,.tk-route,.tk-grid,.tk-code,.tk-stub{padding-left:18px;padding-right:18px}
  .tk-route{grid-template-columns:auto auto auto;justify-content:start;gap:10px}
  .tk-big{font-size:20px}
  .tk-arrow svg{width:22px;height:11px}
  .tk-grid{grid-template-columns:1fr 1fr;gap:14px 10px}
  .tk-val{white-space:normal}
  .tk-stub{flex-direction:column;align-items:stretch;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html.js .ticket[data-reveal],html.js .ticket .tk-bar,html.js .ticket .tk-stub{opacity:1;transition:none}
  html.js .ticket .tk-bar,html.js .ticket .tk-stub{transform:none}
  html.js .ticket[data-reveal]{transform:rotate(-3deg)}
  html.js .ticket.in .tk-stub .btn{animation:none}
}

/* ---------- v14.3 — the questions: numbered, wider, answered straight ---------- */
.faq{max-width:720px}
.faq .eyebrow{margin-bottom:var(--s1)}
.faq h2{margin-bottom:var(--s1)}
.faq-sub{margin:0 0 var(--s5);font-size:clamp(17px,1.8vw,21px)}
.faq details{padding:var(--s3) 0}
.faq summary{align-items:flex-start;font-size:clamp(17px,1.9vw,21px);font-weight:600;letter-spacing:-.018em;line-height:1.3}
.faq summary::after{flex:none;margin-top:-1px}
.q-n{flex:none;width:34px;padding-top:.42em;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--brand);line-height:1}
.q-t{flex:1}
.faq details p{margin:var(--s2) 0 var(--s1) 34px;max-width:60ch;font-size:17px;line-height:1.5}
@media (max-width:734px){
  .q-n{width:28px}
  .faq details p{margin-left:28px}
}

/* ---------- v14.6 — the measurements, bare: no cards, four equal columns, and every
   figure in the same 120px slot so the four numbers sit on one line at any width ---------- */
.measures{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
.measure{background:none;border-radius:0;padding:0}
.measure .mfig{width:200px;max-width:100%;height:120px;margin:0 auto var(--s3)}
@media (max-width:734px){
  .measures{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}
  .measure{padding:0}
  .measure .mfig{height:104px}
}

/* ---------- v15 — phones keep the living figures. The loop and the path each carry a
   second drawing, stacked upright, that takes over under 735px; the text lists they
   replace stay in the page for screen readers only ---------- */
@media (min-width:735px){.fig svg.loop-tall,.fig svg.path-tall{display:none}}
.fig-loop .lm-t{font-family:var(--font);font-size:24px;font-weight:600;letter-spacing:-.012em;fill:#f5f5f7}
.fig-loop .lm-s{font-family:var(--font);font-size:15px;letter-spacing:-.01em;fill:rgba(255,255,255,.62)}
.path-tall .pt{font-size:19px}
.path-tall .ps{font-size:10.5px}
.fig-path .pfill-v{fill:var(--brand);transform-box:fill-box;transform-origin:50% 0}
.fig-path .trav-v{fill:var(--brand);stroke:#fff;stroke-width:2;transform:translateY(350px)}
html.js .fig-path .pfill-v{transform:scaleY(0);transition:transform 4s linear .2s}
html.js .fig-path.in .pfill-v{transform:scaleY(1)}
html.js .fig-path .trav-v{transform:translateY(0)}
html.js .fig-path.in .trav-v{animation:travV 4s linear .2s forwards}
html.js .fig-path.in .path-tall .pn-last{animation-delay:4.8s}
@keyframes travV{to{transform:translateY(350px)}}
.path-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:734px){
  .fig-loop,.fig-path{display:block;margin-top:var(--s5)}
  .fig-loop .loop-wide,.fig-path .path-wide{display:none}
  .fig-loop .loop-tall,.fig-path .path-tall{display:block;width:100%;max-width:360px;margin:0 auto}
  .five{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (prefers-reduced-motion:reduce){
  html.js .fig-path .pfill-v,html.js .fig-path.in .pfill-v{transform:none;transition:none}
  html.js .fig-path .trav-v,html.js .fig-path.in .trav-v{transform:translateY(350px);animation:none}
}

/* ---------- v15.1 — phones: fewer words around the figures. .m-hide drops a phrase under
   735px; .m-only is its shorter stand-in. Fact rows become single compact lines ---------- */
.m-only{display:none}
@media (max-width:734px){
  .m-hide{display:none}
  .m-only{display:inline}
  p.m-only{display:block}
  .facts{margin-top:var(--s3);padding-top:6px;border-top:1px solid var(--sep)}
  .facts li{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;padding:6px 0;border-top:0}
  .facts b{font-size:17px}
  .dir-box{margin-top:var(--s5);padding:24px}
  .dir-box p{font-size:16px;line-height:1.45}
}

/* the ticket's slogan stays on one line beside the barcode */
.tk-code .tk-mono{flex:none;white-space:nowrap}

/* ---------- v15.3 — phones: the six audiences are all on screen, no sideways scroll.
   A three-by-two grid of chips with shorter labels; the chosen one fills black ---------- */
@media (max-width:734px){
  .aud-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:0 0 var(--s3);padding:0}
  .aud-for{grid-column:1/-1;padding:0 2px 2px}
  .aud-tab{height:40px;padding:0 4px;border-radius:999px;background:var(--bg2);color:var(--label2);
    font-size:10px;letter-spacing:.06em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aud-tab::after{display:none}
  .aud-tab:hover{color:var(--label2)}
  .aud-tab[aria-selected="true"],.aud-tab[aria-selected="true"]:hover{background:var(--label);color:#fff}
}
@media (max-width:359px){
  .aud-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- v16 — the page stops at each section. Native scroll snapping: every section
   comes to rest just under the nav, and a fast flick cannot skip past one. A section taller
   than the screen still scrolls freely inside itself. No script involved ---------- */
html{scroll-snap-type:y mandatory;scroll-padding-top:72px}
main > section{scroll-snap-align:start;scroll-snap-stop:always}
.rot-sec{scroll-margin-top:44px}
footer.foot{scroll-snap-align:end}

/* ---------- v18 — phones: one section, one screen. Under 735px the two-directions, job,
   California and path sections are each sized to the room left under the nav when they snap
   (the small viewport, so Safari's toolbar never covers them), and the job and path drawings
   flex to whatever height remains. California comes to rest twice: the problem, then the
   solution. A phone too short to hold a section lets it run long instead of crushing it ---------- */
@media (max-width:734px){
  .dir-sec,.cal-a,.cal-b{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center}
  .dir-sec{padding-top:clamp(20px,4.5svh,36px);padding-bottom:clamp(20px,4.5svh,36px)}
  .dir-sec > .wrap{width:100%}

  /* two directions: the headline holds two lines; the paragraph squares off into one block */
  .dir-sec .t-title{font-size:min(32px,calc((100vw - 40px) / 14))}
  .dir-sec .fig{margin-top:var(--s4)}
  .dir-sec .dir-box{margin-top:var(--s4)}
  .dir-box p{text-align:justify;text-wrap:pretty}
  .dir-box strong{white-space:nowrap}

  /* the job and the path: the whole panel on screen, the drawing taking the height that is left */
  .loop-sec,.path-sec{min-height:calc(100svh - 84px);display:flex;flex-direction:column;padding-top:40px;padding-bottom:28px}
  .loop-sec > .wrap,.path-sec > .wrap{flex:1 1 auto;width:100%;display:flex;flex-direction:column}
  .loop-sec .t-title,.path-sec .t-title{font-size:min(32px,calc((100vw - 64px) / 11.7))}
  .loop-sec .fig-loop,.path-sec .fig-path{flex:1 1 0;width:100%;min-height:320px;margin-top:var(--s3);position:relative}
  .fig-loop svg.loop-tall,.fig-path svg.path-tall{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;margin:0}

  /* california: two stops */
  #california{padding-top:0;padding-bottom:0;scroll-snap-align:none}
  .cal-a,.cal-b{padding:clamp(20px,4.5svh,36px) 0;scroll-snap-align:start;scroll-snap-stop:always}
  .cal-a .two,.cal-b .two{margin-top:clamp(14px,calc((100svh - 600px) * .16),32px);gap:clamp(12px,calc((100svh - 600px) * .12),24px)}
  /* the solution spells itself out in step with the drawing */
  html.js .cal-b .facts li[data-reveal]{transition-delay:calc(.5s + var(--i,0) * .55s)}
}
@media (max-width:734px) and (prefers-reduced-motion:reduce){
  html.js .cal-b .facts li[data-reveal]{transition-delay:0s}
}

/* ---------- v18.1 — the California facts read as sentences: a bold lead, then its line,
   wrapping together. On a phone the solution stop opens with its own headline, whose words
   rise in one at a time while a blue block sweeps in behind the last three ---------- */
.facts li{display:block;line-height:1.35}
.hl-b{display:inline-block;position:relative;z-index:0;color:#fff;padding:0 .17em;margin:0 .02em;white-space:nowrap;line-height:1.02}
.hl-b::before{content:"";position:absolute;inset:.02em -.02em .02em;z-index:-1;background:var(--brand);transform:skewX(-10deg);border-radius:.06em;transform-origin:0 50%}
.kin .w{display:inline-block;white-space:nowrap}
html.js .kin[data-reveal]{opacity:1;transform:none}
html.js .kin .w{opacity:0;transform:translateY(.4em);filter:blur(7px);
  transition:transform .85s cubic-bezier(.16,1,.3,1) calc(.15s + var(--w,0) * 120ms),opacity .5s ease calc(.15s + var(--w,0) * 120ms),filter .6s ease calc(.15s + var(--w,0) * 120ms)}
html.js .kin.in .w{opacity:1;transform:none;filter:blur(0)}
html.js .kin .hl-b::before{transform:skewX(-10deg) scaleX(0);transition:transform .55s cubic-bezier(.16,1,.3,1) .42s}
html.js .kin.in .hl-b::before{transform:skewX(-10deg) scaleX(1)}
@media (max-width:734px){
  div.m-only{display:block}
  .cal-b-head .t-title{font-size:min(38px,9.2vw);line-height:1.12}
  .facts li{padding:clamp(3px,calc((100svh - 600px) * .036),7px) 0}
  .facts span{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  html.js .kin .w{opacity:1;transform:none;filter:none;transition:none}
  html.js .kin .hl-b::before{transform:skewX(-10deg);transition:none}
}

/* ---------- v19 — the header is one flat bar: solid black from edge to edge, the same over
   every section, nothing showing through or above it. The mark is a vector (traced from the
   brand file), so it stays sharp at any size; the call to action is a white pill. The bar is
   60px tall, the room the floating pill used to take, so every snap position is unchanged ---------- */
.nav{position:sticky;top:0;z-index:10;height:60px;margin:0;border-radius:0;background:#000;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.nav-in{padding:0 var(--gutter)}
.logo-nav{margin-left:-4px}
.logo-nav img{height:25px}
.nav .nav-cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;
  background:#fff;color:#000;font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  transition:background-color .2s ease}
.nav .nav-cta:hover{opacity:1;background:#e3e3e8}
.nav .logo-nav:hover{opacity:1}
@media (max-width:734px){
  .nav{margin:0}
  .nav-in{padding:0 14px 0 var(--gutter)}
}

/* ---------- v21 — the small print. A legal row in the footer, an earnings note under the
   measurements, a skip link for keyboards, and the plain document pages (privacy, terms),
   which do not snap ---------- */
.skip{position:absolute;left:-9999px;top:12px;z-index:100;padding:10px 14px;border-radius:8px;background:#fff;color:#000;font-size:14px;font-weight:600}
.skip:focus{left:12px}
.fine{max-width:600px;margin:var(--s4) auto 0;font-size:12px;line-height:1.5;letter-spacing:-.004em;color:var(--label2)}
.fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-legal{max-width:var(--wide);margin:var(--s4) auto 0;padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;line-height:1.5;letter-spacing:-.004em;color:rgba(255,255,255,.62)}
.foot-legal p + p{margin-top:var(--s1)}
.foot-legal a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:2px}
.foot-row{display:flex;flex-wrap:wrap;gap:6px 18px}
html.doc{scroll-snap-type:none}
.legal{max-width:720px;margin:0 auto;padding:clamp(48px,8vw,96px) var(--gutter) var(--s7)}
.legal h1{font-size:clamp(32px,4.8vw,48px);font-weight:600;line-height:1.07;letter-spacing:-.01em}
.legal > .t-cap{margin-top:var(--s2)}
.legal h2{font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.012em;margin-top:var(--s5)}
.legal p,.legal li{font-size:17px;line-height:1.5;letter-spacing:-.016em;margin-top:var(--s2)}
.legal ul{padding-left:1.25em}
.legal li{margin-top:var(--s1)}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}