/* ═══════════════════════════════════════════════════════════════════════
   launch-plan.css — the interactive launch plan  (2026-08-23)

   Sits on top of marketing-site.css and reuses its tokens, .wrap, .pill,
   .go and .alt. Only what is specific to the quiz + the plan lives here.

   ⚠️ Every animation is behind prefers-reduced-motion, and every tap
   target is 48px minimum (design system rule 4 — our readers are 50-60+
   on a phone).
   ═════════════════════════════════════════════════════════════════════ */

/* Flex column + margin-top:auto on the footer so the intro screen, which is
   shorter than a desktop viewport, puts its footer AT the bottom rather
   than floating it mid-page with 200px of dead white underneath. */
.lpn{min-height:100vh; display:flex; flex-direction:column;}
.lpn > .rhome{margin-top:auto;}

/* ── Intro ───────────────────────────────────────────────────────── */
.lpn-intro{text-align:center; padding:54px 0 72px;}
.lpn-intro h1{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.022em;
  font-size:clamp(30px,5vw,50px); line-height:1.13; margin:20px auto 22px;
  max-width:16ch; text-wrap:balance;
}
.lpn-intro h1 em{font-style:normal; color:var(--accent); display:block;}
.lpn-intro .sub{
  font-size:clamp(16px,2.2vw,18.5px); line-height:1.62; color:var(--ink2);
  margin:0 auto 32px; max-width:580px; text-wrap:balance;
}
.lpn-note{margin:16px auto 0; font-size:13.5px; color:var(--ink3);}
button.go{border:0; cursor:pointer; font-family:inherit;}

/* ── Quiz ────────────────────────────────────────────────────────── */
.lpn-quiz{padding:44px 0 90px; min-height:70vh;}

.lpn-progress{display:flex; justify-content:center; gap:7px; margin:0 0 40px;}
.lpn-progress i{
  width:26px; height:4px; border-radius:2px; background:var(--line);
  transition:background .35s ease, width .35s ease;
}
.lpn-progress i.on{background:var(--accent); width:34px;}
.lpn-progress i.done{background:rgba(106,76,241,.4);}

.lpn-qwrap{position:relative; min-height:340px;}
.lpn-q{animation:qIn .38s cubic-bezier(.2,.7,.3,1) both;}
.lpn-q.out{animation:qOut .22s ease both;}
@keyframes qIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes qOut{from{opacity:1;} to{opacity:0; transform:translateY(-10px);}}

.lpn-step{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:block; text-align:center; margin:0 0 12px;
}
.lpn-q h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(24px,3.8vw,34px); line-height:1.2; text-align:center;
  margin:0 auto 10px; max-width:18ch; text-wrap:balance;
}
.lpn-q .hint{
  text-align:center; font-size:15px; color:var(--ink2); margin:0 auto 30px;
  max-width:440px; line-height:1.55;
}

.lpn-opts{display:grid; gap:10px; margin:0 auto; max-width:520px;}
.lpn-opts.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px; max-width:560px;
}
.lpn-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:15px 18px; min-height:48px; box-sizing:border-box;
  font-family:inherit; font-size:16px; line-height:1.45; color:var(--ink);
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.lpn-opt b{display:block; font-weight:600;}
.lpn-opt span{display:block; margin-top:3px; font-size:14px; color:var(--ink2); line-height:1.5;}
.lpn-opt:hover{border-color:var(--accent); transform:translateY(-1px);}
.lpn-opt.on{border-color:var(--accent); background:rgba(106,76,241,.05);}

.lpn-opts.chips .lpn-opt{
  width:auto; border-radius:999px; padding:11px 17px; font-size:15px;
  min-height:48px; display:inline-flex; align-items:center;
}

.lpn-back{
  display:block; margin:34px auto 0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14.5px; color:var(--ink3); padding:12px 16px;
  min-height:48px;
}
.lpn-back:hover{color:var(--accent);}

/* ── Result: the door ────────────────────────────────────────────── */
.lpn-result{padding:20px 0 0;}

.lpn-door{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  margin:26px 0 0; background:#fff;
  animation:doorIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes doorIn{from{opacity:0; transform:translateY(18px) scale(.985);} to{opacity:1; transform:none;}}

.lpn-door .dhead{
  background:var(--ink); color:#fff; padding:26px 26px 24px;
}
.lpn-door .dkick{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); display:block; margin:0 0 10px;
}
.lpn-door h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(25px,4vw,34px); line-height:1.18; margin:0 0 10px; color:#fff;
}
.lpn-door .dwhy{margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.75);}

.lpn-door .dbody{padding:26px;}
.lpn-door h3{
  font-size:12px; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); margin:0 0 14px;
}
.lpn-door ol{margin:0 0 24px; padding:0 0 0 4px; list-style:none; counter-reset:d;}
.lpn-door ol li{
  counter-increment:d; position:relative; padding:0 0 14px 38px;
  font-size:16px; line-height:1.6; color:var(--ink2);
}
.lpn-door ol li::before{
  content:counter(d); position:absolute; left:0; top:1px;
  width:24px; height:24px; border-radius:50%; background:rgba(106,76,241,.1);
  color:var(--accent); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace;
}
.lpn-door ol li b{color:var(--ink); font-weight:600;}

.lpn-does{
  border-left:3px solid var(--accent); background:rgba(106,76,241,.05);
  padding:16px 18px; border-radius:0 10px 10px 0;
  font-size:15.5px; line-height:1.6; color:var(--ink2);
}
.lpn-does b{color:var(--ink); font-weight:600;}

/* ── Result: the stages ──────────────────────────────────────────── */
.lpn-h2{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(23px,3.4vw,31px); line-height:1.2; margin:64px 0 8px;
  text-wrap:balance;
}

.lpn-stages{list-style:none; margin:26px 0 0; padding:0; position:relative;}
/* The line that draws itself down the spine as you scroll. */
.lpn-stages::before{
  content:""; position:absolute; left:15px; top:8px; bottom:40px; width:2px;
  background:var(--line-soft);
}
.lpn-stages .fill{
  position:absolute; left:15px; top:8px; width:2px; height:0;
  background:var(--accent); transition:height .25s linear; z-index:1;
}

.lpn-stage{
  position:relative; padding:0 0 34px 52px;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.lpn-stage.in{opacity:1; transform:none;}
.lpn-stage .num{
  position:absolute; left:0; top:0; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:600; color:var(--ink3);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.lpn-stage.in .num{border-color:var(--accent); color:var(--accent);}
.lpn-stage h3{
  font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.018em;
  font-size:clamp(19px,2.6vw,23px); line-height:1.25; margin:3px 0 8px;
}
.lpn-stage .lede{margin:0 0 14px; font-size:15.5px; line-height:1.62; color:var(--ink2);}
.lpn-stage ul{list-style:none; margin:0 0 14px; padding:0;}
.lpn-stage ul li{
  position:relative; padding:0 0 8px 22px; font-size:15px; line-height:1.55; color:var(--ink2);
}
.lpn-stage ul li::before{
  content:"→"; position:absolute; left:0; top:0; color:var(--accent); font-size:13px;
}
.lpn-gate{
  display:inline-block; font-size:13px; line-height:1.5;
  background:rgba(79,124,84,.08); color:#3d6642; border:1px solid rgba(79,124,84,.22);
  padding:7px 12px; border-radius:8px; margin:0 0 12px;
}
.lpn-gate b{font-weight:600;}
.lpn-plat{
  font-size:14.5px; line-height:1.6; color:var(--ink2);
  border-top:1px dashed var(--line); padding-top:12px; margin:0;
}
.lpn-plat b{color:var(--accent); font-weight:600;}

/* ── Result: the maths ───────────────────────────────────────────── */
.lpn-maths{
  border:1px solid var(--line); border-radius:18px; padding:28px 26px;
  background:#faf9f4; margin:22px 0 0;
}
.lpn-maths h3{
  font-family:Fraunces,Georgia,serif; font-weight:600; font-size:22px;
  letter-spacing:-.018em; margin:0 0 6px;
}
.lpn-maths .cap{margin:0 0 20px; font-size:15px; color:var(--ink2); line-height:1.55;}
.lpn-sum{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:0 0 8px;}
/* A number and its unit are one unbreakable unit; only whole terms wrap. */
.lpn-sum .grp{display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;}
.lpn-sum .op{font-size:17px; color:var(--ink3);}
.lpn-sum .n{
  font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(30px,5vw,42px);
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.lpn-sum .x{font-size:16px; color:var(--ink2);}
.lpn-sum .eq{
  font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(30px,5vw,42px);
  letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.lpn-fee{
  margin:14px 0 0; font-size:15.5px; line-height:1.6; color:var(--ink2);
}
.lpn-fee b{color:var(--good); font-weight:600;}
.lpn-slider{margin:20px 0 0;}
.lpn-slider label{
  display:block; font-size:13.5px; color:var(--ink3); margin:0 0 8px;
  font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase;
}
.lpn-slider input[type=range]{width:100%; accent-color:var(--accent); height:48px;}

.lpn-cta{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; margin:44px 0 0;}
/* ⚠️ Only the top/left/right borders are zeroed. `.alt` in marketing-site.css
   IS its underline (border-bottom) — a blanket `border:0` here silently
   turns the link into plain text. */
button.alt{background:none; border:0; border-bottom:1px solid rgba(106,76,241,.28);
  cursor:pointer; font-family:inherit; padding:12px 2px 4px; line-height:1;}
.lpn-src{
  margin:34px 0 0; font-size:13px; line-height:1.65; color:var(--ink2);
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.lpn-src a{color:var(--ink2); text-decoration:underline;}

@media (max-width:600px){
  .lpn-intro{padding:34px 0 52px;}
  .lpn-quiz{padding:32px 0 70px;}
  .lpn-qwrap{min-height:300px;}
  .lpn-door .dhead, .lpn-door .dbody{padding:22px 20px;}
  .lpn-stage{padding-left:46px;}
  .lpn-maths{padding:22px 20px;}
}

@media (prefers-reduced-motion: reduce){
  .lpn-q, .lpn-q.out, .lpn-door{animation:none;}
  .lpn-stage{opacity:1; transform:none; transition:none;}
  .lpn-stages .fill{transition:none;}
}