/* SCAIL homepage v7 · "One file. Every hour." (cinematic revamp, 2026-11-09)
   Brand (MOTION.md, HANDOFF-site-motion-system.md §2): #F5F5F7 ground, Lufga 200 headings, Urbanist 300
   body, never bold (500 ceiling), prism ramp only on the wordmark, the Halo mark and one accent word per
   headline, wins in pink #D6006E, never green. Tokens come from /site/v7/ds.css (design-system/).
   Nothing here is timed: every moving value is written by /site/v7/home.js from a clock or from scroll.
   Without JavaScript, under reduced motion or with ?motion=off, every section shows its final frame. */

:root{
  --bg:var(--ds-ground);--bg2:var(--ds-ground-2);--ink:var(--ds-ink);--ink0:var(--ds-ink-strong);--ink2:var(--ds-ink-2);--ink3:var(--ds-ink-3);
  --line:var(--ds-line);--line2:var(--ds-line-2);--win:var(--ds-win);--win-soft:var(--ds-win-soft);--glass:var(--ds-glass);
  --m:var(--ds-gutter);--f-d:var(--ds-f-display);--f-t:var(--ds-f-body);--hd:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:300 17px/1.55 var(--f-t);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--win);outline-offset:3px;border-radius:6px}
::selection{background:var(--win);color:#fff}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink0);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
main{display:block}
.wrap{max-width:var(--ds-max);margin-inline:auto;padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-d);font-weight:200;letter-spacing:-.035em;line-height:.98;color:var(--ink0)}
h2{font-size:var(--ds-size-h2);line-height:1.02;max-width:15ch;text-wrap:balance}
h3{font-weight:300;letter-spacing:-.02em;font-size:clamp(22px,1.9vw,28px);line-height:1.1}
h4,h5,.h4,.h5{font-weight:400;font-size:14px;letter-spacing:0;color:var(--ink0)}
b,strong{font-weight:500}
.acc{background:var(--ds-prism);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;padding-right:.04em}
.lede{font-size:var(--ds-size-lede);line-height:1.5;color:var(--ink);max-width:46ch}
.soft{color:var(--ink2)}
.sm{font-size:13px}
.sec{padding-top:var(--ds-section)}
/* grid children may shrink below their content (tables scroll inside their own box), so no grid is ever wider than the screen */
:is(.hero-grid,.c-pin,.r-pin,.j-head,.split,.imp2,.n-grid,.board,.pgrid,.mob-grid,.sc-grid,.f-stage,.desk-grid,.pp-grid,.price-grid,.tr-grid,.fd-grid,.faq-grid,.cta-grid)>*{min-width:0}
.split{display:grid;gap:22px}
@media (min-width:1000px){.split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;column-gap:56px}.split .lede{padding-bottom:.5em}}
.card{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--line);border-radius:var(--ds-r-panel);box-shadow:var(--ds-shadow-card)}
.dom{font:400 12.5px/1 var(--f-t);color:var(--ink2);letter-spacing:.01em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--ink0);color:#fff;font:400 16px/1 var(--f-t);text-decoration:none;white-space:nowrap;border:0;transform-origin:50% 50%}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--ink0);box-shadow:inset 0 0 0 1px var(--line2)}
.link{text-decoration:none;font-size:15px;display:inline-block;margin-top:20px}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.fine{font-size:13.5px;color:var(--ink2);margin-top:14px}
.ds-seg button{min-height:40px}

/* the act clock: a quiet HUD that carries the visit through the day, the night and the decision */
.hud{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;display:none;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--line);font:300 12.5px/1 var(--f-t);color:var(--ink2);pointer-events:none}
.hud-t{font:300 14px/1 var(--f-d);color:var(--ink0);font-variant-numeric:tabular-nums;min-width:4.6em}
@media (min-width:1000px){.ds-motion .hud{display:flex}}
.hud[hidden]{display:none!important}

/* Halo's caption and Hear Halo live in the docked pill (site.js moves them into .ds-dock) */
.guide{display:flex;align-items:center;gap:8px;position:relative}
.guide>img{display:none}
.guide .tx{display:none;position:absolute;right:0;bottom:calc(100% + 12px);width:min(340px,calc(100vw - 28px));padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 18px 44px -20px rgba(14,14,16,.38),0 0 0 1px var(--line);font-size:13.5px;line-height:1.4;color:var(--ink3)}
.voice-on .guide .tx{display:block}
.guide .tx span{transition:none}
.guide[hidden]{display:none!important}
.guide .hear{flex:none;height:46px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line2),0 16px 36px -16px rgba(14,14,16,.4);font-size:14px;color:var(--ink0)}
.guide .hear[aria-pressed="true"]{background:var(--ink0);color:#fff}
.guide:empty{display:none}



/* shared by the import bar and the checklists (they lived in the old journey css) */
.pbar{height:6px;border-radius:6px;background:var(--bg2);overflow:hidden;margin-top:16px}
.pbar i{display:block;height:100%;width:100%;background:var(--ink0);transform-origin:0 50%}
.tick{width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);flex:none;background:#fff}
.tick.on{background:var(--ink0);border-color:var(--ink0)}
/* ═════════ HERO, FILM AND CLOSE · "Every dot is a file" (award pass, 2026-11-10) ═════════
   Brand: #F5F5F7 ground, Lufga 200 for headings and figures, Urbanist 300 body, never bold (500 ceiling). The prism
   ramp is on the wordmark-less mark, one accent word per headline, and the hairline threads Halo itself draws.
   Wins are pink #D6006E on #FBE3EF. Tokens come from /site/v7/ds.css.
   This file's default is the STILL page (no JavaScript, reduced motion, ?motion=off, no WebGL): every scene in
   flow, at its final frame. Rules under .ds-motion:not(.ds-flow) turn the same DOM into the pinned film. */

:root{
  --bg:var(--ds-ground);--bg2:var(--ds-ground-2);--ink:var(--ds-ink);--ink0:var(--ds-ink-strong);--ink2:var(--ds-ink-2);--ink3:var(--ds-ink-3);
  --line:var(--ds-line);--line2:var(--ds-line-2);--win:var(--ds-win);--win-soft:var(--ds-win-soft);--glass:var(--ds-glass);
  --f-d:var(--ds-f-display);--f-t:var(--ds-f-body);
  --hd:72px;--gx:clamp(20px,7.36vw,150px);--gr:clamp(20px,3.4vw,64px);
  --D:min(62svh,43vw);--ox:60%;
  --night:#0A0A0D;--n-ink:#F5F5F7;
}
:is(.hero,.film,.fin) :is(h1,h2,h3){letter-spacing:-.04em}
:is(.hero,.film,.fin) .fine{margin-top:0}
:is(.hero,.film,.fin) [hidden]{display:none!important}
.muted{color:var(--ink3)}

.btn .arr{display:inline-block}
.tbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:14px;color:var(--ink0);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2)}
.tbtn:hover{text-decoration-color:var(--ink0)}

/* cards on flat ground: the glass look without a live blur (there is nothing behind them to blur) */
.pglass{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:var(--ds-r-panel);box-shadow:var(--ds-shadow-card)}

/* ── the fixed stage ── */
.dusk{position:fixed;inset:0;z-index:0;background:var(--night);visibility:hidden;pointer-events:none}
.orb{position:fixed;left:0;top:0;z-index:1;max-width:none;pointer-events:none;visibility:hidden;will-change:transform}
.threads{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:55;pointer-events:none;overflow:visible}
.threads path{fill:none;stroke-width:1.25;stroke-linecap:round}
.ds-still .dusk,.ds-still .orb,.ds-still .threads{display:none}
main{position:relative;z-index:2;display:block}
.orb-slot{pointer-events:none}
.mark-still{width:100%;height:100%}
.ds-motion .hero .mark-still,.ds-motion:not(.ds-flow) .mark-still{visibility:hidden}

/* ═════════ HERO ═════════ */
.hero{position:relative}
.hero-in{min-height:max(100svh,680px);padding:calc(var(--hd) + clamp(12px,3.4vh,44px)) var(--gr) clamp(64px,10vh,104px) var(--gx);display:flex;flex-direction:column;justify-content:center}
.h-hero{position:relative;z-index:3;font-size:clamp(56px,9vw,172px);line-height:.95;letter-spacing:-.05em;pointer-events:none;align-self:flex-start}
.h-cat{display:block;font:200 clamp(22px,2.5vw,42px)/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink0);margin:0 0 .5em}
.h-l{display:block;white-space:nowrap}
.h-hero .mw{padding-bottom:.24em;margin-bottom:-.24em;padding-right:.06em;margin-right:-.06em}
.hero-copy{position:relative;z-index:3;max-width:min(29.5rem,32vw);margin-top:clamp(14px,2.4vh,26px)}
.lede{font-size:var(--ds-size-lede);line-height:1.5;color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2.8vh,28px)}
.hero .fine{margin-top:14px}
.hproof{display:flex;align-items:center;gap:12px;margin-top:clamp(12px,2vh,18px);max-width:46ch;font-size:14px;line-height:1.45;color:var(--ink2)}
.hproof img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%}

.hero .orb-slot{position:absolute;z-index:1;width:var(--D);height:var(--D);left:calc(var(--ox) - var(--D)/2);top:calc(50% + var(--hd)/2 - var(--D)/2 - 14px)}
.orb-hit{position:absolute;z-index:4;width:var(--D);height:var(--D);left:calc(var(--ox) - var(--D)/2);top:calc(50% + var(--hd)/2 - var(--D)/2 - 14px);border-radius:50%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.orb-hit.over{cursor:pointer}.orb-hit.drag{cursor:grabbing}
.ds-still .orb-hit{display:none}

.tag{position:fixed;left:0;top:0;z-index:30;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(14,14,16,.5);font-size:13px;color:var(--ink0);white-space:nowrap;pointer-events:none;visibility:hidden;will-change:transform}
.tag.on{visibility:visible}
.tag b{font-weight:500;margin-right:5px}

/* the log: Halo is working */
.log{--rh:58px;position:absolute;z-index:5;width:var(--logw,372px);left:min(calc(var(--ox) + var(--D)/2 - 116px),calc(100% - var(--gr) - var(--logw,372px)));top:calc(50% + var(--hd)/2 + 2px);border-radius:var(--ds-r-card);padding:14px 16px 8px;font-size:14px}
.log-h{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.log-h b{font-weight:400;font-size:14.5px;color:var(--ink0);white-space:nowrap}
.log-h .ds-sample{margin-left:auto}
.log-rows{position:relative;height:calc(var(--rh)*4);overflow:hidden}
.lr{position:relative;height:var(--rh);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;column-gap:10px;border-bottom:1px solid var(--line)}
.lr:last-child{border-bottom:0}
.lr b{grid-column:1;font-weight:400;font-size:14.5px;line-height:1.25;color:var(--ink0)}
.lr span{grid-column:1;font-size:13px;line-height:1.3;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:12px;line-height:1;padding:6px 9px;border-radius:999px;background:var(--win-soft);color:var(--win)}
.lr.win span{color:var(--win)}
.log.live .lr{position:absolute;left:0;right:0;top:0;border-bottom:1px solid var(--line);will-change:transform}

.live1{display:none}
.orb-cap{position:absolute;z-index:5;left:calc(var(--ox) - 400px);width:800px;bottom:clamp(14px,3vh,30px);text-align:center;font-size:14px;line-height:1.4;color:var(--ink2)}
.orb-cap .tbtn{margin-left:8px}
.oc-touch{display:none}
@media (hover:none){.oc-fine{display:none}.oc-touch{display:inline}}
.ds-still .oc-fine,.ds-still .oc-touch{display:none}

/* the open file */
.file{position:absolute;z-index:6;right:var(--gr);top:calc(var(--hd) + clamp(6px,1.6vh,18px));width:min(480px,36vw);padding:12px 16px 12px;font-size:14px;border-radius:var(--ds-r-panel)}
.file.pglass{background:rgba(255,255,255,.95)}
.f-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 4px}
.tbtn.back{text-decoration:none;font-size:13.5px}
.fh{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-size:13px;flex:none;color:var(--ink0)}
.fh b{font-size:15px;display:block;line-height:1.2;font-weight:400;color:var(--ink0)}
.fh small{display:block;color:var(--ink3);font-size:12.5px}
.fh .ds-sample{margin-left:auto}
.call{display:flex;align-items:center;gap:8px;margin-top:10px;background:rgba(14,14,16,.045);border-radius:14px;padding:8px 12px;font-size:13.5px}
.call img{width:16px;height:16px;flex:none}
.call b{font-weight:400}
.wave{display:flex;gap:2px;margin-left:auto;height:16px;align-items:center}
.wave i{display:block;width:2px;height:16px;background:var(--ink0);border-radius:2px;transform:scaleY(.35)}
.bubbles{height:64px;overflow:hidden;margin-top:8px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.bub{font-size:13px;line-height:1.35;max-width:90%;padding:7px 11px;border-radius:14px;background:rgba(14,14,16,.05);align-self:flex-start}
.bub b{margin-right:5px;font-weight:500}
.bub.halo{align-self:flex-end;background:var(--ink0);color:#fff}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.field{border:1px dashed var(--line2);border-radius:12px;padding:6px 9px;min-height:46px;min-width:0;transition:background-color .25s}
.field dt{font-size:11px;color:var(--ink3)}
.field dd{margin-top:1px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}
.field.on{border-style:solid;background:rgba(255,255,255,.9)}
.items{margin-top:8px;border-top:1px solid var(--line)}
.item{position:relative;display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13.5px;min-height:38px;color:var(--ink)}
.item em{margin-left:auto;font-style:normal;color:var(--ink3);font-size:12.5px;white-space:nowrap}
.box{width:18px;height:18px;border-radius:6px;border:1px solid var(--line2);display:grid;place-items:center;flex:none;background:#fff;transition:background-color .2s,border-color .2s;position:relative}
.box svg{width:12px;height:12px}
.box path{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .32s cubic-bezier(.2,.7,.2,1)}
.item.on .box{background:var(--ink0);border-color:var(--ink0)}
.item.on .box path{stroke-dashoffset:0}
.letter{position:relative;margin-top:8px;border-radius:14px;background:rgba(255,255,255,.78);border:1px solid var(--line);padding:8px 12px;min-height:52px;font-size:13px;line-height:1.45;color:var(--ink)}
.letter .ph{position:absolute;left:12px;top:8px;color:var(--ink3)}
.ln-w{display:block;white-space:nowrap}
.mailrow{display:flex;align-items:center;gap:12px;margin-top:8px}
.btn-mail{display:inline-flex;align-items:center;justify-content:center;background:var(--ink0);color:#fff;border-radius:999px;padding:0 16px;font-size:13.5px;font-weight:400;min-height:40px;white-space:nowrap;transform-origin:50% 50%}
.file .btn-mail{min-width:156px}
.track{position:relative;flex:1;height:34px;min-width:0}
.track .rail,.track .fill{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2)}
.track .fill{background:var(--ink0);transform-origin:0 50%}
.track .stop{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--line2);transition:background-color .2s,box-shadow .2s}
.track .stop.on{background:var(--ink0);box-shadow:0 0 0 1px var(--ink0)}
.env{position:absolute;left:0;top:50%;width:24px;height:16px;margin-top:-8px;transform:translateX(calc(100% * 0))}
.file .env{left:auto;right:0}
.ds-motion .file .env{left:0;right:auto}
.env svg{width:100%;height:100%}
.mstat{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink3);margin-top:2px;min-height:34px}
.win-chip{display:inline-flex;gap:7px;align-items:center;background:var(--win);color:#fff;border-radius:999px;padding:7px 13px;font-size:13px;visibility:hidden;transform-origin:100% 50%}
.win-chip i{width:7px;height:7px;border-radius:50%;background:#fff}
.win-chip b{font-weight:500}
.win-chip.on{visibility:visible}
.ff{margin-top:6px;font-size:12px;color:var(--ink3)}
.sum{margin-top:12px;border-top:1px solid var(--line)}
.sum li{display:flex;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.sum li span:last-child{color:var(--ink3);text-align:right}
.f-sum .tbtn{margin-top:8px}
.ds-still .file{position:relative;right:auto;top:auto;margin:18px 0 0 auto}

/* ═════════ THE FILM (still layout first) ═════════ */
.fscene{position:relative}
.jr{padding:var(--ds-section) var(--gr) 0 var(--gx)}
.jr-eyebrow{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2);margin-bottom:18px}
.jr-slot{width:120px;height:120px;margin-bottom:18px}
.world{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.w-thread,.jdot{display:none}
.st{position:relative}
.st-file{width:min(440px,100%);padding:16px;border-radius:var(--ds-r-panel);font-size:14px}
.avatar.slot{background:#1479A3}
.rep{margin-top:12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--line);padding:11px 12px 10px}
.rep-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink3)}
.rep-h span:first-child{color:var(--ink0)}
.jpbar{height:2px;background:var(--line);border-radius:2px;margin:9px 0 10px;overflow:hidden}
.jpbar i{display:block;height:100%;background:var(--ink0);transform-origin:0 50%}
.jkpis{display:grid;grid-template-columns:.7fr 1fr .7fr 1.25fr;gap:8px}
.jkpis dt{font-size:11.5px;color:var(--ink3);line-height:1.2;margin-top:2px}
.jfig{font:200 30px/1.1 var(--f-d);letter-spacing:-.03em;color:var(--ink0);height:1.1em;white-space:nowrap}
.item .jwash{position:absolute;inset:0 -8px;border-radius:10px;background:var(--win-soft);transform-origin:100% 50%;z-index:-1}
.st-file .items{isolation:isolate}
.item.win{color:var(--win)}
.item.win em{color:var(--win)}
.item.win .box{background:var(--win);border-color:var(--win)}
.jsw{position:relative;display:inline-grid;overflow:hidden;text-align:right}
.jsw>span{grid-area:1/1;justify-self:end}
.sw-a{visibility:hidden}
.st-note{margin-top:9px;font-size:12px;color:var(--ink3)}
.st-letter{width:min(360px,100%)}
.jsheet{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px 22px;box-shadow:var(--ds-shadow-lift);transform-origin:50% 100%}
.lt-h{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.lt-b{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink0)}
.lt-f{margin-top:16px;display:grid;gap:9px}
.lt-f .ln{height:1px;background:var(--line2)}
.lt-f .ln.s{width:46%}
.st-letter .btn-mail{margin-top:16px;min-width:176px}
.st-route{width:100%;max-width:880px;padding-top:54px}
.rt-rail{position:absolute;left:0;right:0;top:54px;height:1px;background:var(--line2)}
.rt-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rt-stops li{position:relative;padding-top:18px;font-size:13px;line-height:1.3;color:var(--ink3)}
.rt-stops li i{position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--line2);transition:background-color .2s,box-shadow .2s}
.rt-stops li.on i{background:var(--ink0);box-shadow:0 0 0 1px var(--ink0)}
.rt-stops b{display:block;font-weight:400;font-size:14.5px;color:var(--ink0)}
.rt-stops small{font-size:12.5px}
.j-env{position:absolute;right:0;top:20px;width:52px;height:36px}
.jtrk{margin-top:22px;width:min(340px,100%);border-radius:var(--ds-r-card);padding:13px 16px 12px;font-size:13.5px}
.jtrk-hd{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.jtrk-hd b{font-weight:400;color:var(--ink0)}
.jtrk-hd span{font-size:12px;color:var(--ink3)}
.jtrk ol{margin-top:6px}
.jtrk li{position:relative;padding:4px 0 4px 18px;color:var(--ink3);transition:color .2s}
.jtrk li::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:0 0 0 1px var(--line2);transition:background-color .2s,box-shadow .2s}
.jtrk li.on{color:var(--ink0)}
.jtrk li.on::before{background:var(--ink0);box-shadow:0 0 0 1px var(--ink0)}

.jr-cap{margin-top:36px;padding:28px 0 0;border-top:1px solid var(--line);display:grid;gap:22px}
.jr-h{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;line-height:1.05}
.jr-n{display:none}
.jr-steps{display:grid;gap:18px;counter-reset:s}
.jr-steps .big{font:200 clamp(26px,3.2vw,54px)/1.04 var(--f-d);letter-spacing:-.04em;color:var(--ink0)}
.jr-steps .sm{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink2);max-width:62ch}
.jr-cta{display:grid;gap:10px;justify-items:start}
.fillbtn{position:relative;overflow:hidden}
.fb-b{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:10px;background:var(--ink0);color:#fff;border-radius:inherit}
.fb-a,.fb-b>span{display:inline-flex;align-items:center;gap:10px}

.nt{margin:var(--ds-section) var(--gr) 0;border-radius:var(--ds-r-panel);background:var(--night);color:var(--n-ink);padding:clamp(24px,5vw,72px)}
.nt-in{display:grid;gap:28px}
.nt-h{font-size:clamp(34px,4.6vw,84px);line-height:1;color:inherit;max-width:11ch}
.clock{font:200 clamp(96px,18vw,330px)/.9 var(--f-d);letter-spacing:-.05em;display:flex;align-items:baseline;gap:.06em;white-space:nowrap;margin-top:.04em}
.ck-ap{font:200 .17em/1 var(--f-d);letter-spacing:-.01em}
.np{font-size:17px;line-height:1.5;max-width:46ch;opacity:.7}
.nt-slot{width:150px;height:150px}
.feed{display:grid;gap:10px;margin-top:18px}
.feed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:13px 15px;border-radius:18px;background:rgba(245,245,247,.07);box-shadow:inset 0 0 0 1px rgba(245,245,247,.14);font-size:14.5px;line-height:1.3;color:var(--n-ink)}
.feed .t{font:200 15px/1.3 var(--f-d);white-space:nowrap;opacity:.8}
.feed .x{grid-row:2;grid-column:1/-1}
.feed small{display:block;font-size:12.5px;opacity:.62;margin-top:2px}
.feed .tg{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;white-space:nowrap}
.feed li.w{color:#FF8CC4;box-shadow:inset 0 0 0 1px rgba(214,0,110,.6)}
.ds-motion:not(.ds-flow) .feed li{min-height:74px;transition:box-shadow .3s}
.ds-motion:not(.ds-flow) .feed li.w:not(.lit){box-shadow:inset 0 0 0 1px rgba(245,245,247,.14)}
.dawn{margin-top:18px;border-radius:var(--ds-r-card);background:var(--bg);color:var(--ink);padding:18px 18px 16px;display:grid;gap:12px;justify-items:start}
.dw-t{display:flex;align-items:center;gap:10px;font:200 20px/1 var(--f-d);color:var(--ink0)}
.dw-b{font:200 clamp(24px,2.2vw,34px)/1.08 var(--f-d);letter-spacing:-.035em;color:var(--ink0)}
.rails{display:grid;gap:26px;margin-top:8px}
.rl-h{position:relative;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em;line-height:1.05;color:inherit;padding-top:16px}
.rl{position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.32;transform-origin:0 50%}
.rl-p{margin-top:8px;font-size:15px;line-height:1.45;max-width:38ch;opacity:.7}
@media (min-width:760px){
  .nt-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .rails{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .jr-cap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
  .jr-h{grid-column:1/-1}
}

/* ═════════ CLOSE ═════════ */
.fin{padding:var(--ds-section) var(--gr) clamp(48px,6vw,88px) var(--gx)}
.fin-in{display:grid;gap:30px;align-items:center}
.fin-slot{width:clamp(120px,15vw,210px);height:clamp(120px,15vw,210px);margin:0 0 18px -10px}
.fin h2{font-size:var(--ds-size-h2);line-height:1.02}
.fin-say p{margin-top:16px;max-width:48ch}
.pr-dom{font:200 clamp(18px,1.6vw,24px)/1.2 var(--f-d);color:var(--ink0);letter-spacing:-.01em;overflow-wrap:anywhere}
.dlg{border-radius:var(--ds-r-panel);padding:clamp(18px,2.4vw,30px);display:grid;gap:10px;justify-items:start;max-width:520px;width:100%}
.dlg h3{font-weight:200;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;margin-bottom:6px}
.dlg label,.dlg .lbl{font-size:13px;color:var(--ink2);margin-top:6px}
.dlg input[name=firm]{width:100%;height:52px;border-radius:var(--ds-r-field);border:1px solid var(--line2);background:#fff;padding:0 14px;font:300 17px/1 var(--f-t);color:var(--ink0)}
.slug{font-size:13.5px;color:var(--ink2);overflow-wrap:anywhere}
.slug b{font-weight:400;color:var(--ink0)}
.tiers{max-width:100%}
.ds-seg button{min-height:44px}
.plan-p{display:flex;align-items:baseline;gap:10px;color:var(--ink2);font-size:14px}
.pp-fig{font:200 44px/1.1 var(--f-d);letter-spacing:-.04em;color:var(--ink0)}
.dlg .btn{width:100%;margin-top:6px}
.fine3{font-size:13px;color:var(--ink2)}
@media (min-width:900px){.fin-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:56px}.dlg{justify-self:end}}

.v5c-base{font-size:12.5px;line-height:1.6;max-width:132ch;color:var(--ink2);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ═════════ MOTION: the same DOM as a film ═════════ */
.ds-motion .hero:not(.live) :is(.log,.orb-cap,.live1){visibility:hidden}
.ds-motion .log-rows .lr:not(.dyn){display:none}
.ds-motion .hero.file-open .orb-hit{pointer-events:none}

.ds-motion:not(.ds-flow) .film-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.ds-motion:not(.ds-flow) .fscene{position:absolute;inset:0;margin:0;padding:0;border-radius:0}
.ds-motion:not(.ds-flow) .jr{display:grid;grid-template-rows:minmax(0,1fr) auto}
.ds-motion:not(.ds-flow) .jr-band{position:relative;margin-top:var(--hd);overflow:hidden;contain:layout paint}
.ds-motion:not(.ds-flow) .jr-eyebrow{position:absolute;left:var(--gx);top:10px;margin:0;z-index:3}
.ds-motion:not(.ds-flow) .jr-slot{display:none}
.ds-motion:not(.ds-flow) .world{position:absolute;left:0;top:0;width:0;height:0;display:block;transform-origin:0 0;will-change:transform}
.ds-motion:not(.ds-flow) .w-thread{display:block;position:absolute;left:0;top:0;width:1px;height:1px;max-width:none;overflow:visible;will-change:transform}
.w-thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.w-thread .base{stroke:rgba(14,14,16,.1);stroke-width:1}
.w-thread .line{stroke:url(#wGrad);stroke-width:1.5}
/* each station and the thread are their own layers: a tick or a reel repaints one card, never the whole world */
.ds-motion:not(.ds-flow) .st{position:absolute;left:0;top:0;max-width:none;will-change:transform}
.ds-motion:not(.ds-flow) .jpbar i,.ds-motion:not(.ds-flow) .item .jwash{will-change:transform}
.ds-motion:not(.ds-flow) .st-file{width:var(--wf,440px);will-change:clip-path}
.ds-motion:not(.ds-flow) .st-letter{width:var(--wl,360px)}
.ds-motion:not(.ds-flow) .st-route{width:var(--wr,880px);padding-top:0;height:300px}
.ds-motion:not(.ds-flow) .rt-rail{top:0}
.ds-motion:not(.ds-flow) .rt-stops{display:block;position:absolute;left:0;right:0;top:0}
.ds-motion:not(.ds-flow) .rt-stops li{position:absolute;top:0;width:150px;padding-top:16px}
.ds-motion:not(.ds-flow) .rt-stops li:nth-child(1){left:0}.ds-motion:not(.ds-flow) .rt-stops li:nth-child(2){left:33.333%}.ds-motion:not(.ds-flow) .rt-stops li:nth-child(3){left:66.666%}.ds-motion:not(.ds-flow) .rt-stops li:nth-child(4){left:100%}
.ds-motion:not(.ds-flow) .rt-stops li i{left:-5.5px;top:-5.5px}
.ds-motion:not(.ds-flow) .j-env{left:0;top:0;right:auto;margin:-18px 0 0 -26px;will-change:transform}
.ds-motion:not(.ds-flow) .jtrk{position:absolute;left:var(--trkx,38%);top:86px;margin:0;width:350px}
.ds-motion:not(.ds-flow) .avatar.slot{background:none}
.ds-motion:not(.ds-flow) .sw-a{visibility:visible}
.ds-motion:not(.ds-flow) .jsw>span{will-change:transform}
.ds-motion:not(.ds-flow) .jdot{display:block;position:absolute;left:0;top:0;width:var(--jd,19px);height:var(--jd,19px);margin:calc(var(--jd,19px)/-2) 0 0 calc(var(--jd,19px)/-2);border-radius:50%;background:var(--dotc,#1479A3);will-change:transform;z-index:5}
.jdot::after{content:"";position:absolute;inset:calc(-5px/var(--s,1));border-radius:50%;border:calc(1.25px/var(--s,1)) solid rgba(14,14,16,.75);opacity:var(--ring,1)}
.jdot.win::after{border-color:var(--win)}
.ds-motion:not(.ds-flow) .jsheet{will-change:transform}

.ds-motion:not(.ds-flow) .jr-cap{margin:0;border-top:0;height:clamp(196px,27vh,264px);padding:0 var(--gr) 0 var(--gx);display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);align-items:center;gap:0 clamp(28px,4vw,72px)}
.ds-motion:not(.ds-flow) .jr-capL{display:grid;gap:6px}
.ds-motion:not(.ds-flow) .jr-h{grid-column:auto;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.02em;color:var(--ink2);grid-row:1;grid-column:1;align-self:end;white-space:nowrap}
.ds-motion:not(.ds-flow) .jr-n{display:flex;align-items:baseline;gap:8px;grid-row:2;grid-column:1;align-self:start;font:200 clamp(56px,6vw,96px)/1 var(--f-d);letter-spacing:-.05em;color:var(--ink0)}
.jr-n-now{display:inline-block;height:1em;overflow:hidden}
.jr-n-of{font-size:.24em;letter-spacing:0;color:var(--ink3)}
.ds-motion:not(.ds-flow) .jr-cap{grid-template-rows:auto auto;align-content:center;row-gap:4px}
.ds-motion:not(.ds-flow) .jr-steps{display:block;position:relative;grid-row:1/3;grid-column:2;align-self:center;height:clamp(150px,20vh,196px)}
.ds-motion:not(.ds-flow) .jr-steps li{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);visibility:hidden}
.ds-motion:not(.ds-flow) .jr-steps li.on{visibility:visible}
.ds-motion:not(.ds-flow) .jr-steps .big{font-size:clamp(28px,3.3vw,68px);max-width:21ch}
.ds-motion:not(.ds-flow) .jr-steps .sm{font-size:clamp(14px,1.05vw,16px);max-width:66ch}
.ds-motion:not(.ds-flow) .jr-cta{grid-row:1/3;grid-column:3;align-self:center}
.ds-motion:not(.ds-flow) .fillbtn{background:rgba(255,255,255,.7);color:var(--ink0);box-shadow:inset 0 0 0 1px var(--line2)}
.ds-motion:not(.ds-flow) .fb-b{display:flex;clip-path:inset(0 100% 0 0);will-change:clip-path}

.ds-motion:not(.ds-flow) .nt{--nd:min(300px,23vw,42vh);background:none;color:var(--n-ink);pointer-events:none}
.ds-motion:not(.ds-flow) .nt.on{pointer-events:auto}
.ds-motion:not(.ds-flow) .nt-in{position:absolute;inset:var(--hd) 0 0 0;padding:clamp(8px,2.4vh,28px) var(--gr) clamp(18px,4vh,40px) var(--gx);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:40px;row-gap:clamp(12px,2.4vh,26px)}
.ds-motion:not(.ds-flow) .nt-left{display:flex;flex-direction:column;justify-content:center;min-height:0}
.ds-motion:not(.ds-flow) .nt-h{font-size:clamp(34px,4.5vw,84px)}
.ds-motion:not(.ds-flow) .nt-in.day{color:var(--night)}
/* the terminator re-clips both copies on every frame of dusk and dawn; with the type on layers of its own, that
   repaints a mask, not the type */
.ds-motion:not(.ds-flow) .nt-in :is(.nt-h,.clock,.np,.feed,.dawn,.rails){will-change:transform}
.ds-motion:not(.ds-flow) .nt h2,.ds-motion:not(.ds-flow) .nt h3{color:inherit}
.ds-motion:not(.ds-flow) .clock{display:block;letter-spacing:0;font-size:min(18vw,33vh);line-height:1;margin:clamp(2px,1vh,10px) 0 clamp(4px,1.4vh,14px) calc(var(--hang,0px)*-1)}
.ck{display:flex;align-items:flex-end;white-space:nowrap}
.rc{display:inline-block;height:1em;overflow:visible;clip-path:inset(0 -.5em);text-align:center;flex:none}
.rs{display:flex;flex-direction:column;will-change:transform}
.rs>span{display:block;height:1em;line-height:1}
.ck .ck-ap{margin-left:.5em;font-size:.17em;line-height:1;margin-bottom:1.2em}
.ck .ck-ap .rc{text-align:left}
.ds-motion:not(.ds-flow) .nt-right{position:relative;min-height:0}
.ds-motion:not(.ds-flow) .nt-slot{position:absolute;left:0;top:50%;width:var(--nd,300px);height:var(--nd,300px);margin-top:calc(var(--nd,300px)/-2 - 6px)}
.ds-motion:not(.ds-flow) .feed{position:absolute;right:0;top:0;bottom:0;height:fit-content;width:calc(100% - var(--nd,300px) - 34px);margin:auto 0;gap:10px}
.ds-motion:not(.ds-flow) .feed li{background:rgba(245,245,247,.07);will-change:clip-path,transform}
.ds-motion:not(.ds-flow) .dawn{position:absolute;right:0;top:0;bottom:0;height:fit-content;width:calc(100% - var(--nd,300px) - 34px);margin:auto 0;background:none;padding:0;border-radius:0;gap:14px}
.ds-motion:not(.ds-flow) .dw-b{font-size:clamp(26px,2.5vw,40px)}
.ds-motion:not(.ds-flow) .rails{margin:0}
.ds-motion:not(.ds-flow) .np,.ds-motion:not(.ds-flow) .rl-p{opacity:.68}

/* ═════════ sizes between phone and desktop ═════════ */
@media (max-width:1279px){:root{--ox:63%;--D:min(60svh,41vw)}.log{--logw:316px;top:calc(50% + var(--hd)/2 - 26px)}.ls-l{display:none}.h-hero{font-size:clamp(56px,8.6vw,172px)}.orb-cap{left:calc(var(--ox) - 330px);width:560px;text-align:left}}

/* ═════════ PHONES: designed on purpose ═════════ */
@media (max-width:759px){
  :root{--hd:60px;--gx:18px;--gr:18px;--D:min(94vw,430px)}
  
  
  
  .hero-in{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:calc(var(--hd) + 10px) 18px 26px}
  .hero-copy{display:contents}
  .h-hero{font-size:min(15.4vw,74px);line-height:.96;order:0}
  .h-cat{font-size:19px;margin-bottom:.42em}
  .lede{order:1;font-size:16.5px;line-height:1.45;margin-top:12px;position:relative;z-index:3}
  .ctas{order:2;flex-direction:column;gap:8px;margin-top:16px;position:relative;z-index:3}
  .ctas .btn{width:100%}
  .ctas .btn.ghost{min-height:48px}
  .hero .fine{order:3;margin-top:10px;font-size:13px;position:relative;z-index:3}
  .orb-cap{order:4;position:relative;left:auto;bottom:auto;width:auto;text-align:left;margin-top:14px;font-size:13.5px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
  .orb-cap .tbtn{margin-left:0}
  .oc-fine{display:none!important}.oc-touch{display:inline}
  .hero .orb-slot{order:5;position:relative;left:auto;top:auto;align-self:center;margin-top:2px;flex:none}
  .orb-hit{left:calc(50% - var(--D)/2);top:auto;bottom:auto}
  .live1{order:5;display:flex;align-items:center;gap:8px;position:relative;z-index:5;margin:calc(var(--D)*-.985) 0 calc(var(--D)*.985 - 52px);height:52px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line),0 18px 36px -22px rgba(14,14,16,.5);font-size:13px;line-height:1.2;color:var(--ink2);overflow:hidden;white-space:nowrap}
  .live1 img{flex:none}
  .l1-k{display:none}
  .l1-v{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .l1-v b{font-weight:400;color:var(--ink0)}
  .log{order:6;position:relative;left:auto;top:auto;width:auto;margin-top:6px}
  .hproof{order:7;margin-top:18px;max-width:none}
  .file.pglass{background:#FCFCFD}
  .file{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:calc(100svh - var(--hd) - 148px);overflow:auto;overscroll-behavior:contain;border-radius:26px 26px 0 0;z-index:50;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));background:#FCFCFD;box-shadow:0 -24px 60px -30px rgba(14,14,16,.4),0 0 0 1px var(--line)}
  .ds-still .file{position:relative;max-height:none;margin:18px 0 0;border-radius:26px}
  .bubbles{height:60px}

  .jr{padding:var(--ds-section) 18px 0}
  .ds-motion:not(.ds-flow) .jr-eyebrow{display:none}
  .ds-motion:not(.ds-flow) .jr-cap{height:auto;min-height:42svh;padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;align-items:start;column-gap:12px;row-gap:8px}
  .ds-motion:not(.ds-flow) .jr-h{grid-row:1;grid-column:2;align-self:center;font-size:15px;justify-self:end}
  .ds-motion:not(.ds-flow) .jr-n{grid-row:1;grid-column:1;font-size:40px}
  .ds-motion:not(.ds-flow) .jr-steps{grid-row:2;grid-column:1/-1;height:auto;min-height:168px;align-self:stretch}
  .ds-motion:not(.ds-flow) .jr-steps li{top:0;transform:none}
  .ds-motion:not(.ds-flow) .jr-steps .big{font-size:min(8.2vw,36px);max-width:none}
  .ds-motion:not(.ds-flow) .jr-steps .sm{font-size:14px;line-height:1.42;margin-top:8px}
  .ds-motion:not(.ds-flow) .jr-cta{grid-row:3;grid-column:1/-1;align-self:end;display:grid;grid-template-columns:1fr;gap:6px;justify-items:stretch}
  .ds-motion:not(.ds-flow) .jr-cta .btn{width:100%}
  .ds-motion:not(.ds-flow) .jr-cta .fine{font-size:12.5px;text-align:center}
  .ds-motion:not(.ds-flow) .jtrk{width:280px;top:78px}
  .ds-motion:not(.ds-flow) .rt-stops li{width:120px;font-size:12px}
  .rt-stops b{font-size:13.5px}

  .nt{margin:var(--ds-section) 12px 0;padding:22px 18px}
  .ds-motion:not(.ds-flow) .nt{--nd:min(42vw,21svh)}
  .ds-motion:not(.ds-flow) .nt-in{padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px));grid-template-columns:var(--nd,150px) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);grid-template-areas:"h h" "c c" "orb np" "b b" "r r";column-gap:14px;row-gap:clamp(6px,1.4svh,14px)}
  .ds-motion:not(.ds-flow) .nt-left,.ds-motion:not(.ds-flow) .nt-right{display:contents}
  .ds-motion:not(.ds-flow) .nt-h{grid-area:h}.ds-motion:not(.ds-flow) .clock{grid-area:c;justify-self:end;font-size:min(31vw,18svh);margin:0}
  /* the day copy on a phone: the morning card, then the three guardrails as three lines */
  .ds-motion:not(.ds-flow) .nt-in.day .rails{grid-area:r;gap:0;margin-top:2px}
  .ds-motion:not(.ds-flow) .nt-in.day .rl-p{display:none}
  .ds-motion:not(.ds-flow) .nt-in.day .rl-h{font-size:19px;padding:9px 0 9px}
  .ds-motion:not(.ds-flow) .np{grid-area:np;align-self:center}
  .ds-motion:not(.ds-flow) .nt-h{font-size:min(8.6vw,38px);max-width:none}
  .ds-motion:not(.ds-flow) .np{font-size:13.5px;line-height:1.4}
  .ds-motion:not(.ds-flow) .nt-slot{grid-area:orb;position:relative;left:auto;top:auto;margin:0}
  .ds-motion:not(.ds-flow) .feed,.ds-motion:not(.ds-flow) .dawn,.ds-motion:not(.ds-flow) .rails{grid-area:b;position:relative;right:auto;top:auto;bottom:auto;height:auto;width:auto;align-self:start;margin:6px 0 0}
  .ds-motion:not(.ds-flow) .feed{gap:clamp(7px,1.1svh,10px)}
  .ds-motion:not(.ds-flow) .feed li{padding:clamp(9px,1.5svh,13px) 13px;font-size:14px;border-radius:16px}
  .ds-motion:not(.ds-flow) .feed .t{font-size:13.5px}
  .ds-motion:not(.ds-flow) .rails{grid-template-columns:1fr;gap:clamp(12px,2.2svh,22px)}
  .ds-motion:not(.ds-flow) .rl-h{font-size:min(7vw,28px);padding-top:12px}
  .ds-motion:not(.ds-flow) .rl-p{font-size:14px;margin-top:5px}
  .ds-motion:not(.ds-flow) .dawn .btn{width:100%}
  .ds-motion:not(.ds-flow) .dawn{gap:12px}
  .ds-motion:not(.ds-flow) .dw-b{font-size:min(8.4vw,34px)}
  .fin{padding:var(--ds-section) 18px 44px}
  .foot{padding:22px 18px 30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* the real header over the film: nothing scrolls under it while the film is pinned, so it drops its bar; in the night each item
   takes night ink as the terminator reaches it */
.v5c-top.in-film{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.v5c-top :is(.v5c-mark,.v5c-link,.hd-terms,.v5c-btn){transition:color .3s,background-color .3s}
.v5c-top .v5c-mark.n,.v5c-top .v5c-link.n{color:var(--n-ink)}
.v5c-top .hd-terms.n{color:rgba(245,245,247,.66)}
.v5c-top .v5c-btn.n{background:var(--n-ink);color:var(--night)}
.v5c-top .v5c-burger.n i{background:var(--n-ink)}
/* the close: the firm name printed on its own line, and the DIY line */
.fin .diy{margin-top:14px;font-size:15px;color:var(--ink2)}
.fin .diy a{color:var(--ink0);text-underline-offset:3px}
.fin .print{margin-top:22px;display:grid;gap:2px}
.fin .pr-firm{font:200 clamp(26px,2.6vw,38px)/1.1 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
.fin .pr-sub{font-size:13.5px;color:var(--ink3)}

/* ── integration fixes, 2026-11-10 ──
   The sphere never sits on the headline: it is a little smaller, further right and lower than the prototype had it,
   and the log card follows it. Scoped to the hero so the film keeps its own sizes. */
@media (min-width:1280px){.hero{--D:min(58svh,37vw);--ox:73%}.hero .orb-slot{top:calc(50% + var(--hd)/2 - var(--D)/2 + 92px)}.hero .log{--logw:340px;top:calc(50% + var(--hd)/2 + 34px)}.hero .orb-cap{left:calc(var(--ox) - 500px);width:660px}}
@media (min-width:760px) and (max-width:1279px){.hero{--D:min(56svh,36vw);--ox:72%}.hero .orb-slot{top:calc(50% + var(--hd)/2 - var(--D)/2 + 60px)}.hero .log{--logw:280px;top:calc(50% + var(--hd)/2 + 34px)}.hero .log-rows{height:calc(var(--rh)*3)}}
.fin .dlg .tiers{margin-top:0}
.hproof a{white-space:nowrap}
/* the workspace name, asked for at dawn: one optional field and the button */
.dawn{grid-template-columns:minmax(0,1fr)}
.name-it{display:grid;gap:8px;width:100%;max-width:420px;min-width:0}
.name-it label{font-size:13px;color:var(--ink2)}
.name-it input{min-width:0}
.name-it .btn{padding:0 14px;min-height:50px}
@media (min-width:760px) and (max-width:1279px){.ds-motion:not(.ds-flow) .nt{--nd:min(240px,19vw,40vh)}.name-it .btn{font-size:15px;gap:6px}.ds-motion:not(.ds-flow) .dw-b{font-size:clamp(22px,2.3vw,30px)}}
.name-it input{width:100%;height:50px;border-radius:var(--ds-r-field);border:1px solid var(--line2);background:#fff;padding:0 14px;font:300 17px/1 var(--f-t);color:var(--ink0)}
.name-it input::placeholder{color:var(--ink3)}
.name-it .btn{width:100%}
.dawn .fine a{color:var(--ink0);text-underline-offset:3px;white-space:nowrap}

/* ═════════ THE FILM TITLE, FROM THE FIRST PAINT ═════════
   The category line, the headline's words, the sentence and the buttons arrive on CSS alone, so the largest text on the
   page never waits for the script to download (measured: the headline painted at 1.6 s on a throttled phone when the
   script revealed it). The script still brings in the sphere, the log and the caption. Fill is backwards only, so a
   finished animation never overrides the press and magnetic transforms the script writes later. */
@keyframes hw-rise{from{transform:translate3d(0,70%,0)}to{transform:none}}
@keyframes hw-wipe{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,20px,0)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes hw-pop{from{opacity:0;transform:translate3d(0,14px,0) scale(.88)}to{opacity:1;transform:none}}
.ds-motion .h-hero .h-l{overflow:hidden;padding:0 .08em .36em 0;margin:0 -.08em -.36em 0}
.ds-motion .h-hero .h-l>*{display:inline-block;animation:hw-rise .8s cubic-bezier(.16,.84,.24,1) backwards}   /* no delay and a start that already shows the tops of the letters: the headline is painted in the first frame */
.ds-motion .h-hero .h-l>*:nth-child(2){animation-duration:.92s}
.ds-motion .h-hero .h-l>*:nth-child(3){animation-duration:1.04s}
.ds-motion .h-hero .h-l+.h-l>*{animation-duration:1.16s}
.ds-motion .hero .h-cat{animation:hw-wipe .7s cubic-bezier(.2,.8,.2,1) .05s backwards}
.ds-motion .hero .lede{animation:hw-wipe .75s cubic-bezier(.2,.8,.2,1) .5s backwards}
.ds-motion .hero .ctas>*{animation:hw-pop .6s cubic-bezier(.2,.8,.2,1) .72s backwards}
.ds-motion .hero .ctas>*+*{animation-delay:.78s}
.ds-motion .hero .fine{animation:hw-wipe .7s cubic-bezier(.2,.8,.2,1) .86s backwards}

/* ═════════ TOUCH AND PHONES (.ds-flow) ═════════
   Nothing here is pinned by script or positioned from the scroll position (Sean, 2026-11-10: "scroll on phone is super
   glitchy"). Holding a scene uses native sticky positioning; motion tied to the scroll uses the browser's own scroll
   timeline (class sd), so it runs on the compositor in step with the thumb. Browsers without scroll timelines get the
   same scenes with short timed entrances (class io). The sphere rides the page itself. */
.ds-flow .orb-wrap{position:absolute;left:0;top:0;width:100%;overflow:hidden;z-index:1;pointer-events:none}   /* clips the canvas at the screen edge so it never widens the page */
.ds-flow .orb{position:absolute}
/* nothing may pan the page sideways on a phone, not even for a frame (clip is not a scroll container, so sticky still works) */
@supports (overflow:clip){html.ds-flow{overflow-x:clip}}
.ds-flow .dusk{display:none}
.ds-flow :is(.live1,.log){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94)}   /* no live blur over the moving sphere on touch devices */

/* ── one dot, one round: the stage holds while the scroll carries the three cards past (Sean: "I want the images to
      swipe left and reveal themselves with the scroll") ── */
.ds-flow .jr{display:block;padding:0;height:calc(420svh - var(--hd));view-timeline-name:--jr;view-timeline-axis:block;--cardw:min(86vw,360px)}
.ds-flow .jr-stage{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:clamp(14px,3.2svh,30px) 0 16px;overflow:hidden}
.ds-flow .jr-stage>*{flex:none;min-width:0}
.ds-flow .jr-cap{display:none}
.ds-flow .jr-h{padding:0 18px;font-size:clamp(28px,8vw,44px);letter-spacing:-.04em;line-height:1;max-width:none;white-space:nowrap}
.ds-flow .jr-steps{position:relative;display:block;margin:0 18px;height:58px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);counter-reset:s}
.ds-flow .jr-steps li{position:absolute;inset:0;display:grid;grid-template-columns:2.3em minmax(0,1fr);align-items:center;counter-increment:s}
.ds-flow .jr-steps li::before{content:"0" counter(s);font:200 15px/1 var(--f-d);color:var(--ink3)}
.ds-flow .jr-steps .big{font-size:clamp(18px,5vw,23px);letter-spacing:-.025em;line-height:1.15}
.ds-flow .jr-steps .sm{display:none}
.ds-flow .jr-steps::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink0);transform-origin:0 50%;transform:scaleX(0)}
.ds-flow .jr-band{margin:0;min-width:0}
.ds-flow .jr-eyebrow{margin:0 18px 10px;font-size:13px}
.ds-flow .jr-slot{display:none}
.ds-flow .world{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;width:max-content;padding:4px 18px 12px;will-change:transform}
.ds-flow .world>.st{flex:0 0 var(--cardw);width:var(--cardw);max-width:none;max-height:calc(100svh - var(--hd) - 196px);overflow:hidden}
.ds-flow .flow-cta{display:grid;gap:10px;justify-items:center;padding:6px 18px 0}
.ds-flow .flow-cta .btn{width:100%}
.ds-flow.sd .world{animation:jr-track linear both;animation-timeline:--jr;animation-range:contain 0% contain 100%}
.ds-flow.sd .jr-steps::after{animation:jr-bar linear both;animation-timeline:--jr;animation-range:contain 0% contain 100%}
.ds-flow.sd .jr-steps li{animation:jr-s1 linear both;animation-timeline:--jr;animation-range:contain 0% contain 100%}
.ds-flow.sd .jr-steps li:nth-child(2){animation-name:jr-s2}
.ds-flow.sd .jr-steps li:nth-child(3){animation-name:jr-s3}
.ds-flow.sd .jr-steps li:nth-child(4){animation-name:jr-s4}
/* 3.2 screens of travel (was 1.5): each card holds for most of a screen and takes half a screen to slide (Sean, 2026-11-10:
   "the scroll goes super fast ... you can't even enjoy the animations") */
@keyframes jr-track{0%,22%{transform:translate3d(0,0,0)}38%,58%{transform:translate3d(calc(-1*(var(--cardw) + 12px)),0,0)}74%,100%{transform:translate3d(calc(-2*(var(--cardw) + 12px)),0,0)}}
@keyframes jr-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes jr-s1{0%,9%{opacity:1;transform:none}13%,100%{opacity:0;transform:translate3d(0,-12px,0)}}
@keyframes jr-s2{0%,9%{opacity:0;transform:translate3d(0,12px,0)}13%,27%{opacity:1;transform:none}31%,100%{opacity:0;transform:translate3d(0,-12px,0)}}
@keyframes jr-s3{0%,27%{opacity:0;transform:translate3d(0,12px,0)}31%,63%{opacity:1;transform:none}67%,100%{opacity:0;transform:translate3d(0,-12px,0)}}
@keyframes jr-s4{0%,63%{opacity:0;transform:translate3d(0,12px,0)}67%,100%{opacity:1;transform:none}}
.ds-flow.io .jr-steps li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.ds-flow.io .jr-steps li.on{opacity:1;transform:none}

/* ── the night: the clock stays in view and rolls to each thing Halo did as it arrives (Sean: "Halo through the night
      has 0 micro scroll animations") ── */
.ds-flow .nt{margin-top:clamp(36px,8vw,72px);overflow:clip}
.ds-flow .nt-in{display:block}
.ds-flow .nt-left{position:sticky;top:var(--hd);z-index:3;margin:-22px -18px 0;padding:20px 18px 30px;background:linear-gradient(var(--night) 0,var(--night) calc(100% - 22px),rgba(10,10,13,0))}
.ds-flow .nt-h{font-size:clamp(28px,8vw,44px)}
.ds-flow .clock{display:block;font-size:clamp(84px,25vw,150px);margin-top:.08em}
.ds-flow .ck-reel{display:block;height:.9em;overflow:hidden}
.ds-flow .ck-col{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.ds-flow .ck-col>span{display:flex;align-items:baseline;gap:.06em;height:.9em;line-height:.9;white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-flow .ck-col small{font:200 .17em/1 var(--f-d);letter-spacing:-.01em}
.ds-flow .ck-ap{display:none}
.ds-flow .nt-slot{width:84px;height:84px;margin:2px 0 6px}
.ds-flow .feed li.lit{box-shadow:inset 0 0 0 1px rgba(245,245,247,.42)}
.ds-flow .feed li.w.lit{box-shadow:inset 0 0 0 1px rgba(214,0,110,.9)}
.ds-flow .feed li{transition:box-shadow .4s}
.ds-flow .np{margin-top:22px}
.ds-flow .rails{gap:18px;margin-top:26px}
.ds-flow .rl-h{font-size:22px}
.ds-flow.sd .nt{animation:nt-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
.ds-flow.sd .nt-slot{animation:nt-mark linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.ds-flow.sd .feed li{animation:nt-card linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
.ds-flow.sd .feed li:nth-child(even){animation-name:nt-card-r}
.ds-flow.sd .dawn{animation:nt-dawn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.ds-flow.sd .rail .rl{animation:nt-rule linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.ds-flow.sd :is(.rail .rl-p,.np){animation:nt-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
@keyframes nt-in{from{transform:scale(.93)}to{transform:none}}
@keyframes nt-mark{from{opacity:.15;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes nt-card{from{opacity:0;transform:translate3d(-64px,28px,0) scale(.95)}to{opacity:1;transform:none}}
@keyframes nt-card-r{from{opacity:0;transform:translate3d(64px,28px,0) scale(.95)}to{opacity:1;transform:none}}
@keyframes nt-dawn{from{opacity:0;transform:translate3d(0,44px,0) scale(.93)}to{opacity:1;transform:none}}
@keyframes nt-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nt-rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
.ds-flow.io :is(.feed li,.dawn,.np,.rail){opacity:0;transform:translate3d(0,22px,0);transition:opacity .5s,transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.ds-flow.io :is(.feed li,.dawn,.np,.rail).in{opacity:1;transform:none}
@media (min-width:760px){.ds-flow .jr-h,.ds-flow .jr-eyebrow{padding-left:var(--gx);margin-left:0}.ds-flow .jr-steps{margin-left:var(--gx);margin-right:var(--gr)}.ds-flow .world{padding-left:var(--gx)}.ds-flow .jr{--cardw:min(46vw,400px)}}