/* Homepage v3 (siya Landing v3 design). Loaded after tokens.css and landing.css, on the homepage only.
   Colour comes from tokens.css so the Light / Dark switch keeps working. The hero and the closing note stay dark in both.
   Without JavaScript every section shows its finished state; home.js adds .h-js to <html> and the motion. */
.home section{padding:0;border-top:0}
.home .h-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,56px)}
.home .h-pad{padding:clamp(72px,12vh,130px) 0}
.home .h-label{font-size:13px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin:0}
.home .h-title{font:400 clamp(30px,4vw,48px)/1.12 var(--font-display);letter-spacing:-.015em;text-wrap:balance;margin:0}
.home .h-head{display:grid;gap:14px;max-width:760px}
.home .h-sub{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--ink-2);max-width:56ch}
.h-thread{position:fixed;left:0;top:0;z-index:50;width:100%;height:3px;background:var(--rose-400);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.h-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* 01 hero: a small light follows the finger */
.h-hero{position:relative;overflow:hidden;background:#241417;color:#F4E9EA;min-height:94vh;display:flex;flex-direction:column;touch-action:pan-y}
/* the light follows the pointer down the whole page: white on the dark bands, rose on the light ones */
.h-light,.h-trail{position:fixed;z-index:40;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform;display:none}
.h-js .h-light,.h-js .h-trail{display:block}
.h-light{width:16px;height:16px;margin:-8px 0 0 -8px;background:#FDF8F8;box-shadow:0 0 22px 8px rgba(240,196,206,.55),0 0 120px 60px rgba(224,163,178,.14);transition:background 500ms ease,box-shadow 500ms ease}
.h-light.on-light{background:#B0737F;box-shadow:0 0 16px 5px rgba(176,115,127,.32),0 0 100px 50px rgba(224,163,178,.16)}
:root[data-theme="dark"] .h-light.on-light{background:#F0C4CE;box-shadow:0 0 20px 7px rgba(240,196,206,.4),0 0 110px 55px rgba(224,163,178,.12)}
.h-trail.t1{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:#E0A3B2;opacity:.3}
.h-trail.t2{width:8px;height:8px;margin:-4px 0 0 -4px;background:#C99AA4;opacity:.18}
.h-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px clamp(18px,5vw,56px)}
.h-top .lockup .mark{color:#F0C4CE}
.h-top .lockup .wordmark{color:#F4E9EA}
.h-top .wordmark .ti::after{background:currentColor}
.h-nav{display:flex;align-items:center;gap:4px}
.h-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:#C3AEB2;text-decoration:none;font-size:16px;white-space:nowrap;transition:color var(--dur),background var(--dur),border-color var(--dur)}
.h-nav a:hover{color:#F4E9EA}
.h-nav a.cta{border:1.5px solid #5A3A43;color:#F4E9EA;padding:0 18px}
.h-nav a.cta:hover{border-color:#E0A3B2;background:rgba(224,163,178,.08)}
.h-hero-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:32px clamp(18px,5vw,56px);max-width:1180px;width:100%;pointer-events:none}
.h-hero h1{font:350 clamp(52px,9vw,120px)/1 var(--font-display);letter-spacing:-.025em;margin:0}
.h-hero .h-story{font:300 clamp(22px,2.5vw,30px)/1.4 var(--font-display);color:#E5D6D9;max-width:34ch}
.h-hero .lede{font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:#C3AEB2;max-width:54ch}
.h-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;pointer-events:auto}
.h-cta span{font-size:15px;color:#C3AEB2}
.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:var(--rose);color:var(--on-rose);font:700 17px/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.h-btn:hover{background:var(--rose-deep);color:var(--on-rose);transform:translateY(-2px)}
.h-btn:active{transform:scale(.98)}
.h-hero .h-btn{background:#E0A3B2;color:#241417}
.h-hero .h-btn:hover{background:#F0C4CE;color:#241417}
.h-foot{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:18px clamp(18px,5vw,56px) 24px;border-top:1px solid #3C2A2F;color:#E0A3B2;font-size:15px;line-height:1.5}
.h-foot span:last-child{color:#C3AEB2}
.h-js .h-rise{opacity:0;transform:translateY(18px);transition:opacity 1400ms ease,transform 1400ms ease}
.h-js .h-fade{opacity:0;transition:opacity 1200ms ease}
.h-js .h-in .h-rise,.h-js .h-in .h-fade{opacity:1;transform:none}

/* 02 carry bag: scattered papers settle into dated rows */
.h-bag-stick{display:grid;grid-template-rows:auto 1fr auto;gap:20px;padding:clamp(40px,9vh,96px) clamp(18px,5vw,56px) 32px}
.h-js .h-bag{height:230vh;position:relative}
.h-js .h-bag-stick{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden}
.h-swap{display:grid;max-width:820px}
.h-swap > *{grid-area:1/1;font:400 clamp(28px,4.4vw,54px)/1.12 var(--font-display);letter-spacing:-.015em;text-wrap:balance;margin:0;transition:opacity 500ms ease,transform 500ms ease}
.h-swap .before{opacity:0}
.h-js .h-swap .before{opacity:1}.h-js .h-swap .after{opacity:0;transform:translateY(14px)}
.h-js .h-bag.done .h-swap .before{opacity:0;transform:translateY(-14px)}.h-js .h-bag.done .h-swap .after{opacity:1;transform:none}
.h-papers{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:320px}
.h-js .h-papers{position:relative;max-width:none;min-height:380px;display:block}
.h-paper{width:min(320px,78vw);padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;display:flex;align-items:center;gap:12px;color:var(--rose-400);font-size:16px;line-height:1.35}
.h-paper span{color:var(--ink)}
.h-js .h-paper{position:absolute;left:50%;top:50%;will-change:transform}
.h-bag .h-after-p{max-width:56ch;font-size:clamp(17px,1.6vw,19px);line-height:1.6;transition:opacity 500ms ease}
.h-js .h-bag .h-after-p{opacity:0}.h-js .h-bag.done .h-after-p{opacity:1}

/* 03 nineteen clinics */
.h-clinic{background:var(--tint)}
.h-clinic-stick{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:clamp(72px,12vh,120px) clamp(18px,5vw,56px);max-width:1100px;margin:0 auto}
.h-js .h-clinic{height:200vh;position:relative}
.h-js .h-clinic-stick{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;padding-top:40px;padding-bottom:40px}
.h-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
.h-count b{font:400 clamp(48px,8vw,104px)/1 var(--font-display);letter-spacing:-.03em;color:var(--rose-deep)}
.h-count i{font:italic 400 clamp(20px,2.4vw,28px)/1.3 var(--font-display);color:var(--ink-2)}
.h-doors{display:flex;flex-wrap:wrap;gap:6px}
.h-doors span{width:20px;height:28px;border-radius:10px 10px 3px 3px;border:1.5px solid var(--rose);background:var(--rose);transition:background 300ms ease,border-color 300ms ease}
.h-js .h-doors span{background:transparent;border-color:var(--rose-400)}
.h-js .h-doors span.seen{background:var(--rose-300);border-color:var(--rose)}
.h-js .h-clinic.done .h-doors span{background:var(--rose);border-color:var(--rose)}
.h-layer{display:grid;gap:28px}
.h-js .h-layer > *{grid-area:1/1;align-self:start}
.h-told{font:400 clamp(22px,2.8vw,34px)/1.4 var(--font-display);max-width:30ch;margin:0;transition:opacity 600ms ease}
.h-told .lost{transition:opacity 600ms ease,color 600ms ease}
.h-js .h-told .lost{opacity:0}.h-js .h-clinic.lost1 .h-told .lost{opacity:1}.h-js .h-clinic.lost2 .h-told .lost{color:var(--soft)}
.h-js .h-clinic.done .h-told{opacity:0}
.h-brief{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,3.5vw,36px);display:grid;gap:16px;box-shadow:0 16px 40px rgba(90,43,56,.12);transition:opacity 600ms ease,transform 600ms var(--ease)}
.h-js .h-brief{opacity:0;transform:translateY(24px)}.h-js .h-clinic.done .h-brief{opacity:1;transform:none}
.h-brief .t{font:400 clamp(21px,2.4vw,28px)/1.35 var(--font-display)}
.h-brief ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.h-brief li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;background:var(--tint);font-size:17px;color:var(--ink);transition:opacity 500ms ease,transform 500ms var(--ease)}
.h-brief li .h-dot{color:var(--rose)}
.h-js .h-brief li{opacity:0;transform:translateX(-12px)}.h-js .h-brief li.on{opacity:1;transform:none}
.h-brief .src{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* 04 what it does: a parent's problem on the left, what siya does about it on the right */
.h-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:28px 56px;align-items:start;margin-top:40px}
.h-probs{display:grid;gap:10px}
.h-prob{position:relative;overflow:hidden;text-align:left;border:1px solid var(--rule);background:transparent;padding:20px 22px 22px;border-radius:14px;cursor:pointer;color:var(--ink-2);display:grid;gap:10px;font:inherit;transition:background 300ms ease,border-color 300ms ease,box-shadow 300ms ease,transform var(--dur) var(--ease)}
.h-prob:hover{transform:translateX(4px)}
.h-prob:active{transform:scale(.99)}
.h-prob .n{display:flex;align-items:center;gap:10px;font-size:14px}
.h-prob .n i{font-style:normal;font-family:var(--font-display)}
.h-prob .n::before{content:"";order:1;width:18px;height:1px;background:currentColor;opacity:.5}
.h-prob .n span{order:2}
.h-prob .q{font:400 clamp(19px,1.9vw,23px)/1.35 var(--font-display);text-wrap:pretty}
.h-prob .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rose)}
.h-prob[aria-pressed="true"]{background:var(--surface);border-color:var(--rose-300);box-shadow:0 10px 30px rgba(90,43,56,.08);color:var(--ink)}
.h-prob[aria-pressed="true"] .n{color:var(--rose)}
.h-prob.run .bar{width:100%;transition:width 8000ms linear}
:root[data-theme="dark"] .h-prob[aria-pressed="true"]{border-color:var(--rule)}
.h-panel{position:sticky;top:24px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:clamp(20px,3vw,32px);display:grid;gap:18px;box-shadow:0 20px 50px rgba(90,43,56,.08)}
.h-panel-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.h-panel-top .h-label{display:flex;align-items:center;gap:8px}
.h-pane{display:grid;gap:18px;transition:opacity 200ms ease,transform 320ms var(--ease)}
.h-js .h-pane[hidden]{display:none}
.h-pane + .h-pane{padding-top:28px;border-top:1px solid var(--rule)}
.h-js .h-pane + .h-pane{padding-top:0;border-top:0}
.h-pane.out{opacity:0;transform:translateY(8px)}
.h-pane h3{font:400 clamp(26px,2.8vw,34px)/1.15 var(--font-display);letter-spacing:-.01em;margin:0}
.h-pane > p{color:var(--ink-2);margin:0}
.h-stage{min-height:330px;display:flex;flex-direction:column;justify-content:center}
.h-pane .chips{margin:0}
.h-js .h-demo [data-s]{opacity:0;transform:translateY(10px);transition:opacity 450ms ease,transform 450ms var(--ease)}
.h-js .h-demo [data-s].on{opacity:1;transform:none}
/* story demo */
.h-ask{display:grid;gap:10px;padding:16px;border-radius:14px;background:var(--tint);min-height:190px;align-content:start}
.h-ask .me{justify-self:end;max-width:85%;padding:11px 14px;border-radius:14px 14px 4px 14px;background:var(--rose);color:var(--on-rose);font-size:16px;line-height:1.45}
.h-ask .reply{display:grid}
.h-ask .reply > *{grid-area:1/1;align-self:start;justify-self:start}
.h-typing{display:none;gap:5px;padding:14px 16px;border-radius:14px 14px 14px 4px;background:var(--surface)}
.h-js .h-typing{display:flex;opacity:0;transition:opacity 250ms}
.h-js .h-typing.on{opacity:1}
.h-typing i{width:7px;height:7px;border-radius:50%;background:var(--rose-400);animation:hType 1.2s infinite}
.h-typing i:nth-child(2){animation-delay:.15s}.h-typing i:nth-child(3){animation-delay:.3s}
.h-ans{max-width:88%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--surface);display:grid;gap:10px;font-size:16px;line-height:1.5}
.h-src{display:inline-flex;justify-self:start;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;border:1px solid var(--rose-300);font-size:14px;color:var(--rose)}
.h-src .icon{width:15px;height:15px}
.h-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.h-chipbtn{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rose-300);background:transparent;color:var(--ink);font-size:14px;cursor:pointer;transition:background var(--dur),border-color var(--dur),transform 160ms}
.h-chipbtn:active{transform:scale(.96)}
.h-chipbtn[aria-pressed="true"]{background:var(--surface);border-color:var(--rose)}
.h-qs{display:none}.h-js .h-qs{display:flex}
/* brief demo */
.h-bdemo{border:1px solid var(--rule);border-radius:14px;padding:18px;display:grid;gap:10px;background:var(--ground)}
.h-bdemo .hd{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink-2)}
.h-bline{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--rule)}
.h-tick{width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid var(--rose);display:grid;place-items:center;background:var(--rose);transition:background 300ms ease 200ms}
.h-tick svg{width:12px;height:12px;stroke:var(--on-rose);transition:transform 300ms cubic-bezier(.34,1.56,.64,1) 260ms}
.h-js .h-bline .h-tick{background:transparent}.h-js .h-bline .h-tick svg{transform:scale(0)}
.h-js .h-bline.on .h-tick{background:var(--rose)}.h-js .h-bline.on .h-tick svg{transform:none}
.h-bline .k{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.h-bline .v{display:block;font-size:16px;line-height:1.45}
.h-bdemo .ft{font-size:14px;line-height:1.5;color:var(--ink-2);padding-top:4px}
/* progress demo */
.h-pdemo{display:grid;gap:12px}
.h-pdemo .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--ink-2)}
.h-pdemo .hd b{font:400 22px/1.2 var(--font-display);color:var(--ink)}
.h-pdemo input[type=range]{width:100%;min-height:28px;margin:0;accent-color:var(--rose);cursor:grab}
.h-pdemo .ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-top:-6px}
.h-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:var(--ground);transition:background 400ms ease}
.h-row.up{background:var(--ok-bg)}
.h-row .moved{font-size:13px;color:var(--ok);opacity:0;transform:translateX(6px);transition:opacity 400ms ease,transform 400ms var(--ease)}
.h-row.up .moved{opacity:1;transform:none}
.h-row > span:last-child{display:flex;align-items:center;gap:8px;flex:none}
.h-pill{min-width:74px;text-align:center;padding:5px 10px;border-radius:999px;font-size:14px;transition:background 400ms ease,color 400ms ease}
.h-pill.l0{background:var(--tint);color:var(--ink-2)}.h-pill.l1{background:var(--rose-200);color:var(--rose-700)}.h-pill.l2{background:var(--rose);color:var(--on-rose)}
.h-pdemo .sum{font-size:15px;line-height:1.5}
/* circle demo */
.h-cdemo{display:grid;gap:10px}
.h-circ{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--rule);background:var(--surface)}
.h-circ b{display:block;font-weight:400;font-size:17px}
.h-circ small{display:block;font-size:14px;color:var(--ink-2)}
.h-join{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--rose);background:transparent;color:var(--rose);font-size:15px;cursor:pointer;transition:background var(--dur),color var(--dur),transform 160ms}
.h-join:active{transform:scale(.95)}
.h-join svg{height:14px;width:0;transition:width var(--dur) ease}
.h-join[aria-pressed="true"]{background:var(--rose);color:var(--on-rose)}
.h-join[aria-pressed="true"] svg{width:14px}
.h-cdemo .ft{font-size:14px;line-height:1.5;color:var(--ink-2)}
.h-sample{margin-top:28px;font-size:15px;color:var(--ink-2)}

/* 05 home plan: today's steps from the therapist's plan */
.h-plan{background:var(--n-100)}
:root[data-theme="dark"] .h-plan{background:var(--tint)}
.h-plan .h-two{align-items:start}
.h-psteps{list-style:none;margin:10px 0 0;padding:0;display:grid}
.h-psteps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--rule)}
.h-psteps .num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--rose);display:grid;place-items:center;font-size:13px;color:var(--rose)}
.h-psteps h3{font:400 20px/1.3 var(--font-display);margin:0 0 4px}
.h-psteps p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.h-today{position:sticky;top:24px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:clamp(20px,3vw,30px);display:grid;gap:18px;box-shadow:0 20px 50px rgba(90,43,56,.08)}
.h-today .hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.h-today .hd small{display:block;font-size:14px;color:var(--ink-2)}
.h-today .hd b{display:block;font:400 22px/1.25 var(--font-display)}
.h-ring{width:52px;height:52px;flex:none;position:relative}
.h-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.h-ring circle{fill:none;stroke-width:4}
.h-ring .bg{stroke:var(--tint)}
.h-ring .fg{stroke:var(--rose);stroke-linecap:round;stroke-dasharray:138.2;transition:stroke-dashoffset 600ms var(--ease)}
.h-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.h-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.h-week span{display:grid;justify-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.h-week i{width:100%;max-width:34px;height:6px;border-radius:3px;background:var(--tint);transition:background 400ms ease}
.h-week .done i{background:var(--rose-400)}
.h-week .part i{background:linear-gradient(90deg,var(--rose-400) 50%,var(--tint) 50%)}
.h-week .today{color:var(--ink);font-weight:700}
.h-week .today i{background:var(--rose)}
.h-week .today.open i{background:var(--rose-300)}
.h-tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.h-task{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:12px;border:1px solid var(--rule);background:var(--ground);transition:background 300ms ease,border-color 300ms ease,opacity 400ms ease,transform 400ms var(--ease)}
.h-task b{display:block;font-weight:400;font-size:17px;transition:color 300ms}
.h-task small{display:block;font-size:14px;color:var(--ink-2)}
.h-task.done{background:var(--surface);border-color:var(--rose-300)}
:root[data-theme="dark"] .h-task.done{border-color:var(--rule)}
.h-task.moved{opacity:.55}
.h-task.moved b{text-decoration:line-through;text-decoration-color:var(--rose-400)}
.h-task .acts{display:flex;align-items:center;gap:6px;flex:none}
.h-later{min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink-2);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.h-later:hover{color:var(--ink)}
.h-done{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--rose);background:transparent;color:var(--rose);font-size:15px;cursor:pointer;transition:background var(--dur),color var(--dur),transform 160ms}
.h-done:active{transform:scale(.94)}
.h-done svg{height:14px;width:0;transition:width var(--dur) ease}
.h-done[aria-pressed="true"]{background:var(--rose);color:var(--on-rose)}
.h-done[aria-pressed="true"] svg{width:14px}
.h-later,.h-done{display:none}
.h-js .h-later{display:inline-block}.h-js .h-done{display:inline-flex}
.h-clips{display:grid;gap:10px;padding-top:4px}
.h-clips .lbl{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink-2)}
.h-clips .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.h-clip{position:relative;aspect-ratio:4/3;border-radius:10px;background:var(--tint);border:1px solid var(--rule);display:grid;align-content:end;gap:2px;padding:10px 12px;overflow:hidden}
.h-clip::before{content:"";position:absolute;left:50%;top:42%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--surface);box-shadow:0 2px 8px rgba(46,35,38,.12)}
.h-clip::after{content:"";position:absolute;left:50%;top:42%;margin:-6px 0 0 -3px;border-left:10px solid var(--rose);border-top:6px solid transparent;border-bottom:6px solid transparent}
.h-clip b{font-weight:400;font-size:14px}
.h-clip small{font-size:13px;color:var(--ink-2)}
.h-today .ft{font-size:14px;line-height:1.5;color:var(--ink-2)}
.h-cheer{font-size:15px;line-height:1.5;color:var(--ok);display:flex;align-items:center;gap:8px;max-height:0;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity 400ms ease,transform 400ms var(--ease),max-height 400ms var(--ease)}
.h-cheer.on{opacity:1;transform:none;max-height:80px}
.h-cheer .icon{width:20px;height:20px;flex:none}
.h-eve{display:grid;gap:10px;padding:14px 16px;border-radius:12px;background:var(--tint);transition:opacity 400ms ease}
.h-eve .q{font-size:15px}
.h-eve .opts{display:flex;flex-wrap:wrap;gap:8px}
.h-eve .opts button{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rose-300);background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur),transform 160ms}
.h-eve .opts button:active{transform:scale(.95)}
.h-eve .opts button[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:var(--on-rose)}
.h-eve .saved{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ok);max-height:0;overflow:hidden;opacity:0;transition:opacity 400ms ease,max-height 400ms var(--ease)}
.h-eve .saved.on{opacity:1;max-height:60px}
.h-eve .saved .icon{width:20px;height:20px;flex:none}

/* 06 adding to the record: a chat that files the photo */
.h-dark{background:#1B1416;color:#F4E9EA}
.h-dark .h-label{color:#E0A3B2}
.h-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:44px;align-items:center}
.h-dark .h-sub{color:#C3AEB2}
.h-chat{justify-self:center;width:min(400px,100%);border-radius:26px;background:#241B1E;border:1px solid #3D2E32;overflow:hidden}
.h-chat .hd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #3D2E32}
.h-chat .av{width:40px;height:40px;border-radius:50%;background:#8C4A5B;display:grid;place-items:center;color:#FDF8F8;flex:none}
.h-chat .av svg{width:22px;height:24px}
.h-chat .who{display:grid;gap:2px;font-size:16px}
.h-chat .who small{font-size:13px;color:#8E787D}
.h-chat .body{display:grid;gap:10px;padding:18px 14px 22px;min-height:340px;align-content:start}
.h-photo{justify-self:end;max-width:78%;background:#5A2B38;border-radius:14px 14px 4px 14px;padding:6px;display:grid;gap:6px}
.h-photo .pg{width:190px;height:112px;border-radius:10px;background:#F3EDED;padding:14px;display:grid;gap:8px;align-content:start;transform:rotate(-1.5deg)}
.h-photo .pg i{height:5px;border-radius:3px;background:#E9DADC}
.h-photo .pg i:first-child{height:6px;width:60%;background:#D6C3C6}
.h-photo span{font-size:15px;padding:0 6px 4px}
.h-chat .reply{display:grid}
.h-chat .reply > *{grid-area:1/1;align-self:start}
.h-chat .h-typing{background:#2E2326;justify-self:start}
.h-chat .msgs{display:grid;gap:10px}
.h-chat .msg{justify-self:start;max-width:84%;background:#2E2326;border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:16px;line-height:1.5}
.h-js .h-chat [data-c]{opacity:0;transform:translateY(12px);transition:opacity 500ms ease,transform 500ms var(--ease)}
.h-js .h-chat [data-c].on{opacity:1;transform:none}

/* 06 two views */
.h-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:44px;align-items:start}
.h-vsteps{list-style:none;margin:6px 0 0;padding:0;display:grid}
.h-vsteps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--rule);transition:opacity 400ms ease}
.h-vsteps .num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--rose);display:grid;place-items:center;font-size:13px;color:var(--rose);transition:background 400ms,color 400ms}
.h-vsteps li.lit .num{background:var(--rose);color:var(--on-rose)}
.h-vsteps li.dim{opacity:.5}
.h-vsteps h3{font:400 20px/1.3 var(--font-display);margin:0 0 4px}
.h-vsteps p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.h-vcard{position:sticky;top:24px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.h-vcard .meta{font-size:14px;color:var(--ink-2)}
.h-vcard .item{font:400 26px/1.25 var(--font-display)}
.h-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.h-opts button{min-height:52px;padding:0 6px;border-radius:8px;border:1.5px solid var(--field);background:var(--surface);color:var(--ink);font-size:16px;cursor:pointer;transition:background var(--dur),border-color var(--dur),transform 160ms}
.h-opts button:active{transform:scale(.97)}
.h-opts button[aria-pressed="true"]{border:2px solid var(--rose);background:var(--tint)}
.h-ans2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h-ans2 > div{padding:14px;border-radius:8px;background:var(--tint);display:grid;gap:4px}
.h-ans2 small{font-size:13px;color:var(--ink-2)}
.h-ans2 b{font-weight:400;font-size:18px;min-height:1.4em}
.h-ans2 .theirs{filter:blur(7px);opacity:.55;transition:filter 700ms ease,opacity 700ms ease}
.h-vcard.answered .theirs{filter:none;opacity:1}
.h-vtag{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);transition:color 400ms}
.h-vtag.diff{color:var(--rose)}

/* 07 how it starts */
.h-start{background:var(--n-100)}
:root[data-theme="dark"] .h-start{background:var(--tint)}
.h-steps3{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.h-steps3 li{display:grid;gap:12px;align-content:start;padding-top:20px;border-top:1px solid var(--rose-300);transition:border-color 300ms ease}
.h-steps3 li:hover{border-color:var(--rose)}
.h-steps3 .n{font:400 15px/1 var(--font-display);color:var(--rose)}
.h-steps3 h3{font:400 24px/1.25 var(--font-display);margin:0}
.h-steps3 p{color:var(--ink-2)}

/* 08 what siya won't do: a line drawn through each one */
.h-wont{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
@media (min-width:40rem){.h-wont{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:70rem){.h-wont{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h-wont li{background:var(--ground);padding:26px 22px;display:grid;gap:10px;align-content:start;transition:background 300ms ease}
.h-wont li:hover,.h-wont li.on{background:var(--surface)}
.h-wont small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.h-wont h3{font:400 23px/1.3 var(--font-display);margin:0}
.h-wont h3 span{background:linear-gradient(var(--rose),var(--rose)) 0 56%/0 2px no-repeat;transition:background-size 600ms var(--ease)}
.h-wont li:hover h3 span,.h-wont li.on h3 span{background-size:100% 2px}
.h-wont p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.h-fine{margin-top:28px;font-size:15px;color:var(--ink-2)}

/* 09 both of those days */
.h-note{background:#241417;color:#F4E9EA;padding:clamp(84px,14vh,160px) 0}
.h-note .h-wrap{max-width:960px;display:grid;gap:40px}
.h-note .h-label{color:#E0A3B2}
.h-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px 56px}
.h-day{display:grid;gap:18px;align-content:start}
.h-day p{font:300 clamp(22px,2.6vw,30px)/1.4 var(--font-display);margin:0;text-wrap:pretty}
.h-day.hard p{color:#C3AEB2}
.h-day.light p{font-weight:350;color:#F4E9EA}
.h-day .mark-row{min-height:14px;display:flex;flex-wrap:wrap;gap:4px;max-width:280px}
.h-day .mark-row i{width:10px;height:14px;border-radius:5px 5px 2px 2px;border:1px solid #8E787D}
.h-day .mark-row .h-story-link{margin:-12px 0 0;font-size:17px}
.h-story-link a{color:#F0C4CE;text-underline-offset:5px}
.h-story-link a:hover{color:#F4E9EA}
.h-breathe{align-self:center}
.h-note .both{margin:0;padding-top:28px;border-top:1px solid #3C2A2F;font:italic 300 clamp(28px,3.6vw,44px)/1.3 var(--font-display);color:#F0C4CE}
.h-breathe{width:10px;height:10px;border-radius:50%;background:#F0C4CE;box-shadow:0 0 18px 6px rgba(240,196,206,.35);animation:hBreathe 4s ease-in-out infinite}

/* 10 waitlist: same server form, new frame */
.h-join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:start}
.h-join-grid h2{font:400 clamp(32px,4.4vw,54px)/1.1 var(--font-display);letter-spacing:-.015em;margin:0}
.h-join-grid .card{max-width:none;border-radius:14px;padding:clamp(20px,3vw,34px)}
.h-join-grid .banner{max-width:none}
.h-join-grid input[type=email],.h-join-grid input[type=tel],.h-join-grid input[type=text],.h-join-grid textarea{min-height:52px;background:var(--ground);border-radius:8px;transition:border-color var(--dur),box-shadow var(--dur)}
.h-join-grid input:focus,.h-join-grid textarea:focus{box-shadow:0 0 0 4px var(--tint)}
.h-join-grid .card .btn{min-height:54px;font-weight:700}
.h-fill{height:2px;border-radius:2px;background:var(--tint);overflow:hidden}
.h-fill i{display:block;height:100%;width:0;background:var(--rose-400);transition:width 400ms ease}
.h-fill{display:none}.h-js .h-fill{display:block}

/* 11 therapists, 12 questions */
.h-pros{margin-bottom:clamp(72px,12vh,120px);background:var(--tint);border-radius:16px;padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px 40px;align-items:end}
.h-pros h2{font:400 clamp(28px,3.4vw,40px)/1.15 var(--font-display);margin:12px 0 0}
.h-pros > div:last-child{display:grid;gap:18px;justify-items:start}
.h-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--rose);color:var(--rose-deep);text-decoration:none;font-size:16px;transition:background var(--dur)}
.h-ghost:hover{background:var(--surface)}
.h-faq{background:var(--n-100)}
:root[data-theme="dark"] .h-faq{background:var(--tint)}
.h-faq .h-wrap{max-width:820px}
.h-faq .list{margin-top:28px;border-top:1px solid var(--rose-300)}
.h-faq details{border-bottom:1px solid var(--rose-300)}
.h-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;font-size:19px;line-height:1.4;list-style:none}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--rose),var(--rose)) center/16px 1.6px no-repeat,linear-gradient(var(--rose),var(--rose)) center/1.6px 16px no-repeat;transition:transform 300ms var(--ease)}
.h-faq details[open] summary::after{transform:rotate(45deg)}
.h-faq details p{padding:0 0 22px;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.home footer{border-top:0}
.home footer .wrap{max-width:1180px;padding:0 clamp(18px,5vw,56px)}

/* what siya does, phones: the answer opens right under the problem you tapped */
.h-prob .chev,.h-next{display:none}
.h-next{align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:8px 18px;border-radius:12px;border:1px solid var(--rule);background:var(--tint);color:var(--ink);font:inherit;font-size:16px;line-height:1.35;text-align:left;cursor:pointer;transition:background var(--dur),transform 160ms}
.h-next:active{transform:scale(.98)}
.h-next small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.h-next svg{width:18px;height:18px;flex:none;color:var(--rose);transition:transform var(--dur) var(--ease)}
.h-next:hover svg{transform:translateX(3px)}
@media (max-width:47.99rem){
  .h-feat{margin-top:28px;gap:0}
  .h-probs{gap:12px}
  .h-prob{padding:18px 18px 20px;grid-template-columns:minmax(0,1fr) 30px;column-gap:14px}
  .h-prob .n,.h-prob .q{grid-column:1}
  .h-prob .q{font-size:19px}
  .h-prob .chev{display:grid;grid-column:2;grid-row:1 / span 2;align-self:center;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rose-300);color:var(--rose);transition:transform 300ms var(--ease),background var(--dur),color var(--dur),border-color var(--dur)}
  .h-prob .chev svg{width:13px;height:13px}
  .h-prob:hover{transform:none}
  .h-prob[aria-pressed="true"] .chev{transform:rotate(180deg);background:var(--rose);border-color:var(--rose);color:var(--on-rose)}
  .h-js .h-prob[aria-pressed="true"]{border-radius:14px 14px 0 0;border-bottom-color:transparent;box-shadow:none}
  .h-js .h-probs .h-panel{position:static;margin-top:-12px;border-radius:0 0 14px 14px;border-top:0;border-color:var(--rose-300);padding:6px 18px 18px;gap:16px;box-shadow:0 16px 34px rgba(90,43,56,.1)}
  :root[data-theme="dark"] .h-js .h-probs .h-panel,:root[data-theme="dark"] .h-js .h-prob[aria-pressed="true"]{border-color:var(--rule)}
  .h-js .h-probs .h-panel-top{display:none}
  .h-js .h-probs .h-pane h3{display:none}
  .h-js .h-probs .h-pane::before{content:"With siya";display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px dashed var(--rose-300);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
  .h-js .h-probs .h-pane > p{font-size:16px;line-height:1.6}
  .h-stage{min-height:0}
  .h-ask{min-height:0}
  .h-js .h-next{display:flex}
  .h-sample{margin-top:20px}
}

@keyframes hType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes hBreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.5}}
.h-calm .h-bag,.h-calm .h-clinic{height:auto}
.h-calm .h-bag-stick,.h-calm .h-clinic-stick{position:static;height:auto;min-height:0}
.h-chat .av .mark{color:#FDF8F8;width:22px;height:24px}
:root[data-theme="dark"] .h-dark{background:#140E10}
@media (max-width:47.99rem){.h-cta .h-btn{width:100%}}