/* =============================================================
   Your First Path — Archetype 05 (Mouse-Reactive Gradient)
   Near-black, one neon accent, huge serif display + Inter body.
   Signature: a gradient mesh that follows the pointer / touch
   and drifts with quiz progress.
   ============================================================= */

/* 0. Fonts, served from this site (not Google Fonts: that sends each visitor's IP to Google). Both OFL. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }

/* 1. Tokens */
:root {
  --bg:     #0a0a0a;
  --bg-2:   #151515;
  --ink:    #fafafa;
  --mute:   #a3a3a3;
  --dim:    #6b6b6b;
  --accent: #00ff88;
  --accent-ink: #04140c;
  --line:   rgba(250,250,250,.12);
  --g1: #8338ec;
  --g2: #3a86ff;
  --g3: #06ffa5;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gutter: 20px;
}

/* 2. Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink); background: transparent; /* html paints --bg; body must stay see-through or it hides the gradient */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip; min-height: 100vh; min-height: 100svh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 3. Utilities */
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: var(--bg); z-index: 9999; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.hidden { display: none !important; }
.kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.accent { color: var(--accent); }

/* 4. Signature: reactive gradient (fixed, behind everything) */
.bg-gradient {
  position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 46vmax at var(--mx, 30%) var(--my, 20%), var(--g1) 0%, transparent 55%),
    radial-gradient(circle 52vmax at calc(var(--mx, 30%) + 38%) calc(var(--my, 20%) + 30%), var(--g2) 0%, transparent 55%),
    radial-gradient(circle 34vmax at calc(var(--mx, 30%) - 8%) calc(var(--my, 20%) + 62%), var(--g3) 0%, transparent 55%),
    var(--bg);
  filter: blur(60px) saturate(140%);
  opacity: .55;
  transition: opacity .8s var(--ease-soft);
}
.bg-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.85) 100%); }
body[data-screen="quiz"] .bg-gradient { opacity: .38; }
body[data-screen="result"] .bg-gradient { opacity: .45; }

/* 5. Components */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 60px; padding: 0 28px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  box-shadow: 0 6px 24px rgba(0,255,136,.18);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s;
  text-decoration: none;
}
.btn .arrow { transition: transform .45s var(--ease-out); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn-block { width: 100%; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,255,136,.28); }
  .btn:hover:not(:disabled) .arrow { transform: translateX(4px); }
}

.link-u { position: relative; text-decoration: none; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-soft); }
@media (hover: hover) { .link-u:hover::after { transform: scaleX(1); transform-origin: left; } }

/* 6. Sections — landing */
.top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.brand { font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; }
.brand i { color: var(--accent); }
.top .pill { font-size: 13px; color: var(--mute); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }

.hero { display: flex; flex-direction: column; justify-content: center; padding: 28px 0 36px; }
.hero-title { font-family: var(--serif); font-size: clamp(3.1rem, 13.5vw, 8.6rem); line-height: .92; max-width: 11ch; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-title .line { display: block; transition: color .35s var(--ease-soft); }
@media (hover: hover) { .hero-title .line:hover { color: var(--accent); } .hero-title .line:hover em { color: var(--ink); } }
.hero-sub { margin: 22px 0 30px; font-size: clamp(1.1rem, 4.4vw, 1.4rem); color: #d4d4d4; max-width: 34ch; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--mute); }

.manifesto { padding: 32px 0; border-top: 1px solid var(--line); }
.manifesto p { font-size: clamp(1.35rem, 5.4vw, 2.1rem); line-height: 1.28; letter-spacing: -.015em; max-width: 30ch; margin-bottom: .55em; color: #e5e5e5; }
.manifesto p b { color: var(--ink); font-weight: 700; }
.manifesto p.hit { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.02; color: var(--accent); }

.walls { padding: 32px 0; border-top: 1px solid var(--line); }
.wall-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wall-row .who { font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.6rem); line-height: 1; }
.wall-row .says { color: var(--mute); font-size: 16px; }
.walls .after { margin-top: 18px; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 700; max-width: 26ch; }

.stats { padding: 32px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.stat .num { font-family: var(--serif); font-size: clamp(3rem, 15vw, 6rem); line-height: .9; color: var(--accent); }
.stat .lbl { font-size: 14px; color: var(--mute); margin-top: 8px; max-width: 18ch; }

.proof { padding: 32px 0; border-top: 1px solid var(--line); }
.proof h2 { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 4rem); margin: 8px 0 16px; max-width: 16ch; }
.proof ul { list-style: none; padding: 0; }
.proof li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.proof li .amt { font-family: var(--serif); font-size: 32px; color: var(--accent); min-width: 3.6em; }
.proof .coda { margin-top: 14px; font-size: 18px; color: #d4d4d4; max-width: 34ch; }

.steps { padding: 32px 0; border-top: 1px solid var(--line); }
.steps ol { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; }
.steps li::before { content: "0" counter(s); font-family: var(--serif); font-size: 30px; color: var(--accent); line-height: 1; }
.steps li b { display: block; font-size: 20px; margin-bottom: 4px; }
.steps li span { color: var(--mute); }

.faq { padding: 32px 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 28px; color: var(--accent); transition: transform .35s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; color: #d4d4d4; max-width: 44ch; }

.final { padding: 40px 0 28px; border-top: 1px solid var(--line); }
.final h2 { font-family: var(--serif); font-size: clamp(2.8rem, 12vw, 6.4rem); line-height: .95; max-width: 12ch; margin-bottom: 20px; }
.final h2 em { color: var(--accent); }
.foot { padding: 20px 0 32px; color: var(--dim); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 6b. Quiz */
.screen { min-height: 100vh; min-height: 100svh; }
.quiz { display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 40px; }
.q-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.q-bar { height: 3px; background: var(--line); border-radius: 3px; margin: 12px 0 34px; overflow: hidden; }
.q-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease-out); }
.q-text { font-family: var(--serif); font-size: clamp(2.1rem, 9vw, 3.8rem); line-height: 1; max-width: 16ch; margin-bottom: 28px; }
.q-opts { display: grid; gap: 10px; }
.opt {
  width: 100%; text-align: left; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(21,21,21,.72); font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s, transform .25s var(--ease-soft);
}
.opt .k { font-size: 12px; color: var(--dim); font-weight: 500; letter-spacing: .1em; }
@media (hover: hover) { .opt:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .opt:hover .k { color: var(--bg); } }
.opt.picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(.985); }
.opt.picked .k { color: var(--accent-ink); }
.q-react { min-height: 30px; margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.15; color: var(--accent); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.q-react.on { opacity: 1; transform: none; }
.q-back { margin-top: 26px; font-size: 14px; color: var(--mute); align-self: flex-start; }

/* 6c. Email gate */
.gate { display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.gate h2 { font-family: var(--serif); font-size: clamp(2.8rem, 12vw, 5.6rem); line-height: .95; }
.gate h2 em { color: var(--accent); }
.gate .sub { margin: 16px 0 28px; font-size: 19px; color: #d4d4d4; }
.field { display: block; margin-bottom: 12px; }
.field input { width: 100%; min-height: 60px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(21,21,21,.8); color: var(--ink); font-size: 18px; }
.field input::placeholder { color: var(--dim); }
.field input:focus { outline: none; border-color: var(--accent); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #cfcfcf; margin: 8px 0 20px; }
.check input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.err { color: #ff6b6b; font-size: 14px; min-height: 20px; margin-bottom: 8px; }
.privacy { margin-top: 18px; font-size: 13px; color: var(--mute); max-width: 52ch; }

/* 6c-bis. Building (wait screen) */
.build { display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.b-title { font-family: var(--serif); font-size: clamp(2.8rem, 12vw, 5.6rem); line-height: .95; margin: 12px 0 30px; }
.b-title em { color: var(--accent); }
.b-steps { list-style: none; padding: 0; margin-bottom: 30px; }
.b-steps li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid var(--line); color: var(--dim); font-size: 17px; transition: color .4s var(--ease-soft); }
.b-steps li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--dim); transition: all .3s var(--ease-soft); }
.b-steps li.doing { color: var(--ink); }
.b-steps li.doing::before { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.b-steps li.done { color: #d4d4d4; }
.b-steps li.done::before { content: "✓"; border: 0; color: var(--accent); font-weight: 700; width: auto; height: auto; margin-top: -12px; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.b-bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.b-bar > i { display: block; height: 100%; width: 0; background: var(--accent); }
.b-pct { margin-top: 12px; font-family: var(--serif); font-size: 40px; color: var(--accent); }

/* 6d. Result */
.result { padding-top: 22px; padding-bottom: 60px; }
.r-hello { font-size: 17px; color: #e5e5e5; margin-bottom: 10px; max-width: 34ch; }
.r-mailnote { font-size: 13px; color: var(--mute); margin: -4px 0 6px; }
.r-main { padding: 18px 0 22px; border-bottom: 1px solid var(--line); }
.r-name { font-family: var(--serif); font-size: clamp(3rem, 14vw, 7rem); line-height: .9; margin: 10px 0 14px; }
.r-pct { display: flex; align-items: baseline; gap: 10px; }
.r-pct .n { font-family: var(--serif); font-size: clamp(4rem, 20vw, 8rem); line-height: .85; color: var(--accent); }
.r-pct .l { color: var(--mute); font-size: 14px; max-width: 12ch; }
.r-line { margin-top: 18px; font-size: 20px; color: #e5e5e5; max-width: 32ch; }
.r-fits { list-style: none; padding: 0; margin-top: 20px; }
.r-fits li { padding: 10px 0 10px 30px; position: relative; border-top: 1px solid var(--line); }
.r-fits li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.r-today { margin: 22px 0 24px; padding: 20px 20px 20px 22px; border-radius: 18px; background: rgba(21,21,21,.82); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.r-today .kicker { color: var(--accent); }
.r-today p { margin-top: 8px; font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.offer { border: 1px solid var(--accent); border-radius: 22px; padding: 24px 20px; background: rgba(0,255,136,.05); margin-bottom: 26px; }
.offer h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.offer p { margin: 10px 0 0; color: #d4d4d4; }
.offer .o-ben { list-style: none; padding: 0; margin: 14px 0 4px; }
.offer .o-ben li { position: relative; padding: 8px 0 8px 26px; color: #d4d4d4; font-size: 16px; line-height: 1.45; }
.offer .o-ben li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.offer .o-ben li b { color: var(--ink); }
.offer .quit { font-size: 14px; color: var(--mute); }
.offer .honest { font-size: 14px; color: var(--mute); margin: 10px 0 18px; }
.offer .msg { margin-top: 12px; font-size: 15px; }
.others h4, .blocked h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin-bottom: 6px; }
.o-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.o-row b { display: block; font-size: 18px; }
.o-row span.s { color: var(--mute); font-size: 14px; }
.o-row .p { font-family: var(--serif); font-size: 30px; color: var(--mute); white-space: nowrap; }
.blocked { margin-top: 20px; }
.blocked p { padding: 12px 0; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px; }
.blocked p b { color: var(--ink); }

/* 7. Effects: screen enter */
.enter { animation: enterUp .6s var(--ease-out) both; }
@keyframes enterUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* 8. Responsive */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .wall-row { grid-template-columns: 1fr 1.2fr; align-items: baseline; }
  .quiz, .gate, .result { max-width: 760px; }
  .q-opts { gap: 12px; }
}
@media (min-width: 960px) {
  .hero-title { max-width: 12ch; }
  .manifesto, .walls, .stats, .proof, .steps, .faq { padding: 64px 0; }
}

/* 9. Reduced motion — only the intrusive stuff (nothing here is intrusive) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Privacy page */
.legal { max-width: 720px; padding-top: 28px; padding-bottom: 60px; }
.legal h1 { font-family: var(--serif); font-size: clamp(2.6rem, 11vw, 4.4rem); margin: 18px 0 6px; }
.legal h2 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; letter-spacing: -.01em; }
.legal p, .legal li { color: #d4d4d4; font-size: 16px; }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal b { color: var(--ink); }
.legal-date { color: var(--mute); font-size: 14px; }