/* The home page of coachaiofficial.com, on top of /site.css (tokens, type,
   buttons, cards) and under /footer.css (header, footer, store buttons).
   Ported from the approved mockup (2026-10-15). Written by
   tooling/site_home_pages.py's pages; the motion is the inline home script.

   Without a script (or with reduced motion) every section is stacked in its
   final state: the hero over its poster, each note under a small phone of its
   own screen, the slogan, the three app steps side by side. With motion the script
   adds .mo to <html>: the video pins, the phone rises, the notes write
   themselves, the app section scrolls inside a still phone. Only transform and
   opacity move. */

/* ---------- Hero: full-bleed B/W video ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);color:var(--white);overflow:hidden;display:flex}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-video{opacity:0;transition:opacity .6s ease}
.hero-video.on{opacity:1}
/* film grain over the video: it moves, so it reads as film and not as dirt on the glass */
.hero-grain{position:absolute;inset:-60%;pointer-events:none;opacity:.34;mix-blend-mode:overlay;will-change:transform;animation:grain 1s steps(1) infinite;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate3d(0,0,0)}10%{transform:translate3d(-6%,3%,0)}20%{transform:translate3d(4%,-5%,0)}30%{transform:translate3d(-3%,7%,0)}40%{transform:translate3d(7%,2%,0)}50%{transform:translate3d(-7%,-4%,0)}60%{transform:translate3d(2%,6%,0)}70%{transform:translate3d(5%,-7%,0)}80%{transform:translate3d(-4%,-2%,0)}90%{transform:translate3d(6%,5%,0)}}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(11,11,11,.8) 0%,rgba(11,11,11,.58) 34%,rgba(11,11,11,.16) 64%,rgba(11,11,11,0) 82%),linear-gradient(to bottom,rgba(11,11,11,.5) 0%,rgba(11,11,11,0) 22%),linear-gradient(to top,rgba(11,11,11,.45) 0%,rgba(11,11,11,0) 26%)}
.hero-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 72px}
.hero-copy{max-width:100%}
.hero-title{font-size:var(--hero-fs,clamp(52px,6.3vw,104px));line-height:.94;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero-title .ln{display:block}
.hero-title .h1-k{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:13px;line-height:1.3;color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-title .h1-k::before{content:"";width:28px;height:2px;background:var(--sig);flex:none}
.path-read{margin-top:14px;font-size:17px;line-height:1.5;max-width:40em}
.hero-sub{margin-top:28px;font-size:20px;line-height:1.45;font-weight:500;max-width:25em;color:rgba(255,255,255,.92);text-wrap:pretty;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-act{margin-top:44px}
.hero-qr{display:inline-flex;align-items:center;gap:22px}
.hero-qr:hover .qr-tile{transform:translateY(-2px)}
.qr-cap{display:grid;gap:14px;max-width:230px}
.qr-cap .mono{font-size:13px;line-height:1.4;letter-spacing:.05em;color:#fff}
.qr-os{display:flex;gap:12px}
.qr-os svg{width:22px;height:22px;fill:#fff;opacity:.9}
.hero-act .hero-stores{display:none}
@media(max-width:899px){.hero-act .hero-qr{display:none}.hero-act .hero-stores{display:flex}}
/* pause / play for the montage and its grain (home.js shows it only when something moves) */
.hero-pause{position:absolute;z-index:3;right:var(--gut);bottom:20px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid rgba(242,238,231,.55);background:rgba(11,11,11,.35);color:var(--bone);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.hero-pause[hidden]{display:none}
.hero-pause:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.hero-pause svg{width:18px;height:18px;fill:currentColor}
.hero-pause .i-play,.hero-pause.is-paused .i-pause{display:none}
.hero-pause.is-paused .i-play{display:inline}
.hero-media.is-paused .hero-grain{animation-play-state:paused}

/* ---------- Stage right after the hero ----------
   Without motion: hero, then the phone, then the slogan, stacked. With motion
   (html.mo) the video pins, the hero copy scrolls away over it, the video sinks
   into ink, the big phone rises into the dark and leaves, then the slogan. */
.stage{position:relative;background:var(--ink)}
.stage-pin{display:none}
.stage-phone-sec{padding:96px var(--gut);display:grid;place-items:center;background:var(--ink)}
.stage-phone{display:grid;place-items:center}
/* the frame is shaped so the 1080x2294 screen fills .scr exactly: the note targets are fractions of its height */
.phone-stage{position:relative;height:min(78svh,720px);aspect-ratio:1080/2206;--G:84px}
@media(min-width:1280px){.phone-stage{--G:128px}}
.phone-stage .dev{box-shadow:0 0 0 1.5px #2a2a28 inset,0 40px 80px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.4)}
.phone-stage .scr{position:relative}
.phone-stage .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
/* one screen per note, stacked; with motion each cross-fades in as its note is written (home.js) */
.phone-stage .scr .hs + .hs{position:absolute;inset:0}
.mo .phone-stage .scr .hs + .hs{opacity:0;visibility:hidden}
.nt-shot{display:none}
/* three handwritten notes around the phone, each with a pen arrow drawn to its spot on the screen */
.nt{position:absolute;top:calc(1.76% + var(--fy) * 96.48%);width:min(330px,calc((100vw - 100%) / 2 - var(--gut) - var(--G)));z-index:3}
.nt-l{right:calc(100% + var(--G));text-align:right}
.nt-r{left:calc(100% + var(--G));text-align:left}
.nt-t{display:inline-block;margin:0;font-family:var(--hand);font-weight:700;font-size:var(--nt-fs,clamp(34px,3.35vw,52px));line-height:1.02;letter-spacing:.01em;color:var(--bone);transform:rotate(var(--rot,-3deg));transform-origin:100% 50%;text-wrap:balance}
.nt-r .nt-t{transform-origin:0 50%}
.nt-t .s{color:var(--sig)}
.nt-t .ul{position:relative;display:inline-block}
.nt-t .ul svg{position:absolute;left:-3%;width:106%;bottom:-.34em;height:.42em;overflow:visible}
.pen{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ul .pen{stroke:var(--sig);stroke-width:3.4}
.pen-art{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.pen-art .pen{stroke:var(--bone);stroke-width:2.8}
.nt-mini{display:none}
.stage-dl{position:absolute;bottom:0;left:calc(100% + var(--G));display:grid;justify-items:start;gap:14px;text-align:left;width:max-content}
.stage-dl .stores{flex-direction:column;align-items:flex-start;gap:10px}
.dl-t{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.02;letter-spacing:-.01em;color:var(--bone);max-width:13em;text-wrap:balance;hyphens:none;overflow-wrap:normal}
/* phones and tablets: no room beside the phone, the notes are written under it, one at a time */
@media(max-width:1079px){
  .phone-stage{height:min(64svh,620px)}
  .nt{left:50%;right:auto;top:calc(100% + 18px);width:min(360px,calc(100vw - 2 * var(--gut)));text-align:center;transform:translateX(-50%)}
  .nt-t,.nt-r .nt-t{font-size:var(--nt-fs-m,clamp(30px,8.6vw,38px));transform-origin:50% 50%}
  .nt-mini{display:block;width:58px;height:46px;margin:0 auto 4px;overflow:visible;transform:rotate(var(--mr,0deg))}
  .nt-mini .pen{stroke:var(--bone);stroke-width:2.4}
  .pen-art{display:none}
  .stage-dl{left:50%;right:auto;bottom:auto;top:calc(100% + 30px);justify-items:center;text-align:center;width:min(420px,calc(100vw - 2 * var(--gut)));transform:translateX(-50%)}
  .stage-dl .stores{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .dl-t{max-width:none;font-size:20px}
}
/* without motion each note stands under its own small phone with its own screen, the three side by
   side (one under another on phones and tablets), the store buttons under them */
html:not(.mo) .stage-phone-sec .nt-t{clip-path:none}
html:not(.mo) .phone-stage{height:auto;aspect-ratio:auto;width:min(100%,1180px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 40px;align-items:start}
html:not(.mo) .phone-stage > .dev,html:not(.mo) .phone-stage .pen-art{display:none}
html:not(.mo) .nt{position:relative;left:auto;right:auto;top:auto;width:auto;transform:none;text-align:center}
html:not(.mo) .nt-shot{display:block;height:min(62svh,520px);aspect-ratio:1080/2206;margin:0 auto}
html:not(.mo) .nt-mini{display:block;width:58px;height:46px;margin:16px auto 4px;overflow:visible;transform:rotate(var(--mr,0deg))}
html:not(.mo) .nt-mini .pen{stroke:var(--bone);stroke-width:2.4}
html:not(.mo) .nt-t,html:not(.mo) .nt-r .nt-t{font-size:var(--nt-fs-m,clamp(30px,2.7vw,40px));transform-origin:50% 50%}
html:not(.mo) .stage-dl{position:relative;grid-column:1/-1;left:auto;bottom:auto;top:auto;justify-items:center;text-align:center;width:auto;transform:none}
html:not(.mo) .stage-dl .stores{flex-direction:row;flex-wrap:wrap;justify-content:center}
@media(max-width:1079px){
  html:not(.mo) .phone-stage{grid-template-columns:minmax(0,1fr);width:min(100%,420px);gap:56px}
  html:not(.mo) .nt-t,html:not(.mo) .nt-r .nt-t{font-size:var(--nt-fs-m,clamp(30px,8.6vw,38px))}
}
/* The pinned photo/video covers the largest viewport (100lvh: Safari with its bars hidden or floating),
   otherwise the stage's black shows as a strip below it; the hero text stays inside 100svh. */
.mo .stage-pin{display:block;position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;z-index:0}
.mo .hero{margin-top:-100vh;margin-top:-100lvh;background:transparent;z-index:2}
.mo .stage-dark{position:absolute;inset:0;background:#161513;opacity:0;pointer-events:none;will-change:opacity}
.mo .stage-phone{position:absolute;inset:0;pointer-events:none}
.mo .phone-stage{will-change:transform;transform:translate3d(0,120vh,0)}
.mo .nt{opacity:0}
.mo .nt-t{clip-path:inset(-30% 108% -40% -8%)}
.mo .pen-art{opacity:0}
.mo .stage-dl{opacity:0;visibility:hidden;pointer-events:auto}
.mo .stage-slogan{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--gut);visibility:hidden}
.mo .stage-slogan .stack-wrap{padding:0;overflow:visible}
.mo .stage-slogan .stack .hand-row{padding-bottom:0}
.mo .stage-slogan .stack{transform:translate3d(-.044em,calc(-.054em - .293 * var(--hs)),0)}
.mo .stage-slogan .stack > span{opacity:0;will-change:transform,opacity}
.mo .stage-slogan .stack .hand{opacity:0}
.mo .stage-slogan .stack .fill{clip-path:inset(-12% 100% -12% -2%)}
.mo .stage-phone-sec,.mo .stage-slogan-sec{display:none}

/* word stack: "the plan remembers" */
.stack-wrap{padding:150px var(--gut) 170px;max-width:var(--max);margin:0 auto;overflow:hidden;text-align:center}
.stack{line-height:.9;font-size:var(--stack-fs,clamp(64px,11vw,168px));position:relative;display:inline-block}
.stack span{display:block}
.stack [data-w]::before{content:attr(data-w)}
.stack .o{position:relative}
.stack .o .base{color:transparent;-webkit-text-stroke:3px var(--bone)}
.stack .o .fill{position:absolute;inset:0;color:var(--fc);-webkit-text-stroke:3px var(--fc);clip-path:inset(-12% -3% -12% -2%)}
.stack .o1{--fc:#5a2416}
.stack .o2{--fc:#952e15}
.stack .last{--fc:var(--sig)}
.stack .last .base{-webkit-text-stroke-color:var(--sig)}
/* the hand phrase tucks up under the last line, its raised right end just touching the baseline. It is
   big (about .45 of the slogan's size, so ~650 px wide at 1920); on phones it takes what the width leaves */
.stack{--hs:var(--hs-d,clamp(34px,.45em,80px))}
.stack .hand-row{display:flex;justify-content:flex-end;text-align:right;margin-top:calc(var(--hand-up,-.15em) + .225 * var(--hs));line-height:1;padding-bottom:48px}
.stack .hand{display:inline-block;font-size:var(--hs);color:var(--white);transform-origin:80% 50%;text-shadow:0 2px 14px rgba(0,0,0,.18)}

/* ---------- Free on the site: the cards slide into line once, from the right ---------- */
.free-sec{overflow-x:clip}
.mo .track[data-enter] > li{opacity:0;transform:translate3d(60vw,0,0)}
.mo .track[data-enter].entered > li{opacity:1;transform:none;transition:opacity .7s ease,transform 1s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--i,0) * 110ms)}
.mo .track[data-enter].enter-done > li{transition:none}
.mo .track[data-enter]:not(.enter-done){scroll-snap-type:none}
.free-sec .sec-tools{display:none}
.js .free-sec .sec-tools{display:flex}

/* ---------- App section: statement + a story in a still phone (a swap, the sets, the stage) ---------- */
.app-sec{padding-top:140px;background:var(--ink);color:var(--bone)}
.statement{font-size:var(--statement-fs,clamp(56px,7vw,112px));text-align:center;max-width:1180px;margin:0 auto;padding:0 var(--gut) 88px}
/* the run scales with --seq (2.0 with a mouse or trackpad, 1.6 on touch), set by the site script */
.scrolly{position:relative;height:400vh;height:calc(100vh + 300vh * var(--seq,1))}
/* the pinned panel follows the visible height (100dvh): Safari grows the viewport when its bar folds,
   and a 100svh panel then left a strip of the section's black under it */
.sticky{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;padding:16px 20px;display:flex}
.panel{position:relative;flex:1;background:var(--bone);color:var(--ink);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px;padding:40px 56px;overflow:hidden}
.panel-cap{display:grid;align-self:center}
.cap-step{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;max-width:420px}
.cap-step.on{opacity:1;transform:none}
.cap-step .mono{color:var(--muted-l)}
.cap-step h3{font-size:var(--step-fs,clamp(36px,3.9vw,58px));margin-top:14px;line-height:1}
/* (a line of 1, not the poster .92: the accents of GRÖSSEREN and WIĘKSZEJ would touch the line above or below) */
.cap-step p{color:var(--text-l);margin-top:18px;font-size:16px}
.side{justify-self:end;display:grid;gap:34px;min-width:250px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:10px 0;color:rgba(11,11,11,.38);transition:color .3s}
.steps li .mono{color:inherit}
.steps li b{font-family:var(--label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:13px}
.steps li .track-line{grid-column:1/-1;height:3px;background:rgba(11,11,11,.1);overflow:hidden}
.steps li .track-line i{display:block;height:100%;width:0;background:var(--sig)}
.steps li.on{color:var(--ink)}
.log{border-top:2px solid var(--ink);padding-top:14px;transition:opacity .45s ease,transform .45s ease}
/* the log of today's sets shows only while the phone logs them (step 02) */
.side .log{opacity:0;transform:translateY(12px)}
.side.show-log .log{opacity:1;transform:none}
.rm-log{display:none}
.log .lb{color:var(--muted-l);margin-bottom:10px}
.log ol{list-style:none;margin:0;padding:0;font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.02em}
.log li{display:grid;grid-template-columns:5.6em 1fr auto;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-l);opacity:.18;transition:opacity .35s ease,transform .35s ease;transform:translateX(-6px)}
.log li.on{opacity:1;transform:none}
.log li svg{width:16px;height:16px;stroke:var(--sig);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* the frame is shaped so the 1080x2292 screen fills .scr; every layer is that screen, full size */
.phone-big{height:min(calc(100svh - 112px),760px);aspect-ratio:1080/2205}
.phone-big .scr{position:relative;background:#fbfbf9;isolation:isolate}
.phone-big .ly{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.phone-big .scr img.ly{object-fit:fill}
.phone-big .scrim{background:rgba(0,0,0,.542);opacity:0}
.phone-big .sheet{transform:translate3d(0,100%,0)}
.phone-big .msg,.phone-big #sBase{opacity:0;visibility:hidden}
.phone-big [id^="sRdl"],.phone-big .stage{opacity:0;visibility:hidden}
.phone-big .stage{background:#fbfbf9;overflow:hidden}
.phone-big .scr .stage img{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:fill}
.st-status{position:absolute;left:0;right:0;top:0;height:2.8%;background:#737372}
.cap-more{display:inline-flex;gap:.5em;align-items:center;margin-top:22px;font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--sig);padding-bottom:4px;transition:color .2s}
.cap-more:hover{color:var(--sig-text)}
.cap-more:focus-visible{outline:2px solid var(--sig);outline-offset:4px}
.mo .cap-step{transition:none;will-change:opacity,transform}
.rm-phone{display:none}
/* step 03: a handwritten note beside the phone, written in with the step, with a pen arrow drawn to the
   screen (the arrow is drawn by the home script from where the note and the screen really are). Beside the
   phone on the right on wide screens, in the room the set log leaves; left of it, under the caption, on
   tablets; right of it on small tablets; not shown on phones, where the phone and the caption fill the panel */
.phone-big{position:relative}
.story-note{display:none;position:absolute;z-index:3;left:calc(100% + 64px);top:57%;width:min(300px,calc((100vw - 248px - 100%) / 2 - 64px));text-align:left;pointer-events:none}
.story-note .nt-t{color:var(--ink);font-size:clamp(30px,2.45vw,42px);--rot:-3deg;transform-origin:0 50%}
.story-pen{display:none}
.mo .story-note,.mo .story-pen{display:block}
.mo .story-note{opacity:0;visibility:hidden}
.mo .story-note .nt-t{clip-path:inset(-30% 108% -40% -8%)}
.mo .story-pen{opacity:1}
.story-pen .pen{stroke:var(--ink);stroke-width:2.6}
@media(max-width:1100px){
  .story-note{left:auto;right:calc(100% + 56px);top:66%;width:min(300px,calc(100vw - 120px - 100% - 104px));text-align:right}
  .story-note .nt-t{font-size:clamp(26px,3.1vw,34px);transform-origin:100% 50%}
}
@media(max-width:760px){
  .story-note{right:auto;left:calc(100% + 16px);top:38%;width:calc((100vw - 56px - 100%) / 2 - 16px);text-align:left}
  .story-note .nt-t{font-size:24px;transform-origin:0 50%}
}
@media(max-width:679px){.mo .story-note,.mo .story-pen{display:none}}
/* the log's fade runs on the scroll with the captions, not on a timer */
.mo .side .log{transition:none;will-change:opacity,transform}
/* without motion the note stands over the still screen of step 03, its small arrow pointing down at it */
.rm-note{display:none}
html:not(.mo) .rm-note{display:block;margin-top:26px}
html:not(.mo) .rm-note .nt-t{color:var(--ink);font-size:clamp(28px,2.4vw,38px);--rot:-3deg;transform-origin:0 50%}
html:not(.mo) .rm-note .nt-mini{display:block;width:46px;height:36px;margin:6px 0 -14px 34px;overflow:visible;transform:rotate(172deg)}
html:not(.mo) .rm-note .nt-mini .pen{stroke:var(--ink);stroke-width:2.4}

/* ---------- Choose your path: picker chips + poster pane ----------
   Two columns under the chips: the copy on the left, centred on the photo's
   height and never over it; the photo on the right, from about the middle of
   the content to the right edge of the screen. The chips, the photo and the
   copy fit one screen (1440x900 and 1280x800 included). The photo is a link to
   the pane's first program. Below 980 px they stack: photo, then the copy. */
.picker{display:flex;flex-wrap:wrap;gap:22px 0;margin:6px 0 30px}
.pgroup{display:flex;flex-direction:column;gap:10px;padding-right:28px;margin-right:28px;border-right:1px solid var(--line-l)}
.pgroup:last-child{border-right:0;margin-right:0;padding-right:0}
.pgroup .lb{color:var(--muted-l)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:none;height:46px;padding:0 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out),transform .2s}
.chip:hover{background:var(--bone-2)}
.chip:active{transform:translateY(1px)}
.chip[aria-selected="true"]{background:var(--ink);color:var(--bone)}
.paths{display:grid}
.path-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.path-pane.on{opacity:1;visibility:visible;transition:opacity .5s ease .05s,visibility 0s}
.path-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:56px;align-items:center}
.pstage{grid-column:2;grid-row:1;position:relative;min-width:0}
.pic{position:relative;display:block;margin-right:calc(-1 * var(--gut) - max(0px, (100vw - var(--max)) / 2));height:max(300px,min(580px,38vw,calc(100vh - 200px)));height:max(300px,min(580px,38vw,calc(100svh - 200px)));overflow:hidden;background:var(--bone-2);cursor:pointer}
.pic img{width:100%;height:100%;object-fit:cover}
/* A pane's program buttons: pointing at one crossfades the photo and the copy to that program
   (home.js); the copies share one cell, so the buttons under them never move */
.pimg{position:absolute;inset:0;display:block;opacity:0;transition:opacity .55s ease}
.pimg.on{opacity:1}
/* visibility:inherit on the shown copy, never visible: a hidden pane must stay hidden, or its copy takes the pointer */
.pvs{display:grid}
.pv{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .45s var(--ease-out),visibility 0s linear .3s}
.pv.on{opacity:1;visibility:inherit;transform:none;transition:opacity .45s ease .08s,transform .6s var(--ease-out) .08s,visibility 0s}
.path-copy .row .btn{transition:transform .2s ease,background-color .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out)}
.pic:focus-visible{outline-offset:-4px}
.path-pane.on .pic:hover img{transform:scale(1.025);transition:transform .6s var(--ease-out)}
.path-pane .pic img{transform:translateX(34px) scale(1.05);transition:transform .9s var(--ease-out)}
.path-pane .path-copy{transform:translateY(30px);transition:transform .75s var(--ease-out) .16s}
.path-pane .det,.path-pane .path-copy>.row{transform:translateY(16px);transition:transform .75s var(--ease-out) .26s}
.path-pane.on .pic img,.path-pane.on .path-copy,.path-pane.on .det,.path-pane.on .path-copy>.row{transform:none}
/* the headline scales with its column (cqi), so the longest line in any language fits without a break */
.path-copy{grid-column:1;grid-row:1;min-width:0;container-type:inline-size}
.path-copy h3{font-size:var(--path-fs,clamp(36px,var(--path-cq,12.4cqi),88px));line-height:.98}
.det{padding-top:24px}
.path-copy .mono{color:var(--muted-l)}
.path-copy p{margin-top:10px;max-width:520px;font-size:17px;color:var(--text-l)}
.path-copy .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* where nothing hovers a tap on a program shows it, and this opens it (home.js; hidden elsewhere) */
.path-copy .pview{margin-top:14px;background:var(--sig);border-color:var(--sig);color:var(--white)}
.path-copy .pview[hidden]{display:none}
/* without a script every pane is listed, one after another */
html:not(.js) .paths{gap:72px}
html:not(.js) .path-pane{grid-area:auto;opacity:1;visibility:visible}
html:not(.js) .path-pane .pic img,html:not(.js) .path-pane .path-copy,html:not(.js) .path-pane .det,html:not(.js) .path-pane .path-copy>.row{transform:none}
@media(max-width:1100px){
  .pgroup{border-right:0;padding-right:0;margin-right:36px}
  .path-pane{column-gap:40px}
}
@media(max-width:980px){
  .path-pane{grid-template-columns:minmax(0,1fr);align-items:start}
  .pstage,.path-copy{grid-column:1;grid-row:auto}
  .pic{margin:0 calc(-1 * var(--gut));height:clamp(220px,46vw,400px)}
  .path-copy{margin-top:26px}
  .path-copy h3{font-size:var(--path-fs-m,clamp(36px,8.4vw,72px))}
}
@media(max-width:760px){
  .picker{flex-direction:column;gap:16px;margin:0 0 32px}
  .pgroup{border-right:0;margin-right:0;padding-right:0;gap:8px}
  .chip{height:42px;padding:0 15px;font-size:12px}
  .pic{height:clamp(200px,58vw,300px)}
  .path-copy{margin-top:22px}
  .path-copy h3{font-size:var(--path-fs-m,clamp(32px,10.4vw,60px))}
  .path-copy p{font-size:16px}
  .path-copy .pview{display:flex;width:100%}
  .det{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .path-pane,.path-pane *{transition:none!important}
  .path-pane .pic img,.path-pane .path-copy,.path-pane .det,.path-pane .path-copy>.row,.pv{transform:none}
}

/* ---------- Numbers (Ink): six facts on a 3x2 grid with hairlines between the cells ---------- */
.nums{background:var(--ink);color:var(--bone);padding:130px 0 140px}
.nums-head{margin-bottom:56px}
.nums h2{font-size:clamp(56px,6.4vw,104px)}
.num-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-d);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.num{background:var(--ink);padding:40px 36px 52px;min-width:0}
.num:nth-child(3n+1){padding-left:0}
.num:nth-child(3n){padding-right:0}
.num .mono{color:var(--muted-d)}
.num-v{display:block;margin-top:26px;font-size:clamp(80px,10.4vw,150px);line-height:.86;letter-spacing:-.03em;white-space:nowrap}
.num-v.r{color:var(--sig)}
.num-t{margin-top:24px;font-size:17px;line-height:1.45;color:rgba(242,238,231,.84);max-width:23em;text-wrap:pretty}
.num-v .ch{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em 0;margin:-.08em 0}
.num-v .ch > span{display:inline-block}
.mo .num .num-in{opacity:0;transform:translateY(18px)}
.mo .num .num-v .ch > span{transform:translateY(110%)}
.mo .num.go .num-in{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--ease-out)}
.mo .num.go .num-v .ch > span{transform:none;transition:transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * 80ms + 120ms)}
@media(max-width:1100px){
  .num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num,.num:nth-child(3n+1),.num:nth-child(3n){padding:36px 28px 44px}
  .num:nth-child(odd){padding-left:0}
  .num:nth-child(even){padding-right:0}
  .num-v{font-size:clamp(80px,13vw,120px)}
}
@media(max-width:760px){
  .nums{padding:88px 0 96px}
  .nums-head{margin-bottom:32px}
  .nums h2{font-size:var(--nums-fs-m,clamp(34px,10.6vw,60px))}
  .num-grid{grid-template-columns:1fr}
  .num,.num:nth-child(3n+1),.num:nth-child(3n),.num:nth-child(odd),.num:nth-child(even){padding:30px 0 34px}
  .num-v{font-size:clamp(80px,24vw,96px);margin-top:18px}
  .num-t{font-size:16px;margin-top:18px}
}

/* ---------- Full-bleed test-day banner ---------- */
.banner{position:relative;height:92vh;min-height:620px;max-height:860px;overflow:hidden;color:var(--white);background:var(--ink)}
.banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(11,11,11,.82) 0%,rgba(11,11,11,.4) 44%,rgba(11,11,11,0) 70%),linear-gradient(to top,rgba(11,11,11,.55),rgba(11,11,11,0) 45%)}
.banner .shell{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:72px;max-width:none}
.banner-copy{max-width:860px}
.banner-copy h2{font-size:var(--banner-fs,clamp(56px,6.2vw,100px))}
.banner-run{position:relative;background:var(--ink)}
.banner-copy h2 .bl{display:block}
/* the strike lives inside the word's own box, sized in em, so it follows the word at every width */
.strike{position:relative;display:inline-block}
.strike .bar{position:absolute;left:-.06em;right:-.03em;top:.391em;height:.13em;transform:rotate(-3.5deg);transform-origin:50% 50%;pointer-events:none}
.strike .bar-in{position:absolute;inset:0;background:var(--sig);border-radius:.02em;transform-origin:0 50%;will-change:transform}
.banner-copy .b3{color:rgba(255,255,255,.68)}
.mo .banner{position:sticky;top:0}
.mo .banner .bl,.mo .banner .bp,.mo .banner .bb{opacity:0;will-change:transform,opacity}
.mo .banner .b3{color:#fff}
.mo .banner .bar-in{transform:scaleX(0)}
.banner-copy p{margin-top:28px;color:rgba(255,255,255,.88);font-size:17px;max-width:460px}
.banner-copy .btn{margin-top:26px}

/* ---------- More reasons (Signal surface): four tiles ---------- */
.close{padding:130px 0 140px;overflow:hidden}
.close h2{font-size:clamp(60px,8.4vw,136px)}
.close h2 .w{color:var(--bone)}
.more-grid{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.more{border-top:2px solid var(--ink);padding:24px 0 8px}
.more .mono{display:block;font-size:12px}
.more h3{font-size:var(--more-fs,clamp(24px,2.3vw,34px));margin-top:16px;text-wrap:balance}
.more p{font-size:16px;line-height:1.45;margin-top:14px;max-width:300px}
.mo .more{opacity:0;transform:translate3d(0,40px,0);transition:opacity .4s ease,transform .5s var(--ease-out)}
.mo .more.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mo .more{opacity:1;transform:none;transition:none}}

/* ---------- Final CTA (Bone) ---------- */
.final{padding:120px 0 130px}
.final-in{display:flex;align-items:center;justify-content:space-between;gap:56px}
.final h2{font-size:clamp(56px,7.4vw,120px)}
.final-copy > p{margin-top:28px;font-size:18px;max-width:470px;color:var(--text-l)}
.final-copy .stores{margin-top:30px}
.final-qr{display:grid;justify-items:center;gap:16px;flex:none;max-width:220px;text-align:center}
.final-qr .qr-tile{box-shadow:0 14px 36px rgba(11,11,11,.18);border:1.5px solid rgba(11,11,11,.12)}
.final-qr .mono{color:var(--muted-l);font-size:12px;line-height:1.4}
.final-qr:hover .qr-tile{transform:translateY(-2px)}
@media(max-width:1100px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.more{padding-bottom:30px}}
@media(max-width:899px){.final-qr{display:none}}
@media(max-width:760px){
  .close{padding:88px 0 96px}
  .close h2{font-size:clamp(40px,12.4vw,68px)}
  .more-grid{grid-template-columns:1fr;margin-top:40px}
  .more{padding:20px 0 26px}
  .more h3{font-size:clamp(23px,7vw,30px);margin-top:12px}
  .more p{font-size:16px;margin-top:10px}
  .final{padding:84px 0 92px}
  .final h2{font-size:var(--final-fs-m,clamp(34px,10.6vw,60px))}
  .final-copy > p{font-size:16px;margin-top:20px}
}

/* ---------- Narrow screens ---------- */
@media(max-width:1100px){
  .panel{grid-template-columns:1fr auto;padding:32px 40px}
  .side{display:none}
}
@media(max-width:760px){
  .hero-inner{padding:104px var(--gut) 48px}
  .hero-media video,.hero-media img{object-position:var(--pos-m,50% 40%)}
  .hero-scrim{background:linear-gradient(to bottom,rgba(11,11,11,.6) 0%,rgba(11,11,11,.42) 26%,rgba(11,11,11,.58) 55%,rgba(11,11,11,.86) 100%)}
  .hero-title{font-size:var(--hero-fs-m,clamp(36px,10.8vw,60px))}
  .hero-sub{margin-top:20px;font-size:18px}
  .hero-act{margin-top:30px}
  .hero-stores{gap:10px}
  .stage-phone-sec{padding:72px var(--gut)}
  .app-sec{padding-top:96px}
  .statement{font-size:var(--statement-fs-m,clamp(36px,12vw,64px));padding-bottom:56px}
  .scrolly{height:364vh;height:calc(100vh + 264vh * var(--seq,1))}
  .sticky{padding:10px}
  .panel{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:22px 18px 24px;justify-items:center}
  /* the phone takes what the longest caption leaves, so no caption runs off the panel */
  .phone-big{height:100%;max-height:620px;min-height:0;order:1}
  .panel-cap{order:2;width:100%;text-align:center}
  /* the caption row is as tall as the longest step; a shorter one sits in its middle, not at its top */
  .cap-step{max-width:none;align-self:center}
  .cap-step .mono{display:none}
  .cap-step h3{font-size:var(--step-fs-m,clamp(26px,8.6vw,40px));margin-top:0}
  .cap-step p{font-size:16px;line-height:1.4;margin-top:8px}
  .cap-more{margin-top:12px;font-size:12.5px}
  .stack-wrap{padding:100px var(--gut)}
  .stack{font-size:var(--stack-fs-m,clamp(48px,16vw,86px))}
  .stack{--hs:var(--hs-m,clamp(34px,10.4vw,46px))}
  .stack .o .base,.stack .o .fill{-webkit-text-stroke-width:1.5px}
  /* pinned on phones, so it fills the visible screen; 88svh left black under it once Safari's bar folded */
  .banner{height:100svh;height:100dvh;min-height:600px}
  .banner::after{background:linear-gradient(to top,rgba(11,11,11,.92) 0%,rgba(11,11,11,.5) 48%,rgba(11,11,11,0) 72%)}
  .banner .shell{padding-bottom:44px}
  .banner-copy h2{font-size:var(--banner-fs-m,clamp(34px,10.2vw,72px))}
  .banner-copy p{font-size:16px;margin-top:22px}
}

/* ---------- Without motion (no script, or reduced motion): one still screen per app step ---------- */
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.rm .hero-video{display:none}
html:not(.mo) .scrolly{height:auto}
html:not(.mo) .sticky{position:relative;height:auto;min-height:0}
html:not(.mo) .phone-big,html:not(.mo) .side{display:none}
html:not(.mo) .panel{grid-template-columns:1fr;padding:56px}
html:not(.mo) .panel-cap{grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
html:not(.mo) .rm-phone{display:block;height:560px;aspect-ratio:1080/2205;margin-top:28px}
html:not(.mo) .rm-phone .dev{box-shadow:0 0 0 1.5px #2a2a28 inset,0 18px 40px rgba(0,0,0,.25)}
html:not(.mo) .rm-phone .scr{background:#fbfbf9}
html:not(.mo) .cap-step{grid-area:auto;opacity:1;transform:none}
html:not(.mo) .cap-step .mono{display:block}
html:not(.mo) .log li{opacity:1;transform:none}
html:not(.mo) .rm-log{display:block;max-width:300px;margin-top:22px}
html:not(.mo) .more{opacity:1;transform:none}
@media(max-width:1100px){html:not(.mo) .panel-cap{grid-template-columns:1fr;gap:56px}html:not(.mo) .rm-phone{height:480px}}
@media(max-width:760px){html:not(.mo) .panel{min-height:0;padding:28px 18px}html:not(.mo) .panel-cap{text-align:left}html:not(.mo) .rm-phone{height:440px;margin:22px auto 0}}