/* Direction D · "Alan" (Field): one living dot field carries the story. Black first; light by the toggle. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.5,1);--gut:40px;--max:1280px;--col-gap:24px;
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;--sect:var(--s8);--card-pad:var(--s4);--r:24px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s var(--ease) both vt-o}::view-transition-new(root){animation:.4s var(--ease) both vt-i}
@keyframes vt-o{to{opacity:0}}@keyframes vt-i{from{opacity:0;transform:translateY(12px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body{background:var(--bg)}
.top{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);position:fixed;left:0;right:0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.home .top{background:linear-gradient(var(--bg),transparent);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
.top .wrap{height:76px}
.kick{font-size:12px;letter-spacing:.2em}
.lede{color:var(--gray);font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:640px}
.huge{font-size:clamp(44px,7vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.num{font-family:Doto;font-weight:900}

/* ---- the field track: 5 chapters pinned in one sticky stage ---- */
.track{position:relative;height:calc(var(--n)*130vh + 100vh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
canvas.dfield{position:absolute;inset:0;width:100%;height:100%;display:block}
.chap{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.chap.on{opacity:1;pointer-events:auto}
.chap>*{transition:transform .8s var(--ease),opacity .6s var(--ease)}
.chap:not(.on)>*{transform:translateY(24px)}

/* chapter 0: wordmark + hero copy, on the page axis */
.c0{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px var(--gut) 40px}
.slot-word{width:min(80vw,1120px);aspect-ratio:51/7;margin-bottom:clamp(40px,6vh,64px)}
.hero-h{font-size:clamp(32px,4.2vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1.04;max-width:900px;margin:14px auto 0}
.c0 .lede{margin:18px auto 0}
.cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 11px Geist,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
.cue i{width:2px;height:34px;background:linear-gradient(var(--red),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* app chapters: text left, mark/demo right, on a 12-column grid */
.chap[data-i]:not(.c0){display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:96px max(var(--gut),calc((100vw - 1280px)/2)) 56px}
.ctext{grid-column:1/6;position:relative;z-index:2}
.cnum{font:600 13px Geist,sans-serif;letter-spacing:.18em;color:var(--gray)}
.cnum b{font-size:22px;color:var(--red-ink);letter-spacing:0}
.aname{display:flex;align-items:center;gap:18px;font-size:clamp(56px,6.6vw,108px);line-height:.95;letter-spacing:-.05em;margin:18px 0 18px}
.mk-slot{display:inline-block;width:.78em;height:.78em;flex:none}
.atag{font-size:clamp(19px,1.6vw,24px);line-height:1.35;letter-spacing:-.01em;margin-top:22px;max-width:520px}
.afeat{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
.afeat li{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.afeat li:last-child{border-bottom:1px solid var(--line)}
.afeat span{color:var(--gray)}
.abtns{display:flex;gap:12px;margin-top:28px;align-items:center}
.abtns .btn{height:48px;padding:0 22px}
.cta.sm{--w:auto;height:48px;padding:0 22px}
.slot-big{grid-column:7/13;grid-row:1;justify-self:center;width:min(40vw,520px);aspect-ratio:1;max-height:62vh}
.cdemo{grid-column:7/13;grid-row:1;align-self:center;width:100%;max-width:560px;justify-self:center;opacity:0;transform:translateY(30px) scale(.97);
 transition:opacity .6s var(--ease),transform .8s var(--spring);pointer-events:none}
.chap.dock .cdemo{opacity:1;transform:none;pointer-events:auto}
.cdemo .rstage{box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.chip{background:color-mix(in srgb,var(--bg) 70%,transparent)}

.pager{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:3}
.pager button{width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.pager i{width:6px;height:6px;border-radius:50%;background:var(--gray);transition:transform .4s var(--spring),background .3s}
.pager button.on i{background:var(--red);transform:scale(1.6)}

/* ---- dot cursor (fine pointers only) ---- */
.has-cur.cur-on,.has-cur.cur-on a,.has-cur.cur-on button{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:99;border-radius:50%;opacity:0;transition:opacity .3s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--red)}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);transition:opacity .3s,width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),background .3s,border-color .3s}
.cur-hot .cur-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--red) 14%,transparent);border-color:var(--red)}
.cur-down .cur-ring{width:24px;height:24px;margin:-12px 0 0 -12px}
[data-mag]{transition:transform .5s var(--spring)}
[data-mag]>*{transition:transform .5s var(--spring)}

/* ---- reveals ---- */
.rvjs .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rvjs .rv.in{opacity:1;transform:none}

/* ---- beta ---- */
.d-beta{padding:var(--sect) 0 0;text-align:center}
.d-beta .huge{max-width:1100px;margin:22px auto 0}
.d-beta .lede{margin:26px auto 0}
.steps3{list-style:none;margin:72px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.steps3 li{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:1;font-size:18px}
.steps3 .num{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:44px;color:var(--red-ink);background:var(--bg);border:1px solid var(--line)}
.steps3 .thread{position:absolute;left:16.6%;right:16.6%;top:52px;width:66.8%;height:10px;z-index:0;overflow:visible}
.steps3 .thread path{stroke:var(--red);stroke-width:2;stroke-dasharray:4 8;fill:none;vector-effect:non-scaling-stroke}
.rvjs .steps3 .thread{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease) .3s}
.rvjs .steps3.in .thread{clip-path:inset(0 0 0 0)}
.d-beta .cta-row{margin-top:64px}

/* ---- supporters ---- */
.d-sup{padding:var(--sect) 0 0}
.center{text-align:center}
.bignum{font-size:clamp(120px,16vw,240px);line-height:.9;margin-top:18px}
.d-sup h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.03em;margin-top:8px}
.d-sup .lede{margin:14px auto 0}
.marquee{overflow:hidden;margin-top:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee.rev{margin-top:18px}
.mq{display:flex;gap:44px;width:max-content;animation:mq 40s linear infinite}
.marquee.rev .mq{animation-direction:reverse;animation-duration:52s;opacity:.5}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.sname{display:inline-flex;align-items:center;gap:14px;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.sname::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);margin-left:30px}
.smk{display:inline-flex;gap:5px}
.sname em{font-style:normal;font-size:11px;letter-spacing:.12em;background:var(--red);color:#fff;border-radius:6px;padding:4px 7px}

/* ---- talk ---- */
.d-talk{padding:var(--sect) 0 0}
.d-talk .huge{margin:22px 0 36px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:28px 8px;border-top:1px solid var(--line);position:relative;overflow:hidden;transition:padding .5s var(--spring)}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
.row>*{position:relative;z-index:1;transition:color .3s}
.row:hover{padding-left:28px;padding-right:28px}
.row:hover::before{transform:scaleY(1)}
.row:hover,.row:hover small{color:var(--bg)}
.row .tgav{width:56px;height:56px;border-radius:50%}
.mailic{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.mailic svg{width:22px;height:22px}
.rt b{display:block;font-size:clamp(30px,3.6vw,54px);letter-spacing:-.035em;line-height:1}
.rt small{display:block;color:var(--gray);font-size:15px;margin-top:8px}
.row>svg{width:44px;height:44px;transition:transform .5s var(--spring)}
.row:hover>svg{transform:rotate(45deg)}

@media (max-width:900px){
 :root{--gut:20px;--sect:72px;--card-pad:var(--s3)}
 .chap[data-i]:not(.c0){grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding:84px var(--gut) 24px;row-gap:12px}
 .ctext,.slot-big,.cdemo{grid-column:1}
 .slot-big{grid-row:2;width:min(70vw,320px);align-self:center}
 .cdemo{grid-row:2;align-self:end;max-width:none}
 .aname{font-size:52px;margin:10px 0 10px}
 .atag{margin-top:10px;font-size:17px}
 .afeat,.chap .chip{display:none}
 .abtns{margin-top:16px}
 .chap.dock .atag{display:none}
 .pager{right:10px}
 .steps3{grid-template-columns:1fr;gap:28px;margin-top:48px}
 .steps3 .thread{display:none}
 .steps3 .num{width:80px;height:80px;font-size:34px}
 .row{grid-template-columns:auto 1fr;gap:16px}.row>svg{display:none}
 .row .tgav,.mailic{width:44px;height:44px}
 .rt small{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.mq{transform:none}}

/* ================= round 4: D is the site · one grid, one spacing scale ================= */
.wrap{max-width:calc(var(--max) + 2*var(--gut));padding:0 var(--gut)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.top nav a.on{color:var(--ink)}
.small{color:var(--gray);font-size:14px;margin-top:var(--s2)}
.sect{padding:var(--sect) 0 0}
.sect.tight{padding-top:var(--s5)}
.sect>.wrap>.kick{display:flex;margin-bottom:var(--s3)}
.page-head{padding:calc(76px + var(--s7)) 0 0}
.page-head .huge{max-width:1000px;margin:var(--s3) auto 0}
.page-head .lede{margin:var(--s3) auto 0}
.page-head .small{margin-top:var(--s2)}

/* equal tiles */
.tiles{display:grid;gap:var(--col-gap);grid-auto-rows:1fr}
.tiles.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--card-pad);border-radius:var(--r);background:var(--surf);border:1px solid var(--line);
 transition:transform .5s var(--spring),border-color .3s,box-shadow .4s}
a.tile:hover,.tile.pcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ink) 30%,var(--line));box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.tile .num{font-size:28px;line-height:1;color:var(--red-ink)}
.tile h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.tile p{color:var(--gray);font-size:15.5px;line-height:1.55}
.tile .chip{margin-top:auto}
.tile.flat{background:none;border-color:var(--line)}
.tile .pd{width:12px;height:12px;border-radius:50%;background:var(--red)}
.tile.more .icon{border-radius:14px}
.pk{color:var(--gray);font-size:13px;letter-spacing:.02em}
.pcard .pc-links{display:flex;flex-direction:column;gap:var(--s1);margin-top:auto}

/* app page: the field forms the app's mark, then it docks into the title and the demo arrives */
.app-track{height:calc(100vh + 120vh)}
.app-track .chap{opacity:1;pointer-events:auto}
.crumb{display:inline-flex;align-items:center;gap:8px;font:600 13px Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.crumb::before{content:"‹";color:var(--red-ink);font-size:20px;line-height:1}
.app-track h1.aname{margin-top:var(--s3)}
.band{padding:var(--sect) 0 0}
.band-in{grid-column:2/12;text-align:center;padding:var(--s6) var(--s5);border-radius:32px;border:1px solid var(--line);background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--red) 14%,transparent),transparent 70%)}
.band-in h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.035em;margin-top:var(--s2)}
.band-in .lede{margin:var(--s2) auto 0}
.band-in .cta-row{margin-top:var(--s5)}
.band-in .cta{--w:auto;min-width:260px}

/* beta: equal app picker, stepper beside the help */
.pick4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);margin-bottom:var(--s5)}
.pick4 a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:var(--s3);border-radius:var(--r);border:1px solid var(--line);background:var(--surf);text-align:center;
 transition:transform .5s var(--spring),border-color .3s,box-shadow .3s}
.pick4 a b{font-size:18px}
.pick4 a:hover{transform:translateY(-3px)}
.pick4 a.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bgrid{align-items:start}
.bmain{grid-column:1/9}
.baside{grid-column:9/13;display:flex;flex-direction:column;gap:var(--col-gap)}
.note-card{display:block;padding:var(--card-pad);border-radius:var(--r);border:1px solid var(--line);background:var(--surf)}
.note-card .trouble{background:none;border:0;padding:0}
.note-card .trouble h3{font-size:20px;margin-bottom:10px}
.note-card .trouble p{color:var(--gray);font-size:15px}
.tgcard{display:flex;align-items:center;gap:var(--s2);transition:transform .5s var(--spring),border-color .3s}
.tgcard:hover{transform:translateY(-3px);border-color:var(--ink)}
.tgcard .tgav{width:48px;height:48px;border-radius:50%;flex:none}
.tgcard b{display:block;font-size:18px}.tgcard small{display:block;color:var(--gray);font-size:13.5px;margin-top:2px}
.stepper .st{background:var(--surf)}
.note{color:var(--gray);background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--live);border-radius:16px;padding:14px 18px;margin-bottom:var(--s2);font-size:15px}
.sb code{display:block;margin-top:10px;font:13px ui-monospace,Menlo,monospace;color:var(--gray);word-break:break-all}
.opt{padding:14px 0}.opt+.opt{border-top:1px dashed var(--line)}.opt:first-child{padding-top:0}
.sb p{color:var(--gray);margin-bottom:14px}
.sb .btn{height:44px}

/* footer on the grid */
footer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s4)}
footer .wrap>div:first-child{grid-column:1/6}
footer .cols{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0}
footer .tm{grid-column:1/13}

/* tablet */
@media (max-width:1100px) and (min-width:901px){
 :root{--gut:32px;--sect:96px}
 .tiles.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bmain{grid-column:1/13}.baside{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
 .tiles.n3,.tiles.n4,.tiles.n2{grid-template-columns:minmax(0,1fr)}
 .tiles{grid-auto-rows:auto}
 .page-head{padding-top:calc(64px + var(--s6))}
 .pick4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .bmain,.baside{grid-column:1/13}.baside{margin-top:var(--col-gap)}
 .band-in{grid-column:1/13;padding:var(--s5) var(--s3)}
 .band-in .cta{min-width:0;width:100%}
 footer .wrap>div:first-child,footer .cols{grid-column:1/13}
 footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app-track{height:calc(100vh + 100vh)}
}

/* ================= round 4b: short pages, no pinning, nothing hijacks the scroll ================= */
.hero-track,.app-track{height:auto}
.hero-track .stage,.app-track .stage{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px}
.hero-track .c0{padding-bottom:var(--s5)}
.app-track .chap{transition:none}
@media (max-width:900px){.app-track .stage{min-height:760px}.app-track .chap .chip{display:inline-flex}.app-track .atag{display:block!important}}
.h2{font-size:clamp(36px,4.6vw,72px);letter-spacing:-.045em;line-height:1;margin-top:var(--s2)}
.h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em}

/* apps showcase: pick an app on the left, its real demo plays on the right (one screen) */
.showcase .shead{margin-bottom:var(--s5)}
.sgrid{align-items:center;row-gap:var(--s4)}
.slist{grid-column:1/6;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sapp{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:var(--s2);padding:var(--s3) 0;border:0;border-bottom:1px solid var(--line);
 background:none;color:var(--gray);text-align:left;cursor:pointer;font:inherit;transition:color .3s,padding .5s var(--spring)}
.sapp .sm{display:grid;place-items:center;width:48px;height:48px;opacity:.45;transition:opacity .3s,transform .5s var(--spring)}
.sapp .sm svg{max-width:44px;height:auto}
.sapp .sn2{font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.sapp .chip{opacity:0;transition:opacity .3s}
.sapp:hover{color:color-mix(in srgb,var(--ink) 75%,var(--gray))}
.sapp.on{color:var(--ink);padding-left:var(--s2)}
.sapp.on .sm{opacity:1;transform:scale(1.08)}.sapp.on .chip{opacity:1}
.sapp .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.sapp.on .bar{transform:scaleX(var(--t,0))}
.sapp:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.spanes{grid-column:7/13;position:relative}
.pane{display:grid;gap:var(--s3)}
.pane[hidden]{display:none}
.pane.on{animation:pane-in .6s var(--ease)}
@keyframes pane-in{from{opacity:0;transform:translateY(16px)}}
.ptext .atag{margin-top:0;font-size:clamp(18px,1.5vw,22px)}
.pfeat{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--gray);font-size:15px}
.pfeat li{padding-left:16px;position:relative}.pfeat li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.pfeat b{color:var(--ink)}
.ptext .abtns{margin-top:var(--s3)}
.pdemo .rstage{box-shadow:0 40px 80px -48px rgba(0,0,0,.9)}
.pdemo .r-kbd{max-width:460px;margin:0 auto}
@media (max-width:1100px) and (min-width:901px){.slist{grid-column:1/6}.spanes{grid-column:6/13}}
@media (max-width:900px){
 .slist{grid-column:1/13;flex-direction:row;overflow-x:auto;border-top:0;gap:8px;scrollbar-width:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
 .sapp{grid-template-columns:auto;justify-items:center;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;min-width:96px}
 .sapp.on{padding-left:14px;border-color:var(--ink)}
 .sapp .sn2{font-size:15px;letter-spacing:-.01em}.sapp .chip{display:none}.sapp .sm{width:36px;height:36px}.sapp .sm svg{max-width:32px}
 .sapp .bar{left:14px;right:14px;width:auto;bottom:6px}
 .spanes{grid-column:1/13}
 .pdemo{order:-1}
}

/* home rhythm: same gaps everywhere */
.d-beta,.d-sup,.d-talk{padding-top:var(--sect)}
.d-beta .huge,.d-talk .huge{font-size:clamp(40px,6vw,96px)}
.d-sup .bignum{font-size:clamp(96px,12vw,180px)}

/* beta page: one shared join, then each app on its own */
.step-one{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:var(--s5);border-radius:32px;border:1px solid var(--line);
 background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--red) 16%,transparent),transparent 60%),var(--surf)}
.bignr{font-size:96px;line-height:.8;color:var(--red-ink)}
.step-one h2,.s2h h2{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em}
.step-one p,.s2h p{color:var(--gray);margin-top:var(--s1);max-width:640px}
.s1cta{justify-content:flex-start;margin-top:var(--s3)}
.step-one .small .link{display:inline-flex;margin-left:6px}
.step-two{margin-top:var(--s6)}
.s2h{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);margin-bottom:var(--s4);padding:0 var(--s5)}
.tiles.dl .tile{gap:var(--s2)}
.adh{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--s2);width:100%}
.adh h3{font-size:24px}
.adb{display:flex;gap:12px;margin-top:auto;width:100%;flex-wrap:wrap}
.adb .cta{--w:auto;flex:1 1 0;min-width:200px;height:48px;padding:0 18px;font-size:15px}
.adb .cta svg{width:16px;height:16px}
.help{margin-top:var(--s6)}
.help .h3{margin-bottom:var(--s3)}
.help .trouble{background:none;border:0;padding:0}.help .trouble h3{font-size:20px;margin-bottom:10px}.help .trouble p{color:var(--gray);font-size:15px}
@media (max-width:900px){
 .step-one,.s2h{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) var(--s3)}
 .s2h{padding:0}
 .bignr{font-size:64px}
 .s1cta .cta{width:100%}
 .adb .cta{min-width:0;flex-basis:100%}
}

/* in-page links land below the fixed header */
main [id]{scroll-margin-top:84px}
@media (max-width:900px){main [id]{scroll-margin-top:72px}}

html{scroll-behavior:auto}
main h2[tabindex='-1']:focus{outline:none}

/* showcase fits one screen: demo capped, text first */
.pdemo{width:100%;max-width:540px}
.pdemo .r-kbd{max-width:380px}
.pdemo .phone-top{height:260px}
.showcase{min-height:0}
@media (min-width:901px){.sgrid{min-height:min(620px,calc(100svh - 200px))}}

.sgrid{align-items:start}
.sleft{grid-column:1/6;display:flex;flex-direction:column;gap:var(--s4)}
.sleft .slist{grid-column:auto}
.showcase .shead{margin-bottom:0}
.spanes{padding-top:var(--s2)}
@media (max-width:1100px) and (min-width:901px){.sleft{grid-column:1/6}}
@media (max-width:900px){.sleft{grid-column:1/13;gap:var(--s3)}}

.tile.tgcard{flex-direction:row;align-items:center}

.ph2{font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:var(--s1)}
.atag.big{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:var(--s3)}
.lede.s2{margin-top:var(--s1);font-size:clamp(16px,1.3vw,18px)}
.talkp{margin-top:calc(var(--s3)*-1);margin-bottom:var(--s4)}
.pfeat li b{font-weight:600}

.navtg{display:inline-flex;align-items:center;gap:7px}
.navtg .tgav{width:20px;height:20px;border-radius:50%;flex:none}
.drawer .navtg .tgav{width:22px;height:22px}