/* Quiz A: the Coursiv shell. Measurements taken from coursiv.io/dynamic (390 px viewport).
   Neutral palette, one accent: gold #dec085 for fills only. Gold as text uses #8a6a1f (5.05:1 on white). */
:root {
  --bg: #fff;
  --ink: #100018;
  --muted: #565b66;
  --card: #f3f5f6;
  --card-border: #ececec;
  --track: #ececec;
  --gold: #dec085;
  --gold-text: #8a6a1f;
  --gold-soft: #fbf6ec;
  --footer: #8a8f98;
  --consent-h: 0px;
  --consent-bg: #100018;
  --consent-accept-bg: #dec085;
  --consent-accept-fg: #100018;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.resuming #app { visibility: hidden; }

/* No max-width here: the header and progress track span the full browser width on desktop
   (spec 3.1). Only the content column (#app, below) and the fixed CTA bar are capped. */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- header ---------- */
/* Full width at every size. Desktop: back arrow far left, logo centered on the browser,
   counter far right. Phone: the same grid, just narrow enough that it reads as one row. */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); padding-top: env(safe-area-inset-top); }
/* Three columns, side columns equal (1fr), so the logo in the middle stays centered
   in the bar no matter whether the back arrow or the counter is showing. */
.bar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; gap: 4px; }
.back {
  width: 32px; height: 32px; margin-left: -6px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; justify-self: start; visibility: hidden;
}
.back svg { width: 22px; height: 22px; }
.has-back .back { visibility: visible; }
.logo { display: block; width: 30px; height: 28px; justify-self: center; }
.count { justify-self: end; font-size: 14px; font-weight: 700; visibility: hidden; }
.count b { color: var(--gold-text); }
/* Edge to edge under the header, no side gutter (spec: "runs the full width"). Track and fill
   both stay visibility:hidden together on Entry, Hits, Loader, Gate, so there is never a bare
   sliver of fill with no track. The fill's own width is driven by the server side answer
   count (see app.js), never by which screen is on-screen, so going back and forth never
   moves it backward. */
.progress { height: 4px; margin: 0 16px; background: var(--track); border-radius: 9999px; overflow: hidden; visibility: hidden; }
.progress i { display: block; height: 4px; width: 0; border-radius: 9999px; background: var(--gold); transition: width .3s ease-out; }
.has-progress .count, .has-progress .progress { visibility: visible; }

/* ---------- screens ---------- */
main { flex: 1; }
/* The reading column (spec 3.1): about 770px, centered, on every screen (questions, Hits,
   loader, gate, results). Phone stays screen width minus the existing 16px card padding,
   since 770px never binds below that. Everything app.js renders goes inside #app, including
   the in-flow Hit button, so this one rule covers all of it. */
#app { max-width: 770px; margin: 0 auto; width: 100%; }
/* Hits on desktop: center the block vertically in the space under the header, instead of it
   sitting at the top of a tall, mostly empty page. Phone stays top-aligned; a Hit's content is
   short enough by design to fit one screen there without scrolling, so centering adds nothing. */
@media (min-width: 700px) {
  .shell.hit-center #app { display: flex; flex-direction: column; justify-content: center; }
}
/* Entry screen (Coursiv layout, all widths): headline/sub/cards start right under the header,
   the legal lines sit pinned to the bottom of the screen on a normal viewport (margin-top:auto
   on the legal block is the flex spacer). Not fixed: on a short viewport it just scrolls with
   the page like everything else. */
.shell.entry-screen #app { display: flex; }
.screen.entry { display: flex; flex-direction: column; width: 100%; padding-top: 48px; }
.screen.entry .entry-head { margin-top: 0; }
.entry-legal-block { margin-top: auto; }
.screen { padding: 24px 16px 24px; animation: in .22s ease both; }
/* Room for the fixed .cta-wrap bar (Hits and multi-select questions), so it never covers content. */
.shell.cta-on .screen { padding-bottom: calc(88px + env(safe-area-inset-bottom) + var(--consent-h)); }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } .progress i { transition: none; } }

.q-title { margin: 0; font-size: 24px; line-height: 36px; font-weight: 700; text-align: center; }
.q-sub { margin: 8px 0 0; color: var(--muted); font-weight: 500; text-align: center; }

/* ---------- option cards ---------- */
/* Coursiv's list card, measured on their live page (25 Sep 2026), same on phone and desktop:
   80px min height, #F3F5F6, 1px #ECECEC border, 8px radius, 20px between cards. Emoji in a
   105 x 105 box on the left (glyph 48px, centered), 12px to the text. Text 16/24, 700, #100018. */
.options { display: grid; gap: 20px; margin-top: 24px; }
.opt {
  width: 100%; min-height: 80px; padding: 0 16px 0 0; display: flex; align-items: center; gap: 12px;
  text-align: left; font-size: 16px; font-weight: 700; line-height: 24px; color: #100018;
  background: #f3f5f6; border: 1px solid #ececec; border-radius: 8px; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.opt:active { transform: scale(.985); }
.opt .emo { flex: none; width: 105px; height: 105px; display: grid; place-items: center; font-size: 48px; line-height: 1; font-weight: 400; }
.opt .txt { flex: 1; }
.opt .check {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid #c3c8cf; background: #fff;
  display: grid; place-items: center; transition: background-color .15s, border-color .15s;
}
.opt.selected .check { background: var(--gold); border-color: var(--gold); }
.opt.selected .check::after { content: ""; width: 10px; height: 6px; border: solid #000; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.opt.full { justify-content: center; text-align: center; padding: 16px; }
.opt.selected { background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
@media (hover: hover) { .opt:hover { border-color: var(--gold); } }
.opt:focus-visible, .cta:focus-visible, .entry-card:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

/* entry: Coursiv's two picture cards, with an emoji in place of the picture */
.entry-head { margin: 16px 0 0; font-size: 28px; line-height: 36px; font-weight: 800; text-align: center; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.entry-card {
  padding: 0; border: 2px solid var(--gold); border-radius: 12px; overflow: hidden; background: var(--card);
  display: flex; flex-direction: column; cursor: pointer; text-align: center;
  transition: transform .1s, box-shadow .15s;
}
.entry-card:active { transform: scale(.985); }
.entry-card .pic { height: 120px; display: grid; place-items: center; font-size: 56px; line-height: 1; }
.entry-card .lbl {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 10px;
  background: var(--gold); color: #000; font-weight: 700; font-size: 16px; line-height: 22px;
}
.entry-card .lbl svg { flex: none; width: 16px; height: 16px; }
.entry-card.selected { box-shadow: 0 0 0 3px var(--gold-soft), 0 0 0 5px var(--gold); }

/* ---------- interstitials ---------- */
.proof-big { margin: 0; font-size: 26px; line-height: 34px; font-weight: 800; text-align: center; color: var(--gold-text); }
/* Smaller than full width on mobile (82%, centered), so there is visible gutter on both
   sides instead of the photo running edge to edge. */
.photo-card { position: relative; margin: 0 auto; width: 82%; max-width: 400px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #e9e4dc; }
.photo-card picture { display: block; height: 100%; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Fade at the bottom, 23% tall (was 38%, cut by 40%). */
.photo-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 23%; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); }
.hit1-text { margin-top: 16px; text-align: center; }
.hit-body { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 24px; }
/* Desktop: photo and text side by side, like Coursiv, text on the left. Mobile keeps the
   photo first (DOM order), text below; desktop flips that with `order`, no markup change. */
@media (min-width: 700px) {
  .screen[data-screen="hit1"] { display: flex; align-items: center; gap: 56px; }
  .screen[data-screen="hit1"] .photo-card { order: 2; flex: 1 1 0; width: 100%; max-width: none; margin: 0; }
  .screen[data-screen="hit1"] .hit1-text { order: 1; flex: 1 1 0; margin-top: 0; text-align: left; }
  /* .proof-big sets its own text-align above, so the inherited left from .hit1-text needs saying again here. */
  .screen[data-screen="hit1"] .hit1-text .proof-big { text-align: left; }
}
.hit-small { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.center { text-align: center; }
.tp { width: 112px; height: auto; margin: 14px auto 0; }

.hit-title { margin: 8px 0 0; font-size: 24px; line-height: 32px; font-weight: 800; }
/* Hit 3, Coursiv's interstitial: full column photo card (22:15, about 343 x 234 on a 375px
   phone), 12px gap, big line 20px, body 14/20 grey, all left aligned, then the gold box.
   Desktop: the column is held to the button's 448px, so photo, text and Continue line up
   and the screen fits a 1440 x 800 window without scrolling. */
.hit3-photo { aspect-ratio: 22 / 15; border-radius: 16px; overflow: hidden; background: #e9e4dc; }
.hit3-photo picture { display: block; height: 100%; }
.hit3-photo img { width: 100%; height: 100%; object-fit: cover; }
.hit3-big { margin: 12px 0 0; font-size: 20px; line-height: 28px; font-weight: 700; text-align: left; }
.hit3-body { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: #565b66; text-align: left; }
@media (min-width: 700px) {
  .screen[data-screen="hit3"] { width: 100%; max-width: 480px; margin: 0 auto; }
}
.good-news { margin: 20px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-text); font-weight: 700; line-height: 22px; }
.loader-title { font-size: 22px; line-height: 30px; }
.screen[data-screen="loader"] .q-sub { margin-bottom: 16px; }

/* ---------- fixed button ---------- */
.cta-wrap {
  /* position:fixed escapes #app's 770px column (it's relative to the viewport), so it is
     centered here the same way, not pinned to the browser edges. */
  position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 770px; bottom: var(--consent-h); z-index: 20;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg) 28%);
}
.cta {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 448px; height: 56px; margin: 0 auto;
  border: 0; border-radius: 8px; background: var(--gold); color: #000; cursor: pointer; text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.cta:active { transform: scale(.99); }
.cta[disabled] { opacity: .6; cursor: default; }
/* In-flow Hit button (spec: Continue sits after the content, like Coursiv). Auto left/right
   margins center it (it inherits max-width:448px from .cta above) instead of pinning it to
   the left edge of the column, which is what a fixed 16px margin was doing on desktop. On
   phone the button is nearly full width anyway, so centering makes no visible difference there. */
.cta-static { width: calc(100% - 32px); margin: 24px auto calc(24px + env(safe-area-inset-bottom)); }

/* ---------- loader ---------- */
.ring { position: relative; width: 128px; height: 128px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--track); }
.ring .fill { stroke: var(--gold); stroke-linecap: round; }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.steps { list-style: none; margin: 16px auto 0; padding: 0; max-width: 320px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #9aa0a8; font-weight: 600; transition: color .3s; }
.steps li.active, .steps li.done { color: var(--ink); }
.steps .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--track); display: grid; place-items: center; }
.steps li.active .dot { border-color: var(--gold); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps li.done .dot { border-color: var(--gold); background: var(--gold); }
.steps li.done .dot::after { content: ""; width: 9px; height: 5px; border: solid #000; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
/* Testimonial cards (Coursiv magic-page format): one at a time, swipeable via native scroll-snap
   (no custom touch handling needed), auto-rotated in app.js. */
.quotes {
  display: flex; margin: 16px 0 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 12px;
}
.quotes::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--card-border); box-shadow: 0 4px 16px rgba(16, 0, 24, .06);
}
.tm-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 800; color: var(--ink); }
.tm-text { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.tm-byline { margin-top: 8px; font-size: 13px; line-height: 18px; }
.tm-name { font-weight: 700; color: var(--ink); }
.tm-role { font-weight: 500; color: var(--muted); }

/* ---------- gate ---------- */
.gate-form { margin-top: 24px; display: grid; gap: 12px; }
.field {
  width: 100%; height: 56px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; outline: none;
}
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #fff; }
.field.bad { border-color: #c0392b; }
.err { margin: -4px 0 0; min-height: 0; color: #b3261e; font-size: 14px; }
.err:empty { display: none; }
.lock { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.lock svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.lock a { color: inherit; text-decoration: underline; }
.gate-form .cta { margin-top: 4px; max-width: none; }
.legal-line { margin: 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 18px; }
.legal-line a { color: inherit; text-decoration: underline; }
.legal-line + .legal-line { margin-top: 2px; }

/* ---------- footer ---------- */
/* Spec 8.6: entry screen and the bottom of the results page only. Hidden everywhere else
   (Hits, questions, loader, gate), toggled by app.js via .has-footer on .shell. */
.site-footer { display: none; margin-top: auto; }
.shell.has-footer .site-footer { display: block; }

/* ---------- results (spec 6) ---------- */
.results { padding-bottom: 32px; }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.you-qualify { margin: 8px 0 0; font-size: 32px; line-height: 40px; font-weight: 900; letter-spacing: .01em; color: var(--gold-text); text-align: center; }
.you-qualify.qualify-in { animation: qualifyIn .3s ease-out both; }
@keyframes qualifyIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .you-qualify.qualify-in { animation: none; } }

.gauge { margin: 20px 0 0; padding: 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card); }
.gauge-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--gold-text); }
.gauge-word { margin-top: 4px; font-size: 22px; line-height: 28px; font-weight: 800; }
.gauge-bar { height: 7.2px; margin: 10px 0 0; border-radius: 3.6px; background: var(--track); overflow: hidden; }
/* Green-to-intense-red gradient, fixed to the TRACK's width in real pixels (set by app.js from
   .gauge-bar's own clientWidth), not a percentage. A percentage background-size is relative to
   this element's OWN box, which is exactly what is animating - so it would rescale the gradient
   continuously as the width grows (color at the edge briefly wrong mid-animation). Pixels don't:
   the gradient's absolute position/size never changes, only how much of it is visible (the
   element's width, clipped by .gauge-bar's own overflow:hidden) grows from 0 to his score over
   900ms, once, on scroll into view (app.js). The color at the fill's trailing edge is therefore
   always exactly his score's true color on the 0-12 scale, never a squeezed-then-stretched one. */
.gauge-fill {
  display: block; height: 100%; width: 0; border-radius: 3.6px;
  background-image: linear-gradient(to right, #3FA34D 0%, #E6C229 25%, #F08A24 50%, #E53935 75%, #C1121F 100%);
  background-repeat: no-repeat; background-position: left center;
  transition: width .9s ease-out;
}
@media (prefers-reduced-motion: reduce) { .gauge-fill { transition: none; } }
.gauge-copy { margin: 10px 0 0; font-size: 15px; line-height: 22px; }

.qual p { margin: 0 0 14px; font-size: 17px; line-height: 27px; }
.qual h2 { margin: 0 0 10px; font-size: 20px; line-height: 27px; font-weight: 800; }

.qual { margin-top: 28px; padding: 20px 14px; border: 2px solid var(--gold); border-radius: 14px; }
.results > .qual:first-child { margin-top: 8px; }
.qual-label { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--gold-text); }
.qual-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qual-head picture { flex: none; }
.qual-head img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: #e9e4dc; }
.qual-head h2 { margin: 0; }
.qual .cta { max-width: none; }
.cta.wa { gap: 8px; height: auto; min-height: 56px; padding: 8px 10px; text-decoration: none; font-size: 13px; line-height: 18px; letter-spacing: 0; text-align: center; background: #25d366; color: #fff; transition: background-color .15s; }
.cta.wa:active { background: #075e54; }
@media (hover: hover) { .cta.wa:hover { background: #075e54; } }
.screen.still { animation: none; }
.cta.wa svg { width: 22px; height: 22px; flex: none; }
.wa-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.wa-row .cta { flex: 1; }
.qr { display: none; }
.qr.on { display: block; flex: none; width: 132px; margin: 0; text-align: center; }
.qr-code { width: 120px; height: 120px; margin: 0 auto; padding: 6px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr figcaption { margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--muted); }
.wa-row { align-items: flex-start; }
.qual-under { margin: 12px 0 0 !important; color: var(--muted); font-size: 14px !important; line-height: 20px !important; text-align: center; }
.proof { margin: 12px 0 0; text-align: center; font-weight: 700; font-size: 14px; }