/* SIDEWIZE V4.1 — shared + public components */

/* ---------- Buttons ---------- */
.btn{--h:var(--ctl-h);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r-md);border:1px solid transparent;font-weight:600;font-size:1rem;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px -12px var(--accent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--primary:active{background:var(--accent-press)}
.btn--secondary{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.btn--secondary:hover{border-color:var(--muted)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface)}
.btn--link{background:none;border:0;padding:0;min-height:auto;color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn--link:hover{text-decoration-thickness:2px}
.btn--lg{--h:var(--ctl-h-lg);padding:0 28px;font-size:1.0625rem}
.btn--sm{--h:var(--ctl-h-sm);padding:0 14px;font-size:.9375rem;border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn .arr{transition:transform var(--dur-2) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);white-space:nowrap}
.pill--accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.pill--success{background:var(--success-soft);border-color:transparent;color:var(--success)}
.pill--warning{background:var(--warning-soft);border-color:transparent;color:var(--warning)}
.pill--danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.pill--info{background:var(--info-soft);border-color:transparent;color:var(--info)}
.pill--sample{background:var(--sample-soft);border-color:rgba(185,166,240,.35);color:var(--sample);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* Sample strip — mandatory on any prototype surface */
.sample-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px dashed rgba(185,166,240,.4);background:var(--sample-soft);border-radius:var(--r-sm);color:var(--sample);font-size:var(--fs-xs)}
.sample-bar b{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
@media (min-width:768px){.card{padding:var(--s4)}}
.card--raised{box-shadow:var(--e2)}
.card--interactive{transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.card--interactive:hover{border-color:var(--line-2);background:var(--surface-2)}
.card h3{margin-bottom:var(--s0)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur-2)}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s3);height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:26px;width:auto}
@media (min-width:1024px){.brand img{height:28px}}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{padding:10px 14px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:var(--fs-sm);font-weight:500}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface)}
.hdr__cta{display:none}
@media (min-width:1024px){.nav{display:flex}.hdr__cta{display:inline-flex}}
.menu-btn{margin-left:auto;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--dur-2)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (min-width:1024px){.menu-btn{display:none}}
.mnav{display:none;border-top:1px solid var(--line);padding:var(--s2) 0 var(--s3)}
.mnav.is-open{display:block}
.mnav a:not(.btn){display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.mnav .btn{margin-top:var(--s2)}
@media (min-width:1024px){.mnav{display:none!important}}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:var(--s6) var(--s7);background:
  radial-gradient(900px 480px at 85% -10%, color-mix(in oklab,var(--accent) 16%,transparent), transparent 60%),
  var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden}
@media (min-width:1024px){.hero{padding-block:var(--s8) var(--s8)}}
.hero__grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:1024px){.hero__grid{grid-template-columns:1.02fr 1fr;gap:var(--s7)}}
.hero .label{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.hero .label::before{content:"";width:22px;height:1px;background:var(--accent)}
.hero h1{margin-bottom:var(--s3)}
.hero .t-lead{max-width:52ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin-top:var(--s4)}
.hero__micro{margin-top:var(--s2);color:var(--muted);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:6px 14px}
.hero__micro span{display:inline-flex;align-items:center;gap:8px}
.hero__micro span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--faint)}

/* Hero five-stage annotated journey */
.journey{position:relative;background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--surface) 70%,var(--bg-2)));border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s3);box-shadow:var(--e3)}
@media (min-width:768px){.journey{padding:var(--s4)}}
.journey__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s1);margin-bottom:var(--s3);flex-wrap:wrap}
.journey ol{list-style:none;position:relative;display:grid;gap:2px}
.journey ol::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--accent),var(--line-2) 70%);border-radius:2px}
.jstep{position:relative;display:grid;grid-template-columns:32px 1fr;gap:var(--s2);padding:10px 0}
.jstep__n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--bg-2);border:2px solid var(--accent);color:var(--accent-ink)}
.jstep--muted .jstep__n{border-color:var(--line-2);color:var(--muted)}
.jstep__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jstep__t{font-weight:600;font-size:1rem;line-height:1.3;margin-top:2px}
.jstep__s{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.jstep--bridge{margin:4px 0 4px 0}
.jstep--bridge .jstep__body{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-md);padding:12px 14px}
.jstep--bridge .jstep__t{color:var(--accent-ink)}
.mini-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mini-steps span{font-size:12px;padding:3px 8px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2)}
.jstep--scenario .jstep__body{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);flex-wrap:wrap}
.scen-num{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.scen-num small{font-size:.8125rem;font-weight:400;color:var(--muted);margin-left:4px;letter-spacing:0}
.journey__foot{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}

/* Video teaser (Jack) */
.vteaser{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:10px 16px 10px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);text-decoration:none;cursor:pointer;width:max-content;max-width:100%;transition:border-color var(--dur-2)}
.vteaser:hover{border-color:var(--accent-line)}
.vteaser__thumb{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface-3)}
.vteaser__thumb img{width:100%;height:100%;object-fit:cover}
.vteaser__thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.vteaser__play{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.vteaser__play i{width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.vteaser__t{font-size:var(--fs-sm);font-weight:600;line-height:1.2}
.vteaser__s{font-size:12px;color:var(--muted)}

/* ---------- Emotion ---------- */
.emotion{display:grid;gap:var(--s5);align-items:start}
@media (min-width:1024px){.emotion{grid-template-columns:1.1fr .9fr;gap:var(--s8)}}
.emotion__lines{display:grid;gap:var(--s2)}
.emotion__line{font-size:clamp(1.375rem,1.1rem + 1.3vw,2.125rem);line-height:1.22;letter-spacing:-.02em;font-weight:500;color:var(--ink-2)}
.emotion__line em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--ink)}
.emotion__close{border-left:2px solid var(--accent);padding-left:var(--s3);font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.reasons{display:grid;gap:var(--s1);margin-top:var(--s3)}
.reason{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.reason__k{font-family:var(--font-mono);font-size:11px;color:var(--accent-ink);letter-spacing:.1em;padding-top:3px;min-width:22px}

/* ---------- Demo stepper (section 4) ---------- */
.demo{display:grid;gap:var(--s4)}
@media (min-width:1024px){.demo{grid-template-columns:300px 1fr;gap:var(--s5)}}
.demo__steps{list-style:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-inline:calc(var(--s3)*-1);padding-inline:var(--s3)}
.demo__steps::-webkit-scrollbar{display:none}
@media (min-width:1024px){.demo__steps{flex-direction:column;overflow:visible;margin:0;padding:0;gap:6px}}
.dstep{flex:none;display:flex;gap:12px;align-items:center;text-align:left;min-height:52px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all var(--dur-2) var(--ease)}
.dstep:hover{border-color:var(--line-2);color:var(--ink)}
.dstep[aria-selected="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}
.dstep__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;border:1.5px solid var(--line-2);color:var(--muted)}
.dstep[aria-selected="true"] .dstep__n,.dstep.is-past .dstep__n{border-color:var(--accent);color:var(--accent-ink)}
.dstep.is-past .dstep__n{background:var(--accent);color:var(--on-accent)}
.dstep__t{font-size:var(--fs-sm);font-weight:600;line-height:1.2}
.dstep__k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.demo__panel{position:relative;min-height:420px}
.dpane{display:none}
.dpane.is-active{display:block;animation:paneIn var(--dur-3) var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dpane__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.demo__nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.kv{display:grid;gap:var(--s1)}
.kv>div{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.kv>div{grid-template-columns:180px 1fr;gap:var(--s2)}}
.kv dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.kv dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.split{display:grid;gap:var(--s3)}
@media (min-width:768px){.split{grid-template-columns:1fr 1fr}}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s2) var(--s3)}
.panel h4{font-size:var(--fs-sm);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.panel ul{list-style:none;display:grid;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.panel li{display:flex;gap:10px}
.panel li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--line-2)}
.panel--good li::before{background:var(--success)}
.panel--risk li::before{background:var(--warning)}
.meter{display:grid;gap:6px}
.meter__row{display:flex;justify-content:space-between;font-size:var(--fs-sm)}
.meter__bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.meter__bar--ev i{background:var(--info)}

/* copyable offer */
.copybox{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--s3)}
.copybox__btn{position:absolute;top:12px;right:12px}
.copybox h4{font-size:1.0625rem;margin-bottom:var(--s1);padding-right:90px}
.copybox ul{padding-left:18px;color:var(--ink-2);font-size:var(--fs-sm);display:grid;gap:6px}
.scope{display:grid;gap:var(--s2);margin-top:var(--s2)}
@media (min-width:768px){.scope{grid-template-columns:1fr 1fr}}

/* action list w/o fake done states */
.actions{list-style:none;display:grid;gap:8px}
.action{display:flex;gap:var(--s2);align-items:flex-start;padding:14px var(--s2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.action__box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-2);margin-top:1px;display:grid;place-items:center;cursor:pointer;background:transparent}
.action__box[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.action__box[aria-checked="true"]::after{content:"";width:10px;height:6px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.action__t{font-weight:600;font-size:var(--fs-sm)}
.action__s{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
textarea.draft{width:100%;min-height:150px;resize:vertical;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--s2);font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
textarea.draft:focus{outline:none;border-color:var(--accent)}

/* chat mock */
.chat{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.chat__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.chat__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.chat__url{flex:1;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__body{padding:var(--s2);display:grid;gap:10px}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:var(--fs-sm);line-height:1.45}
.msg--in{background:var(--surface-2);border-bottom-left-radius:4px}
.msg--out{justify-self:end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.msg__src{display:block;margin-top:6px;font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.chat__note{padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:grid;gap:4px}

/* ---------- Scenario slider ---------- */
.scenario{display:grid;gap:var(--s4);align-items:center}
@media (min-width:1024px){.scenario{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.scen-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s3)}
@media (min-width:768px){.scen-card{padding:var(--s5)}}
.scen-out{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:var(--s2) 0 var(--s1)}
.scen-out b{font-size:clamp(2.5rem,2rem + 2.5vw,3.75rem);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.scen-math{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2)}
.range{width:100%;margin:var(--s3) 0 var(--s1);-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--surface-3) var(--p,50%))}
.range::-moz-range-track{height:6px;border-radius:6px;background:var(--surface-3)}
.range::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--ink);border:4px solid var(--accent);box-shadow:var(--e2)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:4px solid var(--accent)}
.range-ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.clients{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:var(--s3)}
.clients i{height:28px;border-radius:6px;background:var(--surface-3);border:1px dashed var(--line-2);transition:background var(--dur-2),border-color var(--dur-2)}
.clients i.on{background:var(--accent-soft);border:1px solid var(--accent-line)}
.disclaim{margin-top:var(--s3);padding:var(--s2);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.disclaim b{color:var(--ink)}

/* ---------- Free vs Member ---------- */
.plans2{display:grid;gap:var(--s3)}
@media (min-width:768px){.plans2{grid-template-columns:1fr 1fr}}
.planx{position:relative;border-radius:var(--r-xl);padding:var(--s4);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.planx--member{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 10%,var(--surface)),var(--surface) 60%);border-color:var(--accent-line)}
.planx__k{display:flex;justify-content:space-between;align-items:center;gap:var(--s1);margin-bottom:var(--s2)}
.planx h3{font-size:var(--fs-h3)}
.planx__price{margin:var(--s2) 0 var(--s3);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.planx__price b{font-size:2.5rem;letter-spacing:-.03em;font-weight:600;line-height:1}
.outcomes{list-style:none;display:grid;gap:var(--s2);margin-bottom:var(--s4);flex:1}
.outcomes li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.outcomes .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);font-family:var(--font-mono);font-size:11px;color:var(--accent-ink)}
.planx--member .outcomes .ic{background:var(--accent-soft)}
.outcomes b{display:block;font-size:var(--fs-sm)}
.outcomes span{font-size:var(--fs-sm);color:var(--ink-2)}
.check-list{list-style:none;display:grid;gap:10px;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s4)}
.check-list li{display:flex;gap:10px}
.check-list li::before{content:"";flex:none;width:14px;height:8px;margin-top:6px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.status-note{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s2)}

/* ---------- Mini paths ---------- */
.mpath{display:flex;flex-direction:column;gap:var(--s2);height:100%}
.mpath__top{display:flex;justify-content:space-between;align-items:center}
.mpath__flow{display:grid;gap:6px;margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line)}
.mpath__flow div{display:grid;grid-template-columns:90px 1fr;gap:10px;font-size:var(--fs-sm)}
.mpath__flow dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.mpath__flow dd{margin:0;color:var(--ink-2)}

/* ---------- Trust ---------- */
.trust{display:grid;gap:var(--s3)}
@media (min-width:768px){.trust{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust__i{padding:var(--s3);border-top:2px solid var(--accent);background:var(--surface);border-radius:0 0 var(--r-md) var(--r-md)}
.trust__i h3{font-size:1.0625rem;margin:var(--s1) 0 var(--s0)}
.trust__i p{font-size:var(--fs-sm);color:var(--ink-2)}
.tagline{margin-top:var(--s6);text-align:center;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);color:var(--ink-2);letter-spacing:-.01em}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:64px;padding:var(--s2) 0;cursor:pointer;font-weight:600;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-2)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 0 var(--s3);color:var(--ink-2);max-width:68ch}

/* ---------- Final CTA ---------- */
.final{text-align:center;padding-block:var(--s9);background:radial-gradient(700px 360px at 50% 0%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 70%),var(--bg-2);border-top:1px solid var(--line)}
.final h2{max-width:22ch;margin:0 auto var(--s3)}
.final p{max-width:56ch;margin:0 auto var(--s4);color:var(--ink-2)}

/* ---------- Footer ---------- */
.ftr{padding-block:var(--s7) var(--s4);border-top:1px solid var(--line);background:var(--bg)}
.ftr__grid{display:grid;gap:var(--s5)}
@media (min-width:768px){.ftr__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.ftr h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:var(--s2)}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr a{text-decoration:none;color:var(--ink-2);font-size:var(--fs-sm)}
.ftr a:hover{color:var(--ink)}
.ftr__legal{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);display:grid;gap:var(--s2);font-size:var(--fs-xs);color:var(--muted)}

/* ---------- Video modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:var(--s2);background:rgba(4,8,14,.78);backdrop-filter:blur(6px)}
.modal.is-open{display:flex}
.modal__box{width:min(820px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--e3)}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.modal__close{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:transparent;cursor:pointer;font-size:20px;line-height:1}
.video{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center;overflow:hidden}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.video__play{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;border:0;background:var(--accent);display:grid;place-items:center;cursor:pointer;box-shadow:var(--e3)}
.video__play i{width:0;height:0;border-left:20px solid var(--on-accent);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video__cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;max-width:86%;background:rgba(0,0,0,.78);color:#fff;font-size:15px;line-height:1.4;padding:6px 12px;border-radius:6px;text-align:center}
.video__prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.15);z-index:2}
.video__prog i{display:block;height:100%;width:0;background:var(--accent)}
.modal__body{padding:var(--s3)}
.transcript{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--ink-2)}
.transcript summary{cursor:pointer;color:var(--accent-ink);font-weight:500;min-height:44px;display:flex;align-items:center}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:500;box-shadow:var(--e3);transition:all var(--dur-2) var(--ease);max-width:calc(100vw - 32px)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Page header (inner pages) ---------- */
.phead{padding-block:var(--s7) var(--s5);background:var(--bg-2);border-bottom:1px solid var(--line)}
.phead .label{display:block;margin-bottom:var(--s2)}
.phead .t-lead{margin-top:var(--s2);max-width:60ch}

/* stages (how it works) */
.stages{list-style:none;counter-reset:st;display:grid;gap:var(--s3)}
.stage{display:grid;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--line)}
@media (min-width:1024px){.stage{grid-template-columns:120px 1fr 1fr;gap:var(--s5)}}
.stage__n{font-family:var(--font-serif);font-style:italic;font-size:3rem;line-height:1;color:var(--accent-ink)}
.legal{max-width:72ch}
.legal h2{font-size:var(--fs-h3);margin:var(--s5) 0 var(--s1)}
.legal p{color:var(--ink-2);margin-bottom:var(--s2)}