/* FitAgain website. Tokens first, then base, then one block per section. */
:root{
  --bg:#FFFFFF;
  --band:#F3F5F8;          /* cool off-white, biased toward the app's blue */
  --ink:#0A0A0A;
  --ink-2:#5E6168;
  --ink-3:#9A9DA4;
  --line:#E3E6EB;
  --accent:#1F5FD1;        /* app interaction blue */
  --accent-soft:#E6EEFB;
  --done:#1E7A3C;
  --done-soft:#E3F2E8;
  --phone:#111214;
  --screen:#FFFFFF;
  --screen-2:#F2F2F2;
  --slot:#C9A227;          /* artwork-slot marker colour (design-only) */
  --slot-soft:rgba(201,162,39,.10);
  --note:#7A4FD1;          /* design-note colour (design-only) */
  --note-soft:rgba(122,79,209,.08);
  --font-ui:-apple-system,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r-xl:36px; --r-l:22px; --r-m:14px; --r-s:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0C0E;--band:#131518;--ink:#F4F5F7;--ink-2:#A3A7AF;--ink-3:#6C7079;--line:#23262B;
  --accent:#5B8CF0;--accent-soft:#16233D;--done:#4CC27A;--done-soft:#12291B;--phone:#2A2C30;--screen:#0F1012;--screen-2:#1C1D20;
  --slot:#E2BE4A;--slot-soft:rgba(226,190,74,.10);--note:#A988F0;--note-soft:rgba(169,136,240,.10);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0C0E;--band:#131518;--ink:#F4F5F7;--ink-2:#A3A7AF;--ink-3:#6C7079;--line:#23262B;
  --accent:#5B8CF0;--accent-soft:#16233D;--done:#4CC27A;--done-soft:#12291B;--phone:#2A2C30;--screen:#0F1012;--screen-2:#1C1D20;
  --slot:#E2BE4A;--slot-soft:rgba(226,190,74,.10);--note:#A988F0;--note-soft:rgba(169,136,240,.10);color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:520px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.04}
h1{font-size:clamp(46px,7.4vw,96px);font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(34px,4.6vw,58px);font-weight:700;letter-spacing:-.035em}
h3{font-size:22px;font-weight:650;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:34em}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
section{padding-block:clamp(72px,10vw,128px)}
.band{background:var(--band)}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent}
nav.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
nav.top{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;top:calc(env(safe-area-inset-top,0px) + 8px);padding-top:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
nav.top .wrap{max-width:980px;height:58px;border-radius:999px;padding-left:22px;padding-right:8px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border:1px solid var(--line);box-shadow:0 10px 30px -16px rgba(10,20,40,.25)}
nav.top .store{border-radius:999px!important;padding:10px 16px!important}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.logo img{width:26px;height:26px;border-radius:7px;display:block}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.navlinks a{text-decoration:none}.navlinks a:hover{color:var(--ink)}
@media (max-width:760px){.navlinks{display:none}nav.top .store{margin-left:auto}}

.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);text-decoration:none;border-radius:14px;padding:11px 20px 11px 16px;font-weight:600;font-size:15px;line-height:1.1;border:0;cursor:pointer;white-space:nowrap}
.store svg{width:20px;height:20px;fill:currentColor;flex:none}
.store small{display:block;font-size:10.5px;font-weight:500;opacity:.75;letter-spacing:.01em}
.store.big{padding:14px 24px 14px 20px;font-size:18px;border-radius:16px}
.store.big svg{width:26px;height:26px}
nav.top .store{padding:8px 14px;font-size:14px;border-radius:11px}

/* design-only: artwork slots + notes */
.slot{border:1.5px dashed var(--slot);background:var(--slot-soft);border-radius:28px;display:grid;place-items:center;text-align:center;color:var(--slot);font-family:var(--font-mono);font-size:11.5px;line-height:1.35;padding:10px}
.slot b{display:block;font-weight:500;font-size:12.5px}

/* HERO */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;position:relative;z-index:2;min-width:0}
.hero h1 span{color:var(--ink-3)}
.sketch{position:relative;white-space:nowrap;color:var(--ink)}
.sketch::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-.34em;height:.46em;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 45 4, 110 3, 197 7 M14 14 C 70 9, 130 10, 186 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 45 4, 110 3, 197 7 M14 14 C 70 9, 130 10, 186 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.laurels{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.laurel{width:30px;height:92px;flex:none}
.laurel.r{transform:scaleX(-1)}
.store.hero-store{padding:18px 32px 18px 26px;font-size:24px;border-radius:20px;gap:12px}
.store.hero-store svg{width:34px;height:34px}
.store.hero-store small{font-size:12px}
@media (max-width:420px){.store.hero-store{padding:15px 22px 15px 18px;font-size:20px}.store.hero-store svg{width:28px;height:28px}.laurel{width:24px;height:74px}}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-top:20px}
.seg button{border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);padding:9px 18px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.step-line{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.015em;max-width:30em;margin-top:56px}
.step-line span{color:var(--ink-2);font-weight:500}
.cite-line{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.5}
.hl{background:linear-gradient(transparent 58%,var(--accent-soft) 58%,var(--accent-soft) 92%,transparent 92%);color:var(--ink);font-weight:650;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cta-row .meta{font-size:14px;color:var(--ink-3)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line);position:relative;z-index:2}
.pillars div{padding:22px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.pillars div+div{padding-left:24px;border-left:1px solid var(--line)}
.pillars b{font-size:17px;letter-spacing:-.01em}
.pillars span{font-size:15px;color:var(--ink-2)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}.pillars div,.pillars div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}}

.noise{position:absolute;inset:0;pointer-events:none;z-index:0}
.noise span{position:absolute;font-family:var(--font-mono);font-size:13px;color:var(--ink-3);white-space:nowrap;opacity:.55;filter:blur(1.6px)}
.noise span.f{filter:blur(3.5px);opacity:.35;font-size:16px}

.trio{position:relative;height:640px;min-width:0}
.trio-stage{position:absolute;left:50%;top:50%;width:0;height:0}
.tp{position:absolute;left:-145px;top:-311px}
.tp.mid{z-index:3;box-shadow:0 50px 90px -30px rgba(10,20,40,.45)}
.tp.side{z-index:1;filter:saturate(.9)}
.tp.l{transform:translateX(-58%) rotate(-7deg) scale(.86)}
.tp.r{transform:translateX(58%) rotate(7deg) scale(.86)}
.tp .screen .slot.fill{position:absolute;inset:0;border-radius:38px}
@media (max-width:1100px){.trio-stage{transform:scale(.86)}}
@media (max-width:860px){.trio{height:560px}.trio-stage{transform:scale(.82)}}
@media (max-width:520px){.trio{height:430px}.trio-stage{transform:scale(.62)}}

/* PHONE */
.phone{width:290px;border-radius:48px;background:var(--phone);padding:11px;box-shadow:0 40px 80px -30px rgba(10,20,40,.35),0 0 0 1px rgba(255,255,255,.04) inset;flex:none}
.screen{border-radius:38px;background:var(--screen);height:600px;overflow:hidden;position:relative;font-size:13px;color:var(--ink);padding:46px 16px 16px;display:flex;flex-direction:column;gap:12px}
.screen::before{content:"";position:absolute;top:11px;left:50%;width:84px;height:24px;border-radius:14px;background:#000;transform:translateX(-50%)}
.s-title{font-size:26px;font-weight:700;letter-spacing:-.02em}
.s-sub{font-size:12px;color:var(--ink-3);font-weight:500}
.card{background:var(--screen-2);border-radius:18px;padding:14px}
.week{display:flex;justify-content:space-between}
.week div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3);font-weight:600}
.week i{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line)}
.week .d i{border-color:var(--done);background:var(--done);position:relative}
.week .d i::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.week .t i{border-color:var(--ink)}
.week .t{color:var(--ink)}
.btn-app{background:var(--accent);color:#fff;border-radius:14px;text-align:center;font-weight:600;padding:12px;font-size:14px}
.habits{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.habits div{background:var(--screen-2);border-radius:12px;padding:10px 4px;text-align:center;font-size:10px;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:6px}
.habits div i{width:18px;height:18px;border-radius:6px;border:2px solid var(--ink)}
.habits .ok{background:var(--done-soft);color:var(--done)}
.habits .ok i{border-color:var(--done);background:var(--done)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.setrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--screen-2);font-size:13px}
.setrow .n{width:20px;height:20px;border-radius:50%;background:var(--done);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.setrow .v{margin-left:auto;color:var(--ink-2)}
.tile{border:1.5px solid var(--accent);border-radius:14px;padding:12px}
.wt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.wt .big{font-size:30px;font-weight:700;letter-spacing:-.02em}
.wt .big small{font-size:14px;color:var(--ink-3);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.steps span{border:1.5px solid var(--accent);color:var(--accent);border-radius:12px;text-align:center;padding:6px 0;font-weight:600;font-size:12px}
.reps{display:flex;align-items:center;gap:8px;margin-top:10px}
.reps b{flex:1;text-align:center;font-size:24px}
.reps span{width:42px;height:38px;border-radius:12px;background:var(--screen-2);display:grid;place-items:center;font-size:20px;font-weight:500}
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pills span{border-radius:999px;background:var(--screen-2);text-align:center;padding:8px 0;font-size:12px;font-weight:600}
.pills .on{background:var(--ink);color:var(--screen)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-size:11px;padding:5px 10px;border-radius:999px;background:var(--screen-2);font-weight:600;color:var(--ink-2)}
.chips .on{background:var(--ink);color:var(--screen)}
.day{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--screen-2)}
.day b{width:34px;font-size:11px;color:var(--ink-3);font-weight:700}
.day span{font-weight:600}
.day em{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-3)}
.day.rest{background:transparent;border:1.5px dashed var(--line)}
.day.rest span{color:var(--ink-3);font-weight:500}
.coach{display:flex;gap:10px;align-items:flex-start}
.coach i{width:28px;height:28px;border-radius:50%;background:var(--ink);flex:none;display:grid;place-items:center}
.coach i::after{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--screen)}
.coach p{background:var(--accent-soft);border-radius:4px 16px 16px 16px;padding:10px 12px;font-size:12.5px;line-height:1.4}

/* FEATURES */
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:760px}
.idea-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start;margin-top:40px}
.not-list{display:flex;flex-direction:column;gap:2px;font-size:clamp(22px,2.4vw,30px);font-weight:650;letter-spacing:-.02em}
.not-list s{color:var(--ink-3);text-decoration-thickness:2px;text-decoration-color:var(--ink-3)}
.yes-list{display:flex;flex-direction:column;gap:2px;font-size:clamp(22px,2.4vw,30px);font-weight:650;letter-spacing:-.02em}
.yes-list span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--done);margin-right:12px;vertical-align:2px}
.cols{display:flex;flex-direction:column;gap:28px}
@media (max-width:860px){.idea-grid{grid-template-columns:1fr}}

/* Bevel-style stacked cards: soft fill, big radius, phone bleeds off the bottom edge */
#different{padding-top:clamp(24px,4vw,48px)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;background:var(--band);border-radius:clamp(28px,4vw,44px);padding:clamp(28px,5vw,64px) clamp(24px,5vw,64px) 0;overflow:hidden}
.feature+.feature{margin-top:clamp(16px,2vw,24px)}
.feature .f-copy{padding-bottom:clamp(28px,5vw,64px)}
.feature .f-visual{align-self:end;padding:0;height:470px;overflow:hidden;place-items:start center}
.feature .f-visual .glow{display:none}
.screen.home{background:linear-gradient(160deg,#C9D6EE,#E9DCCB 60%,#D7E3D4);display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:12px;padding:52px 14px 14px;color:#0A0A0A}
.wg{background:rgba(255,255,255,.92);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.wg .s-sub{color:#8A8D93}
.wg-m{grid-column:span 2}
.wg-s{aspect-ratio:1}
.wg-title{font-size:17px;font-weight:700;letter-spacing:-.02em}
.wg-habits{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.wg-habits span{font-size:9.5px;text-align:center;padding:6px 0;border-radius:9px;background:#F0F1F3;color:#5E6168;font-weight:600}
.wg-habits .ok{background:#E3F2E8;color:#1E7A3C}
.wg-big{font-size:28px;font-weight:700;line-height:1}
.wg-big small{font-size:11px;color:#8A8D93;font-weight:600}
.wg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:auto}
.wg-grid i{aspect-ratio:1;border-radius:3px;background:#E6E7EA}
.wg-grid i.on{background:#1E7A3C}
.wg-dark{background:rgba(17,18,20,.92);color:#fff}
.wg-dark .s-sub{color:#9A9DA4}
.wg-btn{margin-top:auto;background:#EE5A1C;color:#fff;border-radius:10px;text-align:center;font-weight:700;font-size:12px;padding:7px 0}
.icons{grid-column:span 2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;padding:6px 8px 0}
.icons i,.dock i{aspect-ratio:1;border-radius:13px;background:rgba(255,255,255,.55)}
.dock{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:12px 18px;border-radius:26px;background:rgba(255,255,255,.35)}
.dock i.fa{background:#0A0A0A}
/* widgets band: single dark look on purpose, like the app */
.wband{background:#050506;color:#F4F5F7;position:relative;overflow:hidden}
.wband::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(40% 50% at 30% 30%,rgba(77,128,238,.22),transparent 70%),radial-gradient(35% 45% at 75% 60%,rgba(141,201,147,.14),transparent 70%);pointer-events:none}
.wband .wrap{position:relative}
.wband-head{display:flex;flex-direction:column;gap:14px;max-width:720px}
.wband-head h2{color:#F4F5F7}
.wband .lead{color:#A3A7AF}
.wrow{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;margin-top:48px}
.w{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.w figcaption{font-family:var(--font-mono);font-size:12px;color:#7C8089}
.wd{background:#1C1C1E;border-radius:24px;padding:16px;color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05) inset;display:flex;flex-direction:column;gap:8px}
.wd-top{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.04em;color:#8E8E93}
.wd-top .time{color:#EE5A1C;font-variant-numeric:tabular-nums}
.wd-name{font-size:19px;font-weight:700;letter-spacing:-.02em}
.wd-m{width:340px;max-width:100%}
.wd-ex{display:flex;align-items:center;gap:5px;font-size:13px;color:#C7C7CC}
.wd-ex span{flex:1}
.c{width:22px;height:15px;border-radius:4px;background:#646464;display:inline-block}
.c.done{background:#B3F28D}
.c.cur{background:#4D80EE}
.wd-habits{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.wd-habits span{font-size:11px;text-align:center;padding:7px 0;border-radius:10px;background:#2C2C2E;color:#A1A1A1;font-weight:600}
.wd-habits .ok{background:rgba(141,201,147,.18);color:#8DC993}
.wd-s{width:160px;height:160px}
.wd-big{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em}
.wd-big small{font-size:12px;color:#8E8E93;font-weight:600;letter-spacing:0}
.wd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:auto}
.wd-grid i{aspect-ratio:1;border-radius:3px;background:#2C2C2E}
.wd-grid i.on{background:#8DC993}
.wd-la{width:360px;max-width:100%;background:rgba(28,28,30,.86);backdrop-filter:blur(20px)}
.la-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.la-load{font-size:15px;font-weight:600;color:#C7C7CC;font-variant-numeric:tabular-nums}
.la-chips{display:flex;gap:5px;margin-top:8px}
.la-btns{display:flex;gap:8px}
.la-btns span{height:44px;border-radius:22px;display:grid;place-items:center;font-weight:700;font-size:14px}
.la-adj{background:#3A3A3C;color:#fff;padding:0 16px}
.la-next{background:#4D80EE;color:#fff;width:56px;font-size:20px}
@media (max-width:760px){.wrow{gap:22px}.w{width:100%}.wd-m,.wd-la{width:100%}}
.feature .f-visual.half{height:360px}
.screen.homedark{background:radial-gradient(120% 70% at 20% 0%,#1B2A4A,#050506 60%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:10px;padding:46px 12px 12px}
.hd-time{grid-column:span 2;text-align:center;color:#fff;font-weight:600;font-size:30px;letter-spacing:-.02em;margin:-4px 0 4px}
.homedark .wd{padding:12px;border-radius:20px;gap:6px}
.homedark .wd-m{grid-column:span 2;width:auto}
.homedark .wd-s{width:auto;height:auto;aspect-ratio:1}
.homedark .wd-name{font-size:17px}
.homedark .wd-ex{font-size:12px}
.homedark .c{width:16px;height:11px;flex:none}
.homedark .wd-ex span{min-width:0}
.homedark .wd-habits{gap:4px}
.homedark .wd-habits span{font-size:9.5px;padding:6px 0}
.homedark .wd-big{font-size:26px}
@media (max-width:860px){.feature .f-visual.half{height:330px}}
/* ===== variation B hero ===== */
.hero-b .noise{display:none}
.hero.hero-b{padding-top:clamp(20px,3vw,40px)}
.hero-b h1 span{display:block;font-size:.6em;margin-top:.12em;letter-spacing:-.03em}
.hb-head{gap:18px!important}
.hb-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;position:relative;z-index:3}
.hero-b h1{font-size:clamp(46px,7vw,92px)}
.hb-lines{display:flex;flex-direction:column;gap:0;font-size:clamp(16px,1.4vw,18px);line-height:1.45;color:var(--ink-2)}
.hb-lines b{color:var(--ink);font-weight:600}
.hb-head .cta-row{justify-content:center;margin-top:6px}
.hb-stage{position:relative;height:640px;margin-top:clamp(24px,4vw,48px);overflow:hidden}
.hb-stage .trio{position:absolute;inset:0;height:auto;z-index:2}
.lane{position:absolute;top:90px;bottom:90px;width:50%;z-index:1;pointer-events:none}
.lane.in{left:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 70%,transparent 92%);mask:linear-gradient(90deg,transparent,#000 12%,#000 70%,transparent 92%)}
.lane.out{right:0;-webkit-mask:linear-gradient(90deg,transparent 8%,#000 30%,#000 88%,transparent);mask:linear-gradient(90deg,transparent 8%,#000 30%,#000 88%,transparent)}
.fi{position:absolute;top:calc(var(--row) * 25% + 4%);left:0;display:flex;align-items:center;gap:8px;white-space:nowrap;animation:flow 9s linear infinite;animation-delay:var(--delay)}
.fi.n{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);background:var(--band);border:1px dashed var(--line);border-radius:10px;padding:6px 10px;transform:rotate(var(--rot));filter:blur(.6px)}
.fi.n svg{width:46px;height:14px;color:var(--ink-3)}
.fi.c{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:9px 14px 9px 10px;font-weight:600;font-size:14px;box-shadow:0 10px 24px -14px rgba(10,20,40,.25);animation-duration:10s}
.fi.c i{width:18px;height:18px;border-radius:50%;background:var(--done);flex:none;position:relative}
.fi.c i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fi.c small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@keyframes flow{from{left:-25%}to{left:100%}}
.side-w{position:absolute;top:50%;z-index:3;display:none}
.side-w .pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.tapdot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:tap .5s ease-out forwards;z-index:5}
@keyframes tap{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}
.side-w.l{left:max(16px,calc(50% - 560px));transform:translateY(-30%) rotate(-4deg)}
.side-w.r{right:max(16px,calc(50% - 520px));transform:translateY(-70%) rotate(4deg)}
.sw{width:250px}
.sw-s{width:160px;height:160px}
.hb-stage[data-mode="wid"] .lane{display:none}
.hb-stage[data-mode="wid"] .side-w{display:block}
.hb-ctrl{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.hb-ctrl .seg{margin-top:0}
@media (max-width:1100px){.hb-stage[data-mode="wid"] .side-w{display:none}}
@media (max-width:860px){.hb-stage{height:560px}.lane{top:60px;bottom:60px}}
@media (max-width:520px){.hb-stage{height:440px}.fi.n{font-size:11px}.fi.c{font-size:12px}}
@media (prefers-reduced-motion:reduce){.fi{animation:none;left:calc(var(--row) * 18% + 6%)}}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
.sec-head.center .lead{margin-inline:auto}
.sci-label{text-align:center}
#different .sec-head h2{font-size:clamp(30px,3.8vw,48px)}
/* AI coach: stacked cards, one phone pinned to the middle of the screen */
.coach-sec{--ch:480px;--ph:560px}
.ci-stack{position:relative;margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:16px}
.ci-card{position:relative;clip-path:inset(0 round clamp(28px,4vw,44px));height:var(--ch);border-radius:clamp(28px,4vw,44px);background:var(--band);display:flex;align-items:center;padding:0 clamp(28px,5vw,64px);overflow:hidden}
.ci-card::before{content:"";position:absolute;inset:0;pointer-events:none}
.ci-card.t-blue::before{background:radial-gradient(60% 80% at 85% 20%,rgba(77,128,238,.20),transparent 70%)}
.ci-card.t-warm::before{background:radial-gradient(50% 70% at 75% 95%,rgba(255,122,64,.20),transparent 70%)}
.ci-card.t-violet::before{background:radial-gradient(60% 80% at 80% 30%,rgba(169,136,240,.22),transparent 70%)}
.ci-copy{position:relative;max-width:min(44%,440px);display:flex;flex-direction:column;gap:12px}
.ci-copy .fh{margin:0}
.ci-copy .lead{margin:0;font-size:clamp(16px,1.4vw,19px)}
.ci-num{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}
.ci-fix{position:fixed;inset:0;pointer-events:none;z-index:1}
.ci-fix-in{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-top:60px}
.ci-fix-in .ci-phone{margin-right:clamp(28px,9vw,120px)}
.ci-phone{width:290px}
.ci-phone .ci-screen{height:calc(var(--ph) - 22px);background:#0B0B0C;color:#F4F5F7;gap:14px}
.ci-top{order:-2;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #1F2023;font-size:14px}
.ci-body{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.ci-slot{order:-1;font-family:var(--font-mono);font-size:10.5px;color:#8E8E93;border:1px dashed #2C2C2E;border-radius:10px;padding:8px;text-align:center}
.ci-mob{display:none}
.av{width:26px;height:26px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#8FB2FF,#3159E8 70%)}
.idea-wrap{position:relative}
.idea-wrap>*:not(.idea-art){position:relative;z-index:1}
.idea-art{position:absolute;z-index:0;top:calc(32px - clamp(72px,10vw,128px));right:max(-120px,min(16px,calc((1160px - 100vw) / 2 + 16px)));width:min(52%,560px);aspect-ratio:1/1;border-radius:clamp(28px,4vw,44px);pointer-events:none;place-items:start end;padding:28px}
@media (max-width:860px){.idea-art{width:78%;top:calc(24px - clamp(72px,10vw,128px));opacity:.7}}
.idea-swap{display:grid;margin-top:40px}
.idea-swap>.idea-grid{grid-area:1/1;margin-top:0;transition:opacity .45s ease .15s,transform .55s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.idea-swap>.idea-grid.off{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.idea-swap .not-list>*,.idea-swap .yes-list>*{transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.15s + var(--i,0) * 45ms)}
.idea-swap .off .not-list>*,.idea-swap .off .yes-list>*{opacity:0;transform:translateY(6px);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.idea-swap *,.idea-swap>.idea-grid{transition:none!important}}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.msg p{margin:0;padding:10px 12px;border-radius:16px;font-size:13px;line-height:1.4}
.me-c p{background:#1C1C1E;color:#F4F5F7;border-bottom-left-radius:5px}
.me-u{align-self:flex-end}
.me-u p{background:#4D80EE;color:#fff;border-bottom-right-radius:5px}
.chg{margin-left:34px;background:#151618;border:1px solid #232428;border-radius:14px;padding:4px 12px}
.chg-row{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px;color:#C7C7CC}
.chg-row+.chg-row{border-top:1px solid #232428}
.chg-row span{flex:1}
.chg-row b{color:#fff;font-variant-numeric:tabular-nums}
.chg-row em{font-style:normal;font-size:11px;color:#8E8E93;min-width:34px;text-align:right}
.chg-row em.up{color:#8DC993;font-size:13px;font-weight:700}
.srcs{margin-left:34px;display:flex;flex-wrap:wrap;gap:6px}
.srcs span{font-family:var(--font-mono);font-size:10.5px;color:#A3A7AF;border:1px solid #2C2C2E;border-radius:999px;padding:5px 10px}
@media (max-height:760px){.coach-sec{--ph:500px}}
@media (max-width:860px){
  .ci-fix{display:none}
  .ci-card{clip-path:none}
  .ci-card{height:auto;flex-direction:column;align-items:stretch;padding:clamp(28px,6vw,48px) clamp(20px,5vw,40px) 0;gap:28px}
  .ci-copy{max-width:none}
  .ci-mob{display:flex;justify-content:center;height:360px;overflow:hidden}
  .ci-mob .ci-body{margin-top:0}
  .coach-sec{--ph:560px}
}
.fh{font-size:clamp(28px,3.4vw,42px)}
.feature.flip .f-copy{order:2}
.f-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.f-copy ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--ink-2);font-size:16px}
.f-copy li{display:flex;gap:12px}
.f-copy li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px}
.f-visual{position:relative;display:grid;place-items:center;padding:40px 0;min-width:0}
.f-visual .glow{position:absolute;inset:6% 10%;border-radius:48px;background:var(--band)}
.band .f-visual .glow{background:var(--bg)}
.f-visual .phone{position:relative;z-index:1}
.peek{position:absolute;z-index:2;width:120px;height:120px}
.peek .slot{width:100%;height:100%;border-radius:50%}
.peek.tr{right:max(0px,calc(50% - 230px));top:10px}
.peek.bl{left:max(0px,calc(50% - 230px));top:200px}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature.flip .f-copy{order:0}.feature .f-copy{padding-bottom:0}.feature .f-visual{height:400px}.peek{width:96px;height:96px}}

/* steps */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.how article{background:var(--band);border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.how .num{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.how p{color:var(--ink-2);font-size:16px}
.how .shot{height:150px;border-radius:16px;margin-top:8px}
@media (max-width:860px){.how{grid-template-columns:1fr}}

/* science */
.sci{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;border-top:1px solid var(--line)}
.sci.two{grid-template-columns:repeat(2,1fr)}
.sci.two article:nth-child(odd){padding-left:0;border-left:0}
.sci.two article:nth-child(n+3){border-top:1px solid var(--line);margin-top:20px}
.sci-label{display:block;margin-top:64px;margin-bottom:12px;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em}
.sci article{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.sci article+article{padding-left:28px;border-left:1px solid var(--line)}
.sci article{padding-bottom:8px}
.sci .stat{font-size:clamp(44px,5vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1}
.sci p{color:var(--ink-2);font-size:16px}
.sci cite{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
@media (max-width:860px){.sci,.sci.two{grid-template-columns:1fr}.sci article,.sci article+article{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* more */
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.more article{border:1px solid var(--line);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.more .ico{width:40px;height:40px;border-radius:12px;background:var(--band);display:grid;place-items:center;margin-bottom:8px}
.more .ico svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.more p{color:var(--ink-2);font-size:15px}
@media (max-width:960px){.more{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.more{grid-template-columns:1fr}}

/* faq */
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,6vw,96px)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:36em}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* final */
.final{text-align:center;overflow:hidden}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.final-stage{position:relative;width:min(100%,640px);height:360px;margin-top:24px}
.final-stage .phone-lie{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(100%,560px);height:140px;border-radius:44px;background:var(--phone);padding:10px}
.final-stage .phone-lie div{width:100%;height:100%;border-radius:36px;background:var(--screen);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-3);font-family:var(--font-mono);font-size:12px}
.final-stage .m1{position:absolute;left:12%;bottom:120px;width:150px;height:190px}
.final-stage .m2{position:absolute;right:14%;bottom:120px;width:130px;height:170px}
.final-stage .slot{width:100%;height:100%;border-radius:50% 50% 40% 40%}

footer{border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--ink-3)}
footer{padding-top:clamp(48px,6vw,80px)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 32px}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:320px}
.ft-brand .logo{color:var(--ink)}
.ft-brand p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ft-brand .store{margin-top:4px}
.ft-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ft-col h4{margin:0 0 4px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ft-col a{color:var(--ink-2)}
.ft-col em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.ft-disc{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-3)}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.ft-social{border-radius:12px;padding:8px 14px}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

.reveal{transition:opacity .7s ease,transform .7s ease}
.reveal.pre{opacity:.001;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){.reveal,.reveal.pre{transition:none;opacity:1;transform:none}}

/* ---------- artwork placeholders: quiet until the real images are placed (see README) */
.slot{border-color:transparent;color:transparent;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.slot>*{visibility:hidden}
.ci-slot,.idea-art.slot,.peek .slot,.final-stage{display:none}

/* ---------- footer extras */
.ft-col span{color:var(--ink-3)}

/* ---------- text pages: privacy, terms, support, 404 */
.legal{padding-block:clamp(40px,6vw,80px) clamp(64px,8vw,112px)}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(36px,5vw,54px);letter-spacing:-.035em;line-height:1.05;margin:0 0 10px}
.legal .meta{color:var(--ink-3);font-size:14px;margin:0 0 32px}
.legal h2{font-size:23px;letter-spacing:-.015em;line-height:1.25;margin:48px 0 12px}
.legal h3{font-size:17px;letter-spacing:-.01em;line-height:1.35;margin:26px 0 6px}
.legal p,.legal li,.legal td,.legal th{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.legal strong,.legal th{color:var(--ink);font-weight:600}
.legal a{color:var(--accent);text-underline-offset:3px}
.legal a.store{color:var(--bg)}
.legal .summary{background:var(--band);border-radius:22px;padding:22px 26px}
.legal .summary ul{margin-bottom:0}
.legal p+.summary{margin-top:24px}
.table-wrap{overflow-x:auto;margin:14px 0}
.legal table{width:100%;border-collapse:collapse;min-width:460px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:11px 16px 11px 0;border-bottom:1px solid var(--line)}
.legal td:first-child{width:38%}
mark.todo{background:#FFE08A;color:#3A2A00;padding:0 5px;border-radius:5px}
.nf{min-height:60vh;display:grid;place-items:center;text-align:center}
.nf p{margin:14px 0 26px}