/* ============================================================================
   Quiz funnel — app-shell layout, dark, mobile-first.

   Layout rules this file enforces, in priority order:
     1. The viewport IS the screen. 100svh flex column, no page scroll.
     2. Answers live in the thumb zone. Titles anchor to the top, options and
        CTAs anchor to the BOTTOM via margin-top:auto — so a 2-option screen
        and a 5-option screen are the same height and nothing jumps between
        steps. This is why the markup needs no per-screen height juggling.
     3. Tap targets are big. Minimum 56px, full-bleed width.
   ========================================================================= */

:root {
  /* surfaces */
  --bg:          #08080A;
  --surface:     #121216;
  --surface-2:   #1A1A20;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  /* ink */
  --ink:    #F4F4F5;
  --ink-2:  #A1A1AA;
  --ink-3:  #6B6B76;

  /* accent — swap these two and the whole funnel re-skins */
  --accent:     #C6FF4A;
  --accent-ink: #0A0A0B;
  --accent-dim: rgba(198,255,74,.14);
  --accent-glow: rgba(198,255,74,.30);

  --danger: #FF6B6B;

  --r:    16px;
  --r-lg: 22px;
  --max:  560px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.42,.64,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
html, body { overscroll-behavior-y: none; }   /* kill iOS rubber-band bounce */
body {
  margin: 0;
  /* A DEFINITE height, not just min-height. With min-height alone the flex
     column grows past the viewport when a tall screen (the 4-field capture
     form) exceeds it, and the footer gets pushed below the fold — the page
     scrolls instead of the screen area. A fixed height makes .app absorb the
     overflow and scroll internally, which is the whole app-shell premise. */
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Ambient glow — keeps a flat black screen from feeling dead. */
body::before {
  content: '';
  position: fixed;
  top: -30vh; left: 50%; transform: translateX(-50%);
  width: min(140vw, 900px); height: 70vh;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-dim), transparent 70%);
  opacity: .5; pointer-events: none; z-index: 0;
}

/* ---- top chrome ---------------------------------------------------------- */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 20px 10px;
}
.back {
  flex: none; width: 38px; height: 38px; padding: 0 0 3px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  font-size: 21px; line-height: 1; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.back:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); }
.brandmark {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.spacer { flex: 1; }

.progress {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 4px 20px 0;
}
.progress .track {
  height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.07);
}
.progress .bar {
  height: 100%; width: 0; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width .5s var(--ease);
}
.counter {
  margin-top: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---- the screen ---------------------------------------------------------- */
.app {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 20px 20px 8px;
  /* If a screen genuinely can't fit (short phone in landscape, huge text
     size, keyboard open), scroll THIS region — never the whole page. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The card is the screen: it fills the app area and distributes its own
   children. No background/border — the page itself is the surface. */
.card {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  opacity: 1; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card.enter { opacity: 0; transform: translateY(14px); }
.card.center { justify-content: center; text-align: center; }

/* THUMB ZONE — two layouts, because the two screen kinds want opposite things.

   ANSWER screens (options / scale): centred. Bottom-pinning these left a dead
   void between the question and the answers on 2-3 option screens. Centred,
   the answers land mid-screen — prime thumb territory — at any option count.

   ACTION screens (a Continue button or a form): text reads from the top, the
   action sits at the bottom under the resting thumb. Centring these left the
   button stranded mid-screen with a void beneath it. */
.card { justify-content: center; }

.card:not(.center):has(> .btn),
.card:not(.center):has(> .form) { justify-content: flex-start; }
.card:not(.center) > .btn,
.card:not(.center) > .form { margin-top: auto; }

/* The calculating and success screens stay genuinely centred. */
.card.center > .btn { margin-top: 26px; }

.btn-row { margin-top: 22px; }
.form > .btn, .form > .btn-row { margin-top: 18px; }

/* ---- type ---------------------------------------------------------------- */
.eyebrow {
  display: inline-block; align-self: flex-start;
  padding: 5px 11px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.card.center .eyebrow { align-self: center; }

.card h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 7.5vw, 40px); line-height: 1.08;
  letter-spacing: -.033em; font-weight: 700;
}
.card h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 6vw, 30px); line-height: 1.16;
  letter-spacing: -.026em; font-weight: 650;
}
.card p { margin: 0 0 16px; color: var(--ink-2); }
.card .lead { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.card .sub { font-size: 15px; color: var(--ink-3); }
.fineprint { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin: 14px 0 0; }
.fineprint a { color: var(--ink-3); }

/* ---- bullets ------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 4px 0 18px; }
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  font-size: 15.5px; line-height: 1.4; color: var(--ink-2);
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid rgba(198,255,74,.35);
}
.ticks li::after {
  content: ''; position: absolute; left: 6.5px; top: 8.5px;
  width: 5px; height: 8px; border: solid var(--accent);
  border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

/* ---- answer options ------------------------------------------------------ */
.options {
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: opt; padding-top: 24px;
}
.opt {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 62px; padding: 13px 16px;
  text-align: left; font: inherit; cursor: pointer;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s, background .18s, transform .12s var(--spring);
  animation: optIn .38s var(--ease) backwards;
}
.opt:nth-child(1) { animation-delay: .02s; }
.opt:nth-child(2) { animation-delay: .06s; }
.opt:nth-child(3) { animation-delay: .10s; }
.opt:nth-child(4) { animation-delay: .14s; }
.opt:nth-child(5) { animation-delay: .18s; }
.opt:nth-child(6) { animation-delay: .22s; }
@keyframes optIn { from { opacity: 0; transform: translateY(10px); } }

/* letter badge, generated — no markup needed */
.opt::before {
  counter-increment: opt;
  content: counter(opt, upper-alpha);
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  transition: all .18s;
}
.opt:hover { border-color: var(--line-strong); background: var(--surface-2); }
.opt:active { transform: scale(.985); }
.opt.on {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.opt.on::before {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink);
}
.opt-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.opt-label { font-size: 15.5px; font-weight: 550; line-height: 1.3; }
.opt-desc { font-size: 13px; line-height: 1.35; color: var(--ink-3); }

/* the chevron becomes a check once selected — set via CSS so the engine
   doesn't need to know about it */
.opt-mark { font-size: 0; flex: none; width: 20px; text-align: center; }
.opt-mark::after {
  content: '›'; font-size: 20px; color: var(--ink-3); transition: color .18s;
}
.opt.on .opt-mark::after { content: '✓'; font-size: 15px; color: var(--accent); }

/* ---- 1–10 scale ---------------------------------------------------------- */
.scale {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  padding-top: 20px; margin-bottom: 12px;
}
.dot {
  aspect-ratio: 1; min-height: 52px;
  border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
  transition: all .16s;
}
.dot:hover { border-color: var(--line-strong); color: var(--ink); }
.dot.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 20px var(--accent-glow);
}
.scale-ends {
  display: flex; justify-content: space-between;
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3);
}
@media (min-width: 400px) { .scale { grid-template-columns: repeat(10, 1fr); } }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: block; width: 100%; min-height: 56px;
  padding: 16px 22px; margin-top: 18px;
  border: 0; border-radius: var(--r);
  font: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: filter .16s, transform .12s var(--spring), opacity .16s;
}
.btn.primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 26px rgba(198,255,74,.20);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.985); }
.btn.lg { min-height: 60px; font-size: 17px; }
.btn:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }
.btn.ghost {
  background: transparent; color: var(--ink-2);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { color: var(--ink); border-color: var(--line-strong); }

.btn-row { display: flex; gap: 10px; margin-top: auto; }
.btn-row .btn { margin-top: 0; flex: 1; }
.btn-row .btn.ghost { flex: 0 0 34%; }

/* ---- intro pricing ------------------------------------------------------- */
.pricing { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; flex-wrap: wrap; }
.struck {
  position: relative;
  font-size: 26px; font-weight: 600; color: var(--ink-3);
}
.struck::after {
  content: ''; position: absolute; left: -3%; right: -3%; top: 52%;
  height: 2px; background: var(--danger); transform: rotate(-7deg);
}
.now {
  padding: 7px 16px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 0 26px var(--accent-glow);
}

/* ---- form ---------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 13px; padding-top: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input {
  width: 100%; min-height: 56px; padding: 15px 16px;
  font: inherit; font-size: 16px;   /* 16px stops iOS zoom-on-focus */
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .16s, box-shadow .16s;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.field-err { font-size: 12px; color: var(--danger); }
.field.invalid input { border-color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- popup (step 14) ----------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: rgba(8,8,10,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .22s var(--ease);
}
.overlay.shown { opacity: 1; }
.popup {
  width: 100%; max-width: 380px; padding: 34px 26px 26px;
  text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.9) translateY(10px);
  transition: transform .32s var(--spring);
}
.overlay.shown .popup { transform: none; }
.popup-glyph {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--accent-dim);
  border: 1px solid rgba(198,255,74,.3);
  font-size: 27px;
}
.popup h3 {
  margin: 0 0 22px;
  font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700;
}
.popup .btn { margin-top: 0; }

/* ---- calculating screen -------------------------------------------------- */
.spinner {
  width: 40px; height: 40px; margin: 0 auto 26px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--accent);
  border-radius: 50%; animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.checklist { list-style: none; padding: 0; margin: 0; text-align: left; }
.checklist li {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0; font-size: 15px; color: var(--ink-3);
  opacity: .4; transition: opacity .45s var(--ease), color .45s;
}
.checklist li.done { opacity: 1; color: var(--ink); }
.ck {
  position: relative; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--line); transition: all .45s var(--ease);
}
.checklist li.done .ck { background: var(--accent); border-color: var(--accent); }
.checklist li.done .ck::after {
  content: ''; position: absolute; left: 7px; top: 4px;
  width: 5px; height: 9px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- success ------------------------------------------------------------- */
.result .glyph {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 30px; font-weight: 700;
  box-shadow: 0 0 40px var(--accent-glow);
  animation: pop .5s var(--spring) backwards;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.result .ticks { display: inline-block; text-align: left; margin: 6px 0 4px; }

/* ---- footer -------------------------------------------------------------- */
.foot {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 10px 20px max(14px, env(safe-area-inset-bottom));
  font-size: 11px; color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot .sep { margin: 0 7px; opacity: .5; }

/* ---- small phones (iPhone SE and similar) -------------------------------- */
@media (max-width: 380px) {
  .app { padding: 14px 16px 6px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .progress { padding-left: 16px; padding-right: 16px; }
  .opt { min-height: 58px; padding: 12px 14px; gap: 12px; }
  .opt-label { font-size: 15px; }
  .options { gap: 9px; }
}

/* ---- short viewports: reclaim vertical space rather than scrolling ------- */
/* The 4-field capture screen is the tightest in the funnel. On a 667px phone
   it pushed the submit button below the fold, which costs completions on the
   one screen that matters most — so compact the form hard here. */
@media (max-height: 730px) {
  .form { gap: 9px; padding-top: 14px; }
  .field { gap: 4px; }
  .field-label { font-size: 10.5px; letter-spacing: .06em; }
  .field input { min-height: 48px; padding: 12px 14px; }
  .form > .btn { min-height: 52px; margin-top: 14px; }
  .card:has(> .form) .fineprint { display: none; }
  .card:has(> .form) h2 { font-size: clamp(20px, 5vw, 24px); margin-bottom: 8px; }
  .card:has(> .form) .sub { font-size: 13.5px; margin-bottom: 10px; }
  .card:has(> .form) .eyebrow { margin-bottom: 10px; padding: 4px 9px; }
}

/* Last 50px on a 667px phone: drop the sub-line on the capture screen only
   (`:has(input[type=email])` targets it precisely) so the submit button clears
   the fold. The other form screen — the optional job title — keeps its copy. */
@media (max-height: 700px) {
  .card:has(input[type="email"]) .sub { display: none; }
  .card:has(input[type="email"]) h2 { margin-bottom: 4px; }
  /* 46px still clears the 44px iOS minimum tap target. */
  .card:has(input[type="email"]) .field input { min-height: 46px; padding: 11px 14px; }
  .card:has(input[type="email"]) .form { gap: 8px; padding-top: 8px; }
  .card:has(input[type="email"]) .eyebrow { margin-bottom: 6px; }

  /* The real win: four stacked labels cost ~90px. Hide them visually (they
     stay in the a11y tree) and let the placeholders name the fields. This is
     what actually clears the submit button on a 667px phone — shaving
     paddings did not, because the form is bottom-anchored, so trimming its
     height moved its top edge, not its bottom. */
  .card:has(input[type="email"]) .field-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .card:has(input[type="email"]) .field { gap: 0; }

  /* Stop bottom-anchoring the capture form on short screens. Anchored to the
     bottom, trimming its height only moved its top edge — the button stayed
     pinned past the fold. Top-aligned, every pixel saved above it pulls the
     button up. */
  .card:has(input[type="email"]) { justify-content: flex-start; }
  .card:has(input[type="email"]) > .form { margin-top: 6px; }
}

@media (max-height: 700px) {
  .card h1 { font-size: clamp(25px, 6.6vw, 32px); }
  .card h2 { font-size: clamp(21px, 5.4vw, 26px); }
  .options { padding-top: 14px; gap: 8px; }
  .opt { min-height: 56px; }
  .ticks li { margin-bottom: 9px; }
  .btn { min-height: 54px; padding: 14px 20px; }
}
@media (max-height: 580px) {
  .opt-desc { display: none; }        /* label alone still answers the question */
  .card .sub { display: none; }
}

/* ---- landscape phones ---------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .card { justify-content: flex-start; }
  .card > .options, .card > .form, .card > .scale, .card > .btn { margin-top: 16px; }
  .scale { grid-template-columns: repeat(10, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}