/* ═══════════════════════════════════════════════════════════════
   IAH Heritage Discovery Quiz — quiz.css  v4
   Design: Cinzel · Cormorant Garamond · Inter
   Palette: Gold #C9A84C on Onyx #0A0A0A
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --gold:          #C9A84C;
  --gold-light:    #E4C57A;
  --gold-pale:     #F5E9C8;
  --gold-dark:     #8B6914;
  --onyx:          #0A0A0A;
  --charcoal:      #141414;
  --slate-dark:    #1C1C1C;
  --slate:         #2A2A2A;
  --slate-mid:     #3A3A3A;
  --stone:         #888888;
  --stone-light:   #AAAAAA;
  --ivory:         #F8F5EE;
  --ivory-dark:    #EDE8DC;
  --white:         #FFFFFF;

  /* Semantic */
  --bg:            var(--onyx);
  --bg-card:       var(--charcoal);
  --bg-input:      var(--slate-dark);
  --text-primary:  var(--ivory);
  --text-secondary:var(--stone-light);
  --text-muted:    var(--stone);
  --border:        rgba(201,168,76,.18);
  --border-sub:    rgba(255,255,255,.06);

  /* Typography */
  --fd: 'Cinzel', Georgia, serif;
  --fs: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Inter', system-ui, sans-serif;

  /* Layout */
  --wrap:          760px;
  --nav-h:         64px;

  /* Easing */
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  /* Profile colours */
  --c-hist:  #C9A84C;
  --c-scrip: #8B7BC9;
  --c-feast: #4CAF7D;
  --c-heri:  #C97B4C;
  --c-comm:  #4CA8C9;
}

/* ── LIGHT MODE ──────────────────────────────────────────────── */
body.light-mode,
html.light-mode body {
  --bg:            #F0EBE0;
  --bg-card:       #F7F3EC;
  --bg-input:      #EDE8DE;
  --text-primary:  #1C1410;
  --text-secondary:#5A5045;
  --text-muted:    #7A6E60;
  --border:        rgba(139,105,20,.22);
  --border-sub:    rgba(0,0,0,.07);
  --onyx:          #F0EBE0;
  --charcoal:      #F7F3EC;
  --slate-dark:    #EDE8DE;
  --slate:         #E2DBD0;
  --slate-mid:     #D4CBBE;
  --stone:         #7A6E60;
  --stone-light:   #5A5045;
  --ivory:         #1C1410;
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}
a { color: var(--gold); text-decoration: none; transition: color .3s }
a:hover { color: var(--gold-light) }
button { cursor: pointer; border: none; background: none; font-family: inherit }
img { max-width: 100%; display: block }
ul,ol { list-style: none }
::selection { background: var(--gold); color: var(--onyx) }
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
.qnav {
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--nav-h);
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background .35s, border-color .35s, box-shadow .3s;
}
.qnav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.4) }
body.light-mode .qnav { background: rgba(240,235,224,.97) }
body.light-mode .qnav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.12) }

.qnav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 2rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}

/* Brand */
.qnav-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none }
.qnav-emblem { width:36px; height:36px; flex-shrink:0 }
.q-emblem-ring {
  width:100%; height:100%; border:1.5px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.q-emblem-ring::before {
  content:''; position:absolute; inset:4px;
  border:.5px solid rgba(201,168,76,.3); border-radius:50%;
}
.q-emblem-text {
  font-family: var(--fd); font-size:.58rem; font-weight:700;
  letter-spacing:.08em; color: var(--gold);
}
.qnav-brand-text { display:flex; flex-direction:column; line-height:1.1 }
.qnav-brand-main {
  font-family: var(--fd); font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color: var(--text-primary);
}
.qnav-brand-sub {
  font-family: var(--fs); font-style:italic; font-size:.78rem; color: var(--gold);
}

/* Nav right */
.qnav-right { display:flex; align-items:center; gap:.85rem }

.qnav-back {
  display:flex; align-items:center; gap:.4rem;
  font-family: var(--fd); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color: var(--text-muted);
  padding:.4rem .8rem; border:1px solid var(--border); border-radius:2px;
  transition: all .3s var(--ease); text-decoration:none;
}
.qnav-back:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,.06) }

/* Theme toggle */
.q-theme-toggle {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background: var(--slate-dark);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; flex-shrink:0;
  transition: background .35s, border-color .35s, box-shadow .3s, transform .25s;
}
body.light-mode .q-theme-toggle { background: var(--gold-pale); border-color: rgba(139,105,20,.35) }
.q-theme-toggle:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.15); transform: scale(1.08) }
.q-theme-toggle:active { transform: scale(.94) }
.q-theme-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px }

.q-theme-icon {
  width:17px; height:17px; position:absolute;
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}
.q-theme-icon-moon { opacity:1; transform:rotate(0) scale(1) }
.q-theme-icon-sun  { opacity:0; transform:rotate(90deg) scale(.5) }
body.light-mode .q-theme-icon-moon { opacity:0; transform:rotate(-90deg) scale(.5) }
body.light-mode .q-theme-icon-sun  { opacity:1; transform:rotate(0) scale(1) }

/* ═══════════════════════════════════════════════════════════════
   MAIN & CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.quiz-main {
  flex: 1; padding-top: var(--nav-h);
  display: flex; flex-direction: column;
}
.quiz-container {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 1.5rem; width: 100%;
}

/* ── SCREENS ─────────────────────────────────────────────────── */
.quiz-screen { display:none; padding: 3.5rem 0 5rem; flex-direction:column }
.quiz-screen.active { display:flex }
.quiz-screen.fade-in { animation: fadeUp .5s var(--ease-out) both }

@keyframes fadeUp {
  from { opacity:0; transform: translateY(18px) }
  to   { opacity:1; transform: translateY(0) }
}

/* ── ORNAMENT ─────────────────────────────────────────────────── */
.ornament-row { display:flex; align-items:center; gap:.85rem; margin: 1.4rem 0 }
.orn-line { flex:1; max-width:70px; height:1px; background: linear-gradient(90deg, transparent, var(--gold)) }
.orn-line:last-child { background: linear-gradient(270deg, transparent, var(--gold)) }
.orn-star { font-size:.55rem; color: var(--gold); opacity:.7 }

/* ═══════════════════════════════════════════════════════════════
   INTRO SCREEN
   ═══════════════════════════════════════════════════════════════ */
.intro-wrap {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; max-width:620px; margin:0 auto;
}

.intro-emblem { width:96px; height:96px; margin-bottom:2rem }
.intro-emblem-ring {
  width:100%; height:100%;
  border:1.5px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(201,168,76,.07) 0%, transparent 70%);
  animation: ringPulse 4s ease-in-out infinite;
}
.intro-emblem-inner {
  width:66px; height:66px; border-radius:50%;
  border:1px solid rgba(201,168,76,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; color: var(--gold);
}
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0) }
  50%     { box-shadow: 0 0 0 12px rgba(201,168,76,.07) }
}

.intro-eyebrow {
  font-family: var(--fd); font-size:.62rem; font-weight:500;
  letter-spacing:.35em; text-transform:uppercase; color: var(--gold);
  margin-bottom:.85rem;
}
.intro-title {
  font-family: var(--fd); font-size: clamp(1.6rem,4.5vw,2.65rem);
  font-weight:600; letter-spacing:.03em; color: var(--text-primary); line-height:1.18;
}
.intro-title em {
  font-family: var(--fs); font-style:italic; font-weight:300;
  color: var(--gold); font-size:1.07em;
}

.intro-body {
  font-family: var(--fs); font-size:1.08rem;
  color: var(--text-secondary); line-height:1.85; margin-bottom:1.75rem;
}

.intro-pills {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.4rem; list-style:none; margin-bottom:2.25rem;
}
.intro-pills li {
  display:flex; align-items:center; gap:.4rem;
  font-family: var(--fb); font-size:.78rem; color: var(--text-muted);
}
.intro-pills li i { color: var(--gold); font-size:.68rem }

/* Start button */
.btn-start {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family: var(--fd); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  padding:1.05rem 2.4rem; min-height:44px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  color: var(--onyx) !important; border:1px solid var(--gold-light); border-radius:2px;
  box-shadow: 0 4px 24px rgba(201,168,76,.3);
  transition: all .4s var(--ease);
  position:relative; overflow:hidden; margin-bottom:1.2rem;
}
.btn-start::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .55s var(--ease);
}
.btn-start:hover::before { left:160% }
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,168,76,.45) }
.btn-start:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px }

.intro-trust {
  font-family: var(--fb); font-size:.72rem; color: var(--text-muted);
  display:flex; align-items:center; gap:.4rem; justify-content:center;
}
.intro-trust i { color: var(--gold); font-size:.65rem }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.progress-wrap { margin-bottom:2.25rem }
.progress-meta { display:flex; justify-content:space-between; margin-bottom:.55rem }

.progress-label,
.progress-pct {
  font-family: var(--fd); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.progress-label { color: var(--gold) }
.progress-pct   { color: var(--text-muted) }

.progress-track {
  height:3px; background: var(--slate-mid); border-radius:999px;
  overflow:hidden; margin-bottom:.8rem;
}
.progress-fill {
  height:100%; width:0%; border-radius:999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(201,168,76,.4);
  transition: width .55s var(--ease-out);
}

.progress-steps { display:flex; gap:.35rem; justify-content:center }
.p-step {
  height:3px; flex:1; max-width:36px; border-radius:2px;
  background: var(--slate-mid); transition: background .4s var(--ease);
}
.p-step.done    { background: var(--gold-dark) }
.p-step.current { background: var(--gold-light) }

/* ═══════════════════════════════════════════════════════════════
   QUESTION CARD
   ═══════════════════════════════════════════════════════════════ */
.q-card {
  background: var(--bg-card); border:1px solid var(--border);
  border-radius:2px; padding:2.5rem 2.75rem; margin-bottom:1.75rem;
  position:relative; overflow:hidden;
}
.q-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.q-card.anim-out { animation: qOut .2s var(--ease) both }
.q-card.anim-in  { animation: qIn  .38s var(--ease-out) both }
@keyframes qOut { to   { opacity:0; transform: translateX(-18px) } }
@keyframes qIn  { from { opacity:0; transform: translateX(18px) } }

.q-number {
  font-family: var(--fd); font-size:3rem; font-weight:700;
  color: rgba(201,168,76,.12); line-height:1; margin-bottom:.4rem;
}
.q-text {
  font-family: var(--fd); font-size: clamp(1.05rem,2.4vw,1.4rem);
  font-weight:500; letter-spacing:.02em; color: var(--text-primary);
  line-height:1.35; margin-bottom:1.85rem;
}

/* ── ANSWERS ─────────────────────────────────────────────────── */
.q-answers { display:grid; grid-template-columns:1fr 1fr; gap:.8rem }

.ans-btn {
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1rem 1.15rem; min-height:44px;
  background: var(--slate-dark); border:1px solid var(--border); border-radius:2px;
  cursor:pointer; text-align:left; position:relative; overflow:hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.ans-btn::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background: var(--gold); transform: scaleY(0); transform-origin:bottom;
  transition: transform .25s var(--ease);
}
.ans-btn:hover { border-color: rgba(201,168,76,.4); background: var(--slate) }
.ans-btn:hover::before { transform: scaleY(1) }
.ans-btn:focus-visible { outline:2px solid var(--gold-light); outline-offset:2px }
.ans-btn.selected {
  border-color: var(--gold);
  background: rgba(201,168,76,.08);
  box-shadow: 0 0 0 1px rgba(201,168,76,.2);
}
.ans-btn.selected::before { transform: scaleY(1) }

.ans-check {
  width:21px; height:21px; flex-shrink:0;
  border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; color:transparent; margin-top:1px;
  transition: all .25s var(--ease);
}
.ans-btn.selected .ans-check { background: var(--gold); border-color: var(--gold); color: var(--onyx) }
.ans-btn:hover     .ans-check { border-color: rgba(201,168,76,.6) }

.ans-text {
  font-family: var(--fs); font-size:1rem;
  color: var(--text-secondary); line-height:1.55;
  transition: color .25s; display:block;
}
.ans-btn.selected .ans-text,
.ans-btn:hover    .ans-text { color: var(--text-primary) }

/* ── QUIZ NAVIGATION ─────────────────────────────────────────── */
.quiz-nav {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.btn-nav {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--fd); font-size:.62rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.78rem 1.4rem; min-height:44px;
  border:1px solid var(--border); border-radius:2px;
  color: var(--text-secondary); background: var(--slate-dark);
  transition: all .3s var(--ease);
}
.btn-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,.06) }
.btn-nav:focus-visible { outline:2px solid var(--gold-light); outline-offset:2px }
.btn-nav:disabled { opacity:.3; cursor:not-allowed }

.btn-next {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--onyx) !important; border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(201,168,76,.22);
}
.btn-next:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--onyx) !important; transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(201,168,76,.4);
}
.btn-next:disabled {
  background: var(--slate-mid); border-color: var(--border);
  color: var(--text-muted) !important; box-shadow:none;
}

.nav-dots { display:flex; gap:.4rem; align-items:center }
.nav-dot {
  width:7px; height:7px; border-radius:50%;
  background: var(--slate-mid); transition: all .3s var(--ease);
}
.nav-dot.answered { background: var(--gold-dark) }
.nav-dot.current  { background: var(--gold); transform:scale(1.4) }

/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN
   ═══════════════════════════════════════════════════════════════ */
.results-wrap { display:flex; flex-direction:column; gap:2rem }

/* Crown / profile icon */
.res-header { text-align:center }
.res-crown  { width:108px; height:108px; margin:0 auto 1.6rem }
.res-crown-ring {
  width:100%; height:100%; border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(201,168,76,.09) 0%, transparent 70%);
  animation: crownGlow 3s ease-in-out infinite alternate;
  transition: border-color .5s;
}
@keyframes crownGlow {
  from { box-shadow: 0 0 0 0 rgba(201,168,76,0) }
  to   { box-shadow: 0 0 22px 4px rgba(201,168,76,.14) }
}
.res-crown-core {
  width:76px; height:76px; border-radius:50%;
  border:1px solid rgba(201,168,76,.3);
  display:flex; align-items:center; justify-content:center;
  background: rgba(201,168,76,.06);
  font-size:2rem; color: var(--gold);
  transition: color .5s;
}

.res-eyebrow {
  font-family: var(--fd); font-size:.62rem; font-weight:500;
  letter-spacing:.35em; text-transform:uppercase; color: var(--gold);
  margin-bottom:.8rem;
}
.res-title {
  font-family: var(--fd); font-size: clamp(1.75rem,4vw,2.65rem);
  font-weight:700; letter-spacing:.03em; color: var(--text-primary);
  line-height:1.15; margin-bottom:1.4rem;
}
.res-tagline {
  font-family: var(--fs); font-style:italic; font-size:1.12rem;
  color: var(--text-secondary); line-height:1.8; max-width:520px; margin:0 auto;
}

/* ── SCORE BARS ──────────────────────────────────────────────── */
.res-scores {
  background: var(--bg-card); border:1px solid var(--border);
  border-radius:2px; padding:2rem 2.5rem;
}
.res-section-label {
  font-family: var(--fd); font-size:.65rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color: var(--gold);
  margin-bottom:1.4rem;
}
.score-row {
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:.6rem .9rem; margin-bottom:1rem;
}
.score-row:last-child { margin-bottom:0 }
.score-row .score-name {
  grid-column:1; grid-row:1;
  font-family: var(--fd); font-size:.6rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color: var(--text-secondary);
}
.score-row .score-pct {
  grid-column:2; grid-row:1;
  font-family: var(--fd); font-size:.58rem; color: var(--text-muted); text-align:right;
}
.score-row .score-track {
  grid-column:1 / -1; grid-row:2;
  height:6px; background: var(--slate-mid); border-radius:999px; overflow:hidden;
}
.score-top .score-name { color: var(--gold) }

.score-fill {
  height:100%; border-radius:999px; width:0%;
  transition: width 1s var(--ease-out);
}

/* ── RESULT CARDS ────────────────────────────────────────────── */
.res-card {
  background: var(--bg-card); border:1px solid var(--border);
  border-radius:2px; padding:2.25rem 2.75rem;
  position:relative; overflow:hidden;
}
.res-card::before {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
}
.res-card-heading {
  display:flex; align-items:center; gap:.65rem;
  font-family: var(--fd); font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--gold);
  margin-bottom:1rem;
}
.res-card p {
  font-family: var(--fs); font-size:1.06rem;
  color: var(--text-secondary); line-height:1.85; margin-bottom:.9rem;
}
.res-card p:last-child { margin-bottom:0 }

/* Next step banner */
.res-next-step {
  background: linear-gradient(135deg, rgba(201,168,76,.07) 0%, rgba(201,168,76,.03) 100%);
  border:1px solid var(--border); border-radius:2px; padding:1.75rem 2.25rem;
}
.res-next-inner { display:flex; align-items:flex-start; gap:1.25rem }
.res-next-icon {
  width:48px; height:48px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--border); background: rgba(201,168,76,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color: var(--gold);
}
.res-next-label {
  font-family: var(--fd); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--gold);
  margin-bottom:.45rem;
}
.res-next-text {
  font-family: var(--fs); font-size:1.05rem;
  color: var(--text-secondary); line-height:1.75;
}

/* ── SUGGESTED PATHS ─────────────────────────────────────────── */
.res-paths-section { }
.res-paths-title {
  font-family: var(--fd); font-size:.65rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color: var(--gold);
  margin-bottom:1.2rem;
}
.paths-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.path-card {
  background: var(--bg-card); border:1px solid var(--border); border-radius:2px;
  padding:1.5rem 1.25rem; text-align:center;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s;
}
.path-card:hover {
  border-color: rgba(201,168,76,.35);
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.path-icon {
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background: rgba(201,168,76,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color: var(--gold);
  margin:0 auto .9rem;
}
.path-title {
  font-family: var(--fd); font-size:.62rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color: var(--text-primary);
  margin-bottom:.5rem;
}
.path-text {
  font-family: var(--fs); font-size:.92rem;
  color: var(--text-secondary); line-height:1.65;
}

/* ── EMAIL CAPTURE ───────────────────────────────────────────── */
.res-study-cta {
  background: var(--slate-dark); border:1px solid var(--border);
  border-radius:2px; overflow:hidden; position:relative;
}
.res-study-cta::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), transparent);
}
.res-study-inner { padding:2.5rem 3rem; text-align:center }
.res-study-badge {
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--border); background: rgba(201,168,76,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color: var(--gold); margin:0 auto 1.25rem;
}
.res-study-title {
  font-family: var(--fd); font-size: clamp(1rem,2.2vw,1.35rem);
  font-weight:600; letter-spacing:.03em; color: var(--text-primary);
  margin-bottom:.85rem;
}
.res-study-body {
  font-family: var(--fs); font-size:1.05rem;
  color: var(--text-secondary); line-height:1.8;
  max-width:500px; margin:0 auto 1.75rem;
}

.email-row {
  display:flex; gap:.65rem; max-width:480px; margin:0 auto .7rem;
}
.email-input {
  flex:1; background: var(--bg-input); border:1px solid var(--border);
  color: var(--text-primary); font-family: var(--fs); font-size:1rem;
  padding:.8rem 1rem; border-radius:2px; outline:none; min-height:44px;
  transition: border-color .3s, box-shadow .3s;
}
.email-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.1) }
.email-input::placeholder { color: var(--text-muted) }
.email-input.error { border-color: #e05c5c; animation: shake .4s var(--ease) }
@keyframes shake {
  0%,100% { transform:translateX(0) }
  20%,60% { transform:translateX(-6px) }
  40%,80% { transform:translateX(6px) }
}

.btn-email-submit {
  display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  font-family: var(--fd); font-size:.65rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; min-height:44px;
  padding:.8rem 1.5rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--onyx) !important; border:1px solid var(--gold); border-radius:2px;
  box-shadow: 0 2px 12px rgba(201,168,76,.25);
  transition: all .3s var(--ease);
}
.btn-email-submit:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  transform:translateY(-1px); box-shadow: 0 5px 18px rgba(201,168,76,.4);
}
.btn-email-submit:focus-visible { outline:2px solid var(--gold-light); outline-offset:2px }

.email-trust {
  font-family: var(--fb); font-size:.7rem; color: var(--text-muted);
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.email-trust i { color: var(--gold); font-size:.62rem }

.email-success {
  display:none; align-items:flex-start; justify-content:center; gap:.85rem;
  padding:1.25rem;
  background: rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.2);
  border-radius:2px; max-width:480px; margin:0 auto; text-align:left;
}
.email-success.visible { display:flex }
.email-success i { font-size:1.4rem; color: var(--gold); flex-shrink:0; margin-top:2px }
.email-success strong {
  font-family: var(--fd); font-size:.72rem; letter-spacing:.08em;
  color: var(--text-primary); display:block; margin-bottom:.35rem;
}
.email-success p { font-family: var(--fs); font-size:.95rem; color: var(--text-secondary); line-height:1.65 }

/* ── RESULT ACTION BUTTONS ───────────────────────────────────── */
.res-actions {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.85rem;
}
.btn-res-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--fd); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; min-height:44px;
  padding:.9rem 1.85rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--onyx) !important; border:1px solid var(--gold); border-radius:2px;
  box-shadow: 0 3px 14px rgba(201,168,76,.28);
  transition: all .3s var(--ease);
}
.btn-res-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.42); color: var(--onyx) !important }
.btn-res-secondary {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--fd); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; min-height:44px;
  padding:.9rem 1.85rem;
  background:transparent; color: var(--gold);
  border:1px solid var(--gold); border-radius:2px;
  transition: all .3s var(--ease);
}
.btn-res-secondary:hover { background: rgba(201,168,76,.1); color: var(--gold-light); transform:translateY(-2px) }
.btn-res-retake {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--fd); font-size:.65rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; min-height:44px;
  padding:.85rem 1.5rem;
  background:transparent; color: var(--text-muted);
  border:1px solid var(--border); border-radius:2px;
  transition: all .3s var(--ease);
}
.btn-res-retake:hover { color: var(--gold); border-color: var(--gold) }
.btn-res-primary:focus-visible,
.btn-res-secondary:focus-visible,
.btn-res-retake:focus-visible { outline:2px solid var(--gold-light); outline-offset:2px }

/* ── SHARE ───────────────────────────────────────────────────── */
.res-share {
  display:flex; align-items:center; justify-content:center; gap:.65rem;
}
.share-label {
  font-family: var(--fd); font-size:.58rem; letter-spacing:.15em;
  text-transform:uppercase; color: var(--text-muted);
}
.share-btn {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background:none;
  color: var(--text-muted); font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  transition: all .3s var(--ease);
}
.share-btn:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,.08); transform:translateY(-2px);
}
.share-btn:focus-visible { outline:2px solid var(--gold-light); outline-offset:2px }

.copy-toast {
  text-align:center; font-family: var(--fb); font-size:.75rem;
  color: var(--gold); display:flex; align-items:center; justify-content:center;
  gap:.4rem; min-height:1.4rem; opacity:0; transition:opacity .4s;
}
.copy-toast.visible { opacity:1 }

/* ── PROFILE BAR COLOURS ─────────────────────────────────────── */
.fill-hist  { background: linear-gradient(90deg, #8B6914, #C9A84C) }
.fill-scrip { background: linear-gradient(90deg, #5A4FA0, #8B7BC9) }
.fill-feast { background: linear-gradient(90deg, #2E7D5A, #4CAF7D) }
.fill-heri  { background: linear-gradient(90deg, #9E5A2E, #C97B4C) }
.fill-comm  { background: linear-gradient(90deg, #2E7A9E, #4CA8C9) }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.quiz-footer {
  border-top:1px solid var(--border);
  padding:1.2rem 2rem;
  background: var(--bg-card);
}
.quiz-footer-inner {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.4rem .9rem;
  font-family: var(--fb); font-size:.7rem; color: var(--text-muted);
}
.qf-dot { color: var(--gold) }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 680px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .quiz-container  { padding:0 1rem }
  .quiz-screen     { padding:2.25rem 0 4rem }
  .q-card          { padding:1.6rem 1.4rem }
  .q-answers       { grid-template-columns:1fr }
  .res-card        { padding:1.75rem 1.5rem 1.75rem 2rem }
  .res-study-inner { padding:2rem 1.5rem }
  .email-row       { flex-direction:column }
  .btn-email-submit{ width:100%; justify-content:center }
  .res-actions     { flex-direction:column; width:100% }
  .btn-res-primary,
  .btn-res-secondary,
  .btn-res-retake  { width:100%; justify-content:center }
  .quiz-nav        { gap:.5rem }
  .btn-nav         { padding:.75rem .9rem; font-size:.58rem }
  .nav-dots        { display:none }
  .intro-title     { font-size:1.5rem }
  .res-title       { font-size:1.65rem }
  .paths-grid      { grid-template-columns:1fr }
  .score-row       { }
  .res-scores      { padding:1.5rem 1.25rem }
}

@media (max-width: 400px) {
  .qnav-brand-text { display:none }
  .qnav-back span  { display:none }
  .qnav-back       { padding:.35rem .6rem }
  .q-number        { font-size:2.25rem }
  .btn-start       { font-size:.65rem; padding:.95rem 1.75rem }
}