/* /you v3: "The Wedge". A 24 hour dial draws itself, one 16:40 sliver lights up,
   then the dial flattens into the six segment status bar the chat fills.
   Palette and type from /assets/tokens.css. No cards inside cards. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden}
body[data-stage=intro]{overflow:hidden;height:100dvh}
button,input,textarea{font:inherit;color:inherit}
input,textarea{font-size: max(16px,1em)}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.025em}
h1 i,h2 i,h3 i{font-weight:400;color:var(--orange)}
p{line-height:1.6}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.17em;line-height:1.5;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:50;background:var(--cream);color:var(--ink);padding:10px 16px}
.skip-link:focus{left:8px;top:8px}
.noscript{padding:40px;max-width:520px}
.primary{background:var(--orange);color:var(--ink);border-radius:2px;padding:14px 22px;font-size:15px;font-weight:600;letter-spacing:.01em;min-height:48px;transition:background var(--motion-fast) var(--motion-ease)}
.primary:hover{background:var(--orange-hover)}
.ghost{color:var(--muted);font-size:12px;letter-spacing:.14em;padding:10px 4px;min-height:44px;text-transform:uppercase}
.ghost:hover{color:var(--cream)}

/* ---------- Screen 1: the intro ---------- */
#intro{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-width:1320px;margin:0 auto;padding:0 var(--page-gutter)}
.mast{display:flex;align-items:center;gap:14px;padding:20px 0 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.17em;color:var(--muted);flex-wrap:wrap}
.mast img{display:block;object-fit:contain}
.mast .pdf-control{margin-left:auto}
.mast #skip{margin-left:0}

/* v5: leave-anytime PDF pill. Small, calm, present in the header on intro
   and chat, and visible again in the result via the chat header. Never covers
   content at 390. Focus ring lands on the ring, not the fill. */
.pdf-control{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream);border:1px solid #7a8c7e;border-radius:999px;padding:8px 12px;min-height:36px;line-height:1;background:transparent;transition:border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease)}
.pdf-control:hover{border-color:var(--orange);color:var(--orange)}
@media (min-width:900px){.pdf-control{font-size:12px;padding:9px 16px;min-height:40px}}
.stage{display:grid;grid-template-rows:auto auto;align-content:center;gap:clamp(20px,4vh,40px);padding:clamp(16px,3vh,44px) 0;min-height:0;overflow:hidden}

.dial-wrap{display:grid;justify-items:start;gap:14px;justify-self:start;will-change:transform;transition:transform .55s var(--motion-ease),opacity .55s var(--motion-ease);transform-origin:left top}
#dial-wrap[data-hero=on]{opacity:0;pointer-events:none}
#dial-wrap[data-hero=on] .dial-note{opacity:0}
.dial-box{position:relative;width:clamp(156px,42vw,200px);aspect-ratio:1}
.dial{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial circle{fill:none}
.ring-track{stroke:var(--line);stroke-width:1}
.ring-day{stroke:var(--muted);stroke-width:2;stroke-linecap:butt;stroke-dasharray:565.49;stroke-dashoffset:565.49;opacity:.55}
.ring-pillars circle{stroke-width:6;stroke-dasharray:178.5 386.99;opacity:0;transition:opacity .5s var(--motion-ease)}
.ring-pillars circle[data-pillar=physical]{stroke:var(--pillar-physical);stroke-dashoffset:0}
.ring-pillars circle[data-pillar=mental]{stroke:var(--pillar-mental);stroke-dashoffset:-188.5}
.ring-pillars circle[data-pillar=emotional]{stroke:var(--pillar-emotional);stroke-dashoffset:-377}
.ring-wedge{stroke:var(--orange);stroke-width:13;stroke-linecap:butt;stroke-dasharray:6.55 558.94;opacity:0;transition:opacity .35s var(--motion-ease)}
.ticks line{stroke:var(--line);stroke-width:1}
.ticks line.hour6{stroke:#5d6f62}
.dial[data-day=on] .ring-day{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--motion-ease)}
.dial[data-wedge=on] .ring-wedge{opacity:1}
.dial[data-wedge=on] .ring-day{opacity:.3}
.dial[data-pillars=on] .ring-pillars circle{opacity:.9}
.dial[data-pillars=on] .ring-day{opacity:.12}
.dial[data-floor=on] .ring-wedge{animation:pulse 1.5s var(--motion-ease) infinite}
@keyframes pulse{0%,100%{opacity:1;stroke-width:13}50%{opacity:.62;stroke-width:17}}

.readout{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:4px;text-align:center}
#counter{font-size:clamp(34px,8vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cream)}
#counter-unit{font-size:10px;letter-spacing:.2em;color:var(--muted)}
.dial-note{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:10px;letter-spacing:.17em;color:var(--muted);opacity:0;transition:opacity .5s var(--motion-ease)}
.dial-note i{font-style:normal;color:var(--orange)}
#dial-wrap[data-note=on] .dial-note{opacity:1}

.beats{display:grid;min-height:0;align-content:start}
.beat{grid-area:1/1;pointer-events:none;opacity:0;display:grid;gap:clamp(12px,2.2vh,20px);align-content:start;max-width:min(100%,560px)}
.beat.on{opacity:1;pointer-events:auto}
.beat h1{font-size:clamp(38px,9.6vw,60px)}
.beat .say{font-size:16px;color:var(--muted);max-width:33ch}
.beat .kick{font-family:var(--serif);font-size:clamp(21px,5.2vw,26px);color:var(--orange);line-height:1.15}
.beat .swaps{font-size:17px;color:var(--cream);line-height:1.5}
.beat .swaps .line{display:inline-block}
.line{display:block}
.pillars{display:grid;gap:14px}
.pillars li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;padding-left:22px;position:relative}
.pillars li::before{content:'';position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;background:var(--dot)}
.pillars li[data-pillar=physical]{--dot:var(--pillar-physical)}
.pillars li[data-pillar=mental]{--dot:var(--pillar-mental)}
.pillars li[data-pillar=emotional]{--dot:var(--pillar-emotional)}
.pillars b{font-family:var(--serif);font-weight:400;font-size:clamp(23px,6vw,30px);letter-spacing:-.02em;grid-column:1/-1}
.pillars span{grid-column:1/-1;font-size:14px;color:var(--muted);line-height:1.5;max-width:40ch}
#door{display:inline-block}
.door-rest{display:inline;transition:opacity .4s var(--motion-ease)}
.door-rest[data-hidden=true]{opacity:0}

/* Beat 3: the giant 16:40 hero. Dial steps aside via #dial-wrap[data-hero=on]. */
.hero-beat .hero-time{font-family:var(--sans);font-size:clamp(110px,26vw,220px);font-weight:300;letter-spacing:-.045em;line-height:.92;color:var(--cream);font-variant-numeric:tabular-nums;margin:0}
.hero-beat .say{max-width:40ch;margin-top:6px}

/* Reveal animation, applied per line by JS. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.beat.on .line{animation:rise .62s var(--motion-ease) backwards}

.intro-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:14px 0 max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.dots{display:flex;gap:5px;grid-column:1;grid-row:2}
.dots i{display:block;flex:1 1 0;max-width:22px;min-width:8px;height:3px;border-radius:2px;background:var(--line);transition:background .35s var(--motion-ease)}
.dots i.on{background:var(--orange)}
.dots i.past{background:#63745f}
.hint{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;grid-column:1;grid-row:1}
#continue{grid-column:2;grid-row:1/3;white-space:nowrap}
#continue.quiet{background:none;color:var(--muted);border:1px solid var(--line);font-weight:500}
#continue.quiet:hover{color:var(--cream);border-color:var(--orange)}

/* ---------- Screen 2: the chat ---------- */
#chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;max-width:1320px;margin:0 auto}
body[data-stage=chat]{overflow:hidden;height:100dvh}
.chat-mast{padding:14px var(--page-gutter) 0;background:var(--bg);border-bottom:1px solid var(--line)}
.chat-mast-row{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.17em;color:var(--muted)}
.chat-mast-row img{display:block;object-fit:contain}
.chat-mast-row .chat-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chat-mast-row .pdf-control{margin-left:auto}
.chat-count{font-variant-numeric:tabular-nums;letter-spacing:.08em;flex:0 0 auto}
.chat-count b{font-weight:600;color:var(--cream)}
/* v5: at 390 the title is long and the pill needs to breathe, so drop the
   uppercase title on very narrow phones so the pill and 0/6 fit on one row. */
@media (max-width:439px){.chat-mast-row .chat-title{display:none}}
/* r2: tap-hint appears under the segments once at least one is filled so people
   see the bars ARE editing controls (product review C8). */
.tap-hint{grid-column:1/-1;font-size:11px;color:#a5b6a8;padding:0 0 6px;opacity:0;transition:opacity .3s var(--motion-ease)}
.tap-hint[data-on=true]{opacity:1}
.segments{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px 0 14px}
.seg{display:grid;gap:6px;text-align:left;min-height:44px;align-content:start;padding:2px 0 0}
.seg-label{font-size:10px;letter-spacing:.13em;color:#a5b6a8;transition:color .3s var(--motion-ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-track{display:block;height:4px;border-radius:2px;background:#25382f;overflow:hidden;position:relative}
.seg-fill{display:block;height:100%;width:100%;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left}
.seg-value{font-size:10px;color:var(--muted);line-height:1.3;display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg[data-state=filled] .seg-label{color:var(--cream)}
.seg[data-state=asking] .seg-label{color:var(--orange)}
.seg[data-state=asking] .seg-track::after{content:'';position:absolute;inset:0;background:var(--orange);opacity:.28;animation:breathe 1.9s var(--motion-ease) infinite}
@keyframes breathe{0%,100%{opacity:.14}50%{opacity:.42}}
.seg[data-state=filled]{cursor:pointer}
.seg[data-state=filled]:hover .seg-track{box-shadow:0 0 0 1px var(--orange)}
.seg.flash .seg-track{animation:segflash .75s var(--motion-ease)}
@keyframes segflash{0%{box-shadow:0 0 0 0 #f0a16600}30%{box-shadow:0 0 0 5px #f0a16633}100%{box-shadow:0 0 0 9px #f0a16600}}
.seg[data-state=filled] .seg-label::after{content:' ✓';color:var(--orange)}

.log{overflow-y:auto;overscroll-behavior:contain;padding:22px var(--page-gutter) 12px;display:grid;gap:14px;align-content:start;scrollbar-width:thin}
.turn{display:grid;gap:10px;animation:rise .5s var(--motion-ease) backwards}
.msg{max-width:min(30rem,88%);padding:14px 18px;border-radius:14px;line-height:1.45}
.msg.brent{background:var(--panel);border-top-left-radius:3px;justify-self:start;border-left:2px solid var(--orange)}
.msg.brent .q{font-family:var(--serif);font-size:clamp(21px,5.4vw,26px);line-height:1.12;letter-spacing:-.02em}
.msg.brent .sub{font-size:14px;color:var(--muted);margin-top:8px}
.msg.brent .eyebrow{margin-bottom:8px}
.msg.you{background:var(--cream);color:var(--ink);justify-self:end;border-top-right-radius:3px;font-size:16px}
.msg.you .who{display:block;font-size:9px;letter-spacing:.16em;color:#5d6b58;margin-bottom:5px}
.typing{display:inline-flex;gap:5px;align-items:center;padding:16px 18px;background:var(--panel);border-radius:14px;border-top-left-radius:3px;justify-self:start;border-left:2px solid var(--orange)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chiprow{display:flex;flex-wrap:wrap;gap:8px;justify-self:start;max-width:min(34rem,100%)}
.chiprow button{border:1px solid var(--line);border-radius:999px;padding:11px 16px;min-height:46px;font-size:14px;background:#182b25;transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),color var(--motion-fast)}
/* r2: only :focus-visible earns the orange ring, so a chip left focused by a touch
   or a capture script does not look pre-selected. Pointer hover still highlights. */
@media (hover:hover){.chiprow button:hover{border-color:var(--orange);background:#1f332b}}
.chiprow button[aria-pressed=true]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.turn.spent .chiprow{display:none}

.pickup{justify-self:start;max-width:min(30rem,92%);display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.pickup-head{font-size:11px;letter-spacing:.14em;color:var(--muted);padding:9px 0 7px;text-transform:uppercase}
.pickup-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #2a3b33}
.pickup-row b{font-size:10px;letter-spacing:.16em;color:var(--orange);text-transform:uppercase;width:52px;flex:0 0 auto}
.pickup-row span{flex:1;font-size:15px}
.pickup-guess{display:block;font-size:12px;color:#a5b6a8;margin-top:2px}
.pickup-row button{font-size:13px;color:var(--cream);text-decoration:underline;text-underline-offset:4px;padding:12px 8px;min-height:44px;min-width:44px}
.pickup-row button:hover{color:var(--orange)}

/* The result: an editorial block on the page surface, not a bubble. */
.result{display:grid;gap:22px;padding:12px 0 0;animation:rise .6s var(--motion-ease) backwards}
.result hr{border:0;border-top:1px solid var(--line);margin:0}
.result-head{display:grid;gap:10px}
.result-head h2{font-size:clamp(30px,7.6vw,42px)}
.result-head .twist{font-size:15px;color:var(--muted);max-width:42ch}
.floorbar{display:grid;gap:8px}
.floorbar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.16em;color:var(--muted)}
.floorbar-top b{font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--cream);font-variant-numeric:tabular-nums}
.floortrack{height:5px;background:#25382f;border-radius:3px;position:relative;overflow:hidden}
.floortrack i{position:absolute;inset:0 auto 0 0;background:var(--orange);border-radius:3px;transition:width .7s var(--motion-ease)}
.floortrack u{position:absolute;top:0;bottom:0;left:33.33%;width:1px;background:var(--bg);text-decoration:none}
.windows{display:grid;gap:26px}
.window{display:grid;gap:12px}
.window-title{display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--line)}
.window-title small{font-weight:400;letter-spacing:.12em;color:#7d8c7f;margin-left:auto;text-align:right}
.wedge{display:grid;gap:8px;padding-left:14px;border-left:2px solid var(--pillar)}
.wedge-top{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.wedge-top .tag{color:var(--pillar);font-weight:600}
.wedge-top .unit{color:var(--muted);margin-left:auto}
.wedge-label{font-family:var(--serif);font-size:clamp(20px,5vw,24px);line-height:1.12;letter-spacing:-.02em}
.paired{font-size:13px;color:var(--muted);line-height:1.55;border-top:1px dotted #3b4b40;padding-top:9px}
.paired b{color:var(--cream);font-weight:600}
/* r2: One rule collapsed into an expandable details block so it does not eat the
   first task on a phone. Native <details> gets an aria-expanded state via toggle. */
.wedge-rule{border-top:1px dotted #3b4b40;padding-top:9px;font-size:13px;color:var(--muted);line-height:1.55}
.wedge-rule summary{cursor:pointer;list-style:none;padding:6px 0;color:var(--cream);font-weight:600;min-height:44px;display:flex;align-items:center;gap:8px}
.wedge-rule summary::-webkit-details-marker{display:none}
.wedge-rule summary::marker{display:none}
.wedge-rule summary::after{content:'\25BE';color:var(--muted);font-size:12px;margin-left:auto;transition:transform .2s var(--motion-ease)}
.wedge-rule[open] summary::after{transform:rotate(180deg)}
.wedge-rule p{margin-top:4px}
.starter-note{font-size:12px;color:#a5b6a8;letter-spacing:.02em;margin-top:-8px}
.window-empty{font-size:14px;color:#7d8c7f}
.floor-note{font-size:13px;color:var(--muted);line-height:1.6}
.route{display:flex;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.route strong{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:-.02em;display:block}
.route p{font-size:14px;color:var(--muted);margin-top:4px}
.route span{margin-left:auto;color:var(--orange);font-size:20px}
.route:hover strong{color:var(--orange)}

.signup{display:grid;gap:14px;padding:6px 0 0}
.signup h2{font-size:clamp(27px,6.6vw,36px)}
.signup .lede{font-size:15px;color:var(--cream);max-width:44ch}
.signup .field-edition-note{font-size:13px;color:#a5b6a8;max-width:44ch;line-height:1.55}
.signup label[for=email]{font-size:14px;color:var(--cream);font-weight:600}
.signup input[type=email]{width:100%;max-width:26rem;background:transparent;border:1px solid #a5b6a8;border-radius:2px;padding:15px 16px;font-size:17px;color:var(--cream);min-height:52px}
.signup input[type=email]::placeholder{color:#a5b6a8}
/* r2: the whole consent row is the target, with real padding so the tap area is easy
   to hit and reads at 4.5:1 or better on the forest bg. */
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--cream);line-height:1.5;cursor:pointer;max-width:34rem;padding:12px 0;min-height:44px}
.consent input{width:24px;height:24px;accent-color:var(--orange);margin:0;flex:0 0 auto}
.signup .fine{font-size:13px;color:#a5b6a8}
.signup button[type=submit]{justify-self:start}
#form-status{font-size:14px;color:var(--orange);min-height:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* r2: footer note and Start over now meet 4.5:1 on the forest bg and are large enough
   to read: #a5b6a8 sits above 4.5:1 on #142420; letter-spacing loosened and font-size
   bumped so the recovery affordance never looks unavailable. */
.log-foot{padding:14px 0 4px;font-size:13px;color:#a5b6a8;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;line-height:1.55}
.log-foot .log-foot-note{flex:1 1 auto;min-width:0}
.log-foot button{white-space:nowrap;flex:0 0 auto;font-size:14px;color:#a5b6a8;text-decoration:underline;text-underline-offset:4px;padding:12px 0;min-height:44px;min-width:44px}
.log-foot button:hover{color:var(--cream)}

/* Transcript collapse: when the sixth answer lands, prior turns wrap in a
   <details> toggle "Your answers · 6 of 6". Segments above stay tappable. */
.transcript{margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line);animation:rise .4s var(--motion-ease) backwards}
.transcript summary{cursor:pointer;list-style:none;padding:10px 0;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;user-select:none;min-height:40px}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::marker{display:none}
.transcript summary>span i{font-style:normal;color:var(--orange);margin:0 3px}
.transcript summary>span b{color:var(--cream);font-weight:600}
.transcript summary .chev{margin-left:auto;transition:transform .25s var(--motion-ease);color:var(--muted);letter-spacing:0}
.transcript summary .chev::before{content:'\25BE';font-size:12px}
.transcript[open] summary{margin-bottom:14px}
.transcript[open] summary .chev{transform:rotate(180deg)}
.transcript>.turn{opacity:.75}
.transcript>.turn:hover,.transcript>.turn:focus-within{opacity:1}

/* Done state: log lifts the result to the top so the persona headline and
   the first checklist window are visible above the fold. Composer is hidden. */
body[data-chat-mode=done] .log{padding-top:16px}

/* The flexible log gives space back to the composer when the keyboard opens. */
.composer{display:flex;gap:8px;align-items:flex-end;padding:12px var(--page-gutter) max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.composer textarea{flex:1;min-width:0;resize:none;max-height:120px;background:#182b25;border:1px solid var(--line);border-radius:22px;padding:13px 18px;font-size:16px;line-height:1.35;color:var(--cream)}
.composer textarea::placeholder{color:#8b9a8c}
.composer textarea:focus{border-color:#708075}
.composer button{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
#send{background:var(--orange);color:var(--ink);border-color:var(--orange);font-size:20px;line-height:1}
#send:disabled{background:none;color:#6d7d70;border-color:var(--line);cursor:default}
#mic[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.composer[data-hidden=true]{display:none}
.composer[data-hidden=true] + .composer-privacy{display:none}

/* v5: a quiet privacy line under the composer so people know raw text is stored. */
.composer-privacy{font-size:11px;color:#8b9a8c;padding:0 var(--page-gutter) max(10px,env(safe-area-inset-bottom));background:var(--bg);line-height:1.5;letter-spacing:.01em;text-align:left;margin:-6px 0 0}
@media (max-width:899px){.composer-privacy{display:none}}
@media (min-width:900px){.composer-privacy{padding:0 clamp(40px,4vw,64px) 16px;text-align:center}}

/* v5: leave-anytime PDF flow. Full-page email step overlays the whole /you
   surface so we borrow no chrome from the intro or chat and never overlap the
   composer or Skip button. Same forest palette as the rest of /you. */
.pdf-exit{position:fixed;inset:0;background:var(--bg);color:var(--cream);display:grid;grid-template-rows:auto 1fr;overflow:auto;z-index:12;padding:0 var(--page-gutter) max(24px,env(safe-area-inset-bottom))}
body[data-stage=pdf]{overflow:hidden;height:100dvh}
.pdf-exit-mast{display:flex;align-items:center;gap:12px;padding:20px 0 14px;border-bottom:1px solid var(--line)}
.pdf-exit-eyebrow{font-size:11px;letter-spacing:.17em;color:var(--muted)}
.pdf-exit-mast .ghost{margin-left:auto}
.pdf-exit-body{max-width:520px;margin:0 auto;padding:26px 0 0;display:grid;align-content:start;gap:14px;width:100%}
.pdf-exit-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,7.6vw,42px);line-height:1.06;letter-spacing:-.025em}
.pdf-exit-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,6vw,30px);line-height:1.1;letter-spacing:-.02em}
.pdf-exit-lede{font-size:16px;color:var(--cream);line-height:1.5;max-width:44ch}
.pdf-exit-form{display:grid;gap:14px}
.pdf-exit-label{font-size:14px;font-weight:600;color:var(--cream)}
.pdf-exit-form input[type=email]{width:100%;background:transparent;border:1px solid #a5b6a8;border-radius:2px;padding:15px 16px;font-size:17px;color:var(--cream);min-height:52px}
.pdf-exit-form input[type=email]::placeholder{color:#a5b6a8}
.pdf-exit-form input[type=email]:focus{border-color:var(--orange)}
.pdf-exit-privacy{font-size:13px;color:#a5b6a8;line-height:1.55;max-width:44ch}
.pdf-exit-form .primary{justify-self:start}
.pdf-exit-status{font-size:14px;color:var(--orange);min-height:1em}
.pdf-exit-done{display:grid;gap:14px;padding:14px 0 0}
/* v5: once the PDF is on its way, the form's intro copy steps aside so the
   confirmation owns the screen at 390 without leftover headline noise. */
.pdf-exit-body[data-done=true] > h2,
.pdf-exit-body[data-done=true] > .pdf-exit-lede{display:none}
.pdf-exit-done-lede{font-size:15px;color:var(--muted);line-height:1.55;max-width:44ch}
.pdf-exit-download{color:var(--orange);text-decoration:underline;text-underline-offset:4px;font-weight:600}
.pdf-exit-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;padding-top:6px}
.pdf-exit-actions .primary{white-space:nowrap}
.pdf-exit-actions .ghost{padding:12px 14px}
@media (min-width:900px){
 .pdf-exit{padding:0 clamp(40px,4vw,64px) 40px}
 .pdf-exit-body{padding-top:40px;gap:18px}
}

/* One pinned email bar. Its measured height reserves real layout space. */
:root{--you-height:100vh;--you-top:0px;--pdf-bar-height:210px}
@supports(height:100svh){:root{--you-height:100svh}}
@supports(height:100dvh){:root{--you-height:100dvh}}
#intro,#chat{height:calc(var(--you-height) - var(--pdf-bar-height));min-height:0}
#chat{grid-template-rows:auto minmax(0,1fr) auto auto}
.chat-count{margin-left:auto}
.log{min-height:0;padding-bottom:24px;scroll-padding-bottom:24px;overflow-anchor:none}
.pdf-exit{inset:auto 0 auto;top:calc(var(--you-top) + var(--you-height));transform:translateY(-100%);padding:14px var(--page-gutter) max(12px,env(safe-area-inset-bottom));display:block;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -12px 28px #07151022;max-height:calc(var(--you-height) - 70px);overflow-y:auto}
.pdf-exit-body{max-width:1040px;margin:0 auto;padding:0;gap:10px}
.pdf-exit-body>h2,.pdf-exit-lede{display:none}
.pdf-exit-form{gap:8px}
.pdf-exit-label{font-size:13px;letter-spacing:.025em}
.pdf-entry{display:flex;gap:8px;align-items:stretch}
.pdf-entry input[type=email]{min-width:0;flex:1;min-height:48px;padding:10px 12px;background:var(--bg);font-size:16px}
.pdf-entry .primary{flex:0 0 auto;padding:10px 15px;white-space:nowrap;font-size:14px}
.pdf-exit .consent{font-size:12px;line-height:1.35;padding:3px 0;min-height:24px;gap:8px;max-width:none;align-items:center}
.pdf-exit .consent input{width:20px;height:20px}
.pdf-exit-privacy{font-size:11px;line-height:1.4;max-width:none;color:var(--muted)}
.pdf-exit-status:empty{display:none}
.pdf-exit-status{min-height:0;font-size:13px}
.pdf-name{display:grid;gap:4px}
.pdf-name label{font-size:13px}
.pdf-name input{width:100%;background:var(--bg);border:1px solid #a5b6a8;border-radius:2px;padding:10px 12px;color:var(--cream);font-size:16px;min-height:44px}
.pdf-exit[data-expanded=true] .pdf-exit-body{max-width:680px}
.pdf-exit[data-expanded=true] .pdf-exit-body>h2{display:block;font-size:28px;line-height:1.1}
.pdf-exit[data-expanded=true] .pdf-exit-lede{display:block;font-size:13px;line-height:1.4}
.pdf-exit-body[data-done=true]>h2,.pdf-exit-body[data-done=true]>.pdf-exit-lede{display:none!important}
.pdf-exit-done{padding:0;gap:8px}
.pdf-exit-done .eyebrow{font-size:10px}
.pdf-exit-done-lede{font-size:13px;max-width:60ch}
.pdf-exit-actions{padding:0}
.pdf-exit-actions .ghost{padding:0;min-height:32px;font-size:11px}
.keyboard-open .pdf-name,.keyboard-open .pdf-exit[data-expanded=true] .pdf-exit-lede{display:none}
.keyboard-open .pdf-exit{padding-top:10px}
.keyboard-open .pdf-exit[data-expanded=true] .pdf-exit-body>h2{font-size:22px}
.keyboard-open .chat-mast .segments,.keyboard-open .chat-mast .tap-hint{display:none}
@media(max-width:899px){
 /* Fix the chat to the visual viewport, including Safari's keyboard pan offset.
    The document cannot scroll behind it; only the message log scrolls. */
 html:has(body[data-stage=chat]){overflow:hidden;overscroll-behavior:none}
 body[data-stage=chat]{position:fixed;inset:0;height:100%;overflow:hidden}
 body[data-stage=chat] #chat{position:fixed;top:var(--you-top);left:0;right:0}
 body[data-stage=chat].composer-focused:not([data-chat-mode=done]) #chat{height:var(--you-height)}
 body[data-stage=chat].composer-focused:not([data-chat-mode=done]) .pdf-exit:not(:focus-within){display:none}
 body[data-stage=chat].composer-focused .chat-mast{padding-bottom:10px}
 body[data-stage=chat].composer-focused .segments,
 body[data-stage=chat].composer-focused .tap-hint{display:none}
}
@media(min-width:900px){
 .pdf-exit{padding:16px max(40px,calc((100vw - 1040px)/2)) max(16px,env(safe-area-inset-bottom))}
 .pdf-exit-form{grid-template-columns:1fr 1fr;column-gap:24px;align-items:center}
 .pdf-exit-label,.pdf-entry,.pdf-name{grid-column:1}
 .pdf-exit .consent{grid-column:2;grid-row:2;font-size:13px}
 .pdf-exit-privacy{grid-column:2;grid-row:3}
 .pdf-exit-status{grid-column:1/-1}
 .pdf-exit[data-expanded=true] .pdf-exit-form{display:grid;grid-template-columns:1fr}
 .pdf-exit[data-expanded=true] .pdf-exit-form>*{grid-column:1;grid-row:auto}
}

/* Intro pins itself over the chat for the flatten transition. */
body[data-stage=leaving]{overflow:hidden;height:100dvh}
body[data-stage=leaving] #intro{position:fixed;inset:0;z-index:5;background:var(--bg);pointer-events:none;max-width:none;padding-left:max(var(--page-gutter),calc(50vw - 660px + var(--page-gutter)));padding-right:max(var(--page-gutter),calc(50vw - 660px + var(--page-gutter)))}

/* ---------- Wide ---------- */
@media (min-width:560px){
  .seg-value{display:block}
}
@media (min-width:900px){
  #intro{padding:0 clamp(40px,4vw,64px)}
  .stage{grid-template-columns:minmax(260px,32%) minmax(0,1fr);grid-template-rows:1fr;align-items:center;gap:clamp(48px,6vw,96px);padding:0}
  .dial-wrap{justify-self:center;justify-items:center}
  .dial-box{width:min(100%,320px)}
  #counter{font-size:58px}
  .dial-note{font-size:11px}
  .beats{align-content:center}
  .beat{max-width:640px;gap:22px}
  .beat h1{font-size:clamp(44px,4.4vw,68px)}
  .beat .say,.beat .swaps{font-size:19px;max-width:44ch}
  .beat .kick{font-size:34px}
  .pillars b{font-size:36px}
  .pillars span{font-size:15px}
  .beat[data-beat="3"]{max-width:700px}
  .mast{padding:26px 0 20px}
  .intro-foot{padding:20px 0 26px}
  .intro-foot{grid-template-columns:auto minmax(0,1fr) auto;gap:28px}
  .hint{grid-column:1;grid-row:1}
  .dots{grid-column:2;grid-row:1;max-width:200px}
  #continue{grid-column:3;grid-row:1}

  #chat{grid-template-rows:auto minmax(0,1fr) auto}
  .chat-mast{padding:20px clamp(40px,4vw,64px) 0}
  .chat-mast-row,.segments,.tap-hint{max-width:1040px;margin:0 auto;width:100%}
  .segments{gap:10px;padding:16px 0 18px}
  .seg-label{font-size:10px}
  .seg-track{height:5px}
  .log{padding:30px clamp(40px,4vw,64px) 16px;gap:18px;justify-items:stretch}
  .log>*{width:100%;max-width:1040px;margin:0 auto}
  .msg{max-width:min(34rem,72%)}
  .msg.brent .q{font-size:29px}
  .composer{padding:16px clamp(40px,4vw,64px) 20px}
  .composer form,.composer{justify-content:center}
  .composer{padding-inline:max(clamp(40px,4vw,64px),calc(50% - 520px))}
  .windows{grid-template-columns:repeat(3,1fr);gap:28px}
  .result{gap:26px}
  .result-head h2{font-size:46px}
  .signup{grid-template-columns:minmax(0,1fr);max-width:640px}
}
@media (min-width:1200px){
  .beat h1{font-size:72px}
  .dial-box{width:360px}
  .log>*{max-width:1040px}
  .beat{max-width:760px}
  .beat[data-beat="3"]{max-width:800px}
}

/* ---------- Reduced motion: the intro composes statically ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body.static-intro #intro{height:auto;min-height:100dvh;padding-bottom:var(--pdf-bar-height)}
body.static-intro[data-stage=intro]{overflow:auto;height:auto}
body.static-intro .stage{grid-template-columns:none;align-content:start;gap:28px}
body.static-intro .beats{display:grid;gap:34px;align-content:start}
body.static-intro .beat{grid-area:auto;opacity:1;pointer-events:auto;max-width:44ch}
body.static-intro .beat h1{font-size:clamp(30px,6.4vw,44px)}
body.static-intro .dial-wrap{justify-self:start;justify-items:start}
body.static-intro .hint,body.static-intro .dots{display:none}
body.static-intro .intro-foot{position:sticky;bottom:var(--pdf-bar-height);background:var(--bg)}