/* ===========================================================
   CareerTest Education — Career Discovery for Indian Students
   Design system: navy + marigold + teal, path/roadmap motif
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- color tokens (Nori-inspired: warm cream + vibrant orange) --- */
  --ink:        #17213A;   /* dark navy — used for dark sections / footer */
  --ink-2:      #202B4A;
  --ink-3:      #2C3A60;
  --paper:      #FFF8EF;   /* warm cream — main light bg */
  --paper-dim:  #FFEEDC;   /* soft peach section bg */
  --paper-line: #F1DFC6;
  --gold:       #FF6B35;   /* vibrant orange — primary accent */
  --gold-deep:  #E6521C;
  --teal:       #2FB673;   /* fresh green — secondary accent */
  --teal-deep:  #1F8F58;
  --coral:      #FFB238;   /* warm yellow — tertiary accent */
  --text-dark:  #17213A;
  --text-dark-soft: #5B6483;
  --text-light: #FBF6EC;
  --text-light-soft: #B7BEDA;
  --line-on-dark: rgba(251,246,236,0.14);

  /* --- type --- */
  --font-display: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-s: 12px;
  --radius-m: 22px;
  --radius-l: 34px;

  --shadow-soft: 0 24px 55px -25px rgba(23,33,58,0.22);
  --shadow-card: 0 16px 34px -20px rgba(23,33,58,0.16);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--text-dark);
  margin: 0 0 0.4em;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
a{ color: inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family: inherit; }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--text-light); }
.on-dark p, .on-dark{ color: var(--text-light-soft); }
.on-dark .brand-word{ color: var(--text-light); }
.footer .brand-word{ color: var(--text-light); }
.quiz-top .brand-word, .report-sidebar .brand-word{ color: var(--text-light); }

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section{ padding: 96px 0; }
@media (max-width: 720px){ .section{ padding: 64px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight:600;
  color: var(--gold-deep);
  background: rgba(255,107,53,0.10);
  border: 1px solid rgba(255,107,53,0.22);
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.on-dark .eyebrow{ color: var(--gold); background: rgba(255,107,53,0.14); border-color: rgba(255,107,53,0.3); }
.eyebrow::before{
  content:"✦"; font-size:12px; display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  cursor:pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; }
.btn-primary{
  background: var(--gold);
  color: #2A0F02;
  box-shadow: 0 14px 30px -12px rgba(255,107,53,0.55);
}
.btn-primary:hover{ background: var(--gold-deep); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--text-light);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.on-light-ghost, .btn-ghost.on-light{
  border-color: var(--paper-line);
  color: var(--text-dark);
}
.on-light-ghost:hover, .btn-ghost.on-light:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-outline-dark{
  background: transparent;
  border-color: var(--paper-line);
  color: var(--text-dark);
}
.btn-outline-dark:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-sm{ padding: 10px 18px; font-size: 14px; }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 40;
  background: rgba(255,248,239,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:36px; height:36px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-word{ font-family: var(--font-display); font-weight:700; font-size:21px; color: var(--text-dark); letter-spacing:0.01em; }
.brand-sub{ font-family: var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color: var(--text-dark-soft); }
.on-dark .brand-sub, .quiz-top .brand-sub, .report-sidebar .brand-sub{ color: var(--text-light-soft); }
@media (max-width: 560px){ .brand-sub{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color: var(--text-dark-soft); font-size:15px; font-weight:500; transition: color .15s ease; }
.nav-links a:hover{ color: var(--gold-deep); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-menu-btn{ display:none; background:none; border:1px solid var(--paper-line); border-radius:10px; padding:8px 10px; color:var(--text-dark); }
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- footer ---------- */
.footer{ background: var(--ink); padding: 60px 0 34px; border-top: 1px solid var(--line-on-dark); }
.footer-top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; padding-bottom:36px; border-bottom:1px solid var(--line-on-dark); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ color: var(--text-light); font-family: var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color: var(--text-light-soft); text-decoration:none; font-size:14.5px; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; color: var(--text-light-soft); font-size:13px; }

/* ===========================================================
   Signature element — the Path
   =========================================================== */
.path-stroke{ fill:none; stroke: var(--gold); stroke-width:2.5; stroke-linecap:round; }
.path-stroke-dim{ fill:none; stroke: #E6C9A8; stroke-width:2; stroke-linecap:round; stroke-dasharray: 2 10; }
.path-node circle{ fill: var(--paper); stroke: var(--gold); stroke-width:2.5; }
.path-node.active circle{ fill: var(--gold); stroke: var(--gold); }
.path-node text{ font-family: var(--font-mono); }

.draw-in{
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 1.8s ease forwards .3s;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .draw-in{ animation:none; stroke-dashoffset:0; } }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ background: var(--paper); position: relative; overflow: hidden; padding: 64px 0 90px; }
.hero::before{
  content:""; position:absolute; top:-120px; right:-160px; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,107,53,0.16), rgba(255,107,53,0) 70%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-160px; left:-140px; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,182,115,0.14), rgba(47,182,115,0) 70%);
  pointer-events:none;
}
.hero .wrap{ position:relative; display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width: 940px){ .hero .wrap{ grid-template-columns: 1fr; } }

.hero h1{ font-size: clamp(2.3rem, 4.6vw, 3.7rem); font-weight:700; }
.hero h1 em{ font-style: normal; color: var(--gold-deep); }
.hero .lede{ font-size: 18px; max-width: 46ch; color: var(--text-dark-soft); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }
.hero-note{ margin-top:22px; font-size:13.5px; color: var(--text-dark-soft); display:flex; align-items:center; gap:8px; }
.hero-note svg{ flex:none; }

.hero-visual{ position:relative; }
.hero-visual svg{ width:100%; height:auto; }
.hero-tag{
  position:absolute; background: var(--paper); border:1px solid var(--paper-line);
  border-radius: 16px; padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--text-dark);
  box-shadow: var(--shadow-soft); font-family: var(--font-body); display:flex; align-items:center; gap:8px;
}
.hero-blob{
  position:absolute; inset:6% 8%; border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%;
  background: rgba(255,178,56,0.16);
  border: 1px dashed rgba(255,107,53,0.3);
  z-index:0;
}

/* ===========================================================
   Sections shared
   =========================================================== */
.section-head{ max-width: 640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color: var(--text-dark-soft); font-size:17px; }

.on-dark .section-head p{ color: var(--text-light-soft); }

/* how it works — literal sequence, numbered path */
.steps{ position:relative; }
.steps-line{ position:absolute; top:26px; left:26px; right:26px; height:2px; background: var(--paper-line); z-index:0; }
.steps-line-fill{ position:absolute; top:26px; left:26px; height:2px; background: var(--gold); width: 100%; z-index:0; }
.steps-grid{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(4,1fr); gap:28px; }
@media (max-width: 860px){ .steps-grid{ grid-template-columns: 1fr; } .steps-line, .steps-line-fill{ display:none; } }
.step{ text-align:left; }
.step-num{
  width:52px; height:52px; border-radius:50%; background: var(--gold);
  border:none; color: #2A0F02;
  font-family: var(--font-body); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  box-shadow: 0 10px 20px -10px rgba(255,107,53,0.55);
}
.step h3{ font-size: 19px; margin-bottom:6px; }
.step p{ color: var(--text-dark-soft); font-size:15px; margin:0; }

/* feature cards */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
@media (max-width: 860px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background: var(--paper); border:1px solid var(--paper-line); border-radius: var(--radius-m);
  padding: 30px 28px; box-shadow: var(--shadow-card);
}
.card-icon{
  width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px; background: rgba(255,107,53,0.14);
}
.card-icon svg{ width:24px; height:24px; }
.card h3{ font-size:18.5px; margin-bottom:8px; }
.card p{ color: var(--text-dark-soft); font-size:15px; margin:0; }

.card-dark{ background: var(--ink-2); border-color: var(--ink-3); }
.card-dark h3{ color: var(--text-light); }
.card-dark p{ color: var(--text-light-soft); }

/* stream explainer */
.stream-band{ background: var(--paper-dim); }
.stream-card{ background: var(--paper); border-radius: var(--radius-m); border:1px solid var(--paper-line); padding: 28px; }
.stream-card .tag{ font-family: var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep); }
.stream-card h3{ margin-top:6px; font-size: 21px; }
.stream-card ul{ margin: 14px 0 0; padding-left: 18px; color: var(--text-dark-soft); font-size:14.5px; }
.stream-card li{ margin-bottom:4px; }

/* parents/language */
.lang-pill{
  display:inline-flex; align-items:center; gap:8px; background: var(--ink-2); border:1px solid var(--ink-3);
  color: var(--text-light); border-radius:999px; padding:7px 14px; font-size:13px; font-family: var(--font-mono);
  margin: 3px 6px 3px 0;
}

/* FAQ */
.faq-item{ border-bottom:1px solid var(--paper-line); padding: 20px 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-weight:600; font-size:16.5px; font-family: var(--font-display);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; color: var(--gold-deep); transition: transform .2s ease; flex:none; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top:12px; color: var(--text-dark-soft); font-size:15px; padding-right: 32px; }

/* final CTA */
.cta-band{ background: var(--ink); position:relative; overflow:hidden; }
.cta-band::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(700px 340px at 50% 0%, rgba(255,107,53,0.16), transparent 65%);
}
.cta-band .wrap{ position:relative; text-align:center; }
.cta-band h2{ font-size: clamp(1.9rem,3.6vw,2.7rem); max-width: 20ch; margin:0 auto 14px; }
.cta-band p{ color: var(--text-light-soft); max-width:50ch; margin:0 auto 30px; }
.cta-band .hero-actions{ justify-content:center; }

/* ===========================================================
   QUIZ PAGE
   =========================================================== */
.quiz-shell{ background: var(--paper); min-height: 100vh; }
.quiz-top{ background: var(--ink); padding: 26px 0 30px; }
.quiz-progress-wrap{ margin-top: 18px; }
.quiz-progress-track{ position:relative; height: 6px; background: var(--ink-3); border-radius:999px; overflow:hidden; }
.quiz-progress-fill{ position:absolute; inset:0; width:0%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius:999px; transition: width .4s ease; }
.quiz-progress-meta{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12.5px; color: var(--text-light-soft); margin-top:10px; }

.quiz-body{ padding: 56px 0 90px; }
.quiz-card{ max-width: 640px; margin: 0 auto; }
.quiz-section-label{ font-family: var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--teal-deep); margin-bottom: 14px; }
.quiz-question{ font-size: clamp(1.4rem,2.6vw,1.8rem); margin-bottom: 30px; }

.option-list{ display:flex; flex-direction:column; gap:12px; margin-bottom: 34px; }
.option{
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--paper-line); background: var(--paper);
  border-radius: var(--radius-s); padding: 16px 18px; cursor:pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
  text-align:left; width:100%; font-size:15.5px; color: var(--text-dark);
}
.option:hover{ border-color: var(--gold); }
.option .dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--paper-line); flex:none; position:relative; transition: border-color .15s ease; }
.option.selected{ border-color: var(--gold-deep); background: rgba(255,107,53,0.10); }
.option.selected .dot{ border-color: var(--gold-deep); }
.option.selected .dot::after{ content:""; position:absolute; inset:3px; background: var(--gold-deep); border-radius:50%; }
.option:focus-visible{ outline: 3px solid var(--teal); outline-offset:2px; }

.quiz-nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.quiz-nav .btn-outline-dark[disabled]{ opacity:.35; }

.quiz-intro, .quiz-empty{ max-width: 620px; margin: 40px auto 0; text-align:center; }
.quiz-intro .grid-3{ text-align:left; margin: 34px 0 40px; }
.quiz-intro .card{ padding: 22px; }

/* ===========================================================
   RESULTS PAGE
   =========================================================== */
.result-hero{ background: var(--ink); padding: 64px 0 70px; }
.result-hero .eyebrow{ color: var(--gold); }
.result-stream{ font-size: clamp(2rem,4.4vw,3.1rem); }
.confidence{ display:flex; align-items:center; gap:14px; margin-top: 22px; max-width: 420px; }
.confidence-track{ flex:1; height:8px; background: var(--ink-3); border-radius:999px; overflow:hidden; }
.confidence-fill{ height:100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius:999px; }
.confidence-label{ font-family: var(--font-mono); font-size:13px; color: var(--text-light-soft); white-space:nowrap; }

.lang-toggle{ display:inline-flex; border:1px solid var(--ink-3); border-radius:999px; padding:4px; gap:4px; margin-top:26px; }
.lang-toggle button{ border:none; background:transparent; color: var(--text-light-soft); font-size:13.5px; font-family: var(--font-mono); padding:8px 16px; border-radius:999px; cursor:pointer; }
.lang-toggle button.active{ background: var(--gold); color:#241304; font-weight:600; }

/* roadmap path — vertical on mobile, horizontal-ish cards on desktop */
.roadmap{ position:relative; }
.roadmap-line{ position:absolute; left:23px; top:6px; bottom:6px; width:2px; background: var(--paper-line); }
.roadmap-item{ position:relative; padding-left: 62px; padding-bottom: 40px; }
.roadmap-item:last-child{ padding-bottom:0; }
.roadmap-dot{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background: var(--paper); border: 2.5px solid var(--gold-deep); color: var(--gold-deep);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600; font-size:14px;
  z-index:1;
}
.roadmap-item.current .roadmap-dot{ background: var(--gold); border-color: var(--gold); color:#241304; }
.roadmap-item h3{ font-size:18.5px; margin-bottom:6px; }
.roadmap-item p{ color: var(--text-dark-soft); font-size:15px; margin:0; }
.roadmap-item .tag-row{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.tag-chip{ font-family: var(--font-mono); font-size:12px; background: var(--paper-dim); border:1px solid var(--paper-line); border-radius:999px; padding:4px 11px; color: var(--text-dark-soft); }

.cluster-card{ display:flex; flex-direction:column; gap:12px; }
.cluster-rank{ font-family: var(--font-mono); font-size:12px; color: var(--gold-deep); letter-spacing:.06em; text-transform:uppercase; }
.cluster-card ul{ margin:0; padding-left:18px; color: var(--text-dark-soft); font-size:14.5px; }
.cluster-card li{ margin-bottom:4px; }

.print-note{ display:none; }
@media print{
  .nav, .footer, .lang-toggle, .no-print, .report-sidebar, .report-topbar{ display:none !important; }
  .print-note{ display:block; margin-bottom: 20px; font-family: var(--font-mono); font-size:12px; }
  body{ background:#fff; }
  .report-content{ max-width:none; padding:0; }
  .report-content.print-all .report-page-block{
    page-break-after: always;
    padding: 24px 6px 40px;
  }
  .report-content.print-all .report-page-block:last-child{ page-break-after: auto; }
  body{ counter-reset: page; }
  .report-page-block::after{
    counter-increment: page;
    content: "Disha Career Report · Page " counter(page);
    display:block; margin-top: 30px; font-family: var(--font-mono); font-size:10px; color:#888;
  }
}

/* ===========================================================
   REPORT ENGINE — paginated 20+ page career report
   =========================================================== */
.report-shell{ display:flex; align-items:flex-start; min-height:100vh; background: var(--paper); }

.report-sidebar{
  width: 288px; flex: none; background: var(--ink); position: sticky; top:0; height:100vh;
  overflow-y:auto; padding: 24px 0 40px; border-right:1px solid var(--line-on-dark);
}
.report-sidebar-head{ padding: 4px 24px 20px; border-bottom:1px solid var(--line-on-dark); margin-bottom:16px; }
.report-toc-group{ margin-bottom: 14px; }
.report-toc-group h5{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color: var(--text-light-soft); padding: 0 24px; margin: 0 0 6px; }
.report-toc-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-left:2px solid transparent; color: var(--text-light-soft); font-size:13.5px; padding:7px 22px; cursor:pointer; line-height:1.3; }
.report-toc-item .num{ font-family:var(--font-mono); font-size:10.5px; color: inherit; opacity:.6; width:20px; flex:none; }
.report-toc-item:hover{ color: var(--text-light); }
.report-toc-item.active{ color: var(--gold); background: rgba(255,107,53,0.10); border-left-color: var(--gold); }

.report-main{ flex:1; min-width:0; }
.report-topbar{ position:sticky; top:0; z-index:20; background: rgba(251,248,241,0.94); backdrop-filter: blur(8px); border-bottom:1px solid var(--paper-line); padding: 14px 0; }
.report-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 0 40px; }
.report-page-indicator{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-dark-soft); white-space:nowrap; }
.report-nav-btns{ display:flex; gap:8px; align-items:center; }
.sidebar-toggle{ display:none; background:none; border:1px solid var(--paper-line); border-radius:8px; padding:7px 9px; }
@media (max-width: 980px){
  .report-sidebar{ position:fixed; left:0; top:0; z-index:60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .report-sidebar.open{ transform: translateX(0); box-shadow: 20px 0 60px -20px rgba(0,0,0,0.4); }
  .sidebar-toggle{ display:inline-flex; }
  .report-topbar-inner{ padding: 0 20px; }
}

.report-content{ padding: 52px 40px 100px; max-width: 760px; margin:0 auto; }
@media (max-width: 640px){ .report-content{ padding: 36px 20px 80px; } }
.report-page-label{ font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--teal-deep); margin-bottom:14px; }
.report-page h2{ font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom: 18px; }
.report-page .lead{ font-size:16.5px; color: var(--text-dark-soft); max-width:62ch; }
.report-body p{ color: var(--text-dark-soft); font-size:15.5px; }
.report-body ul{ color: var(--text-dark-soft); font-size:15px; }

.report-cover{ min-height: calc(100vh - 180px); display:flex; flex-direction:column; justify-content:center; }
.report-cover .cover-tag{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:20px; }
.report-cover h1{ font-size: clamp(2rem,5vw,3rem); max-width:18ch; margin-bottom:16px; }
.report-cover .cover-meta{ margin-top: 40px; display:grid; grid-template-columns: repeat(2,1fr); gap:16px; max-width:460px; }
.cover-meta-item{ border-top:1px solid var(--paper-line); padding-top:10px; }
.cover-meta-item .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dark-soft); }
.cover-meta-item .v{ font-size:15px; font-weight:600; margin-top:2px; }

/* labelled bar rows — used for personality / interest / values overview pages */
.bar-row{ margin-bottom:18px; }
.bar-row-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px; margin-bottom:7px; }
.bar-row-head .label{ font-weight:600; color: var(--text-dark); }
.bar-row-head .pct{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-dark-soft); }
.bar-track{ height:10px; border-radius:999px; background:var(--paper-dim); overflow:hidden; border:1px solid var(--paper-line); }
.bar-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg,var(--teal),var(--gold)); }

.deepdive-badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--paper-dim); border:1px solid var(--paper-line);
  border-radius:999px; padding:7px 15px; font-family:var(--font-mono); font-size:12.5px; margin-bottom:22px; color: var(--text-dark-soft);
}
.deepdive-badge.strong{ background: rgba(255,107,53,0.14); border-color: rgba(230,82,28,0.3); color: var(--gold-deep); }

.report-callout{
  background: var(--paper-dim); border-left:3px solid var(--gold-deep); border-radius: 8px;
  padding: 18px 20px; margin: 22px 0; font-size:15px; color: var(--text-dark);
}
.report-callout strong{ color: var(--text-dark); }

.report-nextprev{ display:flex; justify-content:space-between; align-items:center; margin-top:52px; padding-top:24px; border-top:1px solid var(--paper-line); gap:16px; }
.report-nextprev-btn{ display:flex; flex-direction:column; gap:4px; max-width:44%; }
.report-nextprev-btn .dir{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dark-soft); }
.report-nextprev-btn .ttl{ font-size:15px; font-weight:600; }
.report-nextprev-btn.right{ text-align:right; align-items:flex-end; }

.subtle-btn{
  background:none; border:none; color: var(--teal-deep); font-weight:600; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:0;
}

/* ===== CareerTest Education brand overrides ===== */
.brand-mark{ object-fit:contain; }
.brand-word{ font-size:19px; }
.brand-sub{ text-transform:none; letter-spacing:0.02em; font-size:11px; }
.on-dark .brand-mark, .footer .brand-mark, .quiz-top .brand-mark, .report-sidebar .brand-mark{ filter: invert(1) brightness(1.15); }

/* ===== Lead capture form ===== */
.lead-intro{ color: var(--text-dark-soft); font-size:15.5px; margin:-6px 0 22px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-full{ grid-column: 1 / -1; }
.field > span{ font-size:13.5px; font-weight:600; color: var(--text-dark); }
.field input{ width:100%; font: inherit; font-size:15.5px; padding:12px 14px; border:1.5px solid var(--paper-line); border-radius: var(--radius-s); background:#fff; color: var(--text-dark); transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,107,53,0.18); }
.phone-wrap{ display:flex; align-items:stretch; }
.phone-prefix{ display:flex; align-items:center; padding:0 12px; border:1.5px solid var(--paper-line); border-right:none; border-radius: var(--radius-s) 0 0 var(--radius-s); background: var(--paper-dim); font-weight:600; font-size:14.5px; color: var(--text-dark-soft); }
.phone-wrap input{ border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.field.invalid input{ border-color:#D6453D; box-shadow: 0 0 0 3px rgba(214,69,61,0.14); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color: var(--text-dark-soft); line-height:1.5; cursor:pointer; margin-bottom:8px; }
.consent input{ width:18px; height:18px; margin-top:2px; accent-color: var(--gold-deep); flex:none; }
.consent.invalid span{ color:#B8322B; }
.form-error{ min-height:22px; color:#B8322B; font-size:14px; font-weight:600; margin:6px 0 4px; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
@media (max-width: 560px){ .field-grid{ grid-template-columns:1fr; } }

/* ===== Counselling CTA on report ===== */
.cta-counsel{ margin-top:28px; padding:22px 24px; border-radius: var(--radius-m); background: var(--ink); color: var(--text-light); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.cta-counsel h3{ color: var(--text-light); font-size:18px; margin:0 0 4px; }
.cta-counsel p{ color: var(--text-light-soft); margin:0; font-size:14.5px; max-width:46ch; }
.cta-counsel .done{ color:#8FE3B5; font-weight:600; font-size:14.5px; }
.nav-links a{ white-space:nowrap; }
.nav .brand-word{ white-space:nowrap; }
@media (max-width: 1240px){ .nav .brand-sub{ display:none; } }