/* ============================================================
   The Brief Test — styles (rev. 3: Readymag/Syne redesign)
   Display: Syne. Body: General Sans. No Inter.
   Full-bleed colour blocks, big numerals, candy dimension colours.
   All class/id hooks preserved for app.js.
   ============================================================ */

:root {
  /* neutrals — warm grey, chosen not defaulted */
  --ink:        #1B1917;
  --ink-70:     #4A443D;
  --ink-60:     #6E665E;
  --paper:      #ECE8E2;
  --paper-2:    #E4DED4;
  --card:       #FBFAF7;
  --line:       #D9D3CB;

  /* brand accents */
  --lav:        #A99BF5;
  --lav-dk:     #8E7DEE;
  --purple:     #5A49C8;   /* small text on light, AA */
  --orange:     #EC683E;
  --orange-tx:  #B23A18;

  /* dimension candy colours (must match app.js DIM_META + landing chips) */
  --d1: #ECD227;  --d2: #7FB2FF;  --d3: #F2995E;
  --d4: #A6BE59;  --d5: #A99BF5;  --d6: #F35757;

  /* type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --sans: "General Sans", system-ui, -apple-system, sans-serif;

  --t-hero:    clamp(2.6rem, 7vw, 5rem);
  --t-display: clamp(2rem, 5vw, 3.4rem);
  --t-h2:      clamp(1.55rem, 3.6vw, 2.4rem);
  --t-body:    1.0625rem;
  --t-small:   0.8125rem;
  --t-score:   clamp(4.5rem, 15vw, 9rem);
  --t-qnum:    clamp(3.4rem, 11vw, 6.5rem);

  --inner: 64rem;
  --text:  40rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

.wrap { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

a { color: inherit; }
.lnk { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lnk:hover { opacity: .62; }

/* ---------- full-bleed blocks ---------- */
.block { width: 100%; }
.block-in {
  max-width: var(--inner);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem);
}
.b-ink    { background: radial-gradient(130% 120% at 18% 0%, #2A2140 0%, #1B1917 52%, #120F0E 100%); color: var(--paper); }
.b-paper  { background: radial-gradient(120% 120% at 30% 0%, #F1EDE6 0%, #ECE8E2 55%, #E4DED4 100%); color: var(--ink); }
.b-lav    { background: radial-gradient(120% 130% at 85% 8%, #BCB0FA 0%, #A99BF5 46%, #9385EF 100%); color: var(--ink); }
.b-orange { background: radial-gradient(120% 130% at 80% 6%, #F2895F 0%, #EC683E 48%, #D8481D 100%); color: #fff; }
/* quiz block paints itself the current dimension's colour (--qc set by app.js) */
#quiz-block { background: radial-gradient(120% 130% at 80% 4%, color-mix(in srgb, var(--qc, #F1EDE6) 72%, #fff), var(--qc, #E4DED4)); color: var(--ink); }

/* ---------- typography ---------- */
h1, h2, .display, .score, .archetype, .q-num, .q-text, .seg-h {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.display { font-size: var(--t-display); }
.lede { font-size: 1.1rem; color: var(--ink-60); max-width: var(--text); }
.b-ink .lede, .b-orange .lede { color: rgba(255,255,255,.82); }
.b-lav .lede { color: var(--ink-70); }
.small { font-size: var(--t-small); color: var(--ink-60); }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.b-ink .eyebrow, .b-orange .eyebrow { color: rgba(255,255,255,.72); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em;
  padding: .95rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--lav); outline-offset: 3px; }
.btn .arw { display: inline-block; transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.btn:hover .arw { transform: translateX(4px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--lav { background: var(--lav); border-color: var(--lav); color: var(--ink); }
.btn--lav:hover { background: var(--lav-dk); border-color: var(--lav-dk); }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; border-color: #fff; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; }
.b-orange .btn--ghost:hover, .b-ink .btn--ghost:hover { color: var(--ink); }
.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   LANDING
   ============================================================ */
/* hero */
.hero { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 880px){ .hero { grid-template-columns: 1.05fr .95fr; } }
.hero-h { font-size: var(--t-hero); margin-top: .6rem; }
.hero-h .mark { color: var(--orange); }
.hero-copy .lede { margin-top: 1.35rem; }
.hero-copy .btn-row { margin-top: 2.1rem; }
.hero-copy .small { color: rgba(255,255,255,.6); }

/* sample scorecard */
.scorecard {
  position: relative; background: var(--card); color: var(--ink); border-radius: 22px;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.55);
  transform: rotate(-2deg);
}
.sc-tier { font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-tx); }
.sc-score { font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem,11vw,5rem); line-height: .85; color: var(--orange); margin: .35rem 0 .1rem; letter-spacing: -.03em; }
.sc-score em { font-style: normal; font-weight: 700; font-size: 1.5rem; color: var(--ink-60); }
.sc-arch { font-family: var(--display); font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.sc-bars { display: grid; gap: .5rem; }
.sc-bars span { display: block; height: 8px; border-radius: 6px; background: var(--line); position: relative; }
.sc-bars span::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 6px; }
.sc-bars span.sc-weak::after { background: var(--orange); }
.sq { position: absolute; width: 30px; height: 30px; border-radius: 8px; z-index: -1; }
.sq-a { background: var(--d4); top: -14px; left: -14px; transform: rotate(12deg); }
.sq-b { background: var(--d2); bottom: -16px; right: 26px; transform: rotate(-10deg); }
.sq-c { background: var(--d1); top: 32%; right: -15px; transform: rotate(8deg); }

/* payoff */
.payoff-h { font-family: var(--display); font-weight: 800; font-size: var(--t-h2); letter-spacing: -.02em; margin-bottom: .9rem; }
.payoff .lede { max-width: 44rem; }

/* seven types */
.types > h2 { font-size: var(--t-h2); margin-bottom: 1.6rem; }
.type-grid { list-style: none; display: grid; grid-template-columns: repeat(2,1fr); gap: .9rem; }
@media (min-width: 760px){ .type-grid { grid-template-columns: repeat(3,1fr); } }
.type-chip {
  background: var(--c); color: var(--ink); border-radius: 18px;
  padding: 1.15rem 1.2rem 1.3rem; min-height: 7rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
}
.type-chip b { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.type-chip span { font-family: var(--sans); font-weight: 500; font-size: var(--t-small); opacity: .75; }
.type-chip:hover { transform: translateY(-4px) rotate(-1deg); }

/* stat band — full-bleed, big count-up */
.statband { text-align: center; }
.statband .big { font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, 12vw, 7rem); line-height: .9; letter-spacing: -.03em; }
.statband p { font-family: var(--display); font-weight: 700; font-size: var(--t-h2); letter-spacing: -.02em; max-width: 24ch; margin: .4rem auto 0; }
.statband .small { color: var(--ink-70); display: block; margin-top: .8rem; }

/* final cta */
.finalcta { text-align: center; }
.finalcta .display { margin-bottom: 1.6rem; }
.finalcta .btn-row { justify-content: center; }
.finalcta .small { color: rgba(255,255,255,.7); }

/* ============================================================
   SEGMENT + QUIZ  (full-bleed)
   ============================================================ */
.quiz-inner { width: 100%; max-width: 52rem; margin: 0 auto; }
.quiz-top { display: flex; justify-content: space-between; font-size: .78rem; letter-spacing: .04em; opacity: .65; margin-bottom: clamp(1.75rem, 6vh, 3rem); }

/* segment */
.seg-eyebrow { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); font-weight: 700; text-align: center; opacity: .7; }
.seg-h { font-size: clamp(2.1rem, 6vw, 3.4rem); text-align: center; margin: 1rem 0 .85rem; }
.seg-lede { text-align: center; max-width: 34rem; margin: 0 auto clamp(2rem,5vh,3rem); color: var(--ink-70); }
.seg-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px){ .seg-cards { grid-template-columns: 1fr 1fr; } }
.seg-card {
  text-align: left; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.85rem; border: none; border-radius: 18px; background: var(--card);
  box-shadow: 0 14px 30px -22px rgba(0,0,0,.4);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease;
}
.seg-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(0,0,0,.45); }
.seg-card b { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
.seg-card span:last-child { color: var(--ink-60); font-size: .95rem; }
.seg-ico { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--ink) 0 50%, transparent 50% 100%); border: 2px solid var(--ink); }

/* quiz */
.q-num { font-size: var(--t-qnum); line-height: .82; }
.q-of { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-top: .5rem; }
.q-dots { display: flex; gap: .5rem; margin: 1.25rem 0 1.6rem; flex-wrap: wrap; }
.q-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .28; }
.q-dots .dot.done { opacity: 1; }
.q-dots .dot.cur { opacity: 1; background: transparent; box-shadow: inset 0 0 0 2px currentColor; width: 11px; height: 11px; }
.q-pill { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: #fff; border-radius: 999px; padding: .45rem 1rem; margin-bottom: 1.4rem; }
.q-text { font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.08; max-width: 20ch; }

/* flag answer buttons */
.options { list-style: none; display: grid; gap: .7rem; margin-top: 2rem; max-width: 42rem; }
.option { width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.opt-inner {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem 1.1rem 1.25rem;
  background: var(--card); border: 1.5px solid transparent; border-radius: 14px;
  clip-path: polygon(0 0, 97% 0, 100% 50%, 97% 100%, 0 100%);
  transition: transform .14s cubic-bezier(.2,.8,.3,1), background .14s ease;
}
.opt-radio { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.opt-text { flex: 1; text-align: left; font-family: var(--sans); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.opt-chev { font-size: 1.35rem; line-height: 1; color: var(--ink-60); opacity: .5; }
.option:hover .opt-inner { transform: translateX(4px); }
.option[aria-pressed="true"] .opt-inner { border-color: var(--ink); background: #fff; }
.option[aria-pressed="true"] .opt-radio { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px #fff; }

.q-foot { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.25rem; flex-wrap: wrap; }
.q-back { background: none; border: none; color: inherit; cursor: pointer; font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 0; opacity: .7; }
.q-back:hover { opacity: 1; }
.q-hint { font-size: .85rem; opacity: .7; }

/* ============================================================
   GATE
   ============================================================ */
.gate-wrap { max-width: 34rem; margin: 0 auto; }
.gate-wrap .display { font-size: var(--t-display); }
.gate-wrap .lede { margin-top: .9rem; }
.field { display: grid; gap: .4rem; margin: 1.75rem 0 1rem; }
.field label { font-size: var(--t-small); font-weight: 600; }
.field input {
  font-family: var(--sans); font-size: var(--t-body);
  padding: .95rem 1.05rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
}
.field input:focus { outline: 2px solid var(--lav); outline-offset: 1px; border-color: var(--lav); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink-60); }
.consent input { margin-top: .2rem; accent-color: var(--lav); }

/* ============================================================
   RESULT
   ============================================================ */
.result-wrap { max-width: 44rem; margin: 0 auto; }
.tier { display: inline-block; font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-tx); margin-bottom: 1.25rem; }
.score-wrap { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.score { font-size: var(--t-score); font-weight: 800; color: var(--orange); line-height: .82; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.score-outof { font-size: var(--t-h2); color: var(--ink-60); font-family: var(--display); font-weight: 700; }
.archetype { font-size: var(--t-display); margin-bottom: 1rem; }

.dims { display: grid; gap: .6rem; margin: 1.75rem 0; }
.dim { display: grid; grid-template-columns: 8rem 1fr auto; gap: .75rem; align-items: center; font-size: var(--t-small); }
.dim-track { display: block; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.dim-fill { display: block; height: 8px; background: var(--ink); border-radius: 999px; width: 0; transition: width .7s cubic-bezier(.2,.8,.3,1); }
.dim.weak .dim-fill { background: var(--orange); }
.dim.weak .dim-name { color: var(--orange-tx); font-weight: 700; }

.result-block { margin-top: 1.35rem; }
.result-block .label { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-60); font-weight: 700; margin-bottom: .3rem; }

/* free template download — the reward for the email */
.template-card {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 16px;
  text-decoration: none; color: var(--ink);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, border-color .16s ease;
}
.template-card:hover { transform: translateY(-2px); border-color: var(--lav); box-shadow: 0 16px 32px -22px rgba(0,0,0,.4); }
.template-card .tc-ico { flex: 0 0 auto; width: 46px; height: 56px; border-radius: 6px; background: var(--lav); position: relative; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); }
.template-card .tc-ico::before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 14px 14px 0; border-style: solid; border-color: transparent var(--paper) transparent transparent; }
.template-card .tc-ico::after { content: "DOC"; position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--sans); font-weight: 700; font-size: .6rem; letter-spacing: .06em; color: var(--ink); }
.template-card .tc-body { flex: 1 1 14rem; }
.template-card .tc-body b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; display: block; }
.template-card .tc-body span { font-size: .9rem; color: var(--ink-60); }

/* ---------- result: reputable briefing sources ---------- */
.resources { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(27,25,23,.12); }
.res-links { list-style: none; margin: .7rem 0 0; padding: 0; }
.res-links li { margin-bottom: .75rem; }
.res-links li:last-child { margin-bottom: 0; }
.res-links a { font-weight: 600; }
.res-links span { display: block; font-size: var(--t-small); color: var(--ink-60); margin-top: .1rem; }

/* ============================================================
   CONSENT BANNER
   ============================================================ */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: 1rem clamp(1rem, 5vw, 2rem);
  display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
.consent-banner p { font-size: var(--t-small); max-width: 40rem; }
.consent-banner a { color: var(--paper); text-decoration: underline; }
.consent-banner .btn { padding: .55rem 1.2rem; font-size: var(--t-small); }
.consent-banner .btn:not(.btn--ghost) { background: var(--lav); border-color: var(--lav); color: var(--ink); }
.consent-banner .btn:not(.btn--ghost):hover { background: var(--lav-dk); border-color: var(--lav-dk); }
.consent-banner .btn--ghost { color: var(--paper); border-color: var(--paper); }
.consent-banner .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.hidden { display: none !important; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: rgba(236,232,226,.6); }
.foot .block-in { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.foot p { font-size: var(--t-small); }
.foot a { color: rgba(236,232,226,.7); }

/* ---------- views ---------- */
.view { display: none; }
.view.active { display: flex; flex-direction: column; flex: 1 0 auto; animation: fade .28s ease; }
/* short single-block views: let the block fill so its colour reaches the footer */
#view-segment.active > .block,
#view-gate.active > .block,
#view-result.active > .block,
#view-quiz.active > .block { flex: 1 0 auto; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .view.active { animation: none; } }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .dim { grid-template-columns: 6rem 1fr auto; }
}