/* 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 img{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 img.slow.on{transition:opacity 2.8s cubic-bezier(.65,0,.35,1)}
.storyp .scr img[data-hold="1800"]:not(.on){transition:opacity .01s linear 2.8s}
.storyp .scr img.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 img{opacity:0;transition:opacity .6s ease}.hv-tilt .scr img.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)}

/* 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}}

/* 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)}
.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}
}
/* 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: smaller on phones so the note starts sooner */
@media (max-width:860px){.fdr-faces{position:static;grid-template-columns:minmax(0,240px)}}
/* 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,.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){#features{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)}
}