/* Five hero directions for Unblurred (13 Oct 2026). Built on site.css tokens and components.
   Shared: a calmer nav (14px, 36px controls, 12px radius), a light phone frame, the type scale.
   Each direction adds one product image, one headline treatment and one story element in the nav. */
body{background:var(--surface)}
.d-page{overflow-x:clip}

/* ---------- nav: smaller, quieter, one story element each ---------- */
.dn{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.dn-bar{pointer-events:auto;position:relative;display:flex;align-items:center;gap:20px;height:56px;padding:0 10px 0 20px;border-radius:999px;background:var(--tabbar);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--shadow-tabbar);width:min(860px,100%)}
.dn-logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.dn-logo .mark{height:17px}
.dn-links{display:flex;align-items:center;gap:2px;margin:0 auto}
.dn-links a{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--radius-control);font:500 14px/20px var(--font-sans);color:var(--ink-2);text-decoration:none;transition:color .16s ease,background-color .16s ease}
.dn-links a.on{color:var(--ink);background:var(--ink-06)}
@media (hover:hover) and (pointer:fine){.dn-links a:hover{color:var(--ink)}}
.dn-cta{flex:none;height:36px;padding:0 14px;border-radius:var(--radius-control);display:inline-flex;align-items:center;gap:6px;font:600 14px/20px var(--font-sans);text-decoration:none;color:var(--on-ink);background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,253,250,.16),0 4px 12px rgba(37,11,71,.16);transition:transform 160ms var(--ease-out)}
.dn-cta:active{transform:scale(.97);transition-duration:100ms}

/* story element 1: the app's stage bar fills as you read */
.dn-stages{display:flex;gap:3px;width:56px}
.dn-stages i{flex:1;height:3px;border-radius:999px;background:var(--ink-16);position:relative;overflow:hidden}
.dn-stages i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:0 50%}
/* story element 2: a face that comes into focus as you scroll */
.dn-face{position:relative;width:28px;height:28px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.dn-face img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.16);filter:blur(var(--nb,8px)) saturate(.93)}
/* story element 3: a dot for each chapter, violet only for the coach */
/* story element 4: a reading line and the chapter you are in */
.dn-line{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:999px;background:var(--ink-06);overflow:hidden}
.dn-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--answer-hi),var(--answer-lo));transform:scaleX(var(--p,0));transform-origin:0 50%}
.dn-chapter{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--ink-06);font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.dn-chapter b{color:var(--ink);font-weight:600}
/* story element 5: a centred tab pill with a sliding highlight */
.dn-tabs{position:relative;display:flex;padding:4px;border-radius:999px;background:var(--ink-06);margin:0 auto}
.dn-tabs a{position:relative;z-index:1;height:32px;padding:0 14px;display:flex;align-items:center;border-radius:999px;font:500 14px/20px var(--font-sans);color:var(--ink-2);text-decoration:none;transition:color .2s ease}
.dn-tabs a.on{color:var(--ink)}
.dn-pill{position:absolute;top:4px;left:0;height:32px;border-radius:999px;background:var(--surface-raised);box-shadow:var(--shadow-thumb,0 1px 3px rgba(16,6,34,.16));transition:transform .45s var(--ease-out),width .45s var(--ease-out)}

/* ---------- shared hero type ---------- */
.d-hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:148px 24px 0;text-align:center;overflow:hidden}
.d-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:760px}
.d-title{font:400 clamp(40px,4.8vw,64px)/1.08 var(--font-serif);letter-spacing:-.012em;text-wrap:balance}
.d-sub{max-width:44ch;font:400 17px/26px var(--font-sans);color:var(--ink-2);text-wrap:balance}
.d-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.d-btn{height:44px;padding:0 18px;border-radius:var(--radius-control);display:inline-flex;align-items:center;gap:8px;font:600 15px/20px var(--font-sans);text-decoration:none;transition:transform 160ms var(--ease-out)}
.d-btn:active{transform:scale(.97);transition-duration:100ms}
.d-btn .ico{width:18px;height:18px}
.d-btn.pri{color:var(--on-ink);background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);box-shadow:var(--shadow-button)}
.d-btn.sec{color:var(--ink);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}

/* the hero arrives once */
.js .d-copy > *{opacity:0;transform:translateY(14px)}
.go .d-copy > *{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.go .d-copy > *:nth-child(2){transition-delay:.08s}.go .d-copy > *:nth-child(3){transition-delay:.16s}.go .d-copy > *:nth-child(4){transition-delay:.24s}
/* the title is the first thing anyone reads, so it is visible from the first paint and only rises */
.js .d-copy > .d-title{opacity:1}

/* light phone frame: cream bezel, soft shadow, never a black slab */
.lphone{position:relative;padding:7px;border-radius:52px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(74,26,10,.17)}
.lphone .scr{position:relative;aspect-ratio:393/852;border-radius:45px;overflow:hidden;background:var(--surface)}
.lphone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the next chapter, just below, so the nav has something to read */

/* ============ 1 · book of pages ============ */

/* ============ 2 · three phones ============ */
.trio{position:relative;width:min(980px,100%);height:560px;margin-top:64px}
.trio .lphone{position:absolute;top:0;left:50%;width:280px;margin-left:-140px;transition:transform 1.2s var(--ease-out),opacity 1s var(--ease-out);opacity:0;transform:translateY(120px)}
.go .trio .lphone{opacity:1;transform:translateY(var(--y,0px))}

/* ============ 3 · conversation field ============ */
.fb{position:absolute;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
.go .fb{opacity:1;transform:translateY(var(--py,0px))}
.fb .ub-avatar{width:40px;height:40px;box-shadow:0 0 0 3px var(--surface),var(--shadow-card)}
.fb.me{flex-direction:row-reverse}
.fb > *{animation:drift 8s ease-in-out infinite alternate}
.fb:nth-child(2n) > *{animation-duration:10s;animation-delay:-3s}
.fb:nth-child(3n) > *{animation-duration:9s;animation-delay:-5s}

/* ============ 4 · one phone, the whole story ============ */
.solo{position:relative;margin-top:56px;width:300px}
.solo .lphone{opacity:0;transform:translateY(80px);transition:opacity 1s var(--ease-out) .3s,transform 1.2s var(--ease-out) .3s}
.go .solo .lphone{opacity:1;transform:none}
.solo .scr img{opacity:0;transition:opacity .7s ease}
.solo .scr img.on{opacity:1}
.chips{position:absolute;inset:0;pointer-events:none}
.chip-s{position:absolute;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);font:600 14px/20px var(--font-sans);white-space:nowrap;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.chip-s.on{opacity:1;transform:none}
.chip-s .n{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink-06);font:600 12px/1 var(--font-sans)}
.chip-s.on .n{background:var(--ink);color:var(--on-ink)}

/* ============ 5 · bento ============ */
.t-chat .stages{width:150px;margin:0}
.t-see{background:radial-gradient(100% 80% at 50% 100%,rgba(247,182,75,.34),rgba(247,182,75,0) 70%),var(--surface-raised)}
.t-see .ph{position:relative;width:120px;height:150px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card)}
.t-see .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}

/* ---------- chooser ---------- */

@media (max-width:900px){
  .dn-links,.dn-tabs{display:none}
  .chips{display:none}
  .trio{--s:110px}
}
@media (prefers-reduced-motion:reduce){
  .arc,.sun,.fb > *{animation:none}
  .js .d-copy > *,.trio .lphone,.solo .lphone,.tile,.fb{transform:none !important;transition:opacity .4s ease}
}
@keyframes breathe{from{scale:1}to{scale:1.06}}

/* =====================================================================
   Round 2 (13 Oct 2026): direction 4 as the base. Five richer heroes (4a to 4e),
   three full-page variations (v1 to v3). Smaller hero buttons, finer phone frame.
   ===================================================================== */
.d-btn{height:40px;padding:0 16px;font:600 14px/20px var(--font-sans);border-radius:var(--radius-control)}
.d-btn .ico{width:16px;height:16px}
.lphone.fine{padding:6px;border-radius:50px}
.lphone.fine .scr{border-radius:44px}
.storyp .scr > *{opacity:0;transition:opacity .7s ease}
/* the clear photo fades in slowly over its blurred twin, which waits underneath until it has arrived */
.storyp .scr > .slow.on{transition:opacity 2.8s cubic-bezier(.65,0,.35,1)}
.storyp .scr > [data-hold="1800"]:not(.on){transition:opacity .01s linear 2.8s}
.storyp .scr > .on{opacity:1}

/* 4a · orbit: real pieces of the app around the phone, at different depths */

/* 4b · two phones, one conversation */
.duo{position:relative;width:min(1000px,100%);height:600px;margin-top:48px}
.duo .lphone{position:absolute;top:30px;width:270px}
.duo .p-his{left:calc(50% - 330px);transform:rotate(-5deg)}
.duo .p-her{left:calc(50% + 60px);transform:rotate(5deg)}
.duo .arc-line{position:absolute;left:50%;top:-6px;width:420px;height:150px;margin-left:-210px;overflow:visible}
.duo .arc-line path{fill:none;stroke:var(--ink-16);stroke-width:1.5;stroke-dasharray:4 6}
@keyframes travel{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* 4c · ring of people */
.ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ring .who{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:999px;overflow:hidden;box-shadow:0 0 0 4px var(--surface),var(--shadow-card);animation:spin 80s linear infinite reverse;transition:scale .6s var(--ease-out)}
.ring .who img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(8px) saturate(.93);transform:scale(1.2);transition:filter 1s var(--ease-out)}
.ring .who.lit{scale:1.35}
.ring .who.lit img{filter:blur(3px) saturate(.93)}

/* 4d · horizon */

/* 4e · split editorial */

/* ---------- full pages: shared section scaffolding ---------- */
.fx-sec{position:relative;padding:clamp(96px,14vh,150px) 24px}
.fx-head{text-align:center;max-width:720px;margin:0 auto 56px}
.fx-head .eyebrow{display:block;margin-bottom:10px}
.fx-head h2{font:400 clamp(32px,3.6vw,48px)/1.12 var(--font-serif);letter-spacing:-.012em;text-wrap:balance}

/* v2 · editorial chapters */

/* v3 · story scroll: a pinned phone, chapters scrolling past */
.ss{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);max-width:1120px;margin:0 auto}
.ss-phone{position:sticky;top:calc(50svh - 300px);height:600px;display:flex;justify-content:center;align-items:flex-start}
.ss-phone .lphone{width:280px}
.ss-phone::before{content:"";position:absolute;inset:-10% -20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0))}
.ss-step{min-height:80svh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s ease}
.ss-step.on{opacity:1}
.ss-step h3{font:400 clamp(30px,3.2vw,44px)/1.1 var(--font-serif);letter-spacing:-.012em;text-wrap:balance}
.ss-step p{margin-top:14px;max-width:36ch;color:var(--ink-2);font-size:17px;line-height:26px}

@media (max-width:1100px){
  .ss{grid-template-columns:1fr}.ss-phone{position:relative;top:0}
}
@media (max-width:760px){
  .duo{height:520px}.duo .lphone{width:200px}.duo .p-her{left:calc(50% - 210px)}.duo .p-his{left:calc(50% + 10px)}.duo .arc-line,.duo .her-tag,.duo .his-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ring,.ring .who,.rays,.sunrise,.float-a,.float-b{animation:none}
}
.duo .arc-line .dotc{fill:var(--answer-lo);stroke:rgba(247,182,75,.34);stroke-width:8;opacity:0;transition:opacity .2s ease}
.duo.send .arc-line .dotc{opacity:1}

/* ===== calm tour additions: the loop, safety, founders, FAQ, store badges ===== */
/* the loop: matches that stall, fading one by one */
.lp-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);transition:opacity .9s ease,transform .9s var(--ease-out)}
.lp-row:last-child{border-bottom:0}
.lp-row .ub-avatar{width:40px;height:40px}
.lp-row em{margin-left:auto;font:400 13px/18px var(--font-sans);font-style:normal;color:var(--ink-3)}
.lp-row.gone{opacity:.32;transform:translateY(-2px)}
.lp-better{margin-top:40px;text-align:center;font:400 clamp(28px,3vw,40px)/1.15 var(--font-serif);letter-spacing:-.012em;opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.lp-better.on{opacity:1;transform:none}

/* safety: five soft cards, each with a close-up from the app */
.safe5{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:0 auto}
.sc{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:420px;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.sc-wide{grid-column:span 2}
.sc.g1{background:radial-gradient(100% 80% at 15% 0%,rgba(247,182,75,.34),rgba(247,182,75,0) 70%),var(--surface-raised)}
.sc.g2{background:radial-gradient(100% 80% at 85% 0%,rgba(184,83,42,.13),rgba(184,83,42,0) 70%),var(--surface-raised)}
.sc.g3{background:radial-gradient(100% 80% at 50% 0%,rgba(247,182,75,.20),rgba(247,182,75,0) 70%),var(--surface-raised)}
.sc.g4{background:radial-gradient(100% 80% at 20% 100%,rgba(232,131,74,.14),rgba(232,131,74,0) 70%),var(--surface-raised)}
.sc.g5{background:radial-gradient(100% 80% at 90% 100%,rgba(247,182,75,.34),rgba(247,182,75,0) 70%),var(--surface-raised)}
.sc-vis{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px 8px}
.sc-copy{padding:16px 28px 28px;display:flex;flex-direction:column;gap:6px}
.sc-copy h3{font:400 26px/32px var(--font-serif);text-wrap:balance}
.sc-copy p{font-size:15px;line-height:22px;color:var(--ink-2);max-width:40ch}
.js .sc .sc-vis > *{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .7s var(--ease-out) .2s,transform .8s var(--ease-out) .2s}
.js .sc.in .sc-vis > *{opacity:1;transform:none}
.verify{width:min(420px,100%);display:flex;flex-direction:column;gap:8px}
.vf-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-panel);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.vf-row > span:nth-child(2){flex:1;display:flex;flex-direction:column}
.vf-row b{font:600 15px/20px var(--font-sans)}
.vf-row small{font-size:13px;line-height:18px;color:var(--ink-2)}
.vf-ico{flex:none;width:36px;height:36px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;background:var(--ink-06)}
.vf-ok{flex:none;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--ink-24);color:transparent;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.vf-row.ok .vf-ok{background:var(--ink);color:var(--on-ink);box-shadow:none}
.vf-name{display:flex;align-items:center;gap:8px;margin-top:6px;padding-left:4px;font:600 17px/22px var(--font-sans);opacity:.3;transition:opacity .5s ease}
.vf-name.ok{opacity:1}
.vf-name em{font:400 13px/18px var(--font-sans);font-style:normal;color:var(--ink-2)}
.vb{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--on-ink)}
.warn{width:min(290px,100%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);text-align:center}
.warn b{font:400 20px/26px var(--font-serif);margin-top:4px}
.warn p{font-size:13px;line-height:18px;color:var(--ink-2)}
.w-btn{margin-top:6px;width:100%;height:40px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--ink-hi),var(--ink-lo));color:var(--on-ink);font:600 14px/20px var(--font-sans)}
.menu-sh{width:min(280px,100%);display:flex;flex-direction:column;padding:8px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-sheet);text-align:left}
.ms-h{display:flex;flex-direction:column;padding:10px 12px 12px;font:400 20px/26px var(--font-serif);border-bottom:1px solid var(--line);margin-bottom:4px}
.ms-h small{font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.ms-r{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--radius-control);font:400 15px/20px var(--font-sans)}
.ms-r.rust{color:var(--rust)}
.ms-r:nth-child(3){background:var(--ink-06)}
.me-card{position:relative;width:160px;height:200px;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.me-card img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(12px) saturate(.93) contrast(.95);transform:scale(1.12)}
.me-lock{position:absolute;left:50%;top:44%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--surface);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.me-tag{position:absolute;left:10px;right:10px;bottom:10px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:600 12px/16px var(--font-sans);color:var(--surface);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.break{width:min(300px,100%);display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-sheet);text-align:left}
.break b{font:400 22px/28px var(--font-serif)}
.break p{font-size:13px;line-height:18px;color:var(--ink-2)}
.b-btn{margin-top:6px;height:40px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--ink-hi),var(--ink-lo));color:var(--on-ink);font:600 14px/20px var(--font-sans)}

/* founders: a short letter */

/* FAQ: a smooth accordion */
.faq{max-width:760px;margin:0 auto;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.fq + .fq{border-top:1px solid var(--line)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 24px;border:0;background:transparent;text-align:left;font:500 17px/24px var(--font-sans);color:var(--ink);cursor:pointer}
.fq-q:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--radius-control)}
.fq-i{flex:none;width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--ink-06);transition:transform .3s var(--ease-out),background-color .2s ease}
.fq-i .ico{width:16px;height:16px}
.fq.open .fq-i{transform:rotate(45deg);background:var(--ink);color:var(--on-ink)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a > div{overflow:hidden}
.fq-a p{padding:0 72px 22px 24px;font-size:15px;line-height:24px;color:var(--ink-2);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .3s var(--ease-out)}
.fq.open .fq-a p{opacity:1;transform:none;transition-delay:.08s}
@media (hover:hover) and (pointer:fine){.fq-q:hover .fq-i{background:var(--ink-16)}.fq.open .fq-q:hover .fq-i{background:var(--ink)}}

/* store badges, coming soon */

@media (max-width:1023px){.safe5{grid-template-columns:1fr 1fr}.sc-wide{grid-column:span 2}}
@media (max-width:700px){.safe5{grid-template-columns:1fr}.sc-wide{grid-column:auto}.fq-a p{padding-right:24px}}
@media (prefers-reduced-motion:reduce){.lp-row,.lp-better,.fq-a,.fq-a p,.fq-i{transition:none}.js .sc .sc-vis > *{transform:none}}

/* no underlines on the page: the policy link reads as ink, not a rule */

/* ===== living aura: one warm field behind the whole page; it drifts, and each chapter sets its colour ===== */
.dn-links a,.dn-chapter{white-space:nowrap}
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;aspect-ratio:1;border-radius:50%;opacity:0;transition:opacity 1.8s ease;will-change:transform}
.aura .a1{width:95vmax;left:-38vmax;top:18vh;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0));animation:drift-a 27s ease-in-out infinite alternate}
.aura .a2{width:75vmax;right:-30vmax;top:-28vh;background:radial-gradient(closest-side,rgba(232,131,74,.14),rgba(232,131,74,0));animation:drift-b 33s ease-in-out infinite alternate}
.aura .a3{width:85vmax;left:8vw;bottom:-58vmax;background:radial-gradient(closest-side,rgba(184,83,42,.13),rgba(184,83,42,0));animation:drift-c 39s ease-in-out infinite alternate}
.aura .a4{width:60vmax;left:34vw;top:26vh;background:radial-gradient(closest-side,rgba(247,182,75,.20),rgba(247,182,75,0));animation:drift-b 29s ease-in-out infinite alternate-reverse}
@keyframes drift-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(14vw,-10vh) scale(1.12)}100%{transform:translate(26vw,4vh) scale(.94)}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-16vw,12vh) scale(1.1)}100%{transform:translate(-6vw,22vh) scale(1)}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,-14vh) scale(1.08)}100%{transform:translate(-14vw,-6vh) scale(1.16)}}
/* chapter moods: warm at the start, cool in the loop, warmer again as the story moves on */
[data-aura="top"] .a1,[data-aura="top"] .a2,[data-aura="top"] .a4,
[data-aura="how"] .a1,[data-aura="how"] .a4,
[data-aura="features"] .a2,[data-aura="features"] .a4,
[data-aura="safety"] .a2,[data-aura="safety"] .a3,
[data-aura="founders"] .a1,[data-aura="founders"] .a4,
[data-aura="faq"] .a4,
[data-aura="join"] i,[data-aura="contact"] i{opacity:1}

/* founders: the photos clear as you read the note */
.fdr-sec{padding-top:clamp(96px,12vw,160px);padding-bottom:clamp(96px,12vw,160px)}
.fdr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,104px);align-items:start;max-width:1080px;margin:0 auto}
.fdr-faces{position:sticky;top:132px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fdr-face{margin:0;display:flex;flex-direction:column;gap:12px}
.fdr-face:nth-child(2){margin-top:56px}
.fdr-face .ph{aspect-ratio:4/5;border-radius:var(--radius-card);overflow:hidden;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.fdr-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) blur(calc(var(--b,1) * 20px));transform:scale(calc(1 + var(--b,1) * .1));transition:filter .6s ease-out,transform .6s ease-out}
.fdr-face figcaption{display:flex;flex-direction:column}
.fdr-face figcaption b{font:600 15px/20px var(--font-sans)}
.fdr-face figcaption span{font-size:13px;line-height:18px;color:var(--ink-2)}
.fdr-hint{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;justify-self:start;height:32px;padding:0 12px;border-radius:999px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/18px var(--font-sans);color:var(--ink-2);transition:opacity .5s ease,transform .5s var(--ease-out)}
.fdr-hint .ico{flex:none}
.fdr.clear .fdr-hint{opacity:0;transform:translateY(-6px)}
.fdr-letter .eyebrow{display:block;margin-bottom:24px}
.fdr-letter p{font:400 clamp(20px,1.9vw,24px)/1.5 var(--font-serif);color:var(--ink);text-wrap:pretty}
.fdr-letter p + p{margin-top:20px}
.fdr-letter .fdr-sign{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font:italic 400 32px/1.2 var(--font-serif);color:var(--ink)}
@media (max-width:860px){
  .fdr{grid-template-columns:1fr}
  .fdr-faces{position:static}
}
@media (prefers-reduced-motion:reduce){
  .aura i{animation:none}
}

/* ===== hero, live: steps on the left, pieces of the app pop out of the phone on the right ===== */
.stp{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 8px;border-radius:999px;font:600 14px/20px var(--font-sans);color:var(--ink-3);white-space:nowrap;transition:color .4s ease,background-color .4s ease,box-shadow .4s ease}
.stp .n{flex:none;width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink-06);font:600 12px/1 var(--font-sans);transition:background-color .4s ease,color .4s ease}
.stp.done{color:var(--ink-2)}
.stp.done .n{background:var(--ink-16);color:var(--ink)}
.stp.cur{color:var(--ink);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.stp.cur .n{background:var(--ink);color:var(--on-ink)}
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;top:var(--y);left:calc(100% - 28px);z-index:3;opacity:0;transform:translateX(-24px) scale(.92);transform-origin:left center;transition:opacity .18s ease,transform .22s ease}
.pop.on{opacity:1;transform:none;transition:opacity .4s ease var(--d,0s),transform .6s cubic-bezier(.34,1.4,.64,1) var(--d,0s)}
.pop .qcard,.pop .ccnote,.pop .v6-toast{position:static;white-space:normal}
@media (max-width:980px){
  .pop{left:50%;top:auto;bottom:40px;transform:translate(-50%,16px) scale(.94);transform-origin:center bottom}
  .pop.on{transform:translate(-50%,0)}
  .pop[style*="--d"]{display:none}
}
@media (prefers-reduced-motion:reduce){.pop,.pop.on{transition:opacity .3s ease}}

/* ===== the loop, after the investor deck: a tilted feed of heys that never stops ===== */
.lp3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1180px;margin:0 auto}
.nt{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;padding:16px 22px 16px 16px;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);
  transform:translateY(calc(var(--i) * 100px)) scale(calc(1 - var(--i) * .03));opacity:calc(1 - var(--i) * .19);transition:transform .9s var(--ease-out),opacity .9s ease}
.nt.enter{transition:none;transform:translateY(-70px) scale(1.02);opacity:0}
.nt img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.nt-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.nt-top b{font:600 18px/22px var(--font-sans);color:var(--ink)}
.nt-top span{font:500 13px/18px var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.nt p{margin:0;font:400 17px/22px var(--font-sans);color:var(--ink-2)}
@media (max-width:900px){
  .lp3{grid-template-columns:1fr}
}

/* ===== tour: real app screens in a phone, a detail pops out beside each one ===== */
.rs-pop{position:absolute;top:var(--y);left:calc(50% + 60px);z-index:3;opacity:0;transform:translateX(-16px) scale(.92);transform-origin:left center;transition:opacity .18s ease,transform .22s ease}
.rs-pop.on{opacity:1;transform:none;transition:opacity .4s ease .25s,transform .6s cubic-bezier(.34,1.4,.64,1) .25s}
.rs-pop .v6-toast{position:static}
@media (max-width:900px){.rs-pop{left:50%;transform:translate(-50%,12px) scale(.94)}.rs-pop.on{transform:translate(-50%,0)}}
.pop .v6-toast,.rs-pop .v6-toast{white-space:nowrap;width:max-content}
.tour .tc-vis:has(.rs){overflow:visible}
.rs-pop{left:calc(50% + 48px)}

/* ===== hero v1, final direction (13 Oct): a bordered panel with the drift gradient; the phone starts sharp,
   tilted back and low, and rises to face you as you scroll ===== */
.d-hero.hv-hero{display:block;min-height:0;padding:0;overflow:visible}
.hv{position:relative;height:calc(100svh - 16px);min-height:680px;margin:8px;border-radius:12px;overflow:hidden;isolation:isolate;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;padding:136px 24px 0;text-align:center}
.hv-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;transform:scale(calc(1 + var(--k,0) * .06))}
.hv-bg i{position:absolute;aspect-ratio:1;border-radius:50%;will-change:transform}
.hv-bg .g1{width:110vmax;left:-35vmax;top:30%;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0));animation:drift-a 26s ease-in-out infinite alternate}
.hv-bg .g2{width:80vmax;right:-28vmax;top:-10%;background:radial-gradient(closest-side,rgba(232,131,74,.14),rgba(232,131,74,0));animation:drift-b 32s ease-in-out infinite alternate}
.hv-bg .g3{width:90vmax;left:15vw;top:55%;background:radial-gradient(closest-side,rgba(184,83,42,.13),rgba(184,83,42,0));animation:drift-c 38s ease-in-out infinite alternate}
.hv .d-copy{gap:24px;max-width:760px}
.hv-title{margin:0;font:350 clamp(44px,5vw,72px)/1.02 var(--font-serif);letter-spacing:-.028em;text-wrap:balance}
.hv .d-sub{margin:-8px 0 0;font-size:18px;line-height:28px;max-width:68ch}
.hv .d-cta{margin-top:0}
.hv .d-btn{height:48px;padding:0 22px;border-radius:14px;font-size:15px}
.hv .d-btn.sec{background:var(--tabbar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
/* the phone: sharp from the start, low and tilted back; scrolling lifts it and turns it to face you */
.hv-stage{position:absolute;left:50%;bottom:0;z-index:2;width:320px;margin-left:-160px;perspective:1400px;transform:translateY(calc(40% + (1 - var(--k,0)) * 18%));transform-origin:50% 100%}
.hv-tilt{transform:rotateX(calc((1 - var(--k,0)) * 14deg));transform-origin:50% 100%;-webkit-mask:linear-gradient(180deg,#000 0%,#000 46%,transparent 86%);mask:linear-gradient(180deg,#000 0%,#000 46%,transparent 86%)}
.hv-tilt .lphone{box-shadow:inset 0 0 0 1px var(--line);opacity:0;translate:0 64px;transition:opacity 1s var(--ease-out) .35s,translate 1.3s var(--ease-out) .35s}
.go .hv-tilt .lphone{opacity:1;translate:0 0}
/* the phone is on screen from the first paint and only rises into place */
.hv-tilt .lphone{opacity:1}
.hv-tilt .scr > *{opacity:0;transition:opacity .6s ease}.hv-tilt .scr > .on{opacity:1}
.hv-cap{position:absolute;right:calc(100% + 24px);top:120px;display:grid;pointer-events:none}
.hv-cap .stp{grid-area:1/1;justify-self:end;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease-out),color .4s,background-color .4s,box-shadow .4s}
.hv-cap .stp.cur{opacity:1;transform:none}
@media (max-width:900px){.hv{padding-top:112px}.hv-cap{display:none}.hv-stage{width:280px;margin-left:-140px}}
@media (prefers-reduced-motion:reduce){.hv-bg i{animation:none}.hv-stage,.hv-tilt{transform:none}}

/* shorter controls: every field and button on the page is 44px tall */
.d-page .form-row .input{height:44px;font-size:15px;border-radius:12px}
.d-page .form-row .ub-btn{height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.hv .d-btn{height:44px;padding:0 18px;border-radius:12px}

/* early access on the Connection Coach ground (the user's call, 13 Oct: an exception to violet-for-the-coach-only) */
.d-page .v6-join{background:var(--coach-ground);color:var(--coach-ink)}
.d-page .v6-join .mesh{display:none}
.d-page .v6-join .t-h1{color:var(--coach-ink)}
.d-page .v6-join .t-lede,.d-page .v6-join .form-help{color:var(--coach-ink-2)}
.d-page .v6-join .input{background-color:var(--surface-raised);box-shadow:none}
.d-page .v6-join .input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.d-page .v6-join .input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--rust)}
.d-page .v6-join .ub-btn--primary{background:var(--surface-raised);color:var(--ink);box-shadow:0 6px 18px rgba(37,11,71,.24)}
.d-page .v6-join .ub-btn--primary:focus-visible{outline:2px solid var(--coach-ink);outline-offset:2px}
.d-page .v6-join .form-done{color:var(--coach-ink)}
/* one full-width field per row; the optional question has a visible label, and the button spans the form */
.d-page .v6-join .form .form-row{margin-top:8px}
.d-page .v6-join .form .form-row:first-of-type{margin-top:0}
.d-page .v6-join .join-q{margin:14px 0 6px;font-size:14px;line-height:20px;color:var(--coach-ink)}
.d-page .v6-join .join-q span{margin-left:4px;font-weight:400;color:var(--coach-ink-2)}
.d-page .v6-join .join-q+.form-row{margin-top:0}
.d-page .v6-join .form-row .ub-btn:only-child{width:100%;margin-top:8px}
/* the submit button is dark like the header's "Get early access", so it doesn't read as another field */
.d-page .v6-join .ub-btn--primary{height:48px;font-weight:600;color:var(--on-ink);background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,253,250,.16),0 8px 20px rgba(37,11,71,.32);transition:transform .16s ease,box-shadow .16s ease}
.d-page .v6-join .ub-btn--primary:hover{box-shadow:inset 0 1px 0 rgba(255,253,250,.2),0 10px 24px rgba(37,11,71,.42)}
.d-page .v6-join .ub-btn--primary:active{transform:scale(.98);transition-duration:100ms}

/* hero v1, pinned: the panel holds still while you scroll, so you watch the phone rise and turn to you;
   the copy steps back as it comes up, then the page moves on */
.d-hero.hv-hero{height:190vh}
.hv{position:sticky;top:8px}
.hv-stage{transform:translateY(calc((1 - var(--k,0)) * 58%))}
.hv .d-copy{opacity:calc(1 - var(--k,0) * 1.6);transform:translateY(calc(var(--k,0) * -56px))}
@media (prefers-reduced-motion:reduce){.d-hero.hv-hero{height:auto}.hv{position:relative;top:0}}
/* reveal more at the end: the fade slides down as the phone rises, so the action buttons show; only the very bottom melts away */
.hv-stage{transform:translateY(calc(5% + (1 - var(--k,0)) * 53%))}
.hv-tilt{-webkit-mask:linear-gradient(180deg,#000 0%,#000 calc(46% + var(--k,0) * 32%),transparent calc(86% + var(--k,0) * 14%));mask:linear-gradient(180deg,#000 0%,#000 calc(46% + var(--k,0) * 32%),transparent calc(86% + var(--k,0) * 14%))}

/* hero feature cards: frosted glass, an icon, the feature and one line on what it does */
.hv .pop{left:calc(100% - 24px)}
.fpop{display:flex;align-items:flex-start;gap:12px;width:300px;padding:14px 16px 14px 14px;border-radius:20px;text-align:left;white-space:normal;
  background:var(--tabbar);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,253,250,.72),0 0 0 1px var(--line),var(--shadow-card)}
.fp-i{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-button)}
.fp-i .ico{flex:none}
.fp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fp-t b{font:600 15px/20px var(--font-sans);color:var(--ink)}
.fp-t > span{font:400 13px/18px var(--font-sans);color:var(--ink-2);text-wrap:pretty}
.fp-stages{display:flex;gap:4px;width:120px;margin-top:8px}
.fp-stages i{flex:1;height:3px;border-radius:2px;background:var(--ink-16)}
.fp-stages i.f{background:var(--ink)}
@media (max-width:900px){.hv .pop{display:none}}

/* feature cards carry one line each now; the coach card stays beside the phone the whole way, in the coach violet */
.fp-t > span:empty{display:none}
.fpop{align-items:center;width:280px}
.fp-t b{font:600 15px/21px var(--font-sans);text-wrap:balance}
.hv-cc{position:absolute;right:calc(100% + 24px);top:330px;width:260px;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;text-align:left;
  background:var(--coach-ground);color:var(--coach-ink);box-shadow:inset 0 0 0 1px var(--coach-glass-ring),0 16px 40px rgba(94,20,196,.34);
  opacity:0;transform:translateY(12px) scale(.97);transition:opacity .7s ease 1.2s,transform .9s cubic-bezier(.34,1.4,.64,1) 1.2s}
.go .hv-cc{opacity:1;transform:none}
.hv-cc b{font:600 16px/22px var(--font-sans);text-wrap:balance}
.hv-cc-top{display:flex;align-items:center;justify-content:space-between}
.hv-cc .fp-i{background:var(--coach-glass);color:var(--coach-ink);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.hv-prem{height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font:600 12px/16px var(--font-sans);letter-spacing:.02em;background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring);color:var(--coach-ink)}
@media (max-width:900px){.hv-cc{display:none}}

/* every website button matches the menu's "Get early access": 36px tall, 14px text, 12px corners (mockup buttons inside the app screens keep their app size) */
.hv .d-btn,.d-page .v6-cta .ub-btn,.d-page .form-row .ub-btn{height:36px;padding:0 14px;border-radius:var(--radius-control);font:600 14px/20px var(--font-sans);gap:6px}
.hv .d-btn .ico,.d-page .v6-cta .ub-btn .ico{width:16px;height:16px}
.d-page .form-row .input{height:36px;padding:0 12px;font-size:14px;border-radius:var(--radius-control)}
.d-page .form-row{gap:6px}
.d-page .form-row+.form-row{margin-top:6px}
.d-page .v6-cta{gap:8px}

/* store badges: the stores' own artwork (white badge, Apple logo, the four-colour Play logo, their type).
   Third-party brand marks, so their own black, white and logo colours, not ours */
.sbadge{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:9px;background:#FFFFFF;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
a.sbadge{text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
a.sbadge:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.08)}
.sbadge .sb-logo{flex:none;width:24px;height:24px}
.sbadge.apple .sb-logo{width:22px;height:22px;margin-top:-2px}
.sbadge > span{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.sbadge.apple small{font:500 10px/12px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.sbadge.apple b{font:600 19px/22px -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em}
.sbadge.play small{font:500 9px/12px "Google Sans","Product Sans",Roboto,Arial,sans-serif;letter-spacing:.06em}
.sbadge.play b{font:500 18px/22px "Google Sans","Product Sans",Roboto,Arial,sans-serif;letter-spacing:-.01em}

/* early access, richer coach ground: the coach's own tokens layered, with slow drifting light and grain */
.d-page .v6-join{background:linear-gradient(158deg,var(--coach-hi) 0%,var(--coach) 46%,var(--coach-lo) 100%);box-shadow:inset 0 0 0 1px var(--coach-glass-ring),0 24px 60px rgba(94,20,196,.24)}
.d-page .v6-join::before,.d-page .v6-join::after{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none;will-change:transform}
/* warm light, top right: the amber and orange of the coach ground */
.d-page .v6-join::before{width:min(1100px,120%);right:-38%;top:-70%;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(232,131,74,.14) 45%,rgba(232,131,74,0) 72%);animation:jg-a 22s ease-in-out infinite alternate}
/* depth, bottom left: the coach ground's deep violet */
.d-page .v6-join::after{width:min(1000px,110%);left:-34%;bottom:-75%;background:radial-gradient(closest-side,rgba(46,13,92,.62),rgba(46,13,92,.24) 46%,rgba(46,13,92,0) 76%);animation:jg-b 28s ease-in-out infinite alternate}
@keyframes jg-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,10%) scale(1.12)}}
@keyframes jg-b{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,-8%) scale(1.1)}}
/* a soft highlight from above, and grain so the gradient never bands */
.d-page .v6-join .join-in{position:relative;z-index:1}
.d-page .v6-join .mesh{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 46% at 50% -6%,rgba(255,253,250,.16),rgba(255,253,250,0) 70%);opacity:1}
.d-page .v6-join .mesh > *{display:none}
.d-page .v6-join .mesh::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.d-page .v6-join::before,.d-page .v6-join::after{animation:none}}

/* pricing: two plans side by side (stacked on phones). Membership is a raised cream card with a faint amber glow;
   Premium sits on the Connection Coach ground, since the coach is what it adds. Then the Sneak Peek note and VAT line. */
.price-sec .fx-head .t-lede{margin:14px auto 0}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:880px;margin:0 auto}
.price-card{display:flex;flex-direction:column;gap:24px;padding:32px 28px 28px;border-radius:var(--radius-card);background:radial-gradient(100% 80% at 15% 0%,rgba(247,182,75,.24),rgba(247,182,75,0) 70%),var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.price-card.pro{color:var(--coach-ink);background:var(--coach-ground);box-shadow:0 16px 40px rgba(74,26,10,.17)}
.price-top{display:flex;flex-direction:column;gap:10px}
.price-top .eyebrow{display:flex;align-items:center;gap:10px;margin:0}
.price-badge{margin-block:-5px;padding:4px 10px;border-radius:999px;font:600 12px/16px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--coach-ink);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.price-amt{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--ink-2)}
.price-n{font:400 56px/1 var(--font-serif);letter-spacing:-.02em;color:var(--ink)}
.price-sub{font-size:15px;line-height:22px;color:var(--ink-2)}
.price-list{display:flex;flex-direction:column;gap:12px;flex-grow:1;margin:0;padding:0;list-style:none}
.price-list li{display:flex;gap:10px;font-size:15px;line-height:22px}
.price-list .ico{flex:none;margin-top:2px;color:var(--violet);stroke-width:1.75}
.price-list b{font-weight:600}
.price-cta{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--radius-control);font:600 15px/20px var(--font-sans);text-decoration:none;color:var(--on-ink);background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,253,250,.16),0 6px 18px rgba(37,11,71,.24);transition:transform .16s ease}
.price-cta:active{transform:scale(.98);transition-duration:100ms}
.price-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.price-foot{display:flex;flex-direction:column;gap:10px}
.price-note{text-align:center;font-size:13px;line-height:18px}
.pro .eyebrow,.pro .price-amt,.pro .price-sub,.pro .price-note{color:rgba(255,253,250,.8)}
.pro .price-n{color:var(--coach-ink)}
.pro .price-list .ico{color:var(--answer-hi);stroke-width:2}
.pro .price-cta{color:var(--coach-lo);background:var(--surface-raised);box-shadow:0 6px 18px rgba(16,6,34,.24)}
.pro .price-cta:focus-visible{outline-color:var(--coach-ink)}
.price-peek{display:flex;align-items:center;gap:14px;max-width:880px;margin:16px auto 0;padding:18px 22px;border-radius:var(--radius-panel);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.price-peek-ic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control);color:var(--ink);background:var(--ink-06)}
.price-peek p{font-size:15px;line-height:22px;color:var(--ink-2)}
.price-peek b{font-weight:600;color:var(--ink)}
.price-vat{margin-top:16px;text-align:center;font-size:13px;line-height:18px;color:var(--ink-2)}
/* hover (mouse only, and not with reduced motion): the card you point at lifts towards you on a soft, deeper shadow,
   its check marks step in one after another; Premium's shadow turns violet and its amber light drifts in */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .price-card{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-position .8s var(--ease-out)}
  .price-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:inset 0 0 0 1px var(--line),0 24px 48px rgba(37,11,71,.12),0 6px 14px rgba(37,11,71,.06)}
  .price-card.pro{background-size:100% 112%;background-position:50% 100%}
  .price-card.pro:hover{background-position:50% 0;box-shadow:0 28px 56px rgba(94,20,196,.34),0 8px 18px rgba(74,26,10,.14)}
  .price-list .ico{transition:transform .35s var(--ease-out)}
  .price-card:hover .price-list .ico{transform:scale(1.18)}
  .price-card:hover .price-list li:nth-child(2) .ico{transition-delay:.04s}
  .price-card:hover .price-list li:nth-child(3) .ico{transition-delay:.08s}
  .price-card:hover .price-list li:nth-child(4) .ico{transition-delay:.12s}
  .price-card:hover .price-list li:nth-child(5) .ico{transition-delay:.16s}
  .price-cta:hover{transform:translateY(-1px)}
}
@media (max-width:700px){
  .price-sec .fx-head{margin-bottom:24px}
  .price-sec .fx-head .t-lede{font-size:16px;line-height:24px}
  .price-grid{grid-template-columns:1fr}
  .price-card{gap:22px;padding:28px 22px 22px}
  .price-n{font-size:48px}
  .price-peek{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
}

/* /investors: the deck request form on a raised cream card, labels above the fields, like the early access question */
.inv-sec{padding-top:clamp(132px,18vh,168px)}
.inv-sec .fx-head{margin-bottom:32px}
.inv-sec .fx-head h1{font:400 clamp(36px,4.4vw,56px)/1.08 var(--font-serif);letter-spacing:-.018em;text-wrap:balance}
.inv-sec .fx-head .t-lede{margin:16px auto 0}
.inv-card{max-width:560px;margin:0 auto;padding:32px;border-radius:var(--radius-card);background:radial-gradient(100% 70% at 15% 0%,rgba(247,182,75,.18),rgba(247,182,75,0) 70%),var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.inv-form{display:flex;flex-direction:column;gap:18px}
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inv-f label{display:block;margin-bottom:6px;font:600 14px/20px var(--font-sans);color:var(--ink)}
.inv-f label span{margin-left:4px;font-weight:400;color:var(--ink-2)}
.inv-f .input{width:100%;height:44px;font-size:15px;border-radius:var(--radius-control)}
.inv-f textarea.input{height:auto;min-height:104px;padding:12px 14px;line-height:22px;resize:vertical}
.inv-err{margin-top:6px;font-size:13px;line-height:18px;color:var(--rust)}
.inv-form .ub-btn{height:48px;margin-top:4px;border-radius:var(--radius-control);font-size:15px;color:var(--on-ink);background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,253,250,.16),0 6px 18px rgba(37,11,71,.24)}
.inv-small{font-size:13px;line-height:18px;color:var(--ink-2)}
.inv-small a{color:inherit;text-underline-offset:2px}
.inv-done{display:flex;gap:14px;align-items:flex-start}
.inv-done .ico{flex:none;color:var(--violet);margin-top:4px}
.inv-done h2{font:400 26px/32px var(--font-serif);letter-spacing:-.01em}
.inv-done p{margin-top:6px;font-size:15px;line-height:22px;color:var(--ink-2)}
@media (max-width:600px){.inv-card{padding:22px}.inv-two{grid-template-columns:1fr;gap:18px}}

/* the app: its own section for the stores, a cream panel with two phones */
.app-sec{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(32px,4vw,48px)}
/* home page: every section after the tour gets the same space above and below */
.home{--sec-y:clamp(48px,7vh,80px)}
@media (max-width:700px){.home{--sec-y:36px}}
.home .v6-sec,.home .fx-sec,.home .team-sec,.home .fdr-sec,.home .app-sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.app{position:relative;isolation:isolate;overflow:hidden;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;min-height:480px;padding:64px 0 0 64px;border-radius:var(--radius-sheet);background:var(--glow-amber),var(--glow-rust),var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.app-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:64px;text-align:left}
.app-copy .eyebrow{display:block}
.app-copy h2{margin:0;font:400 clamp(36px,3.8vw,52px)/1.06 var(--font-serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.app-copy p{margin:0;max-width:40ch;font:400 17px/26px var(--font-sans);color:var(--ink-2)}
.app-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.app-note{display:inline-flex;align-items:center;gap:8px;font:500 13px/18px var(--font-sans);color:var(--ink-2)}
.app-note .ico{flex:none}
.app-art{position:relative;align-self:stretch;min-height:440px}
.app-art .lphone{position:absolute;width:250px;box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(74,26,10,.17)}
.app-p2{left:46%;top:72px;transform:rotate(5deg);background:var(--ink-hi)}
.app-art{-webkit-mask:linear-gradient(180deg,#000 60%,transparent 100%);mask:linear-gradient(180deg,#000 60%,transparent 100%)}
@media (max-width:860px){.app{grid-template-columns:1fr;padding:40px 24px 0}.app-copy{padding-bottom:0}.app-art{min-height:360px}.app-art .lphone{width:200px}}

/* ===== the solution, right after the loop: mirrored layout, one real conversation instead of a pile of heys ===== */
.sol-q .qcard{width:100%}
.sol-msg{max-width:84%;padding:12px 16px;border-radius:18px;font:400 15px/21px var(--font-sans);box-shadow:var(--shadow-card)}
.sol-msg.me{align-self:flex-end;background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);color:var(--on-ink);border-bottom-right-radius:6px}
.sol-msg.them{align-self:flex-start;background:var(--surface-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);border-bottom-left-radius:6px}
.sol-stage{align-self:center;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px;border-radius:999px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);font:600 14px/20px var(--font-sans);color:var(--ink)}
.sol-bars{display:flex;gap:4px;width:84px}
.sol-bars i{flex:1;height:3px;border-radius:2px;background:var(--ink-16);transition:background-color .4s ease}
.sol-bars i.f{background:var(--ink)}
/* arrival: each step lands in order, like a conversation happening */
.js .sol-step{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s ease,transform .8s var(--ease-out)}
.js .sol-step.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.js .sol-step{opacity:1;transform:none;transition:none}}
/* the app: three of the most striking screens, fanned. The unblur in front, the match and the coach behind */
.app-art .lphone{width:230px}
.app-p2{left:50%;top:32px;width:260px !important;margin-left:-130px;transform:none;background:var(--surface-raised);z-index:2;box-shadow:inset 0 0 0 1px var(--line),0 32px 70px rgba(74,26,10,.17) !important}
.app{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:860px){.app-art .lphone{width:170px}.app-p2{width:200px !important;margin-left:-100px}}
.app-art .lphone{width:210px}
.app-p2{top:40px;width:248px !important;margin-left:-124px}
/* the app: one phone, the unblur, centred in its half */
.app-p2{left:50%;top:48px;width:280px !important;margin-left:-140px;transform:rotate(3deg)}
@media (max-width:860px){.app-p2{width:220px !important;margin-left:-110px}}
.app-p2{top:28px}
.app-art{-webkit-mask:linear-gradient(180deg,#000 80%,transparent 100%);mask:linear-gradient(180deg,#000 80%,transparent 100%)}

/* early access, design-system tokens only: the 158° coach gradient (coach-hi, coach, coach-lo), the amber glow top right
   (its documented use), coach-lo pooling bottom left, the coach-glass highlight, and the standard card shadow */
.d-page .v6-join{box-shadow:inset 0 0 0 1px var(--coach-glass-ring),var(--shadow-card)}
.d-page .v6-join::before{background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0) 72%)}
.d-page .v6-join::after{background:radial-gradient(closest-side,var(--coach-lo),rgba(94,20,196,0) 76%)}

/* menu: a wider bar, and a chapter chip of fixed width so the links never move when the chapter name changes */
.dn-bar{width:min(960px,100%)}
.dn-chapter{flex:none;width:204px;overflow:hidden}
.dn-chapter b{position:relative;display:inline-grid;flex:1;min-width:0;height:16px;overflow:hidden}
.dn-chapter .cw{grid-area:1/1;white-space:nowrap;transform:translateY(100%);opacity:0;transition:transform .42s var(--ease-out),opacity .3s ease}
.dn-chapter .cw.on{transform:none;opacity:1}
.dn-chapter .cw.out{transform:translateY(-100%);opacity:0;transition:transform .36s var(--ease-out),opacity .2s ease}
@media (prefers-reduced-motion:reduce){.dn-chapter .cw{transition:opacity .2s ease;transform:none}}

/* ===== usability pass (13 Oct) ===== */
/* phones: the chapter chip steps aside, a menu button opens the links in a sheet */
.dn-menu{display:none;flex:none;width:36px;height:36px;border:0;border-radius:var(--radius-control);align-items:center;justify-content:center;background:var(--ink-06);color:var(--ink);cursor:pointer}
.dn-menu .ico{flex:none}
.dn-sheet{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;padding:8px;border-radius:20px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);transform-origin:top center;animation:sheet-in .22s var(--ease-out)}
.dn-sheet[hidden]{display:none}
.dn-sheet a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:12px;font:500 16px/20px var(--font-sans);color:var(--ink);text-decoration:none}
.dn-sheet a:active{background:var(--ink-06)}
@keyframes sheet-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:900px){
  .dn-bar{gap:8px;padding:0 8px 0 16px}
  .dn-chapter{display:none}
  .dn-menu{display:inline-flex;margin-left:auto}
  .dn-cta{padding:0 12px}
}
/* narrow desktops: seven links and the chapter pill don't both fit, so the pill steps aside for the links */
@media (min-width:901px) and (max-width:1100px){.dn-chapter{display:none}}
/* keyboard: a visible focus ring on every link and button */
.d-page a:focus-visible,.d-page button:focus-visible,.d-page input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.d-page .v6-join a:focus-visible,.d-page .v6-join button:focus-visible{outline-color:var(--coach-ink)}
/* touch: the 36px buttons keep their look but get a 44px tap area */
@media (pointer:coarse){
  .dn-cta,.dn-menu,.d-page .d-btn,.d-page .ub-btn{position:relative}
  .dn-cta::after,.dn-menu::after,.d-page .d-btn::after,.d-page .ub-btn::after{content:"";position:absolute;inset:-4px -2px}
}

/* problem to solution: the fading stack of heys runs into a line that draws itself down to Maren's question */

/* the held hero: a quiet cue that scrolling moves it on, gone once the phone starts to rise */
.hv-cue{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--tabbar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/18px var(--font-sans);color:var(--ink-2);opacity:calc(1 - var(--k,0) * 4);pointer-events:none}
.hv-cue .ico{flex:none;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hv-cue .ico{animation:none}}

/* ===== the loop becomes a better way: one held scene. The empty heys fade, Maren's "hi" turns into her question,
   then your answer, her reply and the stage. Driven by --p1..--p5 and --t1/--t2 from dir.js ===== */
.scn{position:relative;height:330vh}
.scn-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.scn-grid{width:min(1180px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.scn-vis{position:relative;height:min(560px,70svh);perspective:1600px}
.scn-feed{position:absolute;left:50%;top:40px;width:min(460px,100%);height:520px;transform-style:preserve-3d;
  transform:translateX(-50%) rotateX(calc((1 - var(--p1,0)) * 12deg)) rotateZ(calc((1 - var(--p1,0)) * -5deg))}
.scn-feed .nt{transition:none}
.scn-other{opacity:calc((1 - var(--i) * .19) * (1 - var(--p1,0) * 1.4)) !important;transform:translateY(calc(var(--i) * 100px + var(--p1,0) * 40px)) translateX(calc(var(--p1,0) * -32px)) scale(calc(1 - var(--i) * .03)) !important}
.scn-maren{opacity:calc(1 - var(--pm,0)) !important;transform:scale(calc(1 + var(--pm,0) * .04)) !important;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.scn-chat{position:absolute;left:50%;top:40px;width:min(460px,100%);transform:translateX(-50%);display:flex;flex-direction:column;gap:12px}
.scn-q{opacity:var(--p2,0);transform:scale(calc(.94 + var(--p2,0) * .06));transform-origin:50% 0}
.scn-q .qcard{width:100%}
.scn-a{opacity:var(--p3,0);transform:translateY(calc((1 - var(--p3,0)) * 16px))}
.scn-b{opacity:var(--p4,0);transform:translateY(calc((1 - var(--p4,0)) * 16px))}
.scn-s{opacity:var(--p5,0);transform:translateY(calc((1 - var(--p5,0)) * 16px))}
.scn-copy{display:grid}
.scn-txt{grid-area:1/1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:left}
.scn-txt .eyebrow{display:block}
.scn-txt h2{margin:0;font:400 clamp(40px,4.6vw,60px)/1.06 var(--font-serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.scn-txt p{margin:0;max-width:46ch;font:400 clamp(17px,1.5vw,19px)/1.55 var(--font-sans);color:var(--ink-2);text-wrap:pretty}
.scn-txt p b{font-weight:600;color:var(--ink)}
.scn-t1{opacity:var(--t1,1);transform:translateY(calc((1 - var(--t1,1)) * -24px))}
.scn-t2{opacity:var(--t2,0);transform:translateY(calc((1 - var(--t2,0)) * 24px))}
.scn-t1,.scn-t2{pointer-events:none}
/* reduced motion: no hold. The problem, then the solution, each shown whole */
@media (prefers-reduced-motion:reduce){
  .scn{height:auto;padding:96px 0}
  .scn-pin{position:static;height:auto;display:block;overflow:visible}
  .scn-grid{grid-template-columns:1fr;gap:32px}
  .scn-copy{display:contents}
  .scn-txt{grid-area:auto;opacity:1 !important;transform:none !important}
  .scn-t1{order:1}.scn-vis{order:2;height:auto;display:flex;flex-direction:column;gap:48px}.scn-t2{order:3}
  .scn-feed{position:relative;left:auto;top:auto;transform:rotateX(12deg) rotateZ(-5deg);height:440px;width:100%}
  .scn-chat{position:relative;left:auto;top:auto;transform:none;width:100%;order:4}
  .scn-q,.scn-a,.scn-b,.scn-s{opacity:1 !important;transform:none !important}
  .scn-maren{opacity:1 !important}
}
/* one founder: a single portrait, a little larger, no offset */
.fdr-faces{grid-template-columns:minmax(0,320px)}
.fdr-face:nth-child(2){margin-top:0}

/* ===== mobile pass (13 Oct) ===== */
/* reduced motion: the scene reads top to bottom: the problem, the empty feed, the better way, then the chat it starts.
   No tilt, no hold, nothing driven by scroll */
@media (prefers-reduced-motion:reduce){
  .scn{padding:72px 0}
  .scn-grid{width:min(560px,calc(100% - 40px));gap:24px}
  .scn-vis{display:contents}
  .scn-t1{order:1}
  .scn-feed{order:2;position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;display:flex;flex-direction:column;gap:10px;margin:8px 0 40px;
    -webkit-mask:linear-gradient(#000 55%,transparent 100%);mask:linear-gradient(#000 55%,transparent 100%)}
  .scn-feed .nt{position:relative;inset:auto;transform:none !important;opacity:calc(1 - var(--i) * .2) !important}
  .scn-feed .nt:nth-child(n+5){display:none}
  .scn-t2{order:3}
  .scn-chat{order:4;position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:8px}
}
@media (max-width:480px){
  .scn-feed .nt{grid-template-columns:44px 1fr;column-gap:12px;padding:12px 16px 12px 12px}
  .scn-feed .nt img{width:44px;height:44px}
  .scn-txt h2{font-size:36px}
}
/* the app section: one column, copy first, the phone centred under it */
@media (max-width:860px){
  .app{grid-template-columns:1fr;gap:24px;padding:40px 24px 0;min-height:0}
  .app-copy{padding-bottom:0}
  .app-copy h2{font-size:36px}
  .app-art{min-height:380px}
}
/* early access on phones: full-width field and button at a proper touch height */
@media (max-width:640px){
  .d-page .form-row{flex-direction:column;align-items:stretch;gap:8px}
  .d-page .form-row .input{flex:none;width:100%;height:44px}
  .d-page .form-row .ub-btn{width:100%;height:44px}
}
/* the founder's portrait on phones: after the note, under the signature, so it comes into focus as you finish reading */
@media (max-width:860px){.fdr-faces{position:static;grid-template-columns:minmax(0,240px);order:2}.fdr-letter{order:1}.fdr-hint{display:none}}
/* reduced motion on wide screens: the problem and the better way side by side, each with its picture */
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .scn{padding:120px 0}
  .scn-grid{width:min(1180px,calc(100% - 48px));grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);row-gap:120px;align-items:center}
  .scn-t1{grid-column:1;grid-row:1}
  .scn-feed{grid-column:2;grid-row:1;margin:0}
  .scn-t2{grid-column:1;grid-row:2}
  .scn-chat{grid-column:2;grid-row:2;margin:0}
}
/* hero on phones: the copy sits centred in the space above the phone */
@media (max-width:900px){
  .hv{justify-content:center;padding-top:72px;padding-bottom:min(300px,34svh)}
}

/* hero copy rhythm: more air between the title, the line under it and the buttons */
.hv .d-copy{gap:28px}
.hv .d-sub{margin:0}
.hv .d-cta{margin-top:12px}
@media (max-width:900px){.hv .d-copy{gap:20px}.hv .d-cta{margin-top:8px}}
/* the scene hands over to the tour sooner: the empty lower part of its last screen overlaps the tour's lead-in */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.tour{margin-top:-30svh}}
/* the hero line on phones: a narrower, balanced block */
@media (max-width:900px){.hv .d-sub{max-width:36ch;font-size:17px;line-height:26px;text-wrap:balance}}
/* tour, Talk step on phones: three messages, so the chat card always fits whole inside its frame */
@media (max-width:767px){
  .tc-vis .chatc > .bub-row:nth-child(n+6){display:none}
}
/* phones: one title scale for the whole page (major third). Hero 44, every section title 36, every card title 28 */
@media (max-width:767px){
  .hv-title{font-size:44px !important;line-height:1.04 !important}
  .d-page main section h2:not(.sr),.d-page .v6-foot-q{font-size:36px !important;line-height:40px !important;letter-spacing:-.02em}
  .d-page main section h3:not(.eyebrow),.d-page .fdr-sign{font-size:28px !important;line-height:34px !important;letter-spacing:-.012em}
}
/* one content width for every section: 1096px, the same as the features, early access and the footer */
@media (min-width:901px){
  .d-page .app,.d-page .safe5,.d-page .fdr,.d-page .tour-panel{width:100%;max-width:1096px;margin-left:auto;margin-right:auto}
  .scn-grid{width:min(1096px,calc(100% - 48px))}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){.scn-grid{width:min(1096px,calc(100% - 48px))}}
/* the menu's reading progress in the design system ink, not the answer gradient */
.dn-line::after{background:linear-gradient(90deg,var(--ink-hi),var(--ink))}
/* the tour hands over to the features with the same breathing room as every other section (~260px) */
@media (min-width:901px){.tour+section{margin-top:60px}}
/* feature cards: the picture area is the same height in every card, so the three titles start on one line.
   The Premium label moves to the card's top corner instead of pushing the coach title down */
@media (min-width:1024px){
  .feat{min-height:0}
  .feat-vis{flex:none;height:360px}
  .feat-copy{flex:1;justify-content:flex-start}
  .f-coach .feat-copy .ub-pill{position:absolute;top:20px;left:24px}
}
/* safety cards: the same picture height in every card, so titles in a row share one line */
@media (min-width:1024px){
  .sc{min-height:0}
  .sc-vis{flex:none;height:310px}
  .sc-copy{flex:1}
}
/* the menu bar: the button's corner radius, and the same 1096px width as every section */
.dn-bar{border-radius:var(--radius-control);width:min(1096px,100%)}
/* every serif on the page is Source Serif 4 Regular (400, upright) */
.hv-title{font-weight:400}
.next p{font-weight:400}
.fdr-letter .fdr-sign{font-style:normal}

/* ===== the scene on phones (16 Oct, user: "on mobile we really need the animation on problem and solution like we have on desktop").
   The same held screen and the same story as desktop, stacked: the words on top swap from the problem to the better way,
   the picture underneath plays it. The chat scales down to fit short phones (--fit, set in dir.js) ===== */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .scn{height:300vh}
  .scn-pin{align-items:stretch}
  .scn-grid{width:min(520px,calc(100% - 40px));height:100%;padding:96px 0 28px;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:28px;align-items:start}
  .scn-copy{grid-row:1}
  .scn-vis{grid-row:2;height:100%;min-height:0;perspective:1200px}
  .scn-txt{gap:12px}
  .scn-txt h2{font-size:34px;line-height:1.08}
  .scn-txt p{font-size:16px;line-height:1.5}
  .scn-feed{top:0;width:100%;height:100%;-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent)}
  .scn-other{transform:translateY(calc(var(--i) * 78px + var(--p1,0) * 32px)) translateX(calc(var(--p1,0) * -20px)) scale(calc(1 - var(--i) * .03)) !important}
  .scn-feed .nt{grid-template-columns:44px 1fr;column-gap:12px;padding:12px 16px 12px 12px}
  .scn-feed .nt img{width:44px;height:44px}
  .scn-chat{top:0;left:0;width:100%;transform:none;transform-origin:50% 0;scale:var(--fit,1)}
}
/* phones: "how it works" starts right after the problem/solution scene. The scene leaves empty room under its chat on
   taller screens (--scn-tail, measured in dir.js), so the panel moves up by that much and the gap stays the same */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){.tour{margin-top:calc(-1 * var(--scn-tail,0px) - 20px)}}
/* phones: the feature tips can't sit beside the phone (no room), so one caption holds them, below the phone frame
   and rising with it, shown once the phone has nearly finished rising (.risen, set in dir.js). Each new
   tip springs in; the dots show which of the six it is. Filled from the desktop cards by dir.js, so the text is shared */
.hv-tip{display:none}
@media (max-width:900px){
  .hv-tip{position:absolute;top:calc(100% + 14px);left:50%;z-index:4;width:min(340px,calc(100vw - 32px));margin-left:calc(min(340px,calc(100vw - 32px)) / -2);
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px 14px 12px;border-radius:20px;pointer-events:none;
    background:var(--tabbar);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:inset 0 0 0 1px rgba(255,253,250,.72),0 0 0 1px var(--line),var(--shadow-card);
    opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .6s var(--ease-out)}
  .hv.risen .hv-tip{opacity:1;transform:none}
  .hv-tip .fpop{width:100%;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:center}
  .hv-tip .fp-stages{display:none}
  .hv-tip .fp-t b{font-size:15px;line-height:20px}
  .hv-tip.in .fpop{animation:tip-in .65s cubic-bezier(.34,1.4,.64,1)}
  .hv-dots{display:flex;gap:6px;margin-left:48px}
  .hv-dots i{width:6px;height:6px;border-radius:3px;background:var(--ink-16);transition:width .35s var(--ease-out),background-color .35s ease}
  .hv-dots i.on{width:18px;background:var(--ink)}
}
@keyframes tip-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
@media (prefers-reduced-motion:reduce){.hv-tip.in .fpop{animation:none}}

/* phones: the phone starts 28px under the buttons (--hv-top0, measured in dir.js) whatever the screen height, and rises
   to just under the menu (--hv-top1); the 36px allows for the tilt, which draws the phone lower at the start.
   Ending higher leaves room for the tip caption underneath it */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  /* the panel is the screen height (at least 680px); the phone (a frame is about 2.12 times as tall as it is wide) and
     the caption under it fill it down to 24px from its bottom edge: bigger phones on taller screens, ending just under
     the menu, so no empty band is left before the next section */
  .hv{--hv-h:max(100svh - 16px,680px);--pw:min(320px,calc((var(--hv-h) - 228px) / 2.12));--hv-top1:calc(var(--hv-h) - var(--pw) * 2.12 - 144px)}
  .hv-stage{top:var(--hv-top1);bottom:auto;transform:translateY(calc((1 - var(--k,0)) * (var(--hv-top0,480px) + 28px - var(--hv-top1) - 36px)))}
}
/* the whole frame shows once the phone has risen (its size comes from .hv above); at the end nothing of it fades out */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .hv-stage{width:var(--pw);margin-left:calc(var(--pw) / -2)}
  .hv-tilt{-webkit-mask:linear-gradient(180deg,#000 0%,#000 calc(46% + var(--k,0) * 54%),transparent calc(86% + var(--k,0) * 24%));mask:linear-gradient(180deg,#000 0%,#000 calc(46% + var(--k,0) * 54%),transparent calc(86% + var(--k,0) * 24%))}
}
/* phones: "the problem" scene starts with 96px of empty room for the menu; it tucks up under the end of the first
   section's panel by most of that (nothing of either shows there), so the gap after the tips caption is about 80px */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){#loop{margin-top:-76px}}

/* the "You unblurred" phone screen, drawn live (inc/content.php, ub_unblur_screen) so the photo and texts follow /admin.
   Sizes are in cqw (hundredths of the screen width), so it scales with any phone; it was drawn at 320px wide */
.uscr{position:absolute;inset:0;container-type:inline-size;overflow:hidden;color:#fff;font-family:var(--font-sans);
  background:linear-gradient(180deg,#845e3c 0%,#6c3c24 58%,#573b38 75%,#5e4e51 88%,#66585c 100%)}
/* the photo fills the top of the screen (a little zoomed, as in the design) and fades into the warm background */
.uscr-ph{position:absolute;inset:0;background:82% 0/130% auto no-repeat;-webkit-mask:linear-gradient(#000 58%,transparent 82%);mask:linear-gradient(#000 58%,transparent 82%)}
.uscr.blur .uscr-ph{filter:blur(2.6cqw) saturate(.9) brightness(1.1);transform:scale(1.04);transform-origin:50% 0}
.uscr:not(.blur) .uscr-ph{filter:contrast(1.05) saturate(1.04)}
.uscr-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,16,22,.2) 0%,rgba(30,16,22,0) 12%,rgba(30,16,22,0) 46%,rgba(40,20,30,.22) 62%,rgba(40,20,30,0) 80%)}
.uscr-sb{position:absolute;top:5.3cqw;left:7.8cqw;right:7.5cqw;display:flex;justify-content:space-between;align-items:center;font:600 4.2cqw/1 var(--font-sans)}
.uscr-sb svg{width:12.5cqw;height:3.75cqw}
.uscr-pill{position:absolute;top:16.9cqw;left:50%;transform:translateX(-50%);height:8.1cqw;padding:0 3.4cqw;border-radius:999px;background:rgba(255,236,214,.22);-webkit-backdrop-filter:blur(2cqw) saturate(1.3);backdrop-filter:blur(2cqw) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,236,214,.35);font:600 3.6cqw/8.1cqw var(--font-sans);white-space:nowrap}
.uscr-t{position:absolute;left:4cqw;right:4cqw;top:133.4cqw;margin:0;text-align:center;font:400 8.1cqw/10cqw var(--font-serif);letter-spacing:-.01em}
.uscr-s{position:absolute;left:4cqw;right:4cqw;top:146.3cqw;margin:0;text-align:center;font:400 3.9cqw/5cqw var(--font-sans);color:rgba(255,255,255,.78)}
.uscr-b{position:absolute;left:5cqw;right:5cqw;bottom:8.75cqw;height:12.5cqw;border-radius:3.1cqw;background:#f4eee8;color:#22113f;text-align:center;font:600 4.06cqw/12.5cqw var(--font-sans);box-shadow:0 1.25cqw 4.4cqw rgba(0,0,0,.18)}
/* the first section's phone screens are pictures; where Maren's photo shows in them (the Browse card, behind the end of
   her profile and the answer sheet, her chat avatar) a live, blurred copy of her photo from /admin sits on top, the
   same shape, fading into the picture, so a new photo shows there too. Sizes are in cqw, measured on the 786px screens */
.storyp .scr > .scrn{position:absolute;inset:0;container-type:inline-size}
.ov{position:absolute;overflow:hidden;pointer-events:none}
.ov::before{content:"";position:absolute;inset:-12cqw;background:var(--ph) 50% 22%/cover no-repeat}
.ov-card{left:5.09cqw;top:28.5cqw;width:89.82cqw;height:96cqw;border-radius:5cqw 5cqw 0 0;-webkit-mask:linear-gradient(#000 50%,transparent 100%);mask:linear-gradient(#000 50%,transparent 100%)}
.ov-card::before{filter:blur(4.5cqw) saturate(1.05)}
.ov-end{left:5.09cqw;top:40cqw;width:89.82cqw;height:62cqw;-webkit-mask:linear-gradient(transparent,#000 22%,#000 55%,transparent);mask:linear-gradient(transparent,#000 22%,#000 55%,transparent)}
.ov-end::before{filter:blur(4.5cqw) brightness(.62) saturate(.9);inset:-40cqw -12cqw -12cqw}
.ov-dim{left:4.58cqw;top:40cqw;width:90.84cqw;height:52cqw;-webkit-mask:linear-gradient(transparent,#000 25%,#000 60%,transparent);mask:linear-gradient(transparent,#000 25%,#000 60%,transparent)}
.ov-dim::before{filter:blur(4.5cqw) brightness(.55) saturate(.45);inset:-40cqw -12cqw -12cqw}
.ov-av{left:12.21cqw;top:16.28cqw;width:10.18cqw;height:10.18cqw;border-radius:50%}
.ov-av::before{inset:-2cqw;background-position:50% 25%;filter:blur(1.8cqw)}