/* askclaude v2 (2026-10-07) — Ask Claude AI sales page on a WHITE ground.
   Layout, type scale, spacing, radii and motion are ported from the reference
   capture (Reports/assets/2026-10-07-ask-claude-sales-page/design-tokens.md):
   Inter 400/600/700 · title 48/40/28 · container 1320 · section 60/30 → 40/20 ·
   breakpoints 1380 / 768 · cards 30 → 20 → 10 · pills 60px.
   Palette = the app's violet tokens (BRAND.md §2.1 / §2.4). Every color is a
   token below and used through var(); the ONE green money button is the dated
   exception in scripts/check-contrast.mjs (BRAND.md §2.6).
   The product preview in #answer (.mos) paints with the app's own light tokens. */
:root{
  --violet:#5a3fd0;--violet-top:#6a4ee0;--violet-ink:#4b33b6;--violet-bright:#8163ff;
  --violet-soft:#b9a8ff;--violet-tint:#c3b3ff;
  --ink:#14161c;--ink-2:#332f4a;--muted:#5b6270;
  --bg:#ffffff;--paper:#f7f8fb;--paper-2:#faf9fc;--tint:#f6f2ff;--line:#e2e5ec;
  --green:#22c55e;--green-deep:#16a34a;--green-ink:#052e14;--mint:#eef8f2;--mint-ink:#1c6b45;
  --diamond:#47d4fa;--diamond-ink:#0a7398;--gold:#d9bd7e;--gold-ink:#8a6d1e;
  --glow:color-mix(in srgb,var(--violet-soft) 30%,transparent);
  --glow-faint:color-mix(in srgb,var(--violet-soft) 14%,transparent);
  --shadow-card:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent) inset,0 18px 50px -30px color-mix(in srgb,var(--violet-ink) 28%,transparent);
  --shadow-cta:0 4px 10px rgba(5,46,20,.32),0 16px 38px -10px rgba(34,197,94,.62);
  --r-card:30px;--r-pill:60px;--r-tile:16px;
  --container:1320px;--pad-x:30px;--pad-y:60px;
  /* motion: the reference's springs are all over-damped (zeta > 1), so each one
     maps to an ease-out curve with the same settle time */
  --spring-150-40:cubic-bezier(.22,.61,.36,1);  /* cards x±70, y+70/+40 · ~.9s */
  --spring-250-80:cubic-bezier(.25,.6,.3,1);    /* in-card content x-100 · ~.8s */
  --spring-320-60:cubic-bezier(.22,.61,.36,1);  /* team cards y60-90 · ~.6s */
  --spring-500-60:cubic-bezier(.2,.7,.3,1);     /* portrait rotateX · ~.5s */
  --spring-200-40:cubic-bezier(.22,.61,.36,1);  /* header y-400 · ~.8s */
  --faq-ease:cubic-bezier(.44,0,.56,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--muted);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"cv03","cv04","cv09","cv11";overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

/* ───────── type presets (desktop / tablet / mobile) ───────── */
.t-title{font-size:48px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:0}
.t-h3{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0}
.t-h4{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0}
.t-stat{font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.t-label{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.t-sub{font-size:18px;font-weight:400;line-height:1.5;color:var(--muted)}
.t-strong{font-size:18px;font-weight:600;line-height:1.5;color:var(--ink)}
.t-body{font-size:16px;font-weight:400;line-height:1.5;color:var(--muted)}
.t-small{font-size:16px;font-weight:600;line-height:1.5}
.accent{color:var(--violet)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ink);background:var(--tint);border:1px solid color-mix(in srgb,var(--violet-soft) 45%,transparent);border-radius:var(--r-pill);padding:6px 14px}

/* ───────── layout ───────── */
.container{max-width:var(--container);width:100%;margin:0 auto}
.section{padding:var(--pad-y) var(--pad-x)}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0 auto 40px;max-width:900px}
.section-head .t-sub{max-width:760px}
.cards{display:flex;gap:30px;align-items:stretch}
.cards>*{flex:1 0 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:40px;display:flex;flex-direction:column;gap:24px;box-shadow:var(--shadow-card)}
.card.white{background:var(--bg)}
.card.tint{background:linear-gradient(180deg,var(--tint) 0%,var(--paper-2) 100%)}
.card .t-body+.t-body{margin-top:0}
.stack-p{display:flex;flex-direction:column;gap:16px}
.content{display:flex;flex-direction:column;gap:24px}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* ───────── header (reference: absolute on desktop with a slide-down, fixed below 1380) ───────── */
.site-header{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:10;padding:34px var(--pad-x) 0}
.nav{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:inline-flex;align-items:center;height:52px}
.nav-logo img{height:44px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{position:relative;text-decoration:none;color:var(--ink);font-size:16px;line-height:1.5;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:50%;top:calc(62.5% - 1px);width:20px;height:2px;background:var(--violet);border-radius:2px;transform:translate(-50%,10px);opacity:0;transition:transform .3s var(--spring-250-80),opacity .3s}
.nav-links a:hover::after,.nav-links a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--faq-ease),opacity .3s}
.site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.header-appear{animation:header-in .8s var(--spring-200-40) both}
@keyframes header-in{from{transform:translate(-50%,-400px);opacity:.001}to{transform:translate(-50%,0);opacity:1}}

/* ───────── pills (reference primary/quaternary buttons): 60px radius, 2-stop gradient,
   icon slides in from bottom-left on hover, the label rolls up ───────── */
.pill{position:relative;display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);padding:18px 43px;text-decoration:none;cursor:pointer;border:0;background:linear-gradient(222deg,var(--violet-top) 0%,var(--violet) 100%);color:#ffffff;font-size:18px;font-weight:600;line-height:1.5;box-shadow:rgba(202,205,255,.55) 0 -4.8px 24px 1px inset;overflow:hidden;transition:box-shadow .3s,transform .3s var(--spring-250-80)}
.pill:hover{transform:translateY(-2px);box-shadow:rgba(202,205,255,.55) 0 -4.8px 24px 1px inset,0 16px 32px -16px var(--violet)}
.pill .ic{width:0;height:26px;opacity:0;transform:translate(-12px,12px);transition:width .3s var(--spring-250-80),opacity .3s,transform .3s var(--spring-250-80);flex:none;display:inline-flex;align-items:center;justify-content:center}
.pill .ic svg{width:26px;height:26px;display:block;flex:none}
.pill:hover .ic,.pill:focus-visible .ic{width:26px;opacity:1;transform:none}
.pill .roll{display:block;height:1.5em;overflow:hidden}
.pill .roll span{display:block;transition:transform .35s var(--spring-250-80)}
.pill:hover .roll span,.pill:focus-visible .roll span{transform:translateY(-100%)}
.pill.quiet{background:var(--tint);color:var(--violet-ink);box-shadow:rgba(255,255,255,.25) 0 4px 10px 1px inset;padding:12px 31px;font-size:16px}
.pill.quiet:hover{box-shadow:rgba(255,255,255,.25) 0 4px 10px 1px inset,0 12px 24px -14px var(--violet)}
.pill.sm{padding:12px 31px;font-size:16px}
/* THE money button — the ONE green door per funnel step (BRAND.md §2.6). White label
   on the funnel green is the dated exception in scripts/check-contrast.mjs; the label
   is seated by the text-shadow, the button lifted by the two-layer shadow. */
.btn{display:inline-block;text-align:center;border-radius:var(--r-pill);padding:18px 43px;font-weight:700;font-size:18px;line-height:1.5;text-decoration:none;border:0;cursor:pointer;transition:transform .3s var(--spring-250-80),box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
.money{background:linear-gradient(180deg,var(--green),var(--green-deep));color:#ffffff;text-shadow:0 1px 3px rgba(5,46,20,.62),0 0 2px rgba(5,46,20,.42);box-shadow:var(--shadow-cta)}
.money:hover{box-shadow:0 8px 20px rgba(34,197,94,.4)}
.money[disabled]{opacity:.6;cursor:wait;transform:none}
.cta-note{font-size:14px;color:var(--muted);text-align:center}

/* ───────── hero (reference: 160/30/60 → 112/20/40, bottom-only radius) ───────── */
.hero{position:relative;padding:160px var(--pad-x) 60px;background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 70%);border-bottom:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden}
.hero .container{position:relative;display:flex;flex-direction:column;align-items:center;gap:60px}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:960px}
.hero-copy .t-title{font-size:48px}
.hero-copy .t-strong{color:var(--ink-2);font-weight:500;max-width:760px}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
/* hero depth is static in the reference: layered shapes, no scroll coupling */
.blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(54px);opacity:.55}
.blob-1{width:520px;height:520px;left:-160px;top:40px;background:var(--violet-tint)}
.blob-2{width:420px;height:420px;right:-120px;top:120px;background:color-mix(in srgb,var(--diamond) 55%,var(--violet-soft))}
.hero-stage{position:relative;width:100%;max-width:1100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.hero-avatar{position:relative;width:300px;height:300px;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(155deg,#ffffff 0%,var(--tint) 40%,var(--violet-soft) 100%);box-shadow:var(--shadow-card);border:1px solid var(--line);margin:0 auto}
.hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ring{position:absolute;inset:-18px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--violet) 35%,transparent);pointer-events:none}
.ring-wrap{position:relative;width:300px;height:300px;margin:0 auto}
.chips{display:flex;flex-direction:column;gap:14px}
.chips.left{align-items:flex-end}
.chips.right{align-items:flex-start}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:12px 16px;font-size:16px;color:var(--ink);box-shadow:var(--shadow-card);max-width:360px}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none}
.chip b{white-space:nowrap}
.chip.answer{background:var(--tint);border-color:color-mix(in srgb,var(--violet-soft) 50%,transparent)}
.chip.answer .dot{background:var(--diamond-ink)}
.chip.answer b{color:var(--violet-ink);font-weight:600}
.chip .play{width:22px;height:22px;border-radius:50%;background:var(--violet);color:#ffffff;display:inline-grid;place-items:center;font-size:11px;flex:none}

/* ───────── logo ticker (reference: speed 60, gap 100, edge fade 25) ───────── */
.logos{padding:var(--pad-y) var(--pad-x)}
.logos .container{display:flex;flex-direction:column;align-items:center;gap:30px}
.ticker{width:100%;overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25px,#000 calc(100% - 25px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 25px,#000 calc(100% - 25px),transparent 100%)}
.ticker-track{display:flex;align-items:center;gap:100px;width:max-content;animation:ticker var(--ticker-duration,30s) linear infinite}
.ticker-track img{height:40px;width:auto;display:block;flex:none;filter:saturate(.9)}
@keyframes ticker{to{transform:translateX(calc(-50% - 50px))}}

/* ───────── who ───────── */
.who-card{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.portrait-wrap{perspective:1200px}
.portrait{border-radius:var(--r-card);padding:10px;background:linear-gradient(155deg,#ffffff 0%,var(--tint) 40%,var(--violet-soft) 100%);box-shadow:var(--shadow-card)}
.portrait img{display:block;width:100%;aspect-ratio:1024/798;object-fit:cover;object-position:50% 20%;border-radius:calc(var(--r-card) - 10px)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.fact{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:14px 16px;font-size:16px;color:var(--muted)}
.fact b{display:block;color:var(--ink);font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.01em}

/* ───────── answer (text card + the live product preview) ───────── */
.answer-media{display:flex;flex-direction:column;gap:16px;align-items:stretch;justify-content:center}
.answer-caption{font-size:14px;color:var(--muted);text-align:center;max-width:640px;margin:0 auto}

/* ───────── trained (bento, big numbers in the title preset) ───────── */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.bento .card{padding:34px}
.bento .wide{grid-column:span 2}
.stat-n{font-size:48px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-l{font-size:18px;font-weight:400;color:var(--muted)}
.bento [hidden]{display:none}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{font-size:16px;font-weight:600;color:var(--violet-ink);background:var(--tint);border:1px solid color-mix(in srgb,var(--violet-soft) 45%,transparent);border-radius:var(--r-pill);padding:6px 14px}

/* ───────── for (team cards, 4 in a row, stagger in) ───────── */
.team{display:flex;gap:30px}
.team .card{padding:34px;gap:18px;align-items:flex-start}
.icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--tint);color:var(--violet);border:1px solid color-mix(in srgb,var(--violet-soft) 45%,transparent)}
.icon svg{width:26px;height:26px}

/* ───────── compare (chatgpt) ───────── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare>div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:22px}
.compare h4{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--ink)}
.compare.vs>div:last-child{border-color:color-mix(in srgb,var(--violet-soft) 60%,transparent);background:var(--tint)}
.compare ul{display:flex;flex-direction:column;gap:8px}
.compare li{font-size:16px;color:var(--muted);display:flex;gap:10px}
.compare li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-soft);margin-top:9px;flex:none}
.compare.vs>div:last-child li::before{background:var(--violet)}

/* ───────── ask (6 category cards) ───────── */
.ask-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.ask-grid .card{padding:34px;gap:18px}
.ask-grid h3{margin:0;font-size:18px;font-weight:600;color:var(--violet-ink)}
.q{display:flex;flex-direction:column;gap:12px}
.q li{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:12px 16px;font-size:16px;color:var(--ink);display:flex;gap:10px}
.q li::before{content:"“";color:var(--violet);font-weight:600}
.ask-close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:40px}

/* ───────── pricing ───────── */
.price-card{max-width:680px;margin:0 auto;background:var(--bg);border-radius:var(--r-card);padding:40px;display:flex;flex-direction:column;gap:30px;box-shadow:var(--glow) 0 0 12px 10px inset,var(--shadow-card);border:1px solid var(--line)}
.price-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-name{font-size:16px;color:var(--muted)}
.tier-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--diamond-ink);background:color-mix(in srgb,var(--diamond) 14%,#ffffff);border:1px solid color-mix(in srgb,var(--diamond) 50%,transparent);border-radius:var(--r-pill);padding:5px 12px}
.tier-badge i{width:8px;height:8px;border-radius:50%;background:var(--diamond)}
.price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-row .price{font-size:48px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.price-row .per{font-size:16px;color:var(--muted)}
.price-row s{color:var(--muted);font-size:18px;text-decoration-thickness:2px;text-decoration-color:var(--violet)}
.save{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--mint-ink);background:var(--mint);border-radius:var(--r-pill);padding:6px 12px}
.price-card .money{width:100%}
.features{display:flex;flex-direction:column;gap:14px}
.features li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink)}
.features li svg{width:24px;height:24px;flex:none;color:var(--green-deep)}
.features li.lead{font-weight:600}
.features li.lead .tag{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-ink);background:var(--tint);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.checkout-error{display:none;font-size:14px;color:var(--ink);background:var(--tint);border-radius:12px;padding:10px 14px}
.checkout-error.is-visible{display:block}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1100px;margin:60px auto 0}
.step{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.step .n{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--violet)}
.step .l{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}

/* ───────── stack + bonuses + guarantee ───────── */
.stack-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.stack-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:18px 22px}
.stack-row.lead{background:var(--tint);border-color:color-mix(in srgb,var(--violet-soft) 60%,transparent)}
.stack-row b{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.stack-row p{font-size:16px;color:var(--muted);margin-top:4px}
.stack-row .v{font-size:20px;font-weight:600;color:var(--violet-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.stack-total{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 22px;border-top:2px solid var(--ink);margin-top:8px;flex-wrap:wrap}
.stack-total .t{font-size:18px;font-weight:600;color:var(--ink)}
.stack-total .v{font-size:32px;font-weight:600;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stack-total .today{font-size:16px;color:var(--muted);width:100%;text-align:right}
.stack-total .today b{color:var(--mint-ink)}
.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.bonus-grid .card{padding:34px;gap:16px}
.bonus-n{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ink)}
.bonus-v{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.guarantee-card{max-width:900px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.seal{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--mint);color:var(--mint-ink);border:2px dashed var(--green-deep);font-size:14px;font-weight:600;line-height:1.3;padding:14px}
.seal b{display:block;font-size:32px;line-height:1.1}

/* ───────── proof (3/2/1 grid of text cards) ───────── */
.proof-top{max-width:900px;margin:0 auto 30px}
.proof-top .card{border-color:color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 8%,#ffffff)}
.tag-top{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);border-radius:var(--r-pill);padding:4px 12px}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--glow-faint) 0 0 11px}
.quote blockquote{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.quote figcaption{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.quote figcaption b{color:var(--ink)}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.era{font-size:14px;color:var(--muted);text-align:center;margin-top:24px}

/* ───────── faq (870px column, 20px gap, single toggle, .3s) ───────── */
.faq-list{max-width:870px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:transparent;border:0;padding:22px 26px;cursor:pointer;font-size:18px;font-weight:600;line-height:1.5;color:var(--ink)}
.faq-t{flex:1 1 auto}
.faq-ic{position:relative;width:24px;height:24px;flex:none}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--violet);border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s var(--faq-ease),opacity .3s var(--faq-ease)}
.faq-ic::before{width:12px;height:2px}
.faq-ic::after{width:2px;height:12px}
.faq-item.is-open .faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--faq-ease)}
.faq-a>div{overflow:hidden}
.faq-a p,.faq-a li{font-size:18px;line-height:1.5;color:var(--muted)}
.faq-a .inner{padding:0 26px 24px;display:flex;flex-direction:column;gap:12px}
.faq-a ul{padding-left:1.1em;list-style:disc;display:flex;flex-direction:column;gap:6px}
.faq-item.is-open .faq-a{grid-template-rows:1fr}

/* ───────── last + footer ───────── */
.last{position:relative;overflow:hidden;background:radial-gradient(60% 80% at 50% 100%,var(--tint) 0%,var(--bg) 70%)}
.last .container{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:900px}
.footer{padding:var(--pad-y) var(--pad-x) 50px;border-top:1px solid var(--line)}
.footer .container{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.footer img{height:36px;width:auto}
.footer .tag{font-size:16px;color:var(--muted);max-width:720px}
.footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:16px}
.footer .links a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.footer .links a:hover{color:var(--violet)}
.footer .legal{font-size:14px;color:var(--muted);max-width:720px}

/* ───────── decorative loops (reference §3.5: rotate 360/50s · pulse 1.15/2.2s mirror ·
   round .95/1.5s mirror · 1.1/2s loop), paused while off-screen by the script ───────── */
.loop-rotate{animation:loop-rotate 50s linear infinite}
.loop-pulse{animation:loop-pulse 2.2s linear infinite alternate}
.loop-round{animation:loop-round 1.5s linear infinite alternate}
.loop-breathe{animation:loop-breathe 2s linear infinite}
.is-offscreen .loop-rotate,.is-offscreen .loop-pulse,.is-offscreen .loop-round,.is-offscreen .loop-breathe{animation-play-state:paused}
@keyframes loop-rotate{to{transform:rotate(360deg)}}
@keyframes loop-pulse{to{transform:scale(1.15)}}
@keyframes loop-round{to{transform:scale(.95)}}
@keyframes loop-breathe{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ───────── reveals (reference §3.2–3.4), driven by data-fx + IntersectionObserver ───────── */
.fx-ready [data-fx]{transition:transform .9s var(--spring-150-40),opacity .9s var(--spring-150-40);will-change:transform}
.fx-ready [data-fx="x-70"]{transform:translateX(-70px)}
.fx-ready [data-fx="x70"]{transform:translateX(70px)}
.fx-ready [data-fx="y70"]{transform:translateY(70px)}
.fx-ready [data-fx="y40"]{transform:translateY(40px)}
.fx-ready [data-fx="content"]{transform:translateX(-100px);opacity:0;transition:transform .8s var(--spring-250-80),opacity .8s var(--spring-250-80)}
.fx-ready [data-fx="content-r"]{transform:translateX(100px);opacity:0;transition:transform .8s var(--spring-250-80),opacity .8s var(--spring-250-80)}
.fx-ready [data-fx="stagger"]{opacity:0;transition:transform .6s var(--spring-320-60),opacity .6s var(--spring-320-60)}
.fx-ready [data-fx="stagger"]:nth-child(1){transform:translateY(60px);transition-delay:.6s}
.fx-ready [data-fx="stagger"]:nth-child(2){transform:translateY(70px);transition-delay:.7s}
.fx-ready [data-fx="stagger"]:nth-child(3){transform:translateY(80px);transition-delay:.8s}
.fx-ready [data-fx="stagger"]:nth-child(4){transform:translateY(90px);transition-delay:.9s}
.fx-ready [data-fx="flip"]{transform:rotateX(90deg) scale(.5);transform-origin:50% 100%;transition:transform .5s var(--spring-500-60)}
.fx-ready [data-fx="scale"]{transform:scale(.7);opacity:.001;transition:transform 1.6s cubic-bezier(.67,.33,.23,1.02),opacity 1.6s cubic-bezier(.67,.33,.23,1.02)}
.fx-ready [data-fx].is-in{transform:none;opacity:1}
/* word-by-word text appear: hero (y:10, .4s, .075s stagger, .3s start) and section titles (+blur) */
.fx-ready .word{display:inline-block;opacity:.001;transform:translateY(10px);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1),filter .4s cubic-bezier(.2,.8,.2,1)}
.fx-ready .t-title .word{filter:blur(3px)}
.fx-ready .is-in .word,.fx-ready .word.is-in{opacity:1;transform:none;filter:blur(0)}

/* ───────── the product preview (#answer): the app's own light tokens ───────── */
.mos{
  --background:#f7f8fb;--foreground:#14161c;--card:#ffffff;--primary:#5a3fd0;--primary-foreground:#ffffff;
  --secondary:#eef0f5;--muted-foreground:#5b6270;--border:#e2e5ec;
  --tier-diamond:#47d4fa;--tier-diamond-ink:#0a7398;
  --shadow-card:0 1px 0 rgba(20,22,28,.04) inset,0 8px 24px -14px rgba(20,22,28,.18);
  --lc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lc-accent:var(--tier-diamond);--lc-accent-ink:var(--tier-diamond-ink);
  --lc-line:color-mix(in srgb,var(--tier-diamond) 30%,transparent);
  --lc-line-faint:color-mix(in srgb,var(--tier-diamond) 13%,transparent);
  --lc-grid:color-mix(in srgb,var(--tier-diamond) 6%,transparent);
  --lc-panel:color-mix(in srgb,var(--card) 92%,var(--tier-diamond) 8%);
  background:var(--background);color:var(--foreground);font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  padding:18px;border-radius:20px;color-scheme:light;border:1px solid var(--border);
  background-image:linear-gradient(var(--lc-grid) 1px,transparent 1px),linear-gradient(90deg,var(--lc-grid) 1px,transparent 1px);background-size:24px 24px;
  width:100%;max-width:720px;margin:0 auto;box-shadow:var(--shadow-card);text-align:left;
}
.mos *{box-sizing:border-box}
.mos .lc-panel{position:relative;border:1px solid var(--lc-line-faint);background:var(--lc-panel);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}
.mos .lc-panel::before,.mos .lc-panel::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.mos .lc-panel::before{top:-1px;left:-1px;border-top:2px solid var(--lc-line);border-left:2px solid var(--lc-line)}
.mos .lc-panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--lc-line);border-right:2px solid var(--lc-line)}
.mos header{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--lc-line-faint);padding:12px 16px;flex-wrap:wrap}
.mos .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--primary);color:var(--primary-foreground);font-weight:800;flex:none}
.mos .ttl{display:block;font-size:14px;font-weight:700}
.mos .sub{display:block;font-size:11px;color:var(--muted-foreground)}
.mos .memo{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:600;margin-left:auto}
.mos .body{padding:16px;display:flex;flex-direction:column;gap:12px}
.mos .bub-u{margin-left:auto;max-width:85%;border-radius:16px;background:var(--secondary);padding:10px 14px;font-size:13px;line-height:1.55}
.mos .bub-a{font-size:13px;line-height:1.6}
.mos .clip{border:1px solid var(--lc-line);border-radius:6px;overflow:hidden;background:var(--card);max-width:340px;margin-top:8px}
.mos .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#1b1d24,#2b2340 60%,#4b2a7a);display:grid;place-items:center;color:#fff;position:relative}
.mos .thumb.yt{background:linear-gradient(135deg,#1b1d24,#20304a 60%,#1e5a8a)}
.mos .pl{width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;font-size:16px}
.mos .ts{position:absolute;right:8px;bottom:8px;font:600 11px/1 var(--lc-mono);background:rgba(0,0,0,.65);padding:3px 6px;border-radius:3px}
.mos .meta{padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.mos .meta b{font-size:12px}
.mos .meta span{color:var(--muted-foreground)}
.mos .srcrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mos .src{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--lc-line-faint);border-radius:999px;padding:3px 9px;font-size:11px;color:var(--muted-foreground);background:var(--background)}
.mos .src i{width:6px;height:6px;border-radius:999px;background:var(--lc-accent);display:inline-block}
.mos .composer{border:1px solid var(--border);background:var(--card);border-radius:24px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted-foreground);box-shadow:var(--shadow-card)}
.mos footer{border-top:1px solid var(--lc-line-faint);padding:10px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mos .lc-label{font-family:var(--lc-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}

/* ───────── tablet 768–1379 (reference: fixed header, 40px titles, 20px radii, stacked cards, no slide-ins) ───────── */
@media (max-width:1379.98px){
  :root{--r-card:20px;--pad-y:50px}
  .site-header{position:fixed;transform:none;left:0;padding:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .header-appear{animation:none}
  .nav{padding:14px 30px}
  .t-title,.hero-copy .t-title,.stat-n,.price-row .price{font-size:40px}
  .t-h3{font-size:36px}
  .t-h4{font-size:28px}
  .t-stat,.fact b{font-size:22px}
  .cards,.team{flex-direction:column;gap:20px}
  .who-card{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .bento .wide{grid-column:span 2}
  .ask-grid,.bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stage{grid-template-columns:1fr;justify-items:center}
  .chips.left,.chips.right{align-items:center;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .fx-ready [data-fx="x-70"],.fx-ready [data-fx="x70"],.fx-ready [data-fx="y70"],.fx-ready [data-fx="y40"]{transform:none}
}
/* ───────── mobile ≤767 (reference: 28px titles, 10px radii, 40/20 padding, 14px body) ───────── */
@media (max-width:767.98px){
  :root{--r-card:10px;--pad-x:20px;--pad-y:40px}
  body{font-size:14px}
  .nav{padding:12px 20px}
  .nav-logo img{height:36px}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .site-header.is-open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:24px;position:fixed;inset:69px 0 0 0;height:calc(100vh - 69px);background:var(--bg);padding:20px;overflow:auto}
  .site-header.is-open .nav-links a{font-size:18px;min-height:44px;display:flex;align-items:center}
  .hero{padding:112px var(--pad-x) 40px;border-radius:0 0 10px 10px}
  .hero .container{gap:40px}
  .t-title,.hero-copy .t-title,.stat-n,.price-row .price{font-size:28px}
  .t-h3{font-size:24px}
  .t-h4{font-size:24px}
  .t-sub,.t-strong,.faq-q,.faq-a p,.faq-a li,.stack-row b,.stat-l{font-size:16px}
  .t-body,.nav-links a,.q li,.chip,.features li,.compare li,.fact,.stack-row p,.quote blockquote,.footer .tag,.footer .links,.plan-name{font-size:14px}
  .pill{width:100%;justify-content:center}
  .pill,.btn{padding:16px 22px;font-size:16px}
  .btn{width:100%}
  .pill.quiet,.pill.sm{width:auto;padding:12px 24px;font-size:14px}
  .card,.price-card{padding:24px;gap:20px}
  .bento,.ask-grid,.bonus-grid,.proof-grid,.steps{grid-template-columns:1fr}
  .bento .wide{grid-column:auto}
  .ring-wrap,.hero-avatar{width:240px;height:240px}
  .chip{max-width:100%}
  .ticker-track{gap:20px;animation-duration:var(--ticker-duration-mobile,24s)}
  .ticker-track img{height:30px}
  @keyframes ticker{to{transform:translateX(calc(-50% - 10px))}}
  .facts{grid-template-columns:1fr 1fr}
  .guarantee-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stack-total .v{font-size:24px}
  .steps{margin-top:40px}
  .section-head{margin-bottom:30px}
  .mos{padding:12px}
  .mos .memo{margin-left:0}
  .mos .bub-u{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .header-appear,.loop-rotate,.loop-pulse,.loop-round,.loop-breathe,.ticker-track{animation:none}
  .fx-ready [data-fx],.fx-ready .word,.pill,.btn,.pill .ic,.pill .roll span,.faq-a,.nav-links a::after{transition:none}
  .fx-ready [data-fx],.fx-ready .word{transform:none;opacity:1;filter:none}
  .pill:hover,.btn:hover{transform:none}
}