/* Sales page, sample, unlock, legal. Apple-grade: centered hero, device mockup, bento tiles, hairlines, glass nav. */
:root { --orange: oklch(0.58 0.17 52); }
.on-dark { --orange: oklch(0.76 0.15 60); }
body.mk { background: var(--bg); }
.alt { background: var(--bg-alt); }
.sec { padding: clamp(4.5rem, 3rem + 7vw, 9rem) 0; }
.sec.tight { padding-top: 0; }
.center { text-align: center; }
.sec h2 { max-width: 18ch; }
.center h2, .center .sub { margin-inline: auto; }
.sub { font-size: var(--step-1); line-height: 1.35; color: var(--text-muted); max-width: 36ch; font-weight: 400; letter-spacing: -0.016em; }
.eyebrow { display: block; font-size: var(--step-1); font-weight: 600; color: var(--orange); margin-bottom: var(--s3); letter-spacing: -0.014em; }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none; }
.progress > i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* reveal on scroll (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }

/* nav: translucent glass */
.nav { position: sticky; top: 0; z-index: 50; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 3rem; }
.nav .brand { font-weight: 600; font-size: 1.0625rem; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; text-decoration: none; }
.nav .links { margin-left: auto; display: none; gap: var(--s5); }
.nav .links a { color: var(--text-muted); font-size: .8125rem; letter-spacing: -0.006em; }
.nav .links a:hover { color: var(--text); text-decoration: none; }
.nav .btn { margin-left: auto; min-height: 2rem; padding: 0 .9rem; font-size: .8125rem; }
@media (min-width: 56rem) { .nav .links { display: flex; } .nav .btn { margin-left: var(--s2); } }

/* hero */
.hero { text-align: center; padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 0; overflow: hidden; background: radial-gradient(70rem 30rem at 50% 100%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 70%), var(--bg); }
.hero h1 { max-width: 13ch; margin-inline: auto; margin-bottom: var(--s4); }
.hero .sub { margin: 0 auto var(--s5); font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); max-width: 30ch; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s5); align-items: center; margin-bottom: var(--s4); }
.finepolicy { font-size: .8125rem; color: var(--text-muted); margin: 0 auto; max-width: 52ch; }
.finepolicy a { color: var(--link); }
.stage { position: relative; margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0; display: flex; justify-content: center; }
.device { position: relative; width: min(21rem, 82vw); aspect-ratio: 9 / 18; border-radius: 3.2rem 3.2rem 0 0; background: oklch(0.24 0.006 260); padding: 10px 10px 0; box-shadow: var(--shadow-lg), inset 0 0 0 2px oklch(0.4 0.006 260); animation: rise 1.4s .1s var(--ease) both; }
.device::before { content: ""; position: absolute; z-index: 4; top: 20px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: oklch(0.1 0.003 260); }
@keyframes rise { from { opacity: 0; transform: translateY(70px) scale(.97); } to { opacity: 1; transform: none; } }
.screen { height: 100%; border-radius: 2.6rem 2.6rem 0 0; background: oklch(0.968 0.002 250); overflow: hidden; color: oklch(0.235 0.004 260); text-align: left; font-size: 13px; line-height: 1.35; letter-spacing: -0.01em; }
.mu-status { display: flex; justify-content: space-between; padding: 18px 26px 0; font-weight: 600; font-size: 12px; }
.mu-bar { display: flex; justify-content: space-between; align-items: center; padding: 22px 18px 4px; color: oklch(0.5 0.19 258); font-size: 14px; }
.mu-title { padding: 2px 18px 6px; font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.mu-sub { padding: 0 18px 12px; color: oklch(0.5 0.01 260); font-size: 12.5px; }
.mu-group { margin: 0 14px 12px; background: oklch(0.998 0.001 250); border-radius: 14px; overflow: hidden; }
.mu-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid oklch(0.235 0.004 260 / .1); font-size: 13px; }
.mu-row:last-child { border-bottom: 0; }
.mu-row b { font-weight: 600; } .mu-row span { color: oklch(0.5 0.01 260); text-align: right; }
.mu-row .fact { font-weight: 600; color: oklch(0.235 0.004 260); }
.mu-callout { margin: 0 14px 10px; background: oklch(0.56 0.2 256 / .09); border-radius: 14px; padding: 11px 14px; font-size: 12.5px; }
.mu-callout b { display: block; color: oklch(0.5 0.19 258); font-size: 12px; margin-bottom: 2px; }
.floatcard { display: none; position: absolute; z-index: 5; width: 17.5rem; text-align: left; padding: var(--s4); border-radius: var(--r3); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: .875rem; line-height: 1.4; animation: rise 1.4s .7s var(--ease) both; }
.floatcard b { display: block; font-size: .8125rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.floatcard.one { left: calc(50% - 29rem); top: 26%; } .floatcard.two { right: calc(50% - 29rem); top: 50%; }
@media (min-width: 72rem) { .floatcard { display: block; } }

/* statement band */
.statement { text-align: center; }
.statement h2 { max-width: 20ch; margin-inline: auto; font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1.03; }
.cols3 { display: grid; gap: var(--s6); margin-top: var(--s8); text-align: left; }
@media (min-width: 52rem) { .cols3 { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.cols3 h3 { font-size: var(--step-1); letter-spacing: -0.018em; margin-bottom: var(--s2); }
.cols3 p { color: var(--text-muted); margin: 0; }

/* path: stepper */
.steps { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s6); counter-reset: s; text-align: left; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.steps li { position: relative; padding-top: var(--s5); counter-increment: s; }
.steps li::before { content: ""; position: absolute; top: .55rem; left: 0; right: 0; height: 1px; background: var(--line); }
@media (max-width: 55.99rem) { .steps li { padding-top: 0; padding-left: 3.4rem; } .steps li::before { top: 0; bottom: calc(var(--s6) * -1); left: 1.05rem; right: auto; width: 1px; height: auto; } .steps li:last-child::before { display: none; } }
.steps li::after { content: counter(s); position: absolute; top: 0; left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 55.99rem) { .steps li::after { width: 2.2rem; height: 2.2rem; font-size: .95rem; } }
.steps h3 { font-size: var(--step-1); margin-bottom: var(--s2); }
.steps p { color: var(--text-muted); margin: 0; font-size: 1rem; }
.mini-cta { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: center; align-items: center; }

/* bento */
.bento { display: grid; gap: var(--s4); margin-top: var(--s7); grid-template-columns: 1fr; text-align: left; }
@media (min-width: 56rem) { .bento { grid-template-columns: repeat(6, 1fr); gap: var(--s5); } .t-wide { grid-column: span 4; } .t-third { grid-column: span 2; } .t-half { grid-column: span 3; } }
.tile { background: var(--bg-alt); border-radius: var(--r4); padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); position: relative; overflow: hidden; }
.alt .tile { background: var(--bg); }
.tile.dark { background: oklch(0.2 0.004 260); color: oklch(0.97 0.002 260); --text-muted: oklch(0.74 0.008 260); --text: oklch(0.97 0.002 260); --line: oklch(0.97 0.002 260 / .16); }
.tile h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--s2); letter-spacing: -0.025em; }
.tile > p { color: var(--text-muted); max-width: 34ch; margin-bottom: var(--s4); }
.tile .rows { margin-top: var(--s4); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li, .rows a { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); align-items: baseline; color: inherit; }
.rows .no { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .875rem; }
.rows b { font-weight: 600; } .rows small { display: block; color: var(--text-muted); font-size: .875rem; line-height: 1.4; }
.vaultlist { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.vaultlist a { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--text); min-height: var(--tap); }
.vaultlist a:hover { text-decoration: none; } .vaultlist a:hover b { color: var(--link); }
.vaultlist b { font-weight: 600; display: block; } .vaultlist small { display: block; color: var(--text-muted); font-size: .875rem; }
.vaultlist .go { color: var(--link); font-size: .9375rem; white-space: nowrap; }
.vaultlist .go::after { content: " ›"; }

/* proof */
.proof { display: grid; gap: var(--s7); align-items: center; margin-top: var(--s6); }
@media (min-width: 60rem) { .proof { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.proof .sub { max-width: 40ch; }
.factcard { background: var(--surface); border-radius: var(--r4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-lg); position: relative; }
.factcard .tag { display: inline-flex; align-items: center; gap: .4em; font-size: .8125rem; font-weight: 600; color: var(--good); background: color-mix(in oklch, var(--good) 15%, transparent); padding: .2em .8em; border-radius: 999px; }
.factcard .claim { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.025em; margin: var(--s4) 0 var(--s5); }
.factcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: .875rem; }
.factcard dt { color: var(--text-muted); } .factcard dd { margin: 0; font-variant-numeric: tabular-nums; }
.fineprint { list-style: none; margin: var(--s6) 0 0; padding: 0; text-align: left; }
.fineprint li { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.fineprint .label { display: block; color: var(--orange); margin-bottom: var(--s1); }
.fineprint p { margin: 0 0 var(--s1); }
.fineprint .hint { margin: 0; }

/* founder + fit */
.placeholder { border: 1.5px dashed color-mix(in oklch, var(--accent) 60%, transparent); border-radius: var(--r4); padding: var(--s6); background: color-mix(in oklch, var(--accent) 5%, transparent); text-align: left; }
.placeholder .label { color: var(--accent); }
.fit { display: grid; gap: var(--s6); margin-top: var(--s7); text-align: left; }
@media (min-width: 60rem) { .fit { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.fit h3 { font-size: var(--step-1); margin-bottom: var(--s3); }
.fit ul { padding-left: 1.1rem; margin: 0; color: var(--text-muted); } .fit li { margin-bottom: var(--s3); } .fit li::marker { color: var(--accent); }

/* price */
.buybox { max-width: 36rem; margin: var(--s7) auto 0; background: var(--bg-alt); border-radius: var(--r4); padding: clamp(1.75rem, 1rem + 3vw, 3rem); text-align: left; }
.alt .buybox { background: var(--bg); box-shadow: var(--shadow); }
.amt { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 2.5rem + 6vw, 6.5rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.amt small { font-size: var(--step-0); font-weight: 400; letter-spacing: -0.012em; color: var(--text-muted); margin-left: var(--s2); }
.includes { list-style: none; margin: var(--s5) 0; padding: 0; }
.includes li { padding: var(--s3) 0 var(--s3) 2rem; border-top: 1px solid var(--line); position: relative; }
.includes li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 1.15rem; height: 1.15rem; background: var(--accent); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5.2 5.2L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5.2 5.2L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.buybox .btn { width: 100%; min-height: 3.4rem; font-size: 1.125rem; }
.policy-note { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r3); font-size: .875rem; background: var(--surface); color: var(--text-muted); line-height: 1.45; }
.policy-note b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; font-size: .9375rem; }
.test-note { margin: var(--s3) 0 0; font-size: .8125rem; color: var(--text-muted); }
.promise { margin-top: var(--s4); font-size: .9375rem; color: var(--text-muted); }
.promise b { color: var(--text); font-weight: 600; }

/* faq */
.faq { max-width: 46rem; margin: var(--s7) auto 0; text-align: left; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: var(--s4) 3rem var(--s4) 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; list-style: none; position: relative; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .5rem; font-size: 1.9rem; font-weight: 300; color: var(--text-muted); transition: transform var(--t-med) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 var(--s4); color: var(--text-muted); max-width: 60ch; }

/* footer */
.foot { background: var(--bg-alt); padding: var(--s7) 0 var(--s9); font-size: .8125rem; color: var(--text-muted); }
.foot a { color: var(--text-muted); } .foot a:hover { color: var(--text); }
.foot .cols { display: grid; gap: var(--s5); }
@media (min-width: 52rem) { .foot .cols { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: var(--s2); }
.foot p { max-width: 50ch; }
.foot .brand { font-weight: 600; color: var(--text); font-size: 1rem; }

/* sticky buy bar (mobile) */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: var(--s3); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
.buybar.show { transform: none; }
.buybar .p { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.buybar small { display: block; color: var(--text-muted); font-size: .75rem; line-height: 1.2; }
.buybar .btn { margin-left: auto; }
@media (min-width: 56rem) { .buybar { display: none; } }

/* simple pages */
.page { max-width: 46rem; padding: var(--s7) var(--gutter) var(--s9); margin-inline: auto; }
.page h1 { font-size: var(--step-3); } .page h2 { font-size: var(--step-2); margin-top: var(--s6); max-width: none; }
.page .inner { max-width: 46rem; margin-inline: auto; }
.page .lede { font-size: var(--step-1); color: var(--text-muted); }
.sample .lesson { max-width: var(--measure); }
.sample .lesson h1 { font-size: var(--step-3); }
.sample .lesson h2 { margin-top: var(--s6); font-size: var(--step-2); max-width: none; }
.sample .lesson blockquote { margin: var(--s5) 0; padding: var(--s3) var(--s5); background: var(--bg-alt); border-radius: var(--r3); }
.gate { max-width: 28rem; margin: var(--s8) auto; }
.msg { padding: var(--s3) var(--s4); border-radius: var(--r2); margin: var(--s4) 0; font-weight: 500; }
.msg.err { color: var(--danger); background: color-mix(in oklch, var(--danger) 10%, transparent); } .msg.ok { color: var(--good); background: color-mix(in oklch, var(--good) 12%, transparent); }
.preview-doc { position: relative; background: var(--surface); border-radius: var(--r3); padding: var(--s6) var(--s5); overflow: hidden; box-shadow: var(--shadow); }
.preview-doc .pv { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-weight: 700; font-size: clamp(4rem, 18vw, 9rem); letter-spacing: -0.04em; color: var(--accent); opacity: .08; transform: rotate(-18deg); }
.preview-doc .content { position: relative; max-width: 46rem; }
.lesson blockquote { margin: var(--s5) 0; padding: var(--s3) var(--s5); background: var(--bg-alt); border-radius: var(--r3); }
.lesson blockquote p { margin: 0; }
.on-dark { background: var(--bg); color: var(--text); }

/* where are you widget, anchor line, proof line */
.where-grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 60rem) { .where-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s8); } }
.whereform { background: var(--bg); border-radius: var(--r4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
.whereform select, .whereform input { background: var(--bg-alt); border-color: transparent; }
.whereout { margin-top: var(--s5); }
.wo { margin: 0 0 var(--s4); }
.wo b { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: var(--s1); color: var(--text-muted); }
.wo.can b { color: var(--good); } .wo.cant b { color: var(--danger); } .wo.next b { color: var(--accent); }
.wo ul { margin: 0; padding-left: 1.1rem; } .wo li { margin-bottom: var(--s1); font-size: .9375rem; line-height: 1.4; } .wo li::marker { color: currentColor; }
.wherecta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s4); }
.tryfree { list-style: none; margin: var(--s5) 0 0; padding: 0; text-align: left; }
.tryfree li { padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: 1.0625rem; } .tryfree li:last-child { border-bottom: 1px solid var(--line); }
.tryfree b { color: var(--accent); margin-right: .4em; }
.anchor { margin: var(--s7) 0 0; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.025em; text-align: center; color: var(--text); }
.anchor b { color: var(--accent); font-variant-numeric: tabular-nums; }
.proofline { font-size: .9375rem; color: var(--text-muted); margin: var(--s4) 0 0; }
.steps.four { margin-top: var(--s7); }
.sec.alt .where-grid .sub { max-width: 34ch; }