/* Homepage only (index.html). Loaded after styles.css.
   Tokens follow the Ansel app (expo/constants/colors.ts); motion lives in motion.js. */

/* ===== Variant D: refined brand pass (overrides only) ===== */
:root{
  --text:#0F241A;--sub:#5A6B61;--line:#E1E8E3;--gray:#F2F6F3;
  --blue:#17583E;          /* brand forest replaces Apple blue everywhere it was used */
  --forest-deep:#0B2A1D;--gold:#E0B25A;--gold-soft:#F3DDAA;--tile:#E5EFE9
}
::selection{background:var(--gold-soft);color:var(--text)}
body{color:var(--text)}

/* nav */
.nav{background:rgba(255,255,255,.76);border-bottom-color:rgba(15,36,26,.07)}
.brand{letter-spacing:-.01em}
.brand img{border-radius:7px;box-shadow:0 1px 2px rgba(11,42,29,.2)}
.btn{background:var(--blue);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -8px rgba(11,42,29,.55)}
.btn:hover{background:#114a33}
.nav-links a{opacity:.62}

/* type */
h1{font-weight:750;letter-spacing:-.04em;line-height:1}
h2{font-weight:720;letter-spacing:-.032em}
.lead{color:var(--sub);font-size:18.5px}
.col h3{font-weight:650;letter-spacing:-.015em}

/* hero: soft green light behind the phone */
.hero{position:relative;isolation:isolate}
.hero-split .phone{position:relative}
.phone{background:linear-gradient(155deg,#23463A,#06140D 55%);padding:9px;border-radius:46px;
  box-shadow:0 0 0 1px rgba(15,36,26,.08),0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -24px rgba(11,42,29,.45),0 12px 24px -12px rgba(11,42,29,.25)}
.phone img{border-radius:37px;background:#0B2A1D}

/* feature + privacy icons on tinted tiles */
.col svg{width:52px;height:52px;padding:13px;border-radius:15px;background:var(--tile);color:var(--blue);stroke-width:1.8;margin-bottom:20px}
.band .col svg{background:#fff;box-shadow:0 1px 2px rgba(11,42,29,.06),0 0 0 1px rgba(11,42,29,.04)}
.col p{color:var(--sub)}

/* bands */
.band{background:var(--gray);--sub:#4E5E55}

/* rescue: the app's own night look instead of flat black */
.rescue{max-width:1180px;margin:0 auto;border-radius:32px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 38%,#1D5A40 0%,#113B2A 45%,var(--forest-deep) 100%);
  color:#F7F0E0;padding:88px 24px 0}
.rescue::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 12% 22%,#F3DDAA,transparent),radial-gradient(1px 1px at 28% 68%,#F3DDAA,transparent),
  radial-gradient(1.4px 1.4px at 71% 18%,#F3DDAA,transparent),radial-gradient(1px 1px at 86% 54%,#F3DDAA,transparent),
  radial-gradient(1.2px 1.2px at 58% 84%,#F3DDAA,transparent),radial-gradient(1px 1px at 40% 12%,#F3DDAA,transparent),
  radial-gradient(1.3px 1.3px at 92% 82%,#F3DDAA,transparent),radial-gradient(1px 1px at 6% 76%,#F3DDAA,transparent)}
.rescue > *{position:relative}
.rescue h2{color:#FBF4E4}
.rescue p{color:#A9BFB2}
.breath-line{gap:12px}
.breath-line div{min-width:104px;padding:12px 18px;border-radius:14px;border:1px solid rgba(224,178,90,.28);background:rgba(11,42,29,.35)}
.breath-line b{color:var(--gold-soft);font-weight:600}
.breath-line span{color:#8FA99A}
.rescue .phone{border:0;margin-top:48px;margin-bottom:-70px;
  box-shadow:0 0 0 1px rgba(243,221,170,.14),0 0 90px -10px rgba(224,178,90,.35)}
#rescue{padding-bottom:88px}

/* faq */
details{border-top-color:var(--line)}
details:last-of-type{border-bottom-color:var(--line)}
summary{font-weight:600;font-size:17px;padding:20px 0}
summary:hover{color:var(--blue)}
summary::after{color:var(--blue);font-size:20px;line-height:1}

/* final CTA sits in a soft light */
.final{position:relative;isolation:isolate}
.final .app-badge svg{height:56px}

/* links */
a{color:var(--blue)}
.center-link a{font-weight:600}
.foot a:hover{color:var(--text)}

/* ===================================================================
   Variant E: app-true motion, illustration and layout
   Tokens are the Ansel app's own (expo/constants/colors.ts)
   =================================================================== */
:root{
  --blue:#1B4D3E;            /* app primary */
  --primary-light:#2A6B55;   /* app primaryLight */
  --gold:#D4A853;            /* app secondary */
  --gold-soft:#FDF6E3;       /* app secondaryLight */
  --text:#0F241A;--sub:#56665D;--line:#E3E8E4;--gray:#F5F4F0;--tile:#E8F4EF;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
main{overflow-x:clip}
.wrap,.nav-in,.foot{max-width:1080px}
.wrap{padding:0 24px}
.btn:hover{background:#163F33}
section{padding:96px 0}
@media(min-width:720px){section{padding:140px 0}}
h2{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.035em}

/* ---------- hero ---------- */
.hero{padding:64px 0 72px}
@media(min-width:720px){
  .hero{padding:96px 0 120px;min-height:min(86vh,860px);display:grid}
  .hero-split{grid-template-columns:1.1fr .9fr;gap:40px}
}
h1{font-size:clamp(44px,6.6vw,84px);letter-spacing:-.045em;line-height:.98}
.lead{font-size:clamp(18px,1.5vw,20px);max-width:30ch}
.hero-copy .badge-row{margin-top:40px}
.hero-visual{position:relative;display:grid;place-items:center;isolation:isolate}
.hero-visual .phone{margin:0;position:relative;z-index:1}
.dayring{position:absolute;z-index:0;width:min(640px,150vw);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible}
.dayring circle{fill:none}
.dayring .guide{stroke:rgba(27,77,62,.10);stroke-width:1}
.dayring .guide.faint{stroke-dasharray:1 8;stroke-linecap:round;stroke:rgba(27,77,62,.28);stroke-width:1.5}
.dayring .arc,.dayring .arc-glow{stroke:var(--gold);stroke-linecap:round}
.dayring .arc{stroke-width:2.5}
.dayring .arc-glow{stroke-width:10;opacity:.22;filter:blur(6px)}
.dayring .tick{stroke:rgba(27,77,62,.14);stroke-width:3;stroke-linecap:round}
.dayring .tick.done{animation:tickOn .5s ease forwards;animation-delay:calc(.45s + var(--i) * .105s)}
.dayring .dot{fill:var(--gold)}
.dayring .halo{fill:var(--gold);opacity:.25;transform-box:fill-box;transform-origin:center;animation:halo 2.8s ease-in-out 2.8s infinite}
.dayring .spark{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center;animation:twinkle 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tickOn{to{stroke:var(--blue)}}
@keyframes halo{0%,100%{transform:scale(1);opacity:.25}50%{transform:scale(1.6);opacity:.08}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}
@media(min-width:720px){.hero-split .hero-visual{justify-self:center;width:min(300px,100%)}.hero-split .phone{width:300px}}
@media(max-width:719px){.hero-visual{margin-top:48px;padding:56px 0}.dayring{width:150vw}}

/* ---------- features: the app's own illustrations ---------- */
#features h2{max-width:18ch;margin:0 auto}
#features .cols{margin-top:64px;gap:56px}
@media(min-width:720px){#features .cols{gap:40px}}
.illo{width:148px;height:148px;margin:0 auto 22px}
.illo svg{display:block}
#features .col{max-width:300px}
#features .col h3{font-size:20px;margin-bottom:10px}

/* privacy icons draw in (line icons stay here) */
#privacy .col svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out)}
#privacy .rv.in .col svg *{stroke-dashoffset:0}
#privacy .rv.in .col:nth-child(2) svg *{transition-delay:.15s}
#privacy .rv.in .col:nth-child(3) svg *{transition-delay:.3s}
#privacy .col svg{background:var(--tile);color:var(--blue)}

/* ---------- companion: live chat ---------- */
#companion .split{gap:64px}
#companion h2{font-size:clamp(30px,4vw,44px)}
.phone{width:min(280px,74vw)}
.phone.live .screen{position:relative;aspect-ratio:9/19.2;border-radius:37px;overflow:hidden;background:#0C1A13;
  display:flex;flex-direction:column;padding:0 18px 14px;color:#EFE9DC;font-size:13.5px;line-height:1.4}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:12px;background:#000}
.glow{position:absolute;left:50%;top:58%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  background:radial-gradient(closest-side,rgba(170,110,40,.30),transparent);opacity:0;transition:opacity 1.8s ease,transform 1.8s var(--ease-out)}
.thread{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px}
.msg.me{align-self:flex-end;max-width:82%;background:#1E4636;color:#F3EEE3;padding:10px 13px;border-radius:14px 14px 4px 14px}
.typing{display:flex;gap:5px;padding:4px 2px;height:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8FA99A;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.reply{margin-top:-42px}
.reply p{font-size:14px;line-height:1.45;color:#F3EEE3}
.who{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.14em;color:#6E9A80;font-weight:600}
.input{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;color:#6F7F76;font-size:12.5px}
.input b{width:20px;height:20px;border-radius:50%;background:#355E4A}
@keyframes blink{50%{opacity:.25}}
.msg.me,.typing,.reply p,.who{opacity:0;transform:translateY(8px)}
.typing{transform:none}
.play .msg.me{animation:up .55s var(--ease-out) .3s forwards}
.play .typing{animation:typing 1.7s linear 1s forwards}
.play .reply p:nth-child(1){animation:up .7s var(--ease-out) 2.8s forwards}
.play .reply p:nth-child(2){animation:up .7s var(--ease-out) 3.5s forwards}
.play .reply p:nth-child(3){animation:up .7s var(--ease-out) 4.2s forwards}
.play .who{animation:up .7s var(--ease-out) 4.8s forwards}
.play .glow{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:2.6s}
@keyframes up{to{opacity:1;transform:none}}
@keyframes typing{0%{opacity:0}10%,88%{opacity:1}100%{opacity:0}}

/* ---------- rescue: the app's breathing screen as a live instrument ---------- */
#rescue{padding:0 12px}
@media(min-width:720px){#rescue{padding:0 24px}}
.rescue{max-width:1180px;margin:0 auto;border-radius:36px;position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#1B4D3E 0%,#2A6B55 100%);   /* the app's breathing gradient */
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 40px 80px -40px rgba(27,77,62,.55);
  color:#fff;padding:88px 20px 72px}
@media(min-width:720px){.rescue{padding:112px 40px 96px}}
.rescue::before{animation:starfield 8s ease-in-out infinite alternate}
@keyframes starfield{from{opacity:.35}to{opacity:.7}}
.rescue h2{color:#fff;max-width:16ch;margin:0 auto}
.rescue-lead{color:rgba(255,255,255,.75);max-width:34em;margin:16px auto 0;font-size:18px;line-height:1.6}
.instrument{width:min(440px,92vw);aspect-ratio:1;margin:28px auto 0}
.instrument svg{width:100%;height:100%;overflow:visible}
.instrument circle{fill:none}
.instrument .hair{stroke:rgba(255,255,255,.08);stroke-width:1}
.instrument .hair.dash{stroke-dasharray:1 7;stroke-linecap:round;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.instrument .ripple{stroke:rgba(253,246,227,.5);stroke-width:1;opacity:0}
.instrument .seg{stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round;transition:stroke .6s ease}
.instrument .seg.on{stroke:rgba(255,255,255,.34)}
.instrument .prog{stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(212,168,83,.7))}
.instrument .dot{fill:#FFF3D6}
.instrument .dot-glow{fill:var(--gold);opacity:.9}
#bhalo{fill:rgba(255,255,255,.14)}
.instrument .wind path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.breath-ui{margin-top:8px}
.phase{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.02em;color:#fff;min-height:1.3em}
.phase.dip{animation:dip .3s ease}
@keyframes dip{50%{opacity:.5}}
.cycles{display:flex;justify-content:center;gap:12px;margin:22px 0 14px}
/* width transition is intentional: it mirrors the app’s widening active dot on 5 tiny elements */
.cycles i{width:10px;height:10px;border-radius:6px;background:rgba(255,255,255,.25);transition:width .45s var(--ease-out),background .45s ease}
.cycles i.done{background:var(--gold)}
.cycles i.on{width:24px;background:rgba(255,255,255,.6)}
.count{display:flex;justify-content:center;align-items:center;gap:14px;font-size:14px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.bpause{font:inherit;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 14px;cursor:pointer;transition:background .2s}
.bpause:hover{background:rgba(255,255,255,.18)}
.bpause:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pattern{margin:40px auto 0;max-width:30em;font-size:15px;color:rgba(255,255,255,.6)}

/* ---------- privacy ---------- */
#privacy .cols{margin-top:56px}

/* ---------- faq: two columns on desktop ---------- */
@media(min-width:900px){
  #faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
  #faq h2{text-align:left;position:sticky;top:120px}
  #faq .stack{margin-top:0}
  #faq details{max-width:none}
}
details p{font-size:16.5px}

/* ---------- final ---------- */
.final{padding:120px 24px 136px}
.final h2{font-size:clamp(36px,5vw,56px)}
.final-mark{position:relative;width:180px;height:180px;margin:0 auto 36px;display:grid;place-items:center}
.final-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.final-mark circle{fill:none;stroke-width:2.5}
.final-mark .t{stroke:var(--line)}
.final-mark .a{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.final-mark .pop{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center}
.final-mark.in .a{transition:stroke-dashoffset 1.6s var(--ease-out);stroke-dashoffset:0}
.final-mark.in .pop{animation:pop .7s cubic-bezier(.25,1,.5,1) forwards;animation-delay:var(--d)}
.final-mark img{width:96px;height:96px;border-radius:22px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 28px -14px rgba(27,77,62,.55),0 0 0 1px rgba(27,77,62,.08)}
@keyframes pop{0%{opacity:0;scale:.2}60%{opacity:1}100%{opacity:1;scale:1}}

@media (prefers-reduced-motion:reduce){

  .dayring .tick.done{stroke:var(--blue);animation:none}.dayring .spark{opacity:.7;animation:none}.dayring .halo{animation:none}
  .col svg *{stroke-dashoffset:0}
  .msg.me,.reply p,.who{opacity:1;transform:none;animation:none!important}.typing{display:none}.glow{opacity:1}
  .final-mark .a{stroke-dashoffset:0}.final-mark .pop{opacity:1}
  .rescue::before{animation:none}
}

/* E fixes, round 2 */
#features .illo svg{width:100%!important;height:100%!important;padding:0;margin:0;background:none!important;box-shadow:none!important;border-radius:0}
.illo{width:176px;height:176px;margin:0 auto 18px}
.rescue .phase{color:#fff}
.rescue .count{color:rgba(255,255,255,.6)}
.rescue .pattern{color:rgba(255,255,255,.62)}
#bhalo{fill:url(#haloFill)}
@media(max-width:719px){.hero-visual .phone{width:236px}.dayring{width:118vw}}

/* ===== E round 3: tighter scale, SVG hero, compact rescue, quieter privacy ===== */
section{padding:88px 0}
@media(min-width:720px){section{padding:112px 0}}
h1{font-size:clamp(40px,5.4vw,66px);letter-spacing:-.042em}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.032em}
.lead{font-size:18px;max-width:32ch}
@media(min-width:720px){.hero{padding:72px 0 96px;min-height:min(80vh,780px)}}

/* hero device: drawn in SVG, no screenshot */
.hero-visual .phone.device{width:262px;padding:8px;border-radius:44px}
.phone.device .screen{display:block;width:100%;height:auto;border-radius:36px}
@media(min-width:720px){.hero-split .hero-visual{width:262px}.hero-split .phone{width:262px}}
@media(max-width:719px){.hero-visual .phone.device{width:228px}}
.dayring{width:min(600px,140vw)}
.dayring .arc,.dayring .arc-glow{animation:none;stroke-dashoffset:0}
.dayring .tick.done{animation:none;stroke:var(--blue);transition:stroke .25s ease}
.dayring .tick.today{stroke:var(--gold)}
.speck{fill:#F2D9A2;opacity:.25;animation:speck var(--p) ease-in-out infinite;animation-delay:var(--d)}
@keyframes speck{0%,100%{opacity:.15}50%{opacity:.85}}

/* features: smaller */
#features .cols{margin-top:48px}
.illo{width:112px;height:112px;margin:0 auto 14px}
#features .col h3{font-size:18px;margin-bottom:6px}
#features .col p{font-size:15.5px}

/* companion */
.phone{width:min(252px,70vw)}
#companion h2{font-size:clamp(28px,3.4vw,40px)}

/* rescue: compact, copy beside a small instrument */
.rescue{padding:56px 24px;text-align:center}
.rescue-grid{display:grid;gap:28px;align-items:center;max-width:920px;margin:0 auto}
.rescue h2{max-width:14ch}
.rescue-lead{font-size:17px}
.rescue .pattern{margin-top:18px;font-size:14.5px}
.instrument{width:248px;margin:0 auto}
.rescue-visual .phase{font-size:20px;font-weight:650;margin-top:4px}
.rescue-visual .cycles{margin:12px 0 0;gap:8px}
.cycles i{width:8px;height:8px}
.cycles i.on{width:20px}
@media(min-width:720px){
  .rescue{padding:64px 72px;text-align:left}
  .rescue-grid{grid-template-columns:1.1fr .9fr;gap:48px}
  .rescue h2,.rescue-lead,.rescue .pattern{margin-left:0}
  .rescue-visual{text-align:center}
}

/* privacy: journal illustration + three statements */
.priv{text-align:center}
.illo.sm{width:96px;height:96px;margin:0 auto 10px}
.priv-list{list-style:none;margin:36px auto 0;max-width:960px;display:grid;gap:22px}
.priv-list li{font-size:16px;line-height:1.6;color:var(--sub);max-width:34ch;margin:0 auto}
.priv-list b{display:block;color:var(--text);font-weight:650;font-size:17px;margin-bottom:2px}
@media(min-width:760px){
  .priv-list{grid-template-columns:repeat(3,1fr);gap:0}
  .priv-list li{padding:0 28px}
  .priv-list li + li{border-left:1px solid var(--line)}
}
.priv .center-link{margin-top:32px}

/* faq: back to a single centred column */
@media(min-width:900px){
  #faq .wrap{display:block}
  #faq h2{text-align:center;position:static}
  #faq .stack{margin-top:28px}
  #faq details{max-width:680px}
}

/* final: a touch smaller */
.final{padding:96px 24px 112px}
.final h2{font-size:clamp(30px,3.8vw,44px)}
.final-mark{width:150px;height:150px;margin-bottom:28px}
.final-mark img{width:80px;height:80px;border-radius:19px}
@media (prefers-reduced-motion:reduce){.speck{animation:none;opacity:.5}}

/* ===== E round 4: bespoke feature illustrations, static privacy icons ===== */
#features .cols{margin-top:48px;max-width:1000px}
@media(min-width:720px){#features .cols{gap:28px}}
#features .col{max-width:340px;text-align:left}
.art{aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#fff;margin-bottom:20px;
  box-shadow:0 0 0 1px rgba(15,36,26,.06),0 1px 2px rgba(15,36,26,.04),0 18px 36px -24px rgba(15,36,26,.25)}
.art-svg{display:block;width:100%;height:100%}
#features .col h3{font-size:18px;margin-bottom:6px}
#features .col p{font-size:15.5px}

/* habit: week tracker */
.habit .hab-letters text{font-size:10px;font-weight:600;fill:#9AA69F;text-anchor:middle}
.hab-capsule{fill:#E8F4EF;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease-out) .15s}
.hab-day circle{fill:#1B4D3E;transform-box:fill-box;transform-origin:center;transform:scale(.3);opacity:0;
  transition:transform .55s cubic-bezier(.25,1,.5,1),opacity .3s ease;transition-delay:calc(.35s + var(--i) * .12s)}
.hab-day path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .35s ease;transition-delay:calc(.6s + var(--i) * .12s)}
.hab-today{fill:#fff;stroke:#E3E8E4;stroke-width:2.5}
.hab-arc{fill:none;stroke:#D4A853;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out) 1.2s}
.hab-halo{fill:none;stroke:#D4A853;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.hab-next{fill:none;stroke:#DCE3DE;stroke-width:1.5;stroke-dasharray:2 3}
.hab-chip{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--ease-out);transition-delay:calc(1.7s + var(--i) * .12s)}
.hab-chip rect{fill:#F5F4F0}
.hab-chip text{font-size:10px;font-weight:600;fill:#1B4D3E;text-anchor:middle}
.cols.in .hab-capsule{transform:scaleX(1)}
.cols.in .hab-day circle{transform:scale(1);opacity:1}
.cols.in .hab-day path{stroke-dashoffset:0}
.cols.in .hab-arc{stroke-dashoffset:.38}
.cols.in .hab-halo{animation:ring 2.6s ease-out 2.4s infinite}
.cols.in .hab-chip{opacity:1;transform:none}

/* progress: a line that stumbles once and keeps rising */
.chart .grid path{stroke:#EDF0EE;stroke-width:1;stroke-dasharray:3 4}
.chart .area{fill:url(#areaG);opacity:0;transition:opacity .9s ease 1.3s}
.chart .line{fill:none;stroke:#1B4D3E;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1) .2s}
.chart .dip{fill:#8BA67A;opacity:0;transition:opacity .4s ease 1.1s}
.chart .dip-ring{fill:none;stroke:#8BA67A;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.chart .end{fill:#D4A853;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.25,1,.5,1) 1.85s}
.chart .end-halo{fill:none;stroke:#D4A853;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.chart .tag{opacity:0;transform:translateY(6px);transition:opacity .45s ease 2.05s,transform .6s var(--ease-out) 2.05s}
.chart .tag rect{fill:#1B4D3E}
.chart .tag text{font-size:10.5px;font-weight:650;fill:#FDF6E3;text-anchor:middle}
.cols.in .chart .line{stroke-dashoffset:0}
.cols.in .chart .area,.cols.in .chart .dip{opacity:1}
.cols.in .chart .dip-ring{animation:ring 2.2s ease-out 1.2s 2}
.cols.in .chart .end{transform:scale(1)}
.cols.in .chart .end-halo{animation:ring 2.6s ease-out 2.4s infinite}
.cols.in .chart .tag{opacity:1;transform:none}

/* hope: night becomes dawn */
.dawn .sky-day{opacity:0;transition:opacity 2.2s ease .3s}
.dawn .stars circle{fill:#F3E3BD;opacity:.8;transition:opacity 1.6s ease .6s}
.dawn .sun{transform:translateY(40px);transition:transform 2.1s var(--ease-out) .35s}
.dawn .rays line{stroke:#FFF1CC;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .5s ease;transition-delay:calc(1.9s + var(--i) * .07s)}
.dawn .rays{transform-box:view-box;transform-origin:120px 106px}
.dawn .hill.back{fill:#3C7A5E}
.dawn .hill.front{fill:#1B4D3E}
.dawn .cross{stroke:#FDF6E3;stroke-width:1.6;stroke-linecap:round;opacity:.0;transition:opacity 1s ease 1.8s}
.cols.in .dawn .sky-day{opacity:1}
.cols.in .dawn .stars circle{opacity:0}
.cols.in .dawn .sun{transform:none}
.cols.in .dawn .rays line{stroke-dashoffset:0}
.cols.in .dawn .rays{animation:rays 24s linear 2.8s infinite}
.cols.in .dawn .cross{opacity:.85}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes rays{to{transform:rotate(360deg)}}

/* privacy: the original three icons, static */
#privacy .col svg *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}

/* rescue heading aligns with its column */
@media(min-width:720px){.rescue h2{text-align:left}}
.rescue{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 30px 60px -36px rgba(27,77,62,.5)}

@media (prefers-reduced-motion:reduce){
  .hab-capsule,.cols .hab-day circle{transform:none;opacity:1;transition:none}
  .hab-day path,.chart .line{stroke-dashoffset:0;transition:none}
  .hab-arc{stroke-dashoffset:.38;transition:none}
  .hab-chip,.chart .tag{opacity:1;transform:none;transition:none}
  .chart .area,.chart .dip{opacity:1;transition:none}.chart .end{transform:none;transition:none}
  .dawn .sky-day{opacity:1;transition:none}.dawn .stars circle{opacity:0}.dawn .sun{transform:none;transition:none}
  .dawn .rays line{stroke-dashoffset:0;transition:none}.dawn .cross{opacity:.85;transition:none}
  .cols.in .hab-halo,.cols.in .chart .end-halo,.cols.in .chart .dip-ring,.cols.in .dawn .rays{animation:none}
}
#features .col .art-svg{width:100%;height:100%;padding:0;margin:0;border-radius:0;background:none;box-shadow:none;color:inherit}
.cols.in .dawn .rays{animation:raysBreathe 4.5s ease-in-out 2.8s infinite}
@keyframes raysBreathe{0%,100%{opacity:1}50%{opacity:.45}}
.habit{transform:translateY(4px)}

/* ===================================================================
   E polish: one spacing scale, calmer sizes, smooth FAQ
   scale: 4 8 12 16 24 32 48 72 104
   =================================================================== */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:104px}

/* rhythm */
section{padding:var(--s8) 0}
@media(min-width:720px){section{padding:var(--s9) 0}}
h2{font-size:clamp(28px,3.1vw,38px);line-height:1.12;letter-spacing:-.03em}
.sub{margin-top:var(--s3)}

/* hero */
h1{font-size:clamp(40px,5vw,62px);line-height:1.02;letter-spacing:-.038em}
.lead{margin-top:var(--s5);font-size:18px;line-height:1.6}
.hero-copy .badge-row{margin-top:var(--s6)}
.hero-copy .app-badge svg{height:52px}
@media(min-width:720px){.hero{padding:var(--s7) 0 var(--s9);min-height:min(76vh,720px)}}
.hero-visual .phone.device,.hero-split .hero-visual,.hero-split .phone{width:244px}
@media(max-width:719px){.hero-visual .phone.device{width:216px}}
.dayring{width:min(540px,130vw)}

/* features */
#features .cols{margin-top:var(--s7);max-width:940px;gap:var(--s7)}
@media(min-width:720px){#features .cols{gap:var(--s6)}}
#features .col{max-width:292px}
.art{border-radius:16px;margin-bottom:var(--s5)}
#features .col h3{font-size:17px;line-height:1.35;margin-bottom:var(--s2)}
#features .col p{font-size:15px;line-height:1.6}

/* companion */
#companion .split{margin-top:0;gap:var(--s7)}
#companion .sub{max-width:36ch}
.phone{width:min(236px,66vw);border-radius:42px}
.phone.live .screen{border-radius:34px}

/* rescue */
.rescue{padding:var(--s7) var(--s5)}
@media(min-width:720px){.rescue{padding:var(--s7) var(--s8)}}
.rescue h2{font-size:clamp(26px,2.8vw,34px)}
.rescue-lead{margin-top:var(--s3);font-size:16.5px}
.rescue .pattern{margin-top:var(--s4)}
.instrument{width:216px}
.rescue-visual .phase{font-size:18px;margin-top:var(--s2)}
.rescue-visual .cycles{margin-top:var(--s3)}

/* privacy: journal mark + three statements */
.priv-mark{display:block;width:52px;height:auto;margin:0 auto var(--s4)}
.priv-list{margin:var(--s6) auto 0;max-width:880px;gap:var(--s5)}
.priv-list li{font-size:15px;line-height:1.6;max-width:30ch}
.priv-list b{font-size:16px;margin-bottom:var(--s1)}
@media(min-width:760px){.priv-list{gap:0}.priv-list li{padding:var(--s1) var(--s5);max-width:none}}
.priv .center-link{margin-top:var(--s6);font-size:15px}

/* faq */
#faq .stack{margin-top:var(--s6)}
#faq details{max-width:680px}
summary{padding:var(--s5) 0;font-size:16.5px;align-items:center}
summary::after{content:"";flex:none;width:12px;height:12px;color:var(--blue);
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .35s var(--ease-out)}
details[open] summary::after{content:""}
details p{padding:0 var(--s7) var(--s5) 0;overflow:hidden;font-size:15.5px;line-height:1.65}
summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}

/* final */
.final{padding:var(--s9) var(--s5)}
.final-mark{width:112px;height:112px;margin-bottom:var(--s5)}
.final-mark img{width:60px;height:60px;border-radius:14px}
.final .sub{margin-top:var(--s3)}
.final .badge-row{margin-top:var(--s5)}
/* polish fixes */
@media(max-width:719px){.hero-split .hero-visual,.hero-visual{width:216px;margin-left:auto;margin-right:auto}details p{padding-right:var(--s5)}}
.msg.me{max-width:88%;font-size:13px;padding:9px 12px}
.reply p{font-size:13.5px}
.thread{gap:22px}
.reply{margin-top:-38px}

/* ===================================================================
   E round 5: 24h dial, breathing bloom, premium chat, privacy vault, closing scene
   =================================================================== */

/* hero dial */
.dayring .tick{stroke-width:2.5}
.dayring .tick.major{stroke-width:3}
.dayring .tick.done{stroke:var(--blue)}
.dayring.complete .tick{stroke:var(--gold);transition:stroke .5s ease}
.dayring.settled .tick{stroke:var(--blue);transition:stroke 1.2s ease}
.dayring .arc-glow{transition:opacity .6s ease}
.dayring.complete .arc-glow{opacity:.55}

/* breathing bloom */
.rescue{padding:var(--s7) var(--s5)}
@media(min-width:720px){.rescue{padding:var(--s7) var(--s8)}.rescue-grid{grid-template-columns:1.15fr .85fr;gap:var(--s7)}}
.rescue-copy h2{margin-bottom:0}
.rescue-lead{margin-top:var(--s4);max-width:34ch}
@media(max-width:719px){.rescue-lead{margin-left:auto;margin-right:auto}}
.instrument{width:232px}
#layers .layer{fill:url(#layerFill);stroke:rgba(253,246,227,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.rescue-visual .phase{margin-top:0;font-size:17px;letter-spacing:-.01em}
.rescue-visual .cycles{margin-top:var(--s3)}

/* companion chat */
#companion .split{align-items:center}
.phone.live{width:min(262px,72vw)}
.phone.live .screen{padding:0;display:block;background:
  radial-gradient(120% 60% at 30% 70%,rgba(160,105,40,.20),transparent 60%),
  linear-gradient(180deg,#0E2019 0%,#0B1812 100%);font-size:12.5px}
.status{position:absolute;top:13px;left:22px;right:18px;display:flex;justify-content:space-between;align-items:center;color:#EDE6D6;font-size:12px;font-weight:600;z-index:3}
.status svg{width:46px;height:11px}
.island{top:9px;height:24px;width:32%;z-index:4}
.chat-head{position:absolute;top:44px;left:0;right:0;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 16px 12px;
  background:linear-gradient(180deg,rgba(14,32,25,.96) 70%,rgba(14,32,25,0));}
.chat-head img{width:28px;height:28px;border-radius:8px}
.chat-head b{display:block;color:#F3EEE3;font-size:13px;font-weight:650;line-height:1.1}
.chat-head span{display:block;color:#7FA38E;font-size:10.5px;margin-top:2px}
.viewport{position:absolute;top:92px;bottom:58px;left:0;right:0;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 34px);mask:linear-gradient(180deg,transparent 0,#000 34px)}
.phone.live .thread{position:absolute;left:14px;right:14px;bottom:10px;display:flex;flex-direction:column;gap:10px;will-change:transform}
.stamp{text-align:center;font-size:10px;color:#6F887A;margin-bottom:4px}
.m{display:none;opacity:1;transform:none}
.m.show{display:block;animation:msgIn .45s var(--ease-out) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.m.me{align-self:flex-end;max-width:80%;background:#1F4A38;color:#F3EEE3;padding:8px 11px;border-radius:15px 15px 4px 15px;line-height:1.38}
.m.an{align-self:flex-start;max-width:90%;color:#F1EADB;font-size:13px;line-height:1.45;padding:0 2px}
.m.an + .m.an{margin-top:-4px}
.m.typing{align-self:flex-start;padding:6px 2px}
.m.typing.show{display:flex;gap:4px}
.m.typing i{width:5px;height:5px;border-radius:50%;background:#8FA99A;animation:blink 1s infinite}
.m.typing i:nth-child(2){animation-delay:.15s}.m.typing i:nth-child(3){animation-delay:.3s}
.m.chips.show{display:flex;gap:6px;flex-wrap:wrap}
.m.chips span{font-size:11px;font-weight:600;color:#F3EEE3;border:1px solid rgba(243,238,227,.22);border-radius:999px;padding:5px 10px}
.composer{position:absolute;left:12px;right:12px;bottom:22px;height:34px;border-radius:17px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 14px;color:#6F7F76;font-size:11.5px}
.composer b{width:26px;height:26px;border-radius:50%;background:#D4A853;display:grid;place-items:center}
.composer svg{width:13px;height:13px;fill:none;stroke:#10261C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-bar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:34%;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}

/* privacy: vault illustration + points */
.priv2{display:grid;gap:var(--s7);align-items:center;max-width:980px}
@media(min-width:720px){.priv2{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.priv-art{border-radius:20px;background:#F2F6F3;aspect-ratio:9/7;display:grid;place-items:center;overflow:hidden}
.vault{width:100%;height:100%}
.vault .orbit{fill:none;stroke:#C9D6CD;stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.vault .cloud path{fill:#fff;stroke:#C9D4CD;stroke-width:1.5}
.vault .route{fill:none;stroke:#9DB2A5;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) 1.5s}
.vault .block circle{fill:#fff;stroke:#C98F5A;stroke-width:1.5}
.vault .block path{stroke:#C98F5A;stroke-width:1.6;stroke-linecap:round}
.vault .block{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .3s ease 2.3s,transform .5s var(--ease-out) 2.3s}
.vault .ph-body{fill:#1B3A2E}
.vault .card{fill:#FDF6E3}
.vault .card-title{fill:#1B4D3E}
.vault .jl path{stroke:#9BAA9F;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease;transition-delay:calc(.3s + var(--i) * .22s)}
.vault .lock-bg{fill:#D4A853}
.vault .lock-halo{fill:none;stroke:#D4A853;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.vault .lock-body{fill:#10261C}
.vault .keyhole{fill:#D4A853}
.vault .shackle{fill:none;stroke:#10261C;stroke-width:2.4;stroke-linecap:round;transform:translateY(-4px);transition:transform .35s cubic-bezier(.5,0,.75,0) 1.3s}
.priv-art.play .jl path{stroke-dashoffset:0}
.priv-art.play .shackle{transform:none}
.priv-art.play .route{stroke-dashoffset:.42}
.priv-art.play .block{opacity:1;transform:none}
.priv-art.play .lock-halo{animation:ring 2.8s ease-out 1.7s infinite}
.priv-copy h2{margin:0}
.priv-copy .sub{margin:var(--s3) 0 0;text-align:left;max-width:34ch}
.priv-points{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s5)}
.priv-points li{display:flex;gap:var(--s4);align-items:flex-start}
.pi{flex:none;width:36px;height:36px;border-radius:10px;background:var(--tile);color:var(--blue);display:grid;place-items:center}
.pi svg{width:18px;height:18px}
.priv-points b{display:block;font-size:16px;font-weight:650;color:var(--text);line-height:1.35}
.priv-points li > div span{display:block;font-size:15px;line-height:1.55;color:var(--sub);margin-top:2px}
.priv-link{margin-top:var(--s6);font-size:15px;font-weight:600}
.priv-link a{text-decoration:none}
.priv-link a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:719px){.priv-copy h2,.priv-copy .sub{text-align:left}}

/* closing scene */
.closing{position:relative;overflow:hidden;padding:var(--s9) var(--s5) 0;text-align:center;color:#F7F0E0;
  background:linear-gradient(180deg,#0B231A 0%,#123A2A 55%,#1B4D3E 100%)}
.closing-stars{position:absolute;inset:0;width:100%;height:100%}
.closing-stars circle{fill:#F3E3BD;opacity:.25;animation:speck var(--p) ease-in-out infinite;animation-delay:var(--d)}
.closing-sun{position:absolute;left:50%;bottom:40px;width:min(900px,140vw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,62%);background:radial-gradient(closest-side,rgba(246,214,150,.55),rgba(212,168,83,.18) 45%,transparent 70%);
  transition:transform 2.6s var(--ease-out),opacity 2s ease;opacity:.4}
.closing.in .closing-sun{transform:translate(-50%,48%);opacity:1}
.closing-inner{position:relative;z-index:2;padding-bottom:180px}
.closing .final-mark{width:120px;height:120px;margin:0 auto var(--s5)}
.closing .final-mark .t{stroke:rgba(253,246,227,.16)}
.closing .final-mark img{width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 1px rgba(253,246,227,.12),0 18px 40px -12px rgba(0,0,0,.6),0 0 60px -10px rgba(212,168,83,.45)}
.closing h2{color:#FBF4E4;font-size:clamp(32px,4vw,48px)}
.closing-sub{margin:var(--s3) auto 0;max-width:34ch;color:rgba(247,240,224,.72);font-size:17px;line-height:1.6}
.closing .badge-row{margin-top:var(--s6)}
.closing .app-badge svg{height:52px}
.closing-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;z-index:1}
.closing-hills .h1{fill:#2C6A50}
.closing-hills .h2{fill:#1E5540}
.closing-hills .h3{fill:#123A2A}
footer.dark-foot{background:#123A2A;border-top:0;color:rgba(247,240,224,.6)}
footer.dark-foot .foot a{color:rgba(247,240,224,.6)}
footer.dark-foot .foot a:hover{color:#FBF4E4}

@media (prefers-reduced-motion:reduce){
  .m{display:block}.m.typing{display:none}.m.chips{display:flex}.m.show{animation:none}
  .vault .jl path,.vault .route{stroke-dashoffset:0;transition:none}.vault .route{stroke-dashoffset:.42}
  .vault .shackle{transform:none;transition:none}.vault .block{opacity:1;transform:none;transition:none}
  .closing-sun{transition:none;transform:translate(-50%,48%);opacity:1}.closing-stars circle{animation:none}
}

/* progress miniature: the app's Your Progress screen */
.progress{background:#F5F1E8}
.progress .p-card{fill:#2F5E41}
.progress .p-eyebrow{font-size:8.5px;font-weight:600;fill:#D9E5DB;letter-spacing:.02em}
.progress .p-pct{font-size:23px;font-weight:700;fill:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.progress .p-sub{font-size:9px;fill:#F1F6F1;font-variant-numeric:tabular-nums}
.progress .p-track{fill:none;stroke:rgba(255,255,255,.2);stroke-width:3}
.progress .p-ring{fill:none;stroke:#E5BB69;stroke-width:3;stroke-linecap:round}
.progress .p-tip{fill:#FFF2CF;filter:drop-shadow(0 0 2px #FCE1A0)}
.progress .p-h{font-size:9px;font-weight:700;fill:#202820}
.progress .pc-bg{fill:#EEEAE1}
.progress .pc-fill{opacity:0;transform-box:fill-box;transform-origin:center}
.progress .p-metric rect{fill:#FFFDF9;stroke:#E6E4DA}
.progress .p-mv{font-size:14px;font-weight:700;fill:#1A3A26;font-variant-numeric:tabular-nums}
.progress .p-ml{font-size:8.5px;fill:#596153}

/* ===================================================================
   E round 6: Inter everywhere (the app's face), tighter breathing,
   privacy that blends, squircle closing mark
   =================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/fonts/inter-latin-var.woff2") format("woff2")}
:root{--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
body{font-family:var(--font);font-optical-sizing:auto;font-feature-settings:"cv11" 1,"ss03" 1}
/* SVG text: same face, even figures, crisp at small sizes */
svg text{font-family:var(--font);font-feature-settings:"tnum" 1,"cv11" 1;text-rendering:geometricPrecision}
.progress .p-pct,.p-mv{letter-spacing:-.03em}

/* breathing: the box now matches the bloom, so the label sits under the core */
.instrument{width:216px;margin:0 auto}
.rescue-visual .phase{margin-top:var(--s2)}
@media(min-width:720px){.rescue-grid{grid-template-columns:1.2fr .8fr}}

/* privacy art: no panel, it fades into the page */
.priv-art{background:none;border-radius:0;overflow:visible;aspect-ratio:9/7;
  -webkit-mask:radial-gradient(closest-side,#000 78%,transparent);mask:radial-gradient(closest-side,#000 78%,transparent)}
.vault .cloud path{fill:#F2F6F3;stroke:#C9D6CD}
.vault .block circle{fill:#FBF4EC}

/* privacy icons: duotone, one stroke weight, gold accent */
.pi{width:40px;height:40px;border-radius:11px;background:#EAF3EE}
.pi svg{width:22px;height:22px;overflow:visible}
.pi .ic-s{fill:none;stroke:#1B4D3E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pi .ic-f{fill:#1B4D3E}
.pi .ic-g{fill:#D4A853}
.pi .ic-g-s{fill:none;stroke:#C99A3E;stroke-width:1.8;stroke-linecap:round}
.pi .ic-cut{fill:none;stroke:#EAF3EE;stroke-width:4.4;stroke-linecap:round}
.priv-points{gap:var(--s5)}
.priv-points li{align-items:center}
.priv-points li > div span{margin-top:3px}

/* closing mark: gold outline that follows the icon's own shape */
.closing .final-mark{width:128px;height:128px;margin:0 auto var(--s5)}
.final-mark svg{overflow:visible}
.final-mark .glow{opacity:0;transition:opacity 1.4s ease .4s}
.final-mark .t{fill:none;stroke:rgba(253,246,227,.12);stroke-width:1.5}
.final-mark .a{fill:none;stroke:url(#markG);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.final-mark.in .glow{opacity:1}
.final-mark.in .a{transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1) .15s;stroke-dashoffset:0}
.closing .final-mark img{width:64px;height:64px;border-radius:15px}
@media (prefers-reduced-motion:reduce){.final-mark .a{stroke-dashoffset:0}.final-mark .glow{opacity:1}}

/* ---- performance: nothing repaints that doesn't need to ---- */
.speck.still{animation:none;opacity:.45}
.closing-stars circle{animation:none;opacity:.35}
.twinkles{position:absolute;inset:0;pointer-events:none}
.twinkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#F3E3BD;opacity:.2;will-change:opacity;
  animation:speck var(--p) ease-in-out infinite;animation-delay:var(--d)}
.dayring .arc-glow{filter:none;stroke-width:9;opacity:.14}
.dayring.complete .arc-glow{opacity:.32}
/* off-screen sections pause their loops */
.is-off *,.is-off *::before,.is-off *::after,.is-off::before{animation-play-state:paused!important}
/* faq: fast ease-out both ways */
summary::after{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.twinkles i{animation:none}}

/* round 6 fixes */
#numA,#numB{font-feature-settings:"tnum" 0,"cv11" 1}          /* proportional 1 (no foot serif) at display size */
.instrument{width:196px}
.priv-art{-webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 76%,transparent);mask:radial-gradient(50% 50% at 50% 50%,#000 76%,transparent)}

/* ===== E round 7 ===== */

/* FAQ: native <details> animation, no JavaScript.
   Chrome/Edge animate height; other browsers open instantly (same as before). */
:root{interpolate-size:allow-keywords}
#faq details::details-content{block-size:0;overflow:clip;opacity:0;
  transition:block-size .3s cubic-bezier(.16,1,.3,1),opacity .2s ease,content-visibility .3s allow-discrete}
#faq details[open]::details-content{block-size:auto;opacity:1}
#faq details p{overflow:visible}
details[open] summary::after{transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){#faq details::details-content{transition:none}}
/* the heavy closing scene moves as one GPU layer when content above it changes height */
.closing{transform:translateZ(0)}

/* privacy points: icon sits on the title line, glyph has air inside its tile */
.priv-points{gap:28px}
.priv-points li{align-items:flex-start;gap:14px}
.pi{width:36px;height:36px;border-radius:10px;margin-top:-6px}
.pi svg{width:20px;height:20px}
.priv-points b{font-size:16px;line-height:24px}
.priv-points li > div span{margin-top:2px;line-height:1.55}

/* progress panel: inset, fewer elements, more air */
.progress .p-eyebrow{font-size:9px;font-weight:500;fill:#CFE0D4;letter-spacing:.01em}
.progress .p-pct{font-size:22px;font-weight:700;fill:#fff}
.progress .p-track{stroke-width:2.5}
.progress .p-ring{stroke-width:2.5}
.progress .p-h{font-size:9.5px;font-weight:600;fill:#202820}
.progress .p-days{font-size:9px;fill:#7A8274;text-anchor:end;font-feature-settings:"tnum" 1}

/* ===== audit fixes ===== */
/* 1. hero keeps its side gutter at every width (earlier shorthand zeroed it) */
.hero{padding-left:24px;padding-right:24px}
@media(min-width:1128px){.hero{padding-left:0;padding-right:0}}
/* 4. calmer hero-to-features gap on phones */
@media(max-width:719px){.hero{padding-bottom:var(--s7)}.hero-visual{padding:var(--s6) 0;margin-top:var(--s6)}}

/* 2. every link and control is at least 44px tall to the finger */
.brand{min-height:44px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px}
.priv-link a,.center-link a{display:inline-flex;align-items:center;min-height:44px}
.foot a{display:inline-flex;align-items:center;min-height:44px;margin-right:var(--s4)}
.foot{align-items:center}
.foot a:last-child{margin-right:0}

/* 3. stacked privacy art stays a comfortable size */
@media(max-width:719px){.priv-art{max-width:420px;width:100%;margin:0 auto}}

/* 5. FAQ answers at a readable measure */
#faq details p{max-width:62ch}

/* 6. phones: section intros share one alignment (centred), lists stay left */
@media(max-width:719px){
  #companion h2,#companion .sub,.priv-copy h2,.priv-copy .sub{text-align:center;margin-left:auto;margin-right:auto}
  .priv-link{text-align:center}
}

/* 7. home-indicator safe area */
footer.dark-foot{padding-bottom:max(28px,env(safe-area-inset-bottom))}

/* privacy points: icon centred on the title's first line (no tile).
   (line-height − icon) / 2 = (24 − 22) / 2 = 1px, per first-line alignment guidance */
.priv-points li{align-items:flex-start;gap:14px}
.pi{width:22px;height:22px;background:none;border-radius:0;margin-top:0;display:block;flex:none;transform:translateY(1px)}
.pi svg{width:22px;height:22px;display:block}
.pi .ic-cut{stroke:#fff}
.priv-points b{line-height:24px}
.nav-links a,.foot a{min-width:44px;justify-content:center}

/* chat: verse inline like the app, the app's own suggestion chips, iOS touch */
.m.an .ref{color:#9DB9A7;font-size:11.5px;white-space:nowrap}
.m.chips.show{display:flex;gap:6px;flex-wrap:wrap}
.m.chips .chip{font-size:11.5px;font-weight:600;color:#DCEBE1;background:rgba(232,244,239,.10);border:0;border-radius:999px;padding:7px 12px;
  transition:background-color .18s ease,color .18s ease,transform .1s ease-out;will-change:transform}
.m.chips .chip.pressed{transform:scale(.95);background:rgba(232,244,239,.2)}
.m.chips .chip.selected{background:#D4A853;color:#10261C}
.m.chips.leaving{transition:opacity .25s ease;opacity:0}
.touch{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;z-index:6;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.26);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 6px 14px -4px rgba(0,0,0,.35)}
.phone.live .thread{transition:opacity .45s ease}
.phone.live .thread.resetting{opacity:0}

/* verse: between a card and plain text. Soft panel, upright type, hanging gold quote */
.m.verse{display:none;margin:0;align-self:stretch;position:relative;background:rgba(253,246,227,.055);border-radius:14px;padding:12px 14px 11px 30px}
.m.verse.show{display:block}
.m.verse .q{position:absolute;left:11px;top:5px;font-size:28px;line-height:1;font-weight:700;color:#D4A853;opacity:.9}
.m.verse blockquote{margin:0;color:#F6EDD6;font-size:13px;line-height:1.45;font-weight:500;letter-spacing:-.005em}
.m.verse figcaption{margin-top:6px;color:#C9A55A;font-size:10.5px;font-weight:600;letter-spacing:.01em}
/* verse panel, final: warm hairline + top-lit fill (declared explicitly, not inherited from the old card) */
.m.verse{border:1px solid rgba(212,168,83,.2);background:linear-gradient(180deg,rgba(253,246,227,.075),rgba(253,246,227,.03));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.m.verse .q{top:7px}

/* chat fills from the top like a new conversation; scrolls up only once it overflows (motion.js) */
.phone.live .thread{top:10px;bottom:auto;transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.phone.live .thread.snap{transition:opacity .45s ease}

/* hero dial: the head's halo pulses once, in time with the close, instead of on its own timer */
.dayring .halo{animation:none;opacity:.22}
.dayring.complete .halo{animation:halo 1.2s cubic-bezier(.22,1,.36,1) 1}
@media (prefers-reduced-motion:reduce){.dayring.complete .halo{animation:none}}

/* rescue card, desktop: balanced sides and a circle that lines up with the copy.
   The breathing box has ~48px of empty space around the ring at rest, so the right padding is
   reduced by that much to give the ring the same visible margin as the text on the left.
   The label and dots hang below the ring, so the group is nudged down by half their height to
   put the ring's centre on the copy's midpoint. */
@media(min-width:720px){
  .rescue{padding:48px 48px 72px 96px}
  .rescue-grid{max-width:none;grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .rescue-visual{justify-self:end;transform:translateY(26px)}
}
@media(min-width:720px){
  /* keep the two groups together: centred 900px row, equal visible margins, copy flush left */
  .rescue{padding:48px 96px 72px}
  .rescue-grid{max-width:900px;margin:0 auto}
  .rescue-visual{margin-right:-48px}              /* the breathing box has ~48px of air around the ring at rest */
  .rescue h2,.rescue-lead{margin-left:0;margin-right:0;text-align:left}
}
@media(min-width:720px){.rescue p.rescue-lead{margin-left:0;margin-right:0;max-width:34em}}   /* beats the base .rescue p centring */

/* ===================================================================
   Page grid: one content column (.wrap: 1080 max, 24px gutters) for every section.
   Split sections share a 1fr/1fr grid with a 48px gap, so left text starts on the column's left
   edge and every right-hand visual (hero phone, chat phone, breathing ring) sits on the same axis.
   =================================================================== */
@media(min-width:1128px){.hero{padding-left:24px;padding-right:24px}}   /* keep the hero on the column too */
@media(min-width:720px){
  .hero-split{grid-template-columns:1fr 1fr;gap:48px}
  .hero-split .hero-visual{justify-self:center}
  #companion .split{grid-template-columns:1fr 1fr;gap:48px}
  #companion .phone{justify-self:center}
}
/* rescue card spans exactly the content column; its right grid column matches the page's right column */
#rescue{padding:0 24px}
.rescue{max-width:1032px}
@media(min-width:720px){
  .rescue{padding:56px 0 56px 64px}
  .rescue-grid{max-width:none;margin:0;gap:48px;grid-template-columns:minmax(0,1fr) calc((100% + 16px) / 2)}
  .rescue-visual{margin-right:0;justify-self:center}
}
/* privacy: same two columns as the rest of the page */
@media(min-width:720px){.priv2{max-width:1080px;grid-template-columns:1fr 1fr;gap:48px}}

/* phones: the hero dial fits inside the screen instead of bleeding off both edges.
   Outer ticks sit at r=280 of the 640 viewBox, so width = (100vw - 24px) * 640/560 keeps them 12px in. */
@media(max-width:719px){
  .dayring{width:calc((100vw - 24px) * 1.1428)}
  .dayring .guide.faint{display:none}
}

/* tablet/desktop split: the dial never reaches past the viewport edge on its axis
   (tick span <= 50vw - 24px, converted to the SVG's width by 640/560) */
@media(min-width:720px){.dayring{width:min(540px,calc((50vw - 24px) * 1.1428))}}

/* privacy art keeps its size on the wider grid: capped and centred in its column */
@media(min-width:720px){.priv-art{max-width:420px;width:100%;justify-self:center}}