/* One L1fe walkthrough, Preview B, concept v3 (15 October 2026).
   Seven scenes on one phone (assets/walk.js) and the ending (assets/ending.js).

   Units. --u is the phone's width. Inside the screen --su is one pixel of the
   app captures (618 wide), so a screen drawn here and a capture next to it
   share one scale. Cards outside the phone use --cu: the phone's width on a
   wide screen, most of the window on a narrow one, so they are always
   readable. walk.js writes all of them on the root.

   Without walk.js (no script, or reduced motion) a scene is its captions next
   to one still screen, and nothing floats. */

:root{--u:260px;--cu:260px;--su:calc(var(--u)*.8578/618);--app:#F3F4EF;--btn:#30796A;--soft:#E5EEEB;--mut:#7D837F}

/* ── the scene, at rest ───────────────────────────────────────────────── */
.ws{position:relative;z-index:1}
.wstage{max-width:1240px;margin:0 auto;padding:72px clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,80px);flex-wrap:wrap}
.wcap{max-width:440px;flex:1 1 280px}
.wc+.wc{margin-top:30px}
.wey{display:block;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--green)}
.wc h2{margin:10px 0 14px;font-size:clamp(1.6rem,2.6vw,2.4rem)}
.wc p{margin:0;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.55;color:var(--ink2);text-wrap:pretty}
.wc .waside{margin-top:16px;font-size:.95rem;color:var(--ink3)}
.wc .waside b{font-weight:600;color:var(--ink)}
.wph{position:relative;flex:none;width:var(--u);aspect-ratio:900/1806}
.wcard,.wlift,.wbg,.wveil,.wtap,.wfly,.wtw{display:none}
html:not(.walk-on) .wsl:not(.still){display:none}
html:not(.walk-on) .wsl.still{transform:none}

/* ── the scene, playing ───────────────────────────────────────────────── */
.walk-on .ws{height:calc(var(--len,4) * 100svh);content-visibility:auto}
.walk-on .wstage{position:sticky;top:0;height:100svh;max-width:none;margin:0;padding:0;display:block;overflow:hidden}
.walk-on .wcap{position:absolute;left:var(--capx);top:var(--cy);width:var(--capw);max-width:none;transform:translateY(-50%);display:grid;z-index:6}
.walk-on .wc{grid-area:1/1;margin:0;align-self:center;opacity:0;visibility:hidden;will-change:transform,opacity}
.walk-on .wph,.walk-on .wcard,.walk-on .wlift,.walk-on .wbg,.walk-on .wfly{position:absolute;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);margin:0}
.walk-on .wph{z-index:2}
.walk-on .wcard,.walk-on .wlift,.walk-on .wbg,.walk-on .wfly{display:block;opacity:0;visibility:hidden;will-change:transform,opacity}
.walk-on .wcard,.walk-on .wlift,.walk-on .wfly{z-index:4}
.walk-on .wbg{z-index:1}
/* the Twin beside the phone, drawn by assets/twin-scenes.js */
.walk-on .wtw{display:block;position:absolute;left:var(--cx);top:var(--cy);width:var(--u);aspect-ratio:900/1806;transform:translate(-50%,-50%);margin:0;z-index:3;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.walk-on .wtw canvas{display:block;width:100%;height:100%}
.wtwcap{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:calc(var(--cu)*.034);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#B86E19}
.walk-on .wscr::before{content:"";position:absolute;inset:0;z-index:38;background:#121A17;opacity:var(--dim,0);pointer-events:none;border-radius:inherit}
@media(max-width:879.98px){
  .walk-on .wcap{left:20px;right:20px;width:auto;top:var(--capy);transform:none;align-content:start}
  .walk-on .wc{align-self:start}
  .wc h2{font-size:clamp(1.3rem,6vw,1.65rem);margin:6px 0 8px}
  .wc p{font-size:15px;line-height:1.5}
  .wc .waside{margin-top:10px;font-size:13.5px}
  .wey{font-size:12.5px}
}
@media(max-width:879.98px) and (max-height:700px){.wc p{font-size:14px}.wc h2{font-size:1.25rem}}

/* a quiet light behind the phone, so it stands in a room and not on a sheet */
.walk-on .wstage::before{content:'';position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#E4EFEB 0%,#E4EFEB99 40%,#F4F4EF00 100%);pointer-events:none}

/* ── the phone ─────────────────────────────────────────────────────────── */
.wshd{position:absolute;left:7%;top:2.4%;width:86%;height:95.2%;border-radius:15%/7.4%;
  box-shadow:0 calc(var(--u)*.12) calc(var(--u)*.22) #1B242030,0 calc(var(--u)*.03) calc(var(--u)*.05) #1B242026}
.wph::after{content:'';position:absolute;left:10%;right:10%;bottom:-4%;height:6%;border-radius:50%;background:radial-gradient(closest-side,#1B24202e,#1B242000);z-index:-1}
.wfr{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:3}
.wnotch{position:absolute;left:36.56%;top:4.98%;width:26.89%;height:3.88%;border-radius:999px;background:#0B0E0D;z-index:4}
.wscr{position:absolute;left:7.11%;top:3.54%;width:85.78%;height:92.91%;overflow:hidden;border-radius:10%/5%;background:var(--app);
  font-family:var(--font-sans);color:var(--ink);isolation:isolate;z-index:1;-webkit-font-smoothing:antialiased}
/* the glass: one soft highlight across the top corner, as a lit screen has */
.wscr::after{content:'';position:absolute;inset:0;z-index:40;pointer-events:none;
  background:linear-gradient(118deg,#FFFFFF2e 0%,#FFFFFF0d 26%,#FFFFFF00 38%,#FFFFFF00 70%,#FFFFFF0a 100%)}
.wsb{position:absolute;left:0;right:0;top:0;height:calc(var(--su)*96);z-index:30;pointer-events:none}
.wsb b{position:absolute;left:calc(var(--su)*62);top:calc(var(--su)*48);transform:translateY(-50%);font-size:calc(var(--su)*25);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.wsb svg{position:absolute;right:calc(var(--su)*40);top:calc(var(--su)*48);transform:translateY(-50%);width:calc(var(--su)*112);height:auto;display:block}
.wsb.lt b{color:#fff}.wsb.lt svg{color:#fff}
.whome{position:absolute;left:50%;bottom:calc(var(--su)*12);width:calc(var(--su)*200);height:calc(var(--su)*8);margin-left:calc(var(--su)*-100);border-radius:9px;background:#1B2420;z-index:30;opacity:.9}
.whome.lt{background:#fff}

/* screens: pushed in from the right as the app does, the one before slides a
   little to the left and dims; a sheet comes up from the bottom */
.wsl{position:absolute;inset:0;background:var(--app);overflow:hidden;transform:translate3d(100%,0,0);
  transition:transform .46s cubic-bezier(.32,.72,0,1),filter .46s cubic-bezier(.32,.72,0,1);box-shadow:calc(var(--su)*-10) 0 calc(var(--su)*30) #1B24201a}
.wsl.on{transform:none}
.wsl.past{transform:translate3d(-28%,0,0);filter:brightness(.93)}
.wsl.up{transform:translate3d(0,100%,0);top:auto;height:auto;bottom:0;border-radius:calc(var(--su)*34) calc(var(--su)*34) 0 0;box-shadow:0 calc(var(--su)*-12) calc(var(--su)*40) #1B242029}
.wsl.up.on{transform:none}
.wsl.up.past{transform:translate3d(0,100%,0)}
.wsl.fade{transform:none;opacity:0;transition:opacity .3s ease;box-shadow:none}
.wsl.fade.on{opacity:1}.wsl.fade.past{opacity:0}
.wdim{position:absolute;inset:0;background:#0B0E0D;opacity:0;transition:opacity .4s ease;z-index:20;pointer-events:none}
.wdim~.wsl.up{z-index:21}
.wdim.on{opacity:.32}
.wimg{position:absolute;left:0;top:4.5%;width:100%;height:auto;display:block;user-select:none}

/* something placed on a capture, by its pixel in the capture (data-at) */
.wpt{position:absolute;transform:translate(-50%,-50%);z-index:12}
/* a finger: a ring where the tap lands, then gone */
.walk-on .wtap{display:block;position:absolute;width:calc(var(--su)*84);height:calc(var(--su)*84);border-radius:50%;
  background:#1B242024;border:calc(var(--su)*2) solid #FFFFFFb3;transform:translate(-50%,-50%) scale(.4);opacity:0;z-index:35;pointer-events:none}
.walk-on .wtap.on{animation:wtap .62s cubic-bezier(.22,1,.36,1) both}
@keyframes wtap{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(.82)}55%{opacity:.9;transform:translate(-50%,-50%) scale(.74)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
/* an appearing part of a screen */
.wpop{opacity:0;transform:translateY(calc(var(--su)*14)) scale(.98);transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1)}
.wpop.on{opacity:1;transform:none}
/* a lifted card holds no empty room for an answer that has not come yet; it grows when it does */
.wcard .wpop{max-height:0;overflow:hidden;transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1),max-height .45s cubic-bezier(.22,1,.36,1)}
.wcard .wpop.on{max-height:60em}
.wswap{display:inline-grid;justify-items:start}
.wswap>*{grid-area:1/1;transition:opacity .25s ease}
.wswap>:last-child{opacity:0}
.wswap.on>:first-child{opacity:0}.wswap.on>:last-child{opacity:1}
/* a row that takes room as it arrives, so what is above it moves up */
.wgrow{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)}
.wgrow>div{overflow:hidden;min-height:0}
.wgrow.on{grid-template-rows:1fr}
.wgrow>div>*{opacity:0;transform:translateY(calc(var(--su)*16));transition:opacity .32s ease .08s,transform .4s cubic-bezier(.22,1,.36,1) .08s}
.wgrow.on>div>*{opacity:1;transform:none}
.typing::after{content:'';display:inline-block;width:calc(var(--su)*2.5);height:1.05em;margin-left:1px;background:currentColor;vertical-align:-.15em;animation:wcaret 1s steps(1) infinite}
@keyframes wcaret{50%{opacity:0}}

/* ── screens drawn in the app's own style (sizes in capture pixels) ───── */
/* the title row where the captures have theirs (its middle 136 capture pixels down) */
.ap{position:absolute;inset:0;padding-top:calc(var(--su)*112)}
.apnav{position:relative;height:calc(var(--su)*48);display:flex;align-items:center;justify-content:center;font-size:calc(var(--su)*26);font-weight:600}
.apnav .bk{position:absolute;left:calc(var(--su)*30);font-size:calc(var(--su)*22);font-weight:500;color:var(--ink2)}
.apnav .rt{position:absolute;right:calc(var(--su)*30);font-size:calc(var(--su)*21);font-weight:600;color:var(--green)}
.apbody{padding:calc(var(--su)*22) calc(var(--su)*30) 0}
.aph{font-size:calc(var(--su)*36);font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:calc(var(--su)*10) 0 calc(var(--su)*8)}
.apsub{font-size:calc(var(--su)*19);line-height:1.45;color:var(--mut);margin:0 0 calc(var(--su)*22)}
.apey{font-size:calc(var(--su)*17);font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin:calc(var(--su)*26) 0 calc(var(--su)*12)}
.apey.g{color:var(--green)}
.apcard{background:#fff;border-radius:calc(var(--su)*22);padding:calc(var(--su)*22) calc(var(--su)*26);margin-bottom:calc(var(--su)*14)}
.apcard.soft{background:var(--soft)}
.aprow{display:flex;align-items:center;gap:calc(var(--su)*16);font-size:calc(var(--su)*22)}
.aprow .v{margin-left:auto;font-weight:500;white-space:nowrap}
.aprow small{display:block;font-size:calc(var(--su)*17);color:var(--mut);margin-top:calc(var(--su)*3)}
/* a plan week as the app lays it out (the homepage's step 3 screen, docs/mockups/how-screens-2026-10-18.html) */
.apwk{display:flex;align-items:center;justify-content:space-between;margin:calc(var(--su)*20) 0 0;font-size:calc(var(--su)*22);color:var(--mut)}
.apwk span{color:var(--ink);font-weight:500}
.apday{font-size:calc(var(--su)*17);color:var(--mut);margin:calc(var(--su)*16) 0 calc(var(--su)*8)}
.apit{display:flex;align-items:center;gap:calc(var(--su)*16);background:#fff;border-radius:calc(var(--su)*18);padding:calc(var(--su)*14) calc(var(--su)*20);margin-bottom:calc(var(--su)*8);font-size:calc(var(--su)*20.5)}
.apit::before{content:'';flex:none;width:calc(var(--su)*11);height:calc(var(--su)*11);border-radius:50%;background:var(--btn)}
.apit.food::before{background:#E8A832}.apit.note::before{background:#9AA09B}
.apit small{display:block;font-size:calc(var(--su)*16);color:var(--mut);margin-top:calc(var(--su)*2)}
.apbtn{display:flex;align-items:center;justify-content:center;gap:calc(var(--su)*10);height:calc(var(--su)*72);border-radius:calc(var(--su)*22);background:var(--btn);color:#fff;font-size:calc(var(--su)*23);font-weight:500;transition:background .3s ease}
.apbtn.ghost{background:var(--soft);color:var(--green)}
.apbtn.done{background:var(--soft);color:var(--green-deep)}
.apchk{flex:none;width:calc(var(--su)*34);height:calc(var(--su)*34);border-radius:50%;border:calc(var(--su)*2.5) solid #C9CCC5;display:grid;place-items:center;transition:background .25s ease,border-color .25s ease}
.apchk svg{width:58%;height:58%;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.apchk.on{background:var(--btn);border-color:var(--btn)}
.apchk.on svg{opacity:1;transform:none}
.apbar{position:relative;height:calc(var(--su)*10);border-radius:9px;background:#E9EAE4;margin-top:calc(var(--su)*12)}
.apbar i{position:absolute;top:0;bottom:0;border-radius:9px;background:#CFE2DC}
.apbar b{position:absolute;top:50%;width:calc(var(--su)*18);height:calc(var(--su)*18);margin:calc(var(--su)*-9) 0 0 calc(var(--su)*-9);border-radius:50%;background:var(--btn);border:calc(var(--su)*3) solid #fff;box-shadow:0 0 0 1px #30796A55}
.apcmp{position:absolute;left:calc(var(--su)*14);right:calc(var(--su)*14);bottom:calc(var(--su)*48);height:calc(var(--su)*84);border-radius:calc(var(--su)*42);background:#fff;
  display:flex;align-items:center;gap:calc(var(--su)*14);padding:0 calc(var(--su)*10) 0 calc(var(--su)*24);font-size:calc(var(--su)*20);box-shadow:0 1px 0 #E3E4DE;z-index:8}
.apcmp .who{font-size:calc(var(--su)*17);font-weight:600;color:var(--green);line-height:1.1;white-space:nowrap}
.apcmp .tx{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:clip;direction:rtl;text-align:left}
.apcmp .tx span{direction:ltr;unicode-bidi:plaintext}
.apcmp .ph{color:#9AA09B}
.apcmp .snd{flex:none;width:calc(var(--su)*48);height:calc(var(--su)*48);border-radius:50%;background:#EAEAE3;display:grid;place-items:center;color:#666E68;font-size:calc(var(--su)*22);transition:background .25s ease,color .25s ease}
.apcmp .snd.on{background:var(--btn);color:#fff}
/* chat */
.apchat{position:absolute;left:0;right:0;top:calc(var(--su)*176);bottom:calc(var(--su)*136);display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(var(--su)*22);overflow:hidden}
.bub{max-width:82%;margin-top:calc(var(--su)*14);padding:calc(var(--su)*16) calc(var(--su)*20);border-radius:calc(var(--su)*24);font-size:calc(var(--su)*20.5);line-height:1.42}
.bub.me{margin-left:auto;background:var(--btn);color:#fff;border-bottom-right-radius:calc(var(--su)*8)}
.bub.co{background:#fff;border-bottom-left-radius:calc(var(--su)*8)}
.bub.sum{background:var(--soft);max-width:100%}
.bub .by{display:block;font-size:calc(var(--su)*15);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:calc(var(--su)*6)}
.bub .rd{display:block;margin-top:calc(var(--su)*8);font-size:calc(var(--su)*16);color:var(--mut)}
.bub .act{display:inline-flex;align-items:center;gap:calc(var(--su)*8);margin-top:calc(var(--su)*12);padding:calc(var(--su)*9) calc(var(--su)*18);border-radius:999px;background:var(--btn);color:#fff;font-size:calc(var(--su)*18);font-weight:500;transition:background .3s ease,color .3s ease}
.bub .act.done{background:var(--soft);color:var(--green-deep)}
.dots{display:inline-flex;gap:calc(var(--su)*6);padding:calc(var(--su)*6) 0}
.dots i{width:calc(var(--su)*9);height:calc(var(--su)*9);border-radius:50%;background:#B9BDB7;animation:wdots 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes wdots{0%,60%,100%{transform:none;opacity:.6}30%{transform:translateY(-35%);opacity:1}}
.wbars{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--su)*7) calc(var(--su)*12);align-items:center;margin-top:calc(var(--su)*12);font-size:calc(var(--su)*15);color:var(--ink2)}
.wbars i{height:calc(var(--su)*8);border-radius:9px;background:var(--btn)}

/* ── cards outside the phone (sizes in --cu) ──────────────────────────── */
.wcard{width:calc(var(--cu)*var(--w,1));background:#fff;border-radius:calc(var(--cu)*.05);padding:calc(var(--cu)*.052) calc(var(--cu)*.06);
  box-shadow:0 calc(var(--cu)*.07) calc(var(--cu)*.16) #1B24201f,0 1px 3px #1B242014;font-family:var(--font-sans);font-size:calc(var(--cu)*.043);line-height:1.42;color:var(--ink);text-align:left}
.wcard.soft{background:var(--soft)}
.wcard .ce{display:block;font-size:calc(var(--cu)*.031);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green);margin-bottom:calc(var(--cu)*.016)}
.wcard .ct{display:block;font-size:calc(var(--cu)*.058);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.wcard .cm{display:block;font-size:calc(var(--cu)*.034);color:var(--ink3);margin-top:calc(var(--cu)*.014)}
.wcard .crow{display:flex;align-items:center;gap:calc(var(--cu)*.03);padding:calc(var(--cu)*.022) 0;border-top:1px solid var(--line2)}
.wcard .crow:first-of-type{border-top:0}
.wcard .crow .v{margin-left:auto;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.wcard .cico{flex:none;width:calc(var(--cu)*.12);height:calc(var(--cu)*.12);border-radius:calc(var(--cu)*.03);background:var(--soft);display:grid;place-items:center;color:var(--green)}
.wcard .cico svg{width:58%;height:58%}
.wcard .chead{display:flex;align-items:center;gap:calc(var(--cu)*.035)}
.wcard .cchk{flex:none;width:calc(var(--cu)*.055);height:calc(var(--cu)*.055);border-radius:50%;border:2px solid #C9CCC5;display:grid;place-items:center;transition:background .25s ease,border-color .25s ease}
.wcard .cchk svg{width:62%;height:62%;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.wcard .cchk.on{background:var(--btn);border-color:var(--btn)}
.wcard .cchk.on svg{opacity:1;transform:none}
.wcard .cbtn{display:inline-flex;align-items:center;gap:calc(var(--cu)*.02);margin-top:calc(var(--cu)*.03);padding:calc(var(--cu)*.018) calc(var(--cu)*.04);border-radius:999px;background:var(--btn);color:#fff;font-size:calc(var(--cu)*.036);font-weight:600;transition:background .3s ease,color .3s ease}
.wcard .cbtn.done{background:var(--soft);color:var(--green-deep)}
.wcard .cbtn svg{width:1em;height:1em}
.wcard .cread{display:block;margin-top:calc(var(--cu)*.016);font-size:calc(var(--cu)*.031);color:var(--ink3)}
.wcard .cread b{font-weight:600;color:var(--ink2)}
.wcard.me{background:var(--btn);color:#fff;border-bottom-right-radius:calc(var(--cu)*.014)}
.wcard.me .ce{color:#D7EAE4}
.wcard .cbars{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--cu)*.016) calc(var(--cu)*.03);align-items:center;margin-top:calc(var(--cu)*.035);font-size:calc(var(--cu)*.031);color:var(--ink2)}
.wcard .cbars i{display:block;height:calc(var(--cu)*.018);border-radius:9px;background:var(--btn);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.wcard.on .cbars i,.wcard .cbars.on i{transform:scaleX(1)}
.wcard .cbars i:nth-of-type(2){transition-delay:.12s}.wcard .cbars i:nth-of-type(3){transition-delay:.24s}
.wchips{display:flex;flex-wrap:wrap;gap:calc(var(--cu)*.018);margin-top:calc(var(--cu)*.03)}
.wchips span{padding:calc(var(--cu)*.016) calc(var(--cu)*.032);border-radius:999px;border:1px solid var(--line);background:#fff;font-size:calc(var(--cu)*.034);font-weight:500;color:var(--ink2);white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease}
.wchips span.on{background:var(--btn);border-color:var(--btn);color:#fff}
.wchips.sm span{font-size:calc(var(--cu)*.03)}
/* a capture lifted out of the screen at a size you can read */
.wlift{position:absolute;background-repeat:no-repeat;border-radius:calc(var(--u)*.03);box-shadow:0 calc(var(--u)*.07) calc(var(--u)*.16) #1B242026,0 1px 3px #1B242014}
.wbig{font-family:var(--display);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--green);white-space:nowrap;font-size:calc(var(--u)*1.25)}

/* scene 1: the three sources */
.wsrc .cico{width:calc(var(--cu)*.15);height:calc(var(--cu)*.15)}
.wpulse{width:calc(var(--su)*230);height:calc(var(--su)*230);border-radius:50%;pointer-events:none}
.wpulse::before,.wpulse::after{content:'';position:absolute;inset:0;border-radius:50%;border:calc(var(--su)*3) solid var(--green);opacity:0}
.wpulse.on::before{animation:wpulse 1.8s cubic-bezier(.22,1,.36,1) infinite}
.wpulse.on::after{animation:wpulse 1.8s cubic-bezier(.22,1,.36,1) .6s infinite}
@keyframes wpulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* scene 2: the printed report, drawn */
.wpaper{width:calc(var(--cu)*.86);aspect-ratio:210/272;background:#FDFDFB;border-radius:calc(var(--cu)*.01);padding:calc(var(--cu)*.06) calc(var(--cu)*.06);
  box-shadow:0 calc(var(--cu)*.08) calc(var(--cu)*.16) #1B242026,0 1px 2px #1B24201f;font-family:var(--font-sans);color:#3B423E}
.wpaper .ph1{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #3B423E;padding-bottom:calc(var(--cu)*.02)}
.wpaper .ph1 b{font-size:calc(var(--cu)*.04);letter-spacing:.06em;font-weight:700}
.wpaper .ph1 span{font-size:calc(var(--cu)*.024);color:#7C827E;text-align:right;line-height:1.4}
.wpaper .pr{display:grid;grid-template-columns:1.5fr .8fr .5fr 1fr;gap:calc(var(--cu)*.012);padding:calc(var(--cu)*.0135) 0;border-bottom:1px solid #ECECE6;font-size:calc(var(--cu)*.027)}
.wpaper .pr.h{font-weight:700;color:#7C827E;font-size:calc(var(--cu)*.022);letter-spacing:.04em;text-transform:uppercase}
.wpaper .pr span:nth-child(2){font-weight:600;color:#1B2420}
.wpaper .pf{margin-top:calc(var(--cu)*.03);height:calc(var(--cu)*.012);width:60%;border-radius:4px;background:#ECECE6}
.wchart{display:block;width:100%;height:auto;margin-top:calc(var(--cu)*.03);overflow:visible}
.wchart text{font-family:var(--font-sans);font-size:11px;fill:var(--ink3)}
.wchart .band{fill:#E4EFEB}
.wchart .ln{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wchart .pt{fill:var(--green);stroke:#fff;stroke-width:3}
.wnote{display:inline-flex;align-items:center;gap:.4em;margin-top:calc(var(--cu)*.025);padding:calc(var(--cu)*.012) calc(var(--cu)*.028);border-radius:999px;background:var(--soft);color:var(--green-deep);font-size:calc(var(--cu)*.033);font-weight:600}

/* scene 3: you, not the average */
.wavg{position:relative;height:calc(var(--cu)*.2);margin-top:calc(var(--cu)*.05)}
.wavg .ax{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.wavg .bd{position:absolute;top:calc(50% - var(--cu)*.035);height:calc(var(--cu)*.07);border-radius:calc(var(--cu)*.035);transition:opacity .6s ease,transform .6s ease}
.wavg .bd.avg{left:6%;width:80%;background:#E2E3DC}
.wavg .bd.you{left:44%;width:22%;background:#9CC7BB}
.wavg.on .bd.avg{opacity:0;transform:scaleY(.4)}
.wavg .dt{position:absolute;top:50%;left:55%;width:calc(var(--cu)*.05);height:calc(var(--cu)*.05);margin:calc(var(--cu)*-.025) 0 0 calc(var(--cu)*-.025);border-radius:50%;background:var(--btn);border:3px solid #fff;box-shadow:0 0 0 1px #30796A66}
.wavg .lb{position:absolute;font-size:calc(var(--cu)*.03);font-weight:600;white-space:nowrap;transition:opacity .6s ease}
.wavg .lb.avg{left:6%;top:-2%;color:var(--ink3)}
.wavg .lb.you{left:44%;bottom:-6%;color:var(--green-deep)}
.wavg.on .lb.avg{opacity:0}
.wpat{display:grid;grid-template-columns:auto repeat(8,1fr);gap:calc(var(--cu)*.012);align-items:end;margin-top:calc(var(--cu)*.035);font-size:calc(var(--cu)*.028);color:var(--ink3)}
.wpat span{white-space:nowrap;padding-right:calc(var(--cu)*.012)}
.wpat i{display:block;border-radius:3px;background:#CFE2DC}
.wpat i.hi{background:var(--btn)}
.wpat .rowa i{height:calc(var(--cu)*.05)}
.wpat b{display:block;border-radius:3px;background:#C9D3E3}
.wpat b.hi{background:#E2B07A}
.wpat small{font-size:calc(var(--cu)*.024);text-align:center;color:var(--ink3)}
.wpat .lab{align-self:center}

/* scene 5: the week, a day to a row, morning and evening */
.wweek{display:grid;grid-template-columns:calc(var(--cu)*.09) 1fr 1fr;grid-auto-rows:auto;gap:calc(var(--cu)*.01);margin-top:calc(var(--cu)*.03)}
.wweek .dh{font-size:calc(var(--cu)*.028);font-weight:600;color:var(--ink3);padding-left:calc(var(--cu)*.012)}
.wweek .rh{font-size:calc(var(--cu)*.03);font-weight:600;color:var(--ink3);align-self:center}
.wweek .cell{height:calc(var(--cu)*.07);border-radius:calc(var(--cu)*.016);background:#F3F4EF}
.wweek .blk{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--cu)*.01);height:calc(var(--cu)*.07);border-radius:calc(var(--cu)*.016);background:var(--soft);border:1.5px solid #9CC7BB;padding:0 calc(var(--cu)*.016);
  font-size:calc(var(--cu)*.03);color:var(--green-deep);font-weight:600;white-space:nowrap;overflow:hidden;position:relative;z-index:1;transition:transform .8s cubic-bezier(.65,0,.35,1),background .4s ease,border-color .4s ease,box-shadow .4s ease}
.wweek .blk small{font-weight:500;color:var(--ink3);font-size:calc(var(--cu)*.026)}
.wweek .blk.hot{background:#fff;border-color:var(--btn);box-shadow:0 calc(var(--cu)*.015) calc(var(--cu)*.035) #1B24201f}
.wweek .blk.mv.on{transform:translateX(calc(100% + var(--cu)*.01))}
.wweek .blk.ease.on{background:#fff;border-color:var(--btn)}

/* scene 6: dinner ideas, the calendar */
.wrec{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--cu)*.02);margin-top:calc(var(--cu)*.03)}
.wrec div{border-radius:calc(var(--cu)*.03);background:#F3F4EF;overflow:hidden;font-size:calc(var(--cu)*.026);line-height:1.3;font-weight:600}
.wrec div i{display:block;aspect-ratio:1.2;background:var(--food)}
.wrec div span{display:block;padding:calc(var(--cu)*.016)}
.wrec div small{display:block;font-weight:500;color:var(--ink3)}
.wcal{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(var(--cu)*.012);margin-top:calc(var(--cu)*.03)}
.wcal div{display:flex;flex-direction:column;gap:calc(var(--cu)*.01);font-size:calc(var(--cu)*.026);color:var(--ink3);text-align:center;font-weight:600}
.wcal div b{display:block;font-size:calc(var(--cu)*.04);color:var(--ink);font-weight:500}
.wcal i{display:block;height:calc(var(--cu)*.06);border-radius:calc(var(--cu)*.012);background:var(--btn);opacity:0;transform:translateY(-40%) scale(.9);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.wcal i.e{background:transparent}
.wcal.on i{opacity:1;transform:none}
.wcal.on div:nth-child(2) i{transition-delay:.08s}.wcal.on div:nth-child(3) i{transition-delay:.16s}.wcal.on div:nth-child(4) i{transition-delay:.24s}
.wcal.on div:nth-child(5) i{transition-delay:.32s}.wcal.on div:nth-child(6) i{transition-delay:.4s}

/* scene 7: the camera */
.wcam{position:absolute;inset:0;background:#141716;overflow:hidden}
.wcam svg.photo{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.wcam .vf{position:absolute;left:10%;right:10%;top:22%;bottom:30%;pointer-events:none}
.wcam .vf i{position:absolute;width:12%;aspect-ratio:1;border:calc(var(--su)*4) solid #FFFFFFd9}
.wcam .vf i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:calc(var(--su)*16)}
.wcam .vf i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:calc(var(--su)*16)}
.wcam .vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:calc(var(--su)*16)}
.wcam .vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:calc(var(--su)*16)}
.wcam .top{position:absolute;left:0;right:0;top:calc(var(--su)*96);text-align:center;color:#fff;font-size:calc(var(--su)*22);font-weight:600}
.wcam .top small{display:block;font-weight:500;font-size:calc(var(--su)*17);color:#FFFFFFb3;margin-top:calc(var(--su)*4)}
.wcam .bar{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(#14171600,#141716cc 30%,#141716)}
.wcam .shut{position:absolute;left:50%;bottom:calc(var(--su)*70);width:calc(var(--su)*112);height:calc(var(--su)*112);margin-left:calc(var(--su)*-56);border-radius:50%;border:calc(var(--su)*6) solid #fff;padding:calc(var(--su)*6)}
.wcam .shut::after{content:'';display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.wcam .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none}
.wcam .flash.on{animation:wflash .5s ease-out both}
@keyframes wflash{0%{opacity:.95}100%{opacity:0}}
.wcam .scan{position:absolute;left:4%;right:4%;top:20%;height:calc(var(--su)*4);background:linear-gradient(90deg,#9CE0CF00,#C9F2E6,#9CE0CF00);box-shadow:0 0 calc(var(--su)*24) #9CE0CF;opacity:0;transition:opacity .3s ease}
.wcam .scan.on{opacity:1}
.wcam .pts i{position:absolute;width:calc(var(--su)*9);height:calc(var(--su)*9);margin:calc(var(--su)*-4.5) 0 0 calc(var(--su)*-4.5);border-radius:50%;background:#E9FFF8;box-shadow:0 0 calc(var(--su)*10) #6FD3BA;opacity:0;transform:scale(0);transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.wcam .pts.on i{opacity:.95;transform:none}
.wcam .tag{position:absolute;padding:calc(var(--su)*9) calc(var(--su)*16);border-radius:999px;background:#FFFFFFeb;color:var(--ink);font-size:calc(var(--su)*19);font-weight:600;white-space:nowrap;transform:translate(-50%,-50%) scale(.85);opacity:0;
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 calc(var(--su)*6) calc(var(--su)*16) #0000004d}
.wcam .tag small{font-weight:500;color:var(--ink3)}
.wcam .tag.on{opacity:1;transform:translate(-50%,-50%)}
.wcam .tag::before{content:'';display:inline-block;width:calc(var(--su)*10);height:calc(var(--su)*10);border-radius:50%;background:var(--btn);margin-right:calc(var(--su)*8);vertical-align:.08em}

/* ── narrow: the phone sits higher, the cards come over it ────────────── */
@media(max-width:879.98px){
  .walk-on .wstage::before{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6)}
}

/* ══ the opening ═════════════════════════════════════════════════════════
   Text by default. intro.js pins it and plays it: what the app is for, the
   pieces of a scattered health life around it, the message, the swirl into
   the phone, the Twin, the home screen. */
.intro{position:relative;z-index:1}
.ehero{position:relative;max-width:980px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(22px,5vw,72px) 8px;text-align:center}
.ehero h1{margin:0 auto 20px;max-width:13em;text-wrap:balance}
.ehero .lead{margin:0 auto;max-width:31em}
.ehero .srcnote{margin-top:14px}
.ehint{display:inline-flex;align-items:center;gap:8px;margin:34px 0 0;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--brand-deep,#245F55)}
.ehint svg{width:16px;height:16px;animation:ehint 2.2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes ehint{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ehint svg{animation:none}}
.efix{position:relative;padding:56px clamp(22px,5vw,72px) 40px;text-align:center}
.emsg{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(28px,4.2vw,56px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.emsg .l1,.emsg .l2{display:block}
.emsg .l2{color:var(--ink2)}
.ewd{color:var(--green)}
.intro-on .ewd{white-space:nowrap}
.enone{margin:22px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.2;color:var(--ink)}
.efield,.eph,.ecv{display:none}

.intro-on .intro{height:540svh;z-index:2}
/* the first scene starts under the opening's last screen, so the phone hands over in place */
.intro-on #w1{margin-top:-100svh;position:relative;z-index:1}
.intro-on .intro .epin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper)}
.intro-on .intro.done .epin{background:none}
.intro-on .ehero{position:absolute;left:0;right:0;top:53%;transform:translateY(-50%);padding:0 clamp(22px,5vw,72px);z-index:5}
.intro-on .efix{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);padding:0 clamp(22px,5vw,72px);z-index:5;pointer-events:none}
.intro-on .emsg .l1,.intro-on .emsg .l2,.intro-on .enone{opacity:0;will-change:transform,opacity}
.intro-on .enone{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-50%);font-size:clamp(28px,3.6vw,48px)}
.intro-on .efield{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.intro-on .ecv{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.intro-on .eph{display:block;opacity:0;z-index:3}
.intro-on .eph .ehome{opacity:0}
.intro-on .eph .wh-figure{visibility:hidden}

/* ══ the ending ══════════════════════════════════════════════════════════
   Straight after the last scene: the green 1, the name, the line, the email
   field and when it opens. ending.js lets them come in one after the other. */
.ending{position:relative;z-index:1}
.efin{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100svh;box-sizing:border-box;padding:96px clamp(22px,5vw,72px) 72px}
.eone{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(120px,24vh,260px);line-height:.8;letter-spacing:-.06em;color:var(--green)}
.ewm{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(46px,7vw,96px);line-height:1;letter-spacing:.01em;white-space:nowrap}
.ewm i{font-style:normal;color:var(--green)}
.eadd{display:flex;flex-direction:column;align-items:center;margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.08}
.eadd>span{display:block}
.eadd .e1{font-size:clamp(22px,2.4vw,32px);color:var(--ink2);letter-spacing:0}
.eadd .e2{margin-top:6px;font-size:clamp(36px,4.6vw,62px);color:var(--ink)}
.eadd .e3{margin:10px 0 8px;font-size:clamp(20px,2vw,26px);color:var(--ink3);letter-spacing:0}
.eadd .ewm{font-weight:500}
.eback{margin:26px 0 0;font-size:14.5px}
.eback a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.eback a:hover{color:var(--brand-deep,#245F55)}
.efin h2{margin:clamp(14px,2.4vh,26px) 0 0;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.02em}
.efin .lead{margin:16px auto 0;max-width:30em;text-align:center}
.etag{margin:14px 0 0;font-size:clamp(14px,1.2vw,16px);font-weight:600;color:var(--green)}
.ejoin{display:flex;gap:8px;width:min(460px,100%);margin-top:26px}
.ejoin input{flex:1;min-width:0;font:500 16px var(--font-sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.ejoin input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.ejoin button{flex:none;font:600 15px var(--font-sans);color:#fff;background:var(--brand);border:0;border-radius:8px;padding:0 20px;cursor:pointer;transition:background .16s ease}
.ejoin button:hover{background:var(--brand-deep)}
.estore{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 0;font-size:14.5px;font-weight:600;color:var(--ink2)}
.sts{display:flex;gap:8px}.st{width:38px;height:38px;border-radius:23%;display:grid;place-items:center;color:#fff;box-shadow:0 1px 2px #1b242014,0 6px 14px -6px #1b242040}
.st svg{width:64%;height:64%}.st.as{background:linear-gradient(180deg,#1BC2FB,#1A73F0)}.st.gp{background:#fff;box-shadow:inset 0 0 0 1px #1b24201f,0 1px 2px #1b242014,0 6px 14px -6px #1b242040}.st.gp svg{width:70%;height:70%;margin-left:6%}
@media(max-width:479.98px){.estore{flex-direction:column;gap:10px}}
@media(max-width:479.98px){.ejoin{flex-direction:column}.ejoin button{padding:14px 20px}}
@media(max-height:700px){.efin h2{font-size:clamp(30px,4vw,44px)}.efin .lead{font-size:15px}}
.fin-on .efin>*{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--n,0)*60ms)}
.fin-on .efin>.eadd{opacity:1;transform:none}
.fin-on .eadd>span{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*220ms)}
.fin-on .eadd>.ewm{transform:scale(.86)}
.fin-on .efin.in .eadd>span{opacity:1;transform:none}
.fin-on .efin>:not(.eadd){transition-delay:calc(var(--n,0)*60ms + 700ms)}
.fin-on .efin.in>*{opacity:1;transform:none}

/* the pieces: generic app icons, store cards, and the paper of a health life */
.ep{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity;opacity:0;visibility:hidden;font-family:var(--font-sans);--k:1}
.eic{display:flex;flex-direction:column;align-items:center;gap:calc(6px*var(--k));width:calc(78px*var(--k))}
.eic .sq{position:relative;width:calc(62px*var(--k));height:calc(62px*var(--k));border-radius:28%;background:linear-gradient(160deg,var(--a),var(--b));display:grid;place-items:center;
  box-shadow:0 calc(8px*var(--k)) calc(18px*var(--k)) #1B242029,inset 0 1px 0 #FFFFFF40}
.eic .sq svg{width:56%;height:56%;color:#fff}
.eic .nm{font-size:calc(11.5px*var(--k));font-weight:600;color:var(--ink);white-space:nowrap}
.eic .bd,.ecard .bd{position:absolute;right:calc(-7px*var(--k));top:calc(-7px*var(--k));min-width:calc(22px*var(--k));height:calc(22px*var(--k));padding:0 calc(6px*var(--k));border-radius:999px;background:#E5484D;color:#fff;
  font-size:calc(12px*var(--k));font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 calc(2px*var(--k)) var(--paper)}
.ecard{display:flex;align-items:center;gap:calc(12px*var(--k));width:calc(250px*var(--k));padding:calc(12px*var(--k));border-radius:calc(18px*var(--k));background:#fff;box-shadow:0 calc(12px*var(--k)) calc(28px*var(--k)) #1B242024}
.ecard .sq{position:relative;flex:none;width:calc(54px*var(--k));height:calc(54px*var(--k));border-radius:28%;background:linear-gradient(160deg,var(--a),var(--b));display:grid;place-items:center}
.ecard .sq svg{width:56%;height:56%;color:#fff}
.ecard .tx{flex:1;min-width:0;line-height:1.25}
.ecard .tx b{display:block;font-size:calc(14px*var(--k));font-weight:700;color:var(--ink)}
.ecard .tx small{display:block;font-size:calc(11.5px*var(--k));color:var(--ink3)}
.ecard .tx i{display:block;white-space:nowrap;font-style:normal;font-size:calc(11px*var(--k));color:#E0A030;letter-spacing:.05em;margin-top:calc(2px*var(--k))}
.ecard .tx i span{color:var(--ink3);letter-spacing:0;margin-left:.3em}
.ecard .get{flex:none;padding:calc(6px*var(--k)) calc(16px*var(--k));border-radius:999px;background:#EEF0EC;color:#2F6FD6;font-size:calc(13px*var(--k));font-weight:700}
.ebn{width:calc(270px*var(--k));padding:calc(11px*var(--k)) calc(13px*var(--k));border-radius:calc(16px*var(--k));background:#FFFFFFe6;box-shadow:0 calc(10px*var(--k)) calc(26px*var(--k)) #1B242024;display:flex;gap:calc(10px*var(--k));align-items:center}
.ebn .sq{flex:none;width:calc(34px*var(--k));height:calc(34px*var(--k));border-radius:24%;background:linear-gradient(160deg,var(--a),var(--b));display:grid;place-items:center}
.ebn .sq svg{width:58%;height:58%;color:#fff}
.ebn .tx{font-size:calc(12px*var(--k));line-height:1.3;color:var(--ink)}
.ebn .tx b{display:block;font-size:calc(12.5px*var(--k))}
.ebn .tx small{color:var(--ink3);font-size:calc(11px*var(--k));margin-left:.4em;font-weight:500}
.epap{background:#FDFDFA;box-shadow:0 calc(10px*var(--k)) calc(24px*var(--k)) #1B242026;padding:calc(12px*var(--k)) calc(14px*var(--k));color:#3B423E;font-size:calc(12px*var(--k))}
.epap.lined{background:#FFFEF8 repeating-linear-gradient(#FFFEF8 0 calc(19px*var(--k)),#DCE6F0 calc(19px*var(--k)) calc(20px*var(--k)));width:calc(170px*var(--k));padding-top:calc(16px*var(--k));
  font-size:calc(15px*var(--k));line-height:calc(20px*var(--k));color:#2B4C8C;font-style:italic;font-weight:500;border-left:calc(3px*var(--k)) solid #F0B9B9}
.epap.sticky{background:#FBE68A;width:calc(130px*var(--k));min-height:calc(110px*var(--k));font-size:calc(16px*var(--k));line-height:1.25;color:#4A3F12;font-weight:600;font-style:italic;box-shadow:0 calc(12px*var(--k)) calc(22px*var(--k)) #1B242029}
.epap.rep{width:calc(150px*var(--k));aspect-ratio:210/272;padding:calc(12px*var(--k))}
.epap.rep b{display:block;font-size:calc(9px*var(--k));letter-spacing:.06em;border-bottom:calc(1.5px*var(--k)) solid #3B423E;padding-bottom:calc(4px*var(--k));margin-bottom:calc(6px*var(--k))}
.epap.rep i{display:flex;justify-content:space-between;gap:calc(6px*var(--k));height:calc(11px*var(--k));align-items:center}
.epap.rep i::before,.epap.rep i::after{content:'';height:calc(4px*var(--k));border-radius:2px;background:#D9DBD5}
.epap.rep i::before{width:55%}.epap.rep i::after{width:22%;background:#B9BDB7}
.epap.photo{transform:none;border:calc(7px*var(--k)) solid #fff;border-bottom-width:calc(22px*var(--k));padding:0;background:#E8E3D6;width:calc(150px*var(--k));aspect-ratio:3/4;overflow:hidden}
.epap.photo .rep{width:100%;height:100%;transform:rotate(8deg) scale(1.15) translateY(4%);box-shadow:none;background:#F7F5EE}
.epap.list{width:calc(150px*var(--k));font-size:calc(13px*var(--k));line-height:1.7}
.epap.list b{display:block;font-size:calc(11px*var(--k));letter-spacing:.06em;color:#7C827E;margin-bottom:calc(2px*var(--k))}
.epap.list s{color:#9AA09B}
.epap.plan{width:calc(180px*var(--k));padding:calc(10px*var(--k))}
.epap.plan b{display:block;font-size:calc(10px*var(--k));letter-spacing:.05em;margin-bottom:calc(6px*var(--k))}
.epap.plan .g{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(3px*var(--k))}
.epap.plan .g i{height:calc(15px*var(--k));border-radius:2px;background:#EFEFE9}
.epap.plan .g i:nth-child(3n){background:#F5D9C4}.epap.plan .g i:nth-child(5n){background:#D8E8DF}
.efile{display:flex;flex-direction:column;align-items:center;gap:calc(6px*var(--k));width:calc(118px*var(--k))}
.efile .doc{position:relative;width:calc(52px*var(--k));height:calc(66px*var(--k));border-radius:calc(5px*var(--k));background:#fff;box-shadow:0 calc(6px*var(--k)) calc(14px*var(--k)) #1B242026;overflow:hidden}
.efile .doc::after{content:'';position:absolute;right:0;top:0;width:calc(14px*var(--k));height:calc(14px*var(--k));background:linear-gradient(225deg,var(--paper) 50%,#E2E3DC 50%)}
.efile .doc span{position:absolute;left:0;right:0;bottom:calc(10px*var(--k));text-align:center;color:#fff;font-size:calc(10px*var(--k));font-weight:800;letter-spacing:.04em;padding:calc(2px*var(--k)) 0;background:var(--c)}
.efile .nm{font-size:calc(11.5px*var(--k));font-weight:600;color:var(--ink);text-align:center;line-height:1.25;max-width:100%}
.efold{width:calc(70px*var(--k));height:calc(54px*var(--k));border-radius:calc(6px*var(--k));background:linear-gradient(#7FB2E5,#5B95D1);position:relative;box-shadow:0 calc(6px*var(--k)) calc(14px*var(--k)) #1B242022}
.efold::before{content:'';position:absolute;left:0;top:calc(-7px*var(--k));width:45%;height:calc(12px*var(--k));border-radius:calc(5px*var(--k)) calc(5px*var(--k)) 0 0;background:#6FA3DA}
.echat{width:max-content;min-width:calc(150px*var(--k));max-width:calc(240px*var(--k));padding:calc(10px*var(--k)) calc(12px*var(--k));border-radius:calc(16px*var(--k));background:#fff;box-shadow:0 calc(10px*var(--k)) calc(24px*var(--k)) #1B242024}
.echat small{display:block;font-size:calc(11px*var(--k));font-weight:700;color:var(--ink3);margin-bottom:calc(5px*var(--k))}
.echat p{margin:0;display:inline-block;padding:calc(7px*var(--k)) calc(11px*var(--k));border-radius:calc(14px*var(--k));background:#ECEDE8;font-size:calc(13.5px*var(--k));color:var(--ink)}
.echat p.g{background:#DCF3D9}
.echat .av{display:inline-grid;place-items:center;width:calc(20px*var(--k));height:calc(20px*var(--k));border-radius:50%;background:#C7B8E8;color:#fff;font-size:calc(9px*var(--k));font-weight:800;margin-right:calc(6px*var(--k));vertical-align:middle}
.evoice{display:flex;align-items:center;gap:calc(10px*var(--k));width:calc(210px*var(--k));padding:calc(10px*var(--k)) calc(14px*var(--k));border-radius:999px;background:#fff;box-shadow:0 calc(10px*var(--k)) calc(24px*var(--k)) #1B242024;font-size:calc(12px*var(--k));color:var(--ink2);font-weight:600}
.evoice .pl{flex:none;width:calc(26px*var(--k));height:calc(26px*var(--k));border-radius:50%;background:#E5484D;display:grid;place-items:center}
.evoice .pl::after{content:'';border-left:calc(8px*var(--k)) solid #fff;border-top:calc(5px*var(--k)) solid transparent;border-bottom:calc(5px*var(--k)) solid transparent;margin-left:calc(2px*var(--k))}
.evoice .wv{flex:1;height:calc(20px*var(--k));background:repeating-linear-gradient(90deg,#B9BDB7 0 calc(2px*var(--k)),transparent calc(2px*var(--k)) calc(5px*var(--k)));-webkit-mask:linear-gradient(#000,#000) center/100% 40% no-repeat,radial-gradient(circle,#000 30%,transparent 31%) 0 0/calc(5px*var(--k)) calc(9px*var(--k));
  mask:repeating-linear-gradient(90deg,#000 0 calc(10px*var(--k)),#0006 calc(10px*var(--k)) calc(18px*var(--k)))}
.ebib{width:calc(150px*var(--k));padding:calc(10px*var(--k));border-radius:calc(6px*var(--k));background:#fff;border-top:calc(14px*var(--k)) solid #E5484D;box-shadow:0 calc(10px*var(--k)) calc(22px*var(--k)) #1B242026;text-align:center;font-family:var(--display)}
.ebib b{display:block;font-size:calc(44px*var(--k));font-weight:800;line-height:1;letter-spacing:-.02em;color:#1B2420}
.ebib small{font-size:calc(10px*var(--k));font-weight:700;letter-spacing:.1em;color:#7C827E}
.ebib::before,.ebib::after{content:'';position:absolute;top:calc(-8px*var(--k));width:calc(7px*var(--k));height:calc(7px*var(--k));border-radius:50%;background:#C9CCC5}
.ebib::before{left:calc(10px*var(--k))}.ebib::after{right:calc(10px*var(--k))}
.etab{width:calc(250px*var(--k));border-radius:calc(10px*var(--k));background:#fff;box-shadow:0 calc(10px*var(--k)) calc(24px*var(--k)) #1B242024;overflow:hidden}
.etab .t{display:flex;align-items:center;gap:calc(6px*var(--k));padding:calc(7px*var(--k)) calc(10px*var(--k));background:#E9EAE5;font-size:calc(11.5px*var(--k));color:var(--ink);font-weight:600;white-space:nowrap}
.etab .t i{width:calc(12px*var(--k));height:calc(12px*var(--k));border-radius:3px;background:#F2B04A;flex:none}
.etab .b{padding:calc(10px*var(--k))}
.etab .b span{display:block;height:calc(6px*var(--k));border-radius:3px;background:#E9EAE5;margin-top:calc(6px*var(--k))}
.etab .b span:first-child{height:calc(10px*var(--k));width:80%;background:#D3D6CF;margin:0}
.etab .b span:nth-child(3){width:70%}
.eshot{width:calc(96px*var(--k));aspect-ratio:9/19;border-radius:calc(14px*var(--k));background:#fff;box-shadow:0 calc(10px*var(--k)) calc(24px*var(--k)) #1B242026;border:calc(3px*var(--k)) solid #1B2420;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4px*var(--k))}
.eshot b{font-size:calc(19px*var(--k));font-weight:700;color:var(--ink)}
.eshot small{font-size:calc(9px*var(--k));color:var(--ink3);font-weight:600}
.eshot i{width:60%;height:calc(26px*var(--k));border-radius:3px;background:linear-gradient(90deg,#EEE 0,#EEE 20%,#7AB 20%,#7AB 70%,#EEE 70%)}
.exls{--c:#1E7145}.epdf{--c:#D93C3C}

/* states set by the scroll (data-on) */
.apcmp .ph.on,.apcmp .typed.on{display:none}
.wsb.on b,.wsb.on svg{color:#fff}
.wsb svg{color:var(--ink)}
.whome.on{background:#fff}
.wcam .vf{transition:opacity .2s ease}
.wcam .vf.on{opacity:0}
.aprow.on{background:var(--soft)}
.apchk{background:transparent}
.apchk.wpk{width:calc(var(--su)*40);height:calc(var(--su)*40)}.apchk.wpk:not(.on){background:var(--app)}
.apchk svg,.cchk svg{color:#fff}
.bub .act{position:relative}
.walk-on .wbeat{display:block}
@media(min-width:1440px){.walk-on .wbeat{display:none}}
@media(max-width:359.98px){.walk-on .wbeat{display:none}}

/* biological age next to the person's own age, two plain numbers */
.wages{display:flex;gap:calc(var(--cu)*.07);margin-top:calc(var(--cu)*.02)}
.wages span{display:flex;flex-direction:column;font-size:calc(var(--cu)*.03);color:var(--ink3)}
.wages b{font-family:var(--display);font-weight:500;font-size:calc(var(--cu)*.11);line-height:1.05;letter-spacing:-.03em;color:var(--green)}
.wages span+span b{color:var(--ink)}

/* Shared A waitlist tagline remains readable on the walkthrough green panel. */
.wl .small{color:rgba(255,255,255,.88)}

/* Static coach conversation when scroll animation is unavailable. */
html:not(.walk-on) .still .wgrow{grid-template-rows:1fr}
html:not(.walk-on) .still .wgrow>div>*{opacity:1;transform:none}
/* the still chat shows the finished exchange: no typing dots, no draft in the field */
html:not(.walk-on) .still .wgrow[data-off],html:not(.walk-on) .still .apcmp .typed{display:none}
/* a narrow header gives the chapter name up to three short lines rather than cutting it off
   ("The Twin takes its place" needs three at 390, where the name has 85px) */
@media(min-width:360px) and (max-width:879.98px){.walk-on .wbeat{flex:1 1 auto;display:flex;align-items:center;white-space:normal;line-height:1.12}.walk-on .wbeat>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}

/* The assembled neutral Twin continues into the app; no old body or green disk. */
.whome-ui{position:absolute;inset:0;background:var(--app);font-family:var(--font-sans);color:var(--ink2);font-size:calc(var(--su)*26)}
.wh-nav{position:absolute;top:5.2%;left:5%;right:5%;display:flex;gap:26%;align-items:center}.wh-nav b{font-weight:400;white-space:nowrap}
.wh-report{position:absolute;left:4%;right:4%;top:10%;height:4.2%;border:1px solid #DDE2D9;border-radius:calc(var(--su)*15);display:flex;align-items:center;justify-content:center;gap:calc(var(--su)*10);background:#fff;font-size:calc(var(--su)*22);white-space:nowrap}.wh-report small{font-size:calc(var(--su)*13);color:var(--mut);text-transform:uppercase}
.wh-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#DDE3DA;stroke-width:1.5}
.wh-figure{position:absolute;left:20%;top:23%;width:60%;height:54%;object-fit:contain}
.wh-hub{position:absolute;left:var(--hx);top:var(--hy);transform:translate(-50%,-50%);width:16%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--su)*4);font-size:calc(var(--su)*17);line-height:1.2;text-transform:uppercase;letter-spacing:.035em;background:#E5EEEB;color:#58665F}
.wh-add{background:transparent;border:1px dashed #CDD8CF;font-size:calc(var(--su)*28)}
.wh-ask{position:absolute;bottom:11.7%;left:0;right:0;text-align:center;color:var(--green);font-size:calc(var(--su)*24);font-weight:500}
.wh-compose{position:absolute;bottom:4%;left:3%;right:3%;height:6%;border-radius:calc(var(--su)*40);border:1px solid #DDE2D9;background:#fff;display:flex;align-items:center;gap:calc(var(--su)*18);padding:0 calc(var(--su)*18);font-size:calc(var(--su)*23)}.wh-compose span:nth-child(2){color:#92998F}.wh-compose b{margin-left:auto;font-weight:400;color:var(--green)}


/* Owner comparison: the app's circular orbit, shared with the revised homepage. */
.wh-ring{inset:auto;left:0;top:42.02%;width:100%;height:auto;aspect-ratio:1;transform:translateY(-50%);stroke:#B7CEC4;stroke-width:1.5}
.wh-ring .wh-disc{fill:#E5EEEB;stroke:none}
/* The app's Home geometry (OL1 src/ui/mockup/geometry.ts, owner scale 0.85 of 2026-10-11): ring radius
   165, hubs 32, disc 177 and the figure 153 tall, on a 412 point screen. Here one app point is 1.5 capture
   pixels (618 wide), so the ring is 247.5, the hubs 96 across (15.534%) and the figure 229.5 tall, centred
   on the ring; the box below is twin-app-body.webp with its transparent margin. The ring's middle (42.02%),
   the title row (10.42%) and the morning report (13.03% to 17.14%) are where the app's own Home capture
   (assets/a/how-twin.webp, the start page's first phone) has them. */
.wh-nav{top:10.42%;transform:translateY(-50%)}
.wh-report{top:13.03%;height:4.11%;left:5%;right:5%;font-size:calc(var(--su)*20.5);justify-content:flex-start;padding-left:calc(var(--su)*21)}
.wh-report::after{content:"\2304";position:absolute;right:calc(var(--su)*24);top:44%;transform:translateY(-50%);font-size:calc(var(--su)*17);color:var(--mut)}
.wh-nav b::before{content:"\2303";margin-right:.4em;font-size:.85em}.wh-report small{font-size:calc(var(--su)*19);letter-spacing:.02em}
/* type sizes as the capture sets them, measured against its width (the drawn screen had them 20 to 35% larger) */
/* the message bar is the app's own, cut from the Home capture (assets/a/how-twin.webp, 660 wide, its top
   at 4.5% of the screen): its bar starts 1151 capture pixels down, so it lands on this box exactly */
.wh-compose{border:0;background:url(../assets/a/how-twin.webp?v=1019b) no-repeat calc(var(--su)*-14) calc(var(--su)*-1151.1)/calc(var(--su)*618) auto;color:transparent}
.wh-compose *{visibility:hidden}
.whome-ui{font-size:calc(var(--su)*20)}.wh-hub{font-size:calc(var(--su)*12.5)}.wh-add{font-size:calc(var(--su)*24)}.wh-ask{font-size:calc(var(--su)*21.5)}.wh-compose{font-size:calc(var(--su)*18.5)}
.wh-figure{left:40.174%;top:32.757%;width:19.762%;height:18.122%;object-fit:contain}
.wh-hub{width:15.534%}
/* every message bar where the captures have it once lifted above the home indicator (14 in from
   the sides, 84 tall, 48 above the screen's bottom edge, in capture pixels) */
.wh-compose{left:calc(var(--su)*14);right:calc(var(--su)*14);bottom:calc(var(--su)*48);height:calc(var(--su)*84);border-radius:calc(var(--su)*42)}

/* The two pieces lifted out of the screen (morning report, the coach's card) are drawn here rather than
   cut from the 618 px captures, which turned soft once enlarged 1.18 to 1.24 times. walk.js still places
   them by their crop (data-crop); every size below is the capture's own, as a share of the crop's width. */
.wlift.drawn{container-type:inline-size;background-image:none!important;background-color:#F2F3EE;overflow:hidden;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.wl-rep{position:absolute;left:2.4%;right:2.4%;top:5.7%;height:77.1%;display:flex;align-items:center;gap:2.2cqw;padding-left:3.8cqw;background:#fff;border:1px solid #DDE2D9;border-radius:2.9cqw;font-size:3.7cqw;color:var(--ink);white-space:nowrap}
.wl-rep small{font-size:3.2cqw;letter-spacing:.02em;text-transform:uppercase;color:#8A908B}
.wl-rep::after{content:"\2304";position:absolute;right:4.6cqw;top:42%;transform:translateY(-50%);font-size:3.1cqw;color:#8A908B}
.wl-co{position:absolute;left:0;right:.9%;top:4.5%;bottom:1.5%;background:#E6EEEB;border-radius:3.6cqw}
.wl-co span{position:absolute;transform:translateY(-50%);white-space:nowrap}
.wl-co .h{left:4.03cqw;top:21.5%;font-size:3.36cqw;letter-spacing:.02em;text-transform:uppercase;color:#3A8273}
.wl-co::after{content:"\2304";position:absolute;right:5.2cqw;top:22%;transform:translateY(-50%);font-size:3.4cqw;color:#3A8273}
.wl-co .b{left:7.9cqw;top:48.5%;font-size:4.48cqw;color:var(--ink)}
.wl-co .b::before{content:"\2022";position:absolute;left:-3.1cqw;color:var(--ink)}
.wl-co .a{left:4.03cqw;top:78%;font-size:3.94cqw;font-weight:600;color:#2F7A6B}

/* The coach picker, drawn (18 Oct): the capture s-picker.webp had its message bar 6% small and its title
   row 26 pixels higher than the Home before it. Sizes are the app's (CoachSelector.tsx, one point = 1.5
   capture pixels); the rows stand where the capture had them, so the taps keep their places. */
.wpk-hd{position:absolute;left:calc(var(--su)*21);right:calc(var(--su)*21);top:calc(4.5% + var(--su)*348);transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center}
.wpk-hd span{font-size:calc(var(--su)*18);font-weight:500;letter-spacing:calc(var(--su)*.75);text-transform:uppercase;color:#858B84}
.wpk-hd b{font-size:calc(var(--su)*19.5);font-weight:500;color:#454541}
.wpk-n{position:absolute;left:calc(var(--su)*21);top:calc(4.5% + var(--su)*387);transform:translateY(-50%);margin:0;font-size:calc(var(--su)*18);color:#858B84}
.wpk-l{position:absolute;left:calc(var(--su)*21);right:calc(var(--su)*21);top:calc(4.5% + var(--su)*411);margin:0;padding:0;list-style:none}
.wpk-l li{height:calc(var(--su)*84);display:flex;align-items:center;gap:calc(var(--su)*21)}
.wpk-l li>div{min-width:0}
.wpk-l .apchk{width:calc(var(--su)*27);height:calc(var(--su)*27);border-width:calc(var(--su)*2.25);border-color:#D9DAD3}
.wpk-l .apchk.on{border-color:var(--btn)}
.wpk-l b{display:block;font-size:calc(var(--su)*21);font-weight:500;line-height:1.3;color:#1F211E}
.wpk-l small{display:block;margin-top:calc(var(--su)*1.5);font-size:calc(var(--su)*18);line-height:1.3;color:#8E918B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "3 coaches" replaces the bar's own "Coaches" once three are picked */
.wpick .wh-compose .wpk-c{visibility:visible;position:absolute;left:calc(var(--su)*6);width:calc(var(--su)*300);top:50%;transform:translateY(-50%);background:#fff;padding:calc(var(--su)*6) 0 calc(var(--su)*6) calc(var(--su)*10);
  display:flex;align-items:baseline;gap:calc(var(--su)*16);font-size:calc(var(--su)*18.5);white-space:nowrap;opacity:0;transition:opacity .25s ease}
.wpick .wh-compose .wpk-c *{visibility:visible}
.wpick .wh-compose .wpk-c b{margin-left:0;font-weight:600;letter-spacing:-.01em;color:var(--green)}
.wpick .wh-compose .wpk-c small{font-size:.8em;margin-left:.2em}
.wpick .wh-compose .wpk-c span{color:#92998F}
.wpick .wh-compose .wpk-c.on{opacity:1}