@font-face{font-family:Geist;src:url(/assets/fonts/geist-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#0c0c0e;--paper:#fff;--text:#34353b;--soft:#6a6b73;--line:#e6e6e9;--red:#ff2d40;
  --out:cubic-bezier(.16,.84,.24,1);
  --gut:clamp(20px,6vw,88px);
  --col:calc(var(--gut) + clamp(0px,10vw,150px));
  --bar:0px; /* what Safari's toolbar hides of a full-height pin */
}
@supports (height:100lvh){:root{--bar:calc(100lvh - 100svh)}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-padding-top:0}
body{font:400 15px/1.55 Geist,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block}
ol,ul{list-style:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{left:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Fixed chrome: the mark travels down the rail as you scroll */
.rail{position:fixed;left:var(--gut);top:0;bottom:0;width:22px;z-index:40;pointer-events:none;color:#fff;mix-blend-mode:difference}
.rail .mark{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;transform:translate3d(0,var(--rail-y,28px),0)}
/* A plain chip: a difference blend turns into a mid-tone on any mid-tone behind it, and the blur passes right under here. */
.top{position:fixed;right:calc(var(--gut) - 12px);top:21px;z-index:40;display:flex;align-items:center;background:rgba(255,255,255,.94)}
.top a{display:flex;align-items:center;gap:7px;padding:9px 12px;font-size:13px;font-weight:500;line-height:20px;letter-spacing:-.005em;color:var(--ink)}
.top a:focus-visible{outline-offset:-4px}
.top .imp{padding-right:2px;font-weight:400;color:var(--soft)}
.get svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--out)}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:168px;padding:13px 16px;border:1.5px solid currentColor;font-size:14px;font-weight:500;letter-spacing:-.005em;transition:background .25s,color .25s,border-color .25s}
.btn svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .3s var(--out)}
@media (hover:hover){
  .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn:hover svg{transform:translateX(4px)}
  .get:hover svg{transform:translate(2px,-2px)}
  .imp:hover,.links a:hover,.foot a:hover{color:var(--ink)}
}

.lead{font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.16;color:var(--ink);margin-bottom:14px}
.copy p:not(.lead){color:var(--text)}
.copy small{display:block;margin-top:10px;font-size:12.5px;color:var(--soft)}
/* Only while the page runs ahead of the App Store */
.ver{display:block;margin-top:10px;font-size:12px;line-height:1.35;color:var(--soft)}
.end .ver{margin-top:14px;text-align:center}
.offer .ver{display:table;background:var(--paper);box-shadow:0 0 0 4px var(--paper)} /* a drawing runs behind it on small phones */
.soon{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid currentColor;font-size:11px;font-weight:500;letter-spacing:0;line-height:1.3;vertical-align:.3em;color:#b9bac2}
.price{font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.price small{display:block;font-size:11px;font-weight:400;color:var(--soft);margin-top:5px}

/* Monumental type */
.word{position:relative;--fs:26vw;font-size:var(--fs);font-weight:700;letter-spacing:-.06em;line-height:1.14;white-space:nowrap;user-select:none;-webkit-user-select:none}
.word .txt{font:inherit;letter-spacing:inherit;line-height:inherit}
.word.cut .txt{color:transparent}
.strip{position:absolute;overflow:hidden;color:var(--ink);visibility:hidden}
.word.cut .strip{visibility:visible}
.strip b{position:absolute;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap}
.live .strip,.live .ph,.live .soft,.live .panel{will-change:transform}

/* Baseline without motion: plain, readable, stacked. Also what reduced motion gets. */
.scene{position:relative}
html:not(.motion) .pin{display:flex;flex-direction:column;gap:22px;padding:64px var(--gut)}
html:not(.motion) .ph{width:min(100%,560px);height:auto}
html:not(.motion) .hero .copy{order:1}
html:not(.motion) .hero .ph{order:2}
html:not(.motion) .hero .p2,html:not(.motion) .hero .p3,html:not(.motion) .hero .p4,html:not(.motion) .hero .p5{display:none}
.motion .only-still{display:none}
html:not(.motion) .links,html:not(.motion) .seq,html:not(.motion) .soft,html:not(.motion) .notes,html:not(.motion) .plane,html:not(.motion) .line{display:none}
html:not(.motion) .ex .base{width:min(100%,560px);height:auto}
/* The numbers point at callouts that only exist in the moving version. */
html:not(.motion) .legend li{padding-left:0}
html:not(.motion) .legend li::before{display:none}
html:not(.motion) .hero .copy{display:flex;gap:18px;max-width:420px}
html:not(.motion) .copy p{margin-bottom:14px}
html:not(.motion) .panel{background:#0f0f11;color:#fff;padding:28px;border-radius:24px}
html:not(.motion) .panel p{color:#b9bac2;margin:8px 0 18px}
html:not(.motion) .panel img{width:min(100%,420px);height:auto}
html:not(.motion) .orb{width:min(100%,420px);height:auto;clip-path:circle(47.6% at 50.4% 50%)}

/* ---------- Motion ---------- */
.motion .scene{height:calc(var(--len,1)*100vh);height:calc(var(--len,1)*100lvh)}
.motion .pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;pointer-events:none}
.motion .scene{pointer-events:none}
.motion .pin a,.motion .pin summary{pointer-events:auto}
.motion .pin .off a{pointer-events:none} /* faded out, so not a target either */
.scene:focus{outline:0}
/* Scenes overlap: the next one builds while the last one leaves, so there is no empty stretch between them. */
.motion .scene+.scene{margin-top:calc(var(--lap,1.2)*-100vh);margin-top:calc(var(--lap,1.2)*-100lvh)}

/* Hero */
.links{position:absolute;left:var(--col);top:32px;display:flex;gap:24px;font-size:13px;color:var(--soft);z-index:6}
.motion .hero .word{position:absolute;left:0;right:0;top:50%;z-index:2;display:flex;justify-content:center;transform-origin:50% 50%;margin-top:calc(var(--fs)*-.68)}
.intro .hero .word{transform:scale(.13)}
.motion .hero .ph{position:absolute;width:34vw;height:auto}
.intro .hero .ph{translate:0 110vh}
.motion .hero .p1{--i:0;left:45vw;top:-15vh;z-index:3}
.motion .hero .p2{--i:1;left:62vw;top:9vh;z-index:1}
.motion .hero .p3{--i:2;left:46vw;top:33vh;z-index:3}
.motion .hero .p4{--i:3;left:63vw;top:59vh;z-index:1}
.motion .hero .p5{--i:4;left:47vw;top:84vh;z-index:3}
.motion .hero .copy{position:absolute;left:var(--col);bottom:6vh;width:min(340px,32vw);display:flex;gap:18px;z-index:2}
.hero .copy p{margin-bottom:16px}
.intro .hero .copy,.intro .links{opacity:0}
/* At rest the phones hang in the air. `translate` is free for this, scrolling drives `transform`. */
@keyframes hang{50%{translate:0 -9px}}
html.motion:not(.intro):not(.entering) .hero .live .ph{animation:hang 6.5s ease-in-out infinite;animation-delay:calc(var(--i)*1.4s)}
.entering .hero .word{transition:transform 1.3s var(--out)}
.entering .hero .ph{transition:translate 1.5s var(--out);transition-delay:calc(var(--i)*80ms)}
.entering .hero .copy,.entering .links{transition:opacity .6s .3s}

/* Swipe */
.motion .swipe .word{position:absolute;left:0;right:0;bottom:-.235em;z-index:1;display:flex;margin-left:-.035em}
.motion .swipe .copy{position:absolute;left:var(--col);top:21vh;width:min(300px,26vw,calc(55vw - min(104vh,74vw)*.21 - var(--col) - 16px));z-index:5}
.motion .swipe .seq{position:absolute;left:55vw;top:50%;height:min(104vh,74vw);width:auto;aspect-ratio:900/1260;z-index:2;transform:translate3d(-50%,-50%,0)}
.notes{position:absolute;left:75vw;top:47vh;width:190px;z-index:5;font-size:14px;line-height:1.35;color:var(--text)}
.notes li{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity .25s}
.notes li.on{opacity:1}
.notes b{display:block;font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.2;color:var(--ink);margin-bottom:4px}
.soft{position:absolute;pointer-events:none;height:auto;z-index:4}
.s1{width:50vw;right:-20vw;top:-30vh}
.s2{width:48vw;right:-23vw;bottom:-26vh}

/* Exploded card */
.motion .card .copy{position:absolute;left:var(--col);top:50%;transform:translateY(-50%);width:min(320px,24vw);z-index:3}
.legend{counter-reset:l;margin-top:22px}
.legend li{counter-increment:l;position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line);color:var(--text);transition:color .3s}
.legend li b{color:var(--ink);font-weight:600}
.legend li::before{content:counter(l);position:absolute;left:0;top:13px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;line-height:18px;text-align:center}
.motion .ex{position:absolute;left:65vw;top:50%;width:var(--S,86vh);height:var(--S,86vh);margin:calc(var(--S,86vh)/-2) 0 0 calc(var(--S,86vh)/-2);perspective:var(--P,2000px)}
.motion .ex .base{position:absolute;inset:0;width:100%;height:100%}
.plane{--pt:.8px;position:absolute;left:50%;top:50%;width:calc(402*var(--pt));height:calc(874*var(--pt));margin:calc(-437*var(--pt)) 0 0 calc(-201*var(--pt));transform-style:preserve-3d;transform:var(--T);font-size:calc(15*var(--pt))}
.shade{position:absolute;background:rgba(0,0,0,.5);filter:blur(calc(7*var(--pt)));opacity:var(--lift,0)}
.f1{left:calc(16*var(--pt));right:calc(16*var(--pt));top:calc(62*var(--pt));height:calc(34*var(--pt));border-radius:99px}
.f2{left:calc(24*var(--pt));top:calc(644*var(--pt));width:calc(190*var(--pt));height:calc(34*var(--pt));border-radius:99px}
.f3{left:calc(18*var(--pt));right:calc(18*var(--pt));top:calc(700*var(--pt));height:calc(50*var(--pt));border-radius:99px}
.f4{left:calc(70*var(--pt));right:calc(26*var(--pt));top:calc(772*var(--pt));height:calc(66*var(--pt));border-radius:99px}
.stem{position:absolute;left:calc(var(--x)*var(--pt));top:calc(var(--y)*var(--pt));width:1px;height:calc(var(--z)*var(--e,0px));background:repeating-linear-gradient(#fff 0 3px,transparent 3px 7px);transform-origin:0 0;transform:rotateX(-90deg);opacity:var(--lift,0)}
.lay{position:absolute;transform:translateZ(calc(var(--z)*var(--e,0px)));transform-style:preserve-3d}
.tag{position:absolute;width:calc(30*var(--pt));height:calc(30*var(--pt));border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-weight:600;font-size:calc(16*var(--pt));line-height:calc(30*var(--pt));text-align:center;transform:var(--Ti);opacity:var(--tag,0)}
.l1{left:calc(16*var(--pt));right:calc(16*var(--pt));top:calc(57*var(--pt));height:calc(44*var(--pt));display:flex;align-items:center;gap:calc(12*var(--pt))}
.l1 .tag{left:50%;margin-left:calc(-15*var(--pt));top:calc(-24*var(--pt))}
.disc{flex:none;width:calc(44*var(--pt));height:calc(44*var(--pt));border-radius:50%;background:rgba(255,255,255,.86);display:grid;place-items:center;box-shadow:0 calc(8*var(--pt)) calc(24*var(--pt)) rgba(0,0,0,.28)}
.disc svg{width:56%;height:56%;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bar{flex:1;height:calc(5*var(--pt));border-radius:9px;background:rgba(12,12,14,.34);box-shadow:0 0 0 1px rgba(12,12,14,.5)}
.bar i{display:block;width:62%;height:100%;border-radius:9px;background:#fff}
.l2{left:calc(24*var(--pt));top:calc(642*var(--pt))}
.pill,.del{transform-style:preserve-3d}
.pill{position:relative;display:flex;align-items:center;gap:.7em;height:calc(38*var(--pt));padding:0 calc(16*var(--pt));border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 calc(8*var(--pt)) calc(24*var(--pt)) rgba(0,0,0,.28);font-size:calc(16*var(--pt));white-space:nowrap}
.pill b{font-weight:600}.pill em{font-style:normal;color:#6a6b73;font-size:.82em}
.pill svg{width:1em;height:1em;fill:none;stroke:#6a6b73;stroke-width:2;stroke-linecap:round}
.pill .tag{right:calc(-18*var(--pt));top:calc(-18*var(--pt))}
.l3{left:calc(18*var(--pt));right:calc(18*var(--pt));top:calc(698*var(--pt))}
.del{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;height:calc(54*var(--pt));border-radius:99px;background:var(--red);color:#fff;font-weight:600;font-size:calc(18*var(--pt));box-shadow:0 calc(10*var(--pt)) calc(28*var(--pt)) rgba(255,45,64,.42);white-space:nowrap}
.del svg{width:1.15em;height:1.15em;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.del .tag{right:calc(-8*var(--pt));top:calc(-20*var(--pt))}
.l4{left:0;right:0;top:calc(770*var(--pt));height:calc(70*var(--pt));display:flex;justify-content:center;align-items:center;gap:calc(16*var(--pt))}
.l4 .tag{left:calc(50% + 124*var(--pt));top:calc(-16*var(--pt))}
.l4 .b{width:calc(68*var(--pt));height:calc(68*var(--pt));border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 calc(8*var(--pt)) calc(24*var(--pt)) rgba(0,0,0,.28)}
.l4 .b.sm{width:calc(46*var(--pt));height:calc(46*var(--pt))}
.l4 .b svg{width:46%;height:46%;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.l4 .b.x svg{stroke:#ef2a3c}

/* The number */
.big{font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.16}
.motion .gb .big{position:absolute;left:var(--col);top:13vh;width:min(420px,36vw);z-index:3}
.motion .gb .word{position:absolute;left:0;right:0;top:50%;z-index:2;display:flex;justify-content:center;margin-top:calc(var(--fs)*-.67)}
.motion .gb .copy{position:absolute;left:var(--col);bottom:5.5vh;width:min(440px,33vw);z-index:3}
.motion .gb .copy .lead{margin-bottom:10px}
.motion .gb .ph{position:absolute;left:52vw;top:44vh;width:44vw;height:auto;z-index:3}

/* Three panels */
.motion .trio .panel{position:absolute;top:0;width:33.1vw;height:122vh;background:#0f0f11;color:#fff;overflow:hidden}
.panel h2{font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.16;margin-bottom:10px}
.panel p{color:#b9bac2;max-width:34ch}
.motion .trio .panel.a{left:0;border-radius:0 15vw 0 0}
.motion .trio .panel.b{left:33.45vw;border-radius:15vw 15vw 0 0}
.motion .trio .panel.c{right:0;border-radius:15vw 0 0 0}
.motion .panel .in{position:absolute;left:clamp(20px,3.2vw,48px);right:clamp(20px,3.2vw,48px);top:27vh}
.motion .panel img{position:absolute;left:50%;top:48vh;width:88%;height:auto;max-width:none;transform:translate3d(-50%,var(--py,0px),0)}
.motion .trio .panel.a .in{left:calc(var(--gut) + 44px)}

/* Private */
.motion .private .word{position:absolute;left:0;right:0;top:50%;z-index:1;display:flex;justify-content:center;margin-top:calc(var(--fs)*-.68)}
.orb{clip-path:circle(47.6% at 50.4% 50%)}
.motion .private .orb{position:absolute;left:50%;top:50%;width:min(68vh,46vw);height:auto;z-index:2;margin:calc(min(68vh,46vw)/-2) 0 0 calc(min(68vh,46vw)/-2)}
.motion .private .copy{position:absolute;left:var(--col);bottom:6vh;width:min(300px,24vw);z-index:3}
.facts{font-size:14px;color:var(--text)}
.facts li{padding:7px 0;border-top:1px solid var(--line)}
.facts b{font-weight:600;color:var(--ink);margin-right:.25em}
.motion .facts{position:absolute;right:var(--gut);bottom:6vh;width:min(230px,20vw);z-index:3}

/* Free */
.offer p{font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.16;margin-bottom:18px}
.offer b{font-weight:700}
.motion .offer{position:absolute;left:var(--col);top:11vh;width:min(430px,38vw);z-index:3}
.motion .free .word{position:absolute;left:0;right:0;top:54%;z-index:1;display:flex;margin-left:-.035em;margin-top:calc(var(--fs)*-.6)}
.line{position:absolute;fill:none;stroke:var(--ink);stroke-width:.32;stroke-linecap:round;stroke-linejoin:round;height:auto;z-index:2;overflow:visible}
.line path{stroke-dasharray:1 1;stroke-dashoffset:var(--d,1)}
.la{width:33vw;right:3vw;top:7vh}
.lb{width:30vw;left:46vw;bottom:-5vh}
.prices{font-size:14px}
.prices dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 34px;margin-bottom:10px}
.prices dt{color:var(--soft);font-size:12.5px}
.prices dd{font-weight:600;letter-spacing:-.01em}
.prices small{display:block;font-weight:400;color:var(--soft);font-size:12.5px;letter-spacing:0}
.prices p{color:var(--soft);font-size:12.5px;line-height:1.45;max-width:44ch}
.motion .prices{position:absolute;left:var(--col);bottom:max(20px,calc(6vh - 16px));z-index:3;width:min(380px,34vw)}

/* Flat sheets */
.sheet{position:relative;z-index:2;background:var(--paper);display:grid;grid-template-columns:clamp(90px,14vw,210px) minmax(0,720px);padding:clamp(72px,13vh,130px) var(--gut) 0 var(--col)}
.sheet h2{font-size:14px;font-weight:600;line-height:1.5;padding-top:6px}
.sheet .lead{margin-bottom:26px;max-width:24em}
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{font-size:12.5px;font-weight:500;color:var(--soft);text-align:left;padding:0 0 10px}
th:nth-child(n+2),td:nth-child(n+2){width:92px}
tbody th{font-weight:400;text-align:left;padding:12px 12px 12px 0;border-top:1px solid var(--line);color:var(--text)}
td{padding:12px 12px 12px 0;border-top:1px solid var(--line);color:var(--text)}
td:last-child{color:var(--ink);font-weight:600}
.note{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--soft);max-width:60ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:15px 0;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';content:'+'/'';flex:none;font-weight:400;color:var(--soft);transition:transform .25s var(--out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--text);padding:0 40px 18px 0;max-width:62ch}

/* The end: an emptied page */
.end{position:relative;height:100vh;height:100svh;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper)}
.endword{font-size:clamp(68px,9vw,132px);font-weight:700;letter-spacing:-.06em;line-height:1;margin-bottom:26px}
.foot{position:absolute;left:var(--col);right:var(--gut);bottom:26px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.foot a{padding-block:12px;margin-block:-12px}

/* Legal pages */
.doc-top{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gut)}
.doc-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.doc-back{font-size:13px;font-weight:500}
.doc{padding:clamp(40px,9vh,96px) var(--gut) 80px var(--col);max-width:calc(var(--col) + 680px)}
.doc h1{font-size:clamp(46px,8.4vw,128px);font-weight:700;letter-spacing:-.06em;line-height:.98;margin:0 0 14px -.03em;white-space:nowrap}
.doc .upd{font-size:13px;color:var(--soft);margin-bottom:44px}
.doc h2{font-size:15px;font-weight:600;margin:30px 0 6px}
.doc p{color:var(--text);margin-bottom:12px}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc .todo{background:#ffe08a;color:var(--ink);padding:0 4px}
.doc-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 var(--gut) 26px var(--col);font-size:13px;color:var(--soft)}
.doc-foot nav{display:flex;gap:22px}

/* ---------- Portrait: phones and upright tablets ---------- */
@media (max-aspect-ratio:1/1){
  /* iOS 26: 100lvh stops 58pt above the screen edge, but the page keeps showing under the glass toolbar.
     A pin of exactly that height would end in a hard line there, so it reaches further down. */
  :root{--gut:20px;--col:20px;--bar:72px}
  @supports (height:100lvh){:root{--bar:calc(100lvh - 100svh + 72px)}}
  .motion .pin{height:calc(100vh + 72px);height:calc(100lvh + 72px)}
  .rail{left:4px;width:13px}
  .rail .mark{width:13px;height:13px}
  .top{top:18px}
  .links{display:none}
  .lead,.big,.offer p,.panel h2{font-size:clamp(22px,5.9vw,34px)}

  .motion .hero .word{top:64px;margin-top:0}
  .motion .hero .copy{left:20px;right:20px;bottom:auto;top:calc(64px + var(--fs)*1.2);width:auto;max-width:440px}
  .motion .hero .ph{width:88vw}
  .motion .hero .p1{left:9vw;top:calc(64px + var(--fs)*1.2 + var(--hero,182px))}
  .motion .hero .p2{left:-16vw;top:calc(64px + var(--fs)*1.2 + var(--hero,182px) + 40vw);z-index:3}
  .motion .hero .p3{left:20vw;top:calc(64px + var(--fs)*1.2 + var(--hero,182px) + 80vw)}
  .motion .hero .p4{left:-12vw;top:calc(64px + var(--fs)*1.2 + var(--hero,182px) + 122vw);z-index:3}
  .motion .hero .p5{left:16vw;top:calc(64px + var(--fs)*1.2 + var(--hero,182px) + 160vw)}

  .motion .swipe .word{top:64px;bottom:auto;margin-left:0}
  .motion .swipe .copy{left:20px;right:20px;top:calc(64px + var(--fs)*1.2);width:auto;max-width:440px}
  .motion .swipe .seq{left:50%;top:auto;bottom:var(--bar);height:calc(100vh - 118px - var(--fs)*1.14);height:calc(100svh - 118px - var(--fs)*1.14);transform:translate3d(-50%,0,0)}
  .notes{left:20px;right:20px;top:calc(64px + var(--fs)*1.2);width:auto;max-width:440px}
  .s1{width:84vw;right:-58vw;top:50vh}
  .s2{width:84vw;right:auto;left:-60vw;bottom:6vh}

  .motion .card .copy{left:20px;right:20px;top:76px;bottom:calc(var(--bar) + 16px);transform:none;width:auto;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
  .legend{margin-top:0}
  .legend li{padding:8px 0 8px 28px;font-size:13.5px;line-height:1.4}
  .legend li::before{top:9px}
  .motion .ex{left:50%;top:44%}

  .motion .gb .big{left:20px;top:76px;right:20px;width:auto}
  .motion .gb .word{top:32%;margin-top:0}
  .motion .gb .copy{left:20px;right:20px;width:auto;max-width:440px;top:calc(32% + var(--fs)*1.16);bottom:auto}
  .motion .gb .ph{left:max(6vw,calc(50vw - 260px));top:auto;bottom:calc(var(--bar) - 12vh);width:min(92vw,520px)}

  /* Words sit at the top here, so a deeper overlap would show the next one under the current scene. */
  .motion .scene{--lap:1}
  .motion .trio{height:auto;--lap:0}
  .motion .private{--lap:0}
  .motion .trio .pin{position:relative;height:auto;overflow:visible;padding:0 0 10px}
  .motion .trio .panel,.motion .trio .panel.a,.motion .trio .panel.b,.motion .trio .panel.c{position:relative;left:auto;right:auto;width:auto;height:136vw;margin-bottom:8px;border-radius:0 34vw 0 0}
  .motion .trio .panel.b{border-radius:34vw 0 0 0}
  .motion .panel .in,.motion .trio .panel.a .in{top:30vw;left:20px;right:20px}
  .motion .panel img{top:70vw;width:88%}

  .motion .private .word{top:17%;margin-top:0}
  .motion .private .orb{top:calc(17% + var(--fs) + 41vw - 30px);width:82vw;margin:-41vw 0 0 -41vw}
  .motion .private .copy{left:20px;right:20px;width:auto;max-width:440px;bottom:calc(var(--bar) + 20px)}
  .motion .facts{display:none}

  .motion .offer{left:20px;right:20px;top:72px;width:auto}
  .motion .free .word{top:46%;margin-left:-.035em}
  .la{width:64vw;right:-16vw;top:26vh}
  /* Stands on the price block, whatever its height: a stroke through a price reads as a crossed-out price. */
  .lb{width:58vw;left:48vw;top:auto;bottom:calc(var(--bar) + 34px + var(--ph,130px))}
  .motion .prices{left:20px;right:20px;bottom:calc(var(--bar) + 20px);width:auto}

  .sheet{grid-template-columns:1fr;gap:14px;padding:64px 20px 0}
  .faq p{padding-right:0}
  .foot{left:20px;right:20px;bottom:calc(18px + env(safe-area-inset-bottom));flex-wrap:wrap}
}