/* Unblurred presentation site, v3.
   Built on the app design system: 09-design-system/project/tokens.json and components/bundle.css.
   Token names, component specs (Button, Field, Chip, Photo card, Bubble, Toast, Tab bar, grouped list)
   and type styles are the app's own. Web-only additions are layout and section spacing. */
@font-face{font-family:'Inter';src:url(fonts/Inter-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(fonts/SourceSerif4-Variable.woff2) format('woff2');font-weight:200 900;font-display:swap}

:root{
  /* colour tokens, light theme */
  --surface:#F6F1EC; --surface-raised:#FFFDFA; --surface-sunk:#EDE7DF;
  --ink:#250B47; --ink-2:#6F6A76; --ink-3:#86808E; --ink-hi:#31135C; --ink-lo:#250B47; --on-ink:#FFFDFA;
  --answer-hi:#F7B64B; --answer-lo:#E8834A;
  --line:#E6E0D8; --ink-06:rgba(37,11,71,.06); --ink-16:rgba(37,11,71,.16); --ink-24:rgba(37,11,71,.24);
  --violet:#801CFF; --on-violet:#FFFDFA;
  --coach:#7C23EF; --coach-hi:#9B4DFF; --coach-lo:#5E14C4; --coach-ink:#FFFDFA; --coach-ink-2:rgba(255,253,250,.72);
  --coach-glass:rgba(255,253,250,.16); --coach-glass-ring:rgba(255,253,250,.24);
  --rust:#B35129; --on-rust:#F6F1EC;
  --overlay:rgba(16,6,34,.34); --photo-fade:rgba(16,6,34,.9); --tabbar:rgba(255,253,250,.82);
  --device:#14120F;
  /* the screen ground glows */
  --glow-amber:radial-gradient(140% 62% at 78% -8%,rgba(247,182,75,.20) 0%,rgba(247,182,75,.07) 42%,rgba(247,182,75,0) 72%);
  --glow-rust:radial-gradient(120% 55% at 6% 104%,rgba(184,83,42,.13) 0%,rgba(184,83,42,.04) 46%,rgba(184,83,42,0) 76%);
  --coach-ground:radial-gradient(128% 56% at 86% -8%,rgba(247,182,75,.34) 0%,rgba(247,182,75,0) 72%),radial-gradient(118% 54% at 2% 104%,var(--coach-lo) 0%,rgba(94,20,196,0) 78%),linear-gradient(158deg,var(--coach-hi) 0%,var(--coach) 42%,var(--coach-lo) 100%);
  /* shadows */
  --shadow-button:inset 0 1px 0 rgba(255,253,250,.16),0 6px 18px rgba(37,11,71,.24);
  --shadow-card:0 16px 40px rgba(74,26,10,.17);
  --shadow-sheet:0 -12px 40px rgba(16,6,34,.28);
  --shadow-toast:0 14px 34px rgba(16,6,34,.28);
  --shadow-tabbar:inset 0 0 0 1px rgba(37,11,71,.06),0 8px 28px rgba(37,11,71,.16);
  --shadow-cc:inset 0 1px 0 rgba(255,255,255,.30),0 4px 14px rgba(128,28,255,.34);
  /* radius */
  --radius-control:12px; --radius-panel:16px; --radius-bubble:18px; --radius-card:20px; --radius-sheet:28px; --radius-device:47px;
  /* type */
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-sans:'Inter',system-ui,sans-serif;
  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  /* web layout */
  --gutter:clamp(20px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17px/22px var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.ico{flex:none;display:block}
::selection{background:var(--answer-hi);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--ink);color:var(--on-ink);padding:12px 16px;border-radius:var(--radius-control);text-decoration:none;font-weight:600}
.skip:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
.mark{display:block;height:20px;aspect-ratio:960/180;background:currentColor;-webkit-mask:url(brand/wordmark-alpha.webp) center/contain no-repeat;mask:url(brand/wordmark-alpha.webp) center/contain no-repeat}

/* ---------- type: the app's styles ---------- */
/* display (40/46) is the app's largest style. The hero scales it up on wide screens and keeps its ratio and tracking. */
.t-h1{font:400 clamp(40px,4.6vw,56px)/1.15 var(--font-serif);letter-spacing:-.012em;text-wrap:balance}
/* title-1 */

/* title-2 */
/* headline */
.t-lede{font:400 17px/24px var(--font-sans);color:var(--ink-2);max-width:56ch;text-wrap:pretty}
/* section label */
.eyebrow,.ub-section{font:600 13px/18px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- Button ---------- */
.ub-btn{height:50px;border:0;border-radius:var(--radius-control);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;font:600 17px/22px var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out)}
.ub-btn:active{transform:scale(.97);transition-duration:100ms}
.ub-btn--primary{background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);color:var(--on-ink);box-shadow:var(--shadow-button)}
.ub-btn--answer{background:linear-gradient(180deg,var(--answer-hi) 0%,var(--answer-lo) 100%);color:var(--ink);box-shadow:var(--shadow-button)}
.ub-btn.fake{pointer-events:none;cursor:default}
.ub-btn .ico{width:20px;height:20px}

/* ---------- Chip, pill, CC, suggestion ---------- */
.ub-pill{height:28px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:600 13px/18px var(--font-sans);color:var(--surface);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.ub-suggest{height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font:600 13px/18px var(--font-sans);color:var(--coach-ink);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring);white-space:nowrap}
.ico-tile{flex:none;width:38px;height:38px;border-radius:var(--radius-control);display:inline-flex;align-items:center;justify-content:center;background:var(--ink-06);color:var(--ink)}
.ub-avatar{position:relative;flex:none;width:44px;height:44px;border-radius:999px;overflow:hidden;background:var(--surface-sunk)}
.ub-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.16)}
.ub-avatar.s1 img{filter:blur(12px) saturate(.93) contrast(.95)}

/* ---------- nav: the floating Tab bar ---------- */
.nav{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 16px) 0 auto;z-index:50;padding-inline:16px;pointer-events:none}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:var(--radius-card);font:600 15px/20px var(--font-sans);color:var(--ink-2);text-decoration:none;transition:color .16s ease,background-color .16s ease}
.nav-links a.on,.nav-links a[aria-current]{color:var(--ink);background:var(--ink-06)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink)}}
/* the phone menu is the app's sheet, dropping from the bar */
.sheet{position:fixed;inset:0;z-index:60}
.sheet[hidden]{display:none}
.sheet ul{margin-bottom:20px}
.sheet li a{display:flex;align-items:center;min-height:52px;font:400 22px/28px var(--font-serif);text-decoration:none;border-bottom:1px solid var(--line)}
@keyframes fade{from{opacity:0}}
@keyframes sheet-in{from{opacity:0;transform:translateY(-12px) scale(.98)}}

/* ---------- reveal: fade and rise, never blur on text ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0) * 60ms)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal="1"]{--d:1}[data-reveal="2"]{--d:2}[data-reveal="3"]{--d:3}[data-reveal="4"]{--d:4}[data-reveal="5"]{--d:5}

/* ---------- hero: the app's screen ground ---------- */
@keyframes drift{to{transform:translateY(-8px)}}

/* phone frame: radius-device lives only here */

/* Photo card, smaller */

/* the question card */
.qcard{width:296px;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);text-align:left}
.qcard p{font:400 22px/28px var(--font-serif)}
.qcard-who{display:flex;align-items:center;gap:12px}
.qcard-who b{display:block;font:600 15px/20px var(--font-sans)}
.qcard-who span:not(.ub-avatar){display:block;font-size:13px;line-height:18px;color:var(--ink-2)}

/* ---------- sections ---------- */
.sec{padding:112px 0}

/* problem: a statement and a list */

/* principle: a photo with the app's answer sheet on it */
@keyframes caret{50%{opacity:0}}
/* Toast */

/* how it works: raised panels that stack as you scroll */

/* coach: the coach ground, the only violet on the page */
.bub{max-width:84%;padding:11px 15px;font-size:17px;line-height:22px;text-wrap:pretty}
.bub.cc-b{align-self:flex-start;border-radius:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring);color:var(--coach-ink)}
.next{align-self:flex-start;max-width:84%;padding:12px 16px;border-radius:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.next small{display:flex;align-items:center;gap:6px;font:600 13px/18px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--coach-ink-2);margin-bottom:4px}
.next p{font:500 17px/22px var(--font-serif)}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* privacy: grouped panels */

/* early access: the app's Field and Button */
.join{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--glow-amber),var(--glow-rust),var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);padding:80px var(--gutter);text-align:center}
.join-in{position:relative;z-index:1;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.form{width:100%;max-width:480px;margin-top:12px;text-align:left}
.field-label{display:block;font:600 15px/20px var(--font-sans);margin-bottom:8px}
.form-row{display:flex;gap:8px}
.input{flex:1;min-width:0;height:52px;padding:0 14px;border:0;border-radius:var(--radius-control);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);font:400 17px/22px var(--font-sans);color:var(--ink);outline:none;transition:box-shadow .16s ease}
.input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--rust)}
.input::placeholder{color:var(--ink-2)}
.form-row .ub-btn{height:52px}
.form-row+.form-row{margin-top:8px}
.select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F6A76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.select:invalid,.select:has(option[value=""]:checked){color:var(--ink-2)}
.select option{color:var(--ink)}
.select[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--rust)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-help{margin-top:8px;font-size:13px;line-height:18px;color:var(--ink-2)}
.form-help.err{color:var(--rust)}
.form-help a,.v6-foot-bot a{color:inherit;text-underline-offset:2px}
.v6-foot-bot a:hover{color:var(--ink)}
.form-done{display:none;align-items:center;gap:12px;margin-top:12px;padding:16px;border-radius:var(--radius-panel);background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-toast);text-align:left;font-size:15px;line-height:20px}
.form-done b,.form-done span{display:block}
.form-done span{color:var(--coach-ink-2)}
.join.done .form,.join.done .join-proof{display:none}
.join.done .form-done{display:flex;animation:sheet-in 360ms var(--ease-out)}

/* team and contact: grouped rows with avatars */

/* press numbers: a grouped panel */

/* ---------- footer ---------- */

/* ---------- inner pages ---------- */
.copy{display:inline-grid;place-items:center}
.copy > span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;transition:opacity .2s ease,filter .2s ease,transform .2s var(--ease-out)}
/* grouped lists for facts and rights */
.shot{display:block;padding:6px;border-radius:36px;background:var(--device);box-shadow:var(--shadow-card);transition:transform 160ms var(--ease-out)}
.shot img{width:100%;aspect-ratio:393/852;object-fit:cover;border-radius:30px}

/* legal pages */

/* 404: the page you wanted stays blurred */
@keyframes settle{from{filter:blur(28px);opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .nav-links,.hide-sm{display:none}
}
@media (max-width:767px){
  .sec{padding:80px 0}
  .form-row{flex-direction:column}
  .form-row .ub-btn{width:100%}
}

/* ---------- reduced motion: fewer, gentler, never gone ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js .hero-phone[data-reveal]{transition:opacity .3s ease}
  .js [data-reveal]:not(.hero-phone){transform:none}
  .copy > span{transform:none !important;filter:none !important}
}

/* =====================================================================
   v6 home (13 Oct 2026): SaaS-style. The product above the fold on a moving gradient,
   a pinned four-step tour with live close-ups, feature cards, a footer that comes into focus.
   Colours are the design system's own gradient stops: amber .34 and orange .14 (coach ground),
   rust .13 and amber .20 (screen glows), cream, ink and coach violet (coach only).
   Motion: transform and opacity; the one blur that moves is the wordmark at the end.
   ===================================================================== */
.home{background:var(--surface)}

/* ---------- moving gradient: three soft blobs drifting slowly ---------- */
.mesh{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:0;transition:opacity 1.2s ease;background:linear-gradient(158deg,rgba(247,182,75,.34) 0%,rgba(232,131,74,.14) 48%,rgba(184,83,42,.13) 100%)}
.m-2{background:linear-gradient(158deg,rgba(184,83,42,.13) 0%,rgba(247,182,75,.20) 55%,rgba(255,253,250,.72) 100%)}
.m-3{background:linear-gradient(180deg,rgba(255,253,250,.72) 0%,rgba(247,182,75,.34) 100%)}
.m-0{background:linear-gradient(158deg,rgba(247,182,75,.20) 0%,rgba(255,253,250,.72) 55%,rgba(184,83,42,.13) 100%)}
.mesh.on,.m-warm,.m-foot{opacity:1}
.mesh .b{position:absolute;width:72%;aspect-ratio:1;border-radius:50%}
.b1{left:-14%;top:-30%;animation:dr1 22s ease-in-out infinite alternate}
.b2{right:-16%;top:0;animation:dr2 27s ease-in-out infinite alternate}
.b3{left:20%;bottom:-44%;animation:dr3 31s ease-in-out infinite alternate}
@keyframes dr1{to{translate:16% 12%}}
@keyframes dr2{to{translate:-14% 16%}}
@keyframes dr3{to{translate:10% -14%}}
.m-warm .b1,.m-0 .b1,.m-1 .b1,.m-foot .b1{background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0))}
.m-warm .b2,.m-1 .b2,.m-foot .b2{background:radial-gradient(closest-side,rgba(232,131,74,.14),rgba(232,131,74,0))}
.m-warm .b3,.m-0 .b2,.m-2 .b1,.m-foot .b3{background:radial-gradient(closest-side,rgba(184,83,42,.13),rgba(184,83,42,0))}
.m-0 .b3,.m-1 .b3,.m-2 .b2,.m-3 .b3{background:radial-gradient(closest-side,rgba(247,182,75,.20),rgba(247,182,75,0))}
.m-2 .b3{background:radial-gradient(closest-side,rgba(37,11,71,.06),rgba(37,11,71,0))}
.m-3 .b1{left:18%;top:-20%;width:70%;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0))}
.m-3 .b2{background:radial-gradient(closest-side,rgba(255,253,250,.72),rgba(255,253,250,0))}

/* ---------- product pieces, built from the app's components ---------- */
.pcard{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--surface-sunk);box-shadow:var(--shadow-card);isolation:isolate;text-align:left}
.pcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(12px) saturate(.93) contrast(.95);transform:scale(1.12)}
.pc-info{position:absolute;left:0;right:0;bottom:0;padding:72px 16px 16px;color:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:linear-gradient(to top,var(--photo-fade) 0%,rgba(16,6,34,.76) 40%,rgba(16,6,34,.4) 72%,rgba(16,6,34,0) 100%)}
.pc-lab{font:600 11px/14px var(--font-sans);letter-spacing:.06em;color:var(--coach-ink-2)}
.pc-chips{display:flex;gap:6px}
.pc-chips span{height:28px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font:600 13px/18px var(--font-sans);background:var(--coach-glass);box-shadow:inset 0 0 0 1px var(--coach-glass-ring)}
.pc-line{font:400 22px/28px var(--font-serif);text-wrap:pretty}
.pc-row{width:100%;display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--coach-ink-2)}
.pc-row b{font:600 17px/22px var(--font-sans);color:var(--surface)}
.v6-toast{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius-panel);background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-toast);font:400 15px/20px var(--font-sans);white-space:nowrap}

/* ---------- hero ---------- */
.v6-hero{position:relative;padding:clamp(136px,17vh,176px) 12px 0;text-align:center}
.v6-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.v6-cta.left{justify-content:flex-start}
.v6-ghost{background:var(--tabbar);color:var(--ink);box-shadow:var(--shadow-tabbar)}
.js .v6-hero [data-in]{opacity:0;translate:0 16px}
.js .v6-hero.go [data-in]{opacity:1;translate:0 0;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + 80ms)}
.v6-hero [data-in="1"]{--i:1}.v6-hero [data-in="2"]{--i:2}.v6-hero [data-in="3"]{--i:3}.v6-hero [data-in="4"]{--i:4}

/* ---------- tour: one pinned panel, four steps ---------- */
.tour{position:relative;height:420svh;margin-top:clamp(64px,10vh,120px)}
.tour-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:64px}
.tour-wrap{max-width:1264px}
.tour-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-sheet);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vh,32px);height:min(720px,calc(100svh - 96px))}
.tour-tabs{display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--tabbar);box-shadow:var(--shadow-tabbar)}
.tt{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:600 15px/20px var(--font-sans);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tt .ico{width:20px;height:20px}
.tt.on{background:var(--ink-06);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.tt:hover{color:var(--ink)}}
.tour-card{flex:1;min-height:0;width:100%;max-width:1080px;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.4vw,48px);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-tabbar)}
.tc-copy{position:relative;align-self:stretch}
.tcx{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 14px));transition:opacity .18s ease,transform .3s var(--ease-out)}
.tcx.on{opacity:1;transform:translateY(-50%);transition:opacity .5s var(--ease-out) .12s,transform .6s var(--ease-out) .12s}
.tcx h3{font:400 clamp(30px,3.3vw,46px)/1.1 var(--font-serif);letter-spacing:-.012em;text-wrap:balance}
.tcx p{margin-top:14px;max-width:36ch;font:400 17px/24px var(--font-sans);color:var(--ink-2);text-wrap:pretty}
.tc-vis{position:relative;align-self:stretch;min-height:360px;border-radius:var(--radius-panel);overflow:hidden;background:var(--glow-amber),var(--glow-rust),var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.vg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.98);transition:opacity .25s ease,transform .35s var(--ease-out)}
.vg.on{opacity:1;transform:none;transition:opacity .6s var(--ease-out) .1s,transform .7s var(--ease-out) .1s}

/* read: pages turn like the app's book */
.pages{position:relative;width:250px;height:340px}
.pg{position:absolute;inset:0;opacity:0;transform:translateX(28px);transition:opacity .5s ease,transform .6s var(--ease-out)}
.pg.on{opacity:1;transform:none}
.pg.out{opacity:0;transform:translateX(-28px)}
.paper{border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:var(--shadow-card);padding:20px;display:flex;flex-direction:column;gap:10px;text-align:left}
.pp-lab{font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.pp-big{font:400 22px/28px var(--font-serif);text-wrap:pretty}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px}
.pp-chips span{height:32px;padding:0 10px;border-radius:var(--radius-control);display:inline-flex;align-items:center;font:600 13px/18px var(--font-sans);background:var(--ink-06)}
.paper .ub-btn{margin-top:auto;height:44px}
.dots{display:flex;gap:6px;margin-top:18px}
.dots i{width:6px;height:6px;border-radius:999px;background:var(--ink-16);transition:background-color .3s ease}
.dots i.on{background:var(--ink)}

/* answer */
.sheetc{width:min(330px,86%);display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);text-align:left}
.pp-q{font:400 22px/28px var(--font-serif);text-wrap:pretty}
.u-field{min-height:96px;padding:12px 14px;border-radius:var(--radius-control);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line);font:400 17px/22px var(--font-sans)}
.u-caret{display:inline-block;width:2px;height:20px;margin-left:1px;vertical-align:-4px;background:var(--ink);animation:caret 1s steps(1) infinite}
.u-help{display:flex;justify-content:space-between;gap:12px;font:400 13px/18px var(--font-sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.u-btn{height:50px;border-radius:var(--radius-control);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--ink-hi) 0%,var(--ink-lo) 100%);color:var(--on-ink);box-shadow:var(--shadow-button);font:600 17px/22px var(--font-sans);transition:transform .16s var(--ease-out)}
.u-btn.press{transform:scale(.97)}
.vg-toast{position:absolute;top:22px;left:50%;opacity:0;transform:translate(-50%,-10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.vg-answer.sent .vg-toast{opacity:1;transform:translate(-50%,0)}
.vg-answer.sent .sheetc{opacity:.4;transform:scale(.98);transition:opacity .4s ease,transform .4s var(--ease-out)}
.sheetc{transition:opacity .4s ease,transform .4s var(--ease-out)}

/* talk: the chat grows, then the stage fills with the app's amber glow */
.chatc{width:min(340px,88%);display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);text-align:left;transition:box-shadow .6s ease}
.chatc.glow{box-shadow:inset 0 0 0 2px #F7B64B,inset 0 0 48px 8px rgba(247,182,75,.32),var(--shadow-card)}
.cc-head{display:flex;align-items:center;gap:10px;padding-bottom:8px}
.cc-head .ub-avatar{width:36px;height:36px}
.cc-head b{font:400 20px/24px var(--font-serif)}
.stages{display:flex;gap:3px;width:120px;margin-top:5px}
.stages i{flex:1;height:3px;border-radius:999px;background:var(--ink-16);transition:background-color .6s ease}
.stages i.f,.chatc.glow .stages i.nx{background:var(--ink)}
.cc-pin{padding:0 2px 10px;border-bottom:1px solid var(--line)}
.cc-pin span{font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.cc-pin p{font:400 17px/22px var(--font-serif)}
.bub-row{display:flex;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.bub-row.on{opacity:1;transform:none}
.bub-row span{max-width:82%;padding:9px 13px;font:400 15px/20px var(--font-sans);text-wrap:pretty}
.bub-row.me{justify-content:flex-end}
.bub-row.me span{border-radius:var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);background:var(--ink);color:var(--on-ink)}
.bub-row.them span{border-radius:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}

/* connect: the clear photo comes up through the blurred one */
.seec{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.see-photo{position:relative;width:220px;height:280px;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:14px}
.see-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.see-photo img.bl{filter:blur(12px) saturate(.93) contrast(.95);transform:scale(1.12)}
.see-photo img.cl{opacity:0;transition:opacity .6s ease}
.vg-see.clear .see-photo img.cl{opacity:1;transition:opacity 2.8s cubic-bezier(.65,0,.35,1)}
.see-glow{position:absolute;top:-60px;left:50%;width:380px;height:400px;margin-left:-190px;border-radius:50%;background:radial-gradient(closest-side,rgba(247,182,75,.34),rgba(247,182,75,0));opacity:0;transition:opacity 1.6s ease}
.vg-see.clear .see-glow{opacity:1;transition-duration:2.8s}
.see-t{font:400 28px/34px var(--font-serif)}
.see-s{font-size:15px;line-height:20px;color:var(--ink-2)}

/* ---------- three features, close up ---------- */
.v6-sec{position:relative;padding:clamp(96px,14vh,150px) 0}
.v6-sec-tight{padding-top:0}
.v6-head{text-align:center;max-width:760px;margin:0 auto 48px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{position:relative;overflow:hidden;border-radius:var(--radius-card);display:flex;flex-direction:column;min-height:540px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-raised)}
.feat-vis{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 24px 8px}
.feat-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 28px 28px}
.feat-copy h3{font:400 28px/34px var(--font-serif);text-wrap:balance}
.feat-copy p{font-size:15px;line-height:20px;color:var(--ink-2);text-wrap:pretty}
.f-amber{background:radial-gradient(120% 70% at 20% 0%,rgba(247,182,75,.34),rgba(247,182,75,0) 72%),var(--surface-raised)}
.f-rust{background:radial-gradient(120% 70% at 80% 0%,rgba(184,83,42,.13),rgba(184,83,42,0) 72%),radial-gradient(90% 60% at 10% 40%,rgba(247,182,75,.20),rgba(247,182,75,0) 72%),var(--surface-raised)}
.f-coach{background:var(--coach-ground);color:var(--coach-ink);box-shadow:none}
.f-coach .feat-copy p{color:var(--coach-ink)}
.mini-q{width:300px}
.coachc{width:min(320px,100%);display:flex;flex-direction:column;gap:10px}
.coachc .bub{max-width:100%}
/* each card's piece settles in a beat after the card */
.js .feat .feat-vis > *{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .7s var(--ease-out) .25s,transform .8s var(--ease-out) .25s}
.js .feat.in .feat-vis > *{opacity:1;transform:none}

/* ---------- early access ---------- */
.v6-join{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,11vh,112px) var(--gutter);border-radius:var(--radius-sheet)}
.v6-join .join-in{max-width:620px}
.v6-join .form{margin-top:16px}

/* ---------- footer: the name comes into focus at the end ---------- */
.v6-foot{padding:12px;margin-top:24px}
.v6-foot-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-sheet);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line)}
.v6-foot-in{position:relative;max-width:1160px;margin:0 auto;padding:clamp(64px,10vh,104px) var(--gutter) 24px;display:flex;flex-direction:column}
.v6-foot-top{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
.v6-foot-ask{display:flex;flex-direction:column;gap:24px}
.v6-foot-q{font:400 clamp(36px,4.4vw,60px)/1.08 var(--font-serif);letter-spacing:-.012em;text-wrap:balance;max-width:14ch}
.v6-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:10px}
.v6-foot-cols h3{font:600 13px/18px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.v6-foot-cols li + li{margin-top:10px}
.v6-foot-cols a{font-size:15px;line-height:20px;color:var(--ink-2);text-decoration:none;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.v6-foot-cols a:hover{color:var(--ink)}}
.v6-foot-mark{width:100%;aspect-ratio:960/180;margin-top:clamp(72px,12vh,140px);background:var(--ink);-webkit-mask:url(brand/wordmark-alpha.webp) center/contain no-repeat;mask:url(brand/wordmark-alpha.webp) center/contain no-repeat;filter:blur(var(--fb,14px));opacity:var(--fo,.24)}
.v6-foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:18px;color:var(--ink-2)}

@media (max-width:1023px){
  .tour-card{grid-template-columns:1fr;gap:16px;padding:20px}
  .tc-copy{min-height:150px}
  .tcx{text-align:center}
  .tcx p{margin-inline:auto}
  .tc-vis{min-height:300px}
  .feats{grid-template-columns:1fr}
  .feat{min-height:460px}
  .v6-foot-top{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tt span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* icon only, label stays for screen readers */
  .tt{padding:0 14px}
  .tour-panel{height:calc(100svh - 84px);padding:14px}
  .tcx h3{font-size:28px}
  .tc-vis{min-height:0;flex:1}
  .tour-card{display:flex;flex-direction:column}
  .tc-copy{min-height:140px;width:100%}
  .tc-vis{width:100%}
  .pages{transform:scale(.86)}
  .v6-foot-cols{grid-template-columns:1fr 1fr}
  .v6-foot-cols li a{display:inline-flex;align-items:center;min-height:44px}
  .v6-foot-cols li + li{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .mesh .b{animation:none}
  .js .v6-hero [data-in],.js .v6-scene > *{translate:none;transform:none}
  .js .v6-hero.go [data-in],.js .v6-hero.go .v6-scene > *{transition:opacity .4s ease}
  .tcx,.tcx.on{transition:opacity .3s ease}
  .js .feat .feat-vis > *{transform:none}
  .v6-foot-mark{filter:none;opacity:1}
}

/* features: the chats list with its five-chat cap and a stage bar on every row */
.chatsc{width:min(320px,100%);display:flex;flex-direction:column;padding:14px;border-radius:var(--radius-card);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card);text-align:left}
.chatsc-h{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 10px}
.chatsc-h b{font:400 20px/26px var(--font-serif);color:var(--ink)}
.chatsc-h span{font:500 12px/16px var(--font-sans);color:var(--ink-2)}
.chr{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.chr-av{width:36px;height:36px;border-radius:50%;overflow:hidden}
.chr-av img{width:100%;height:100%;object-fit:cover;filter:blur(4px) saturate(.93) contrast(.95);transform:scale(1.2)}
.chr-t{display:flex;flex-direction:column;min-width:0}
.chr-t b{font:600 14px/18px var(--font-sans);color:var(--ink)}
.chr-t span{font:400 12px/16px var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chr-st{display:flex;gap:3px;width:52px}
.chr-st i{flex:1;height:3px;border-radius:2px;background:var(--ink-16)}
.chr-st i.f{background:var(--ink)}

/* the footer wordmark as an image in the ink colour, so it renders everywhere (exports and captures included) */
.v6-foot-mark{-webkit-mask:none;mask:none;background:url(brand/wordmark-alpha.webp) left center/contain no-repeat;width:min(100%,520px);margin-top:clamp(64px,9vh,96px)}
/* reduced motion: the tour stops pinning. One panel, the tabs switch the step */
@media (prefers-reduced-motion:reduce){
  .tour{height:auto}
  .tour-pin{position:static;height:auto;padding-top:0}
  .tour-panel{height:720px}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){.tour-panel{height:760px}}
/* the menu wordmark as the ink image too (crisp at 3840px, and it survives exports and captures) */
.dn-logo .mark{-webkit-mask:none;mask:none;background:url(brand/wordmark-alpha.webp) center/contain no-repeat}

/* ===== the team (16 Oct): a quiet row of portraits, like a book. First names only. Each photo is blurred and black and white
   until you hover it (or tap or focus it). Then it unblurs, turns to colour, and its corners glow with the Welcome screen's amber
   (radial glows in the top right and bottom left corners, the site's .34 amber step, screen-blended so they read on dark photos too). Amber is used only as glow, per tokens.json ===== */
.team-sec{padding:clamp(72px,10vw,120px) 24px}
.tp{max-width:1096px;margin:0 auto}
.tp-head .eyebrow{display:block}
.tp-head h2{margin:12px 0 0;font:400 34px/40px var(--font-serif);letter-spacing:-.012em;color:var(--ink)}
.tp-row{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:24px}
.tp-row li{display:flex;flex-direction:column}
.tp-ph{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--surface-sunk);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.tp-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) blur(14px);transform:scale(1.1);
  transition:filter .5s var(--ease-out),transform .5s var(--ease-out)}
.tp-ph::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);mix-blend-mode:screen;
  background:radial-gradient(90% 55% at 100% 0%,rgba(247,182,75,.34) 0%,rgba(247,182,75,0) 70%),radial-gradient(90% 55% at 0% 100%,rgba(247,182,75,.34) 0%,rgba(247,182,75,0) 70%)}
.tp-ph.on img,.tp-ph:focus-visible img{filter:grayscale(0) blur(0);transform:scale(1)}
.tp-ph.on::after,.tp-ph:focus-visible::after{opacity:1}
@media (hover:hover) and (pointer:fine){.tp-ph:hover img{filter:grayscale(0) blur(0);transform:scale(1)}.tp-ph:hover::after{opacity:1}}
.tp-row b{margin-top:14px;font:400 22px/28px var(--font-serif);color:var(--ink)}
.tp-row span{margin-top:2px;font-size:13px;line-height:18px;color:var(--ink-2);text-wrap:pretty}
@media (max-width:860px){.tp-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px}}
@media (max-width:520px){.tp-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-head h2{font-size:28px;line-height:34px}}
@media (prefers-reduced-motion:reduce){.tp-ph img,.tp-ph::after{transition-duration:.01s}}
/* footer: Instagram and LinkedIn as their own marks, in the footer link colour */
.v6-foot-cols .foot-social{display:flex;gap:8px}
.v6-foot-cols .foot-social li + li{margin-top:0}
.v6-foot-cols .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-11px;border-radius:12px}
.v6-foot-cols .foot-social li + li a{margin-left:0}
.v6-foot-cols .foot-social a:hover{background:var(--ink-06)}