/* ============================================================
   Performance Health Collaborative — Clinical Education
   Certification program (PROTOTYPE)

   Shares the design system from index.html / clinician-education.html.
   Those pages inline their styles; the certification flow spans five
   pages, so the shared system lives here instead of being copied five
   times.
   ============================================================ */
:root {
  --deep-blue: #1B5FAA;
  --deep-blue-dark: #154B86;
  --deep-blue-deep: #0E3461;
  --deep-blue-light: #2E7BC9;
  --blue-soft: #EAF2FB;
  --green: #4CAF50;
  --green-dark: #3D9140;
  --green-soft: #ECF8ED;
  --orange: #F5821F;
  --orange-hover: #DB6E0F;
  --orange-soft: #FEF1E4;
  --red: #E05A4D;
  --red-soft: #FDEDEB;
  --amber: #B26A00;
  --amber-bg: #FFF5E0;
  --amber-line: #F0D08A;
  --bg: #f7f9fc;
  --bg-alt: #eef2f8;
  --paper: #ffffff;
  --ink: #0e1c2e;
  --ink-secondary: #33465c;
  --muted: #647588;
  --line: #e1e8f0;
  --line-light: #f0f4f9;
  --shadow-sm: 0 1px 3px rgba(14, 28, 46, .06);
  --shadow: 0 4px 24px rgba(14, 28, 46, .08);
  --shadow-lg: 0 20px 60px rgba(14, 28, 46, .12);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --max: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --banner-h: 0px; /* prototype banner retired at go-live; header sits at the top (Justin 2026-10-23) */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: calc(104px + var(--banner-h)) }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 16px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none; transition: all .2s var(--ease) }
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) }
h1, h2, h3, h4, h5 { font-family: 'Inter', -apple-system, sans-serif; line-height: 1.15; letter-spacing: -.02em }

/* ===== Prototype banner ===== */
.proto-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--banner-h); display: flex; align-items: center; justify-content: center;
  background: #2b1a00; color: #FFD79A; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  padding: 0 14px;
}
.proto-banner span { display: inline-block; max-width: 100%; line-height: 1.3 }
.proto-banner strong { color: #fff }
.proto-banner a { color: #FFD79A; text-decoration: underline; text-underline-offset: 2px }
.proto-banner a:hover { color: #fff }

/* ===== Navigation (matched to index.html) ===== */
.site-header {
  position: fixed; top: var(--banner-h); left: 0; right: 0; z-index: 1000;
  background: rgba(247, 249, 252, .85);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(14, 28, 46, .06); transition: all .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(14, 28, 46, .08); background: rgba(247, 249, 252, .92) }
.nav-inner { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; transition: height .3s var(--ease) }
.site-header.scrolled .nav-inner { height: 74px }
.logo { display: flex; align-items: center }
.logo img { height: 54px; width: auto; transition: height .3s var(--ease) }
.site-header.scrolled .logo img { height: 44px }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 32px) }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-secondary); transition: color .2s; white-space: nowrap }
.nav-links a:hover, .nav-links a.active { color: var(--deep-blue) }
.nav-cta {
  background: var(--orange); color: white !important; padding: 10px 24px; border-radius: 10px;
  font-weight: 700 !important; font-size: 14px; transition: all .2s var(--ease) !important;
  box-shadow: 0 4px 14px rgba(245, 130, 31, .28);
}
.nav-cta:hover { background: var(--orange-hover) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245, 130, 31, .4) }
.hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 11px; width: 44px; height: 44px; background: none; border: none; border-radius: 8px }
.hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .3s var(--ease) }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translateY(7px) }
.hamburger.active span:nth-child(2) { opacity: 0 }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px) }
.mobile-nav {
  display: none; position: fixed; top: calc(74px + var(--banner-h)); left: 0; right: 0; bottom: 0;
  background: rgba(247, 249, 252, .98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  z-index: 999; padding: 32px; flex-direction: column; gap: 8px; overflow-y: auto;
}
.mobile-nav.active { display: flex }
.mobile-nav a { font-size: 18px; font-weight: 600; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink) }
.mobile-nav .nav-cta { margin-top: 16px; text-align: center; border-bottom: none; border-radius: 12px; padding: 16px 24px }

/* ===== Page hero ===== */
.page-hero {
  padding: calc(150px + var(--banner-h)) 0 56px;
  background: linear-gradient(180deg, #f7f9fc 0%, #e9f0f9 100%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -200px; right: -200px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(76, 175, 80, .07) 0%, transparent 70%); pointer-events: none;
}
.page-hero.compact { padding-bottom: 36px }
.page-hero-inner { max-width: 1120px; position: relative }
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--green-dark); margin-bottom: 16px;
}
.section-label-line { width: 24px; height: 2px; background: var(--green); border-radius: 2px }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 900; color: var(--ink); margin-bottom: 18px; line-height: 1.07; text-wrap: balance }
.page-hero h1 .gradient {
  background: linear-gradient(120deg, var(--deep-blue), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-hero p { font-size: clamp(17px, 2vw, 19px); color: var(--ink-secondary); line-height: 1.7; max-width: 62ch }

/* ===== Insights tabs ===== */
.insights-tabs-wrap { padding: 8px 0 0 }
.insights-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(14, 28, 46, .05);
}
.insights-tabs a {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink-secondary);
  text-decoration: none; padding: 9px 18px; border-radius: 999px; transition: background .2s, color .2s;
}
.insights-tabs a:hover { color: var(--deep-blue) }
.insights-tabs a[aria-current="page"] { background: var(--deep-blue); color: #fff }
.insights-tabs-note { margin-top: 10px; font-size: 14px; color: var(--ink-secondary) }

/* ===== Generic section + buttons ===== */
.section { padding: 40px 0 100px }
.section.tight { padding-top: 28px }

/* ===== Page measure =====
   These pages used to sit in an 820px column inside the 1200px site
   container, which left ~250px of dead margin either side of the
   header width at 1280. They now run the container's full content
   measure (~1104px at 1280, exactly the header's) and spend the extra
   width on columns. Line length is kept readable by the columns being
   narrower than the page, not by the page being narrow; the few
   paragraphs that do span the full width carry .measure. */
.measure { max-width: 70ch }
.page-wide { max-width: none }

/* Page-level column splits. Below --split-bp every one of these
   collapses to a single column, so 390 is one column everywhere. */
.split { display: grid; gap: 20px }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 24px; align-items: start }
  .split.lesson { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr) }
}
.split-side > .card:first-child { margin-top: 0 }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: all .2s var(--ease); text-align: center;
}
.btn-primary { background: var(--deep-blue); color: #fff }
.btn-primary:hover:not(:disabled) { background: var(--deep-blue-dark); transform: translateY(-1px) }
.btn-green { background: var(--green-dark); color: #fff }
.btn-green:hover:not(:disabled) { background: #357d37; transform: translateY(-1px) }
.btn-ghost { background: var(--paper); color: var(--ink-secondary); border-color: var(--line) }
.btn-ghost:hover:not(:disabled) { border-color: var(--deep-blue); color: var(--deep-blue) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn-lg { font-size: 16px; padding: 16px 32px }
.btn .arrow { display: inline-block; transition: transform .2s var(--ease) }
.btn:hover:not(:disabled) .arrow { transform: translateX(3px) }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 20px }
.card h2 { font-size: 22px; font-weight: 800; margin-bottom: 12px }
.card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px }
.card p { color: var(--ink-secondary); margin-bottom: 14px }
.card p:last-child { margin-bottom: 0 }
.muted-note { font-size: 14px; color: var(--muted); line-height: 1.6 }

.notice {
  border-radius: var(--radius); padding: 16px 20px; font-size: 14.5px; line-height: 1.6;
  border: 1px solid var(--amber-line); background: var(--amber-bg); color: #5a3b00;
}
.notice strong { color: var(--amber) }
.notice.info { border-color: #cfe0f4; background: var(--blue-soft); color: #11395f }
.notice.info strong { color: var(--deep-blue-dark) }
.notice + .notice { margin-top: 12px }

/* ===== Certification pitch band (on the open course page) ===== */
.cert-band {
  position: relative; overflow: hidden;
  background: linear-gradient(130deg, var(--deep-blue-deep) 0%, var(--deep-blue) 58%, #2a7a4e 140%);
  border-radius: var(--radius-xl); color: #fff; padding: 40px clamp(24px, 4vw, 48px);
  margin: 8px 0 56px; box-shadow: var(--shadow-lg);
}
.cert-band::after {
  content: ''; position: absolute; right: -120px; top: -140px; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(76, 175, 80, .3) 0%, transparent 68%); pointer-events: none;
}
.cert-band-inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px 44px; align-items: center }
.cert-band .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #A8E5AC; margin-bottom: 12px;
}
.cert-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 12px; text-wrap: balance }
.cert-band p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); max-width: 62ch; margin-bottom: 16px }
.cert-band p:last-of-type { margin-bottom: 0 }
.cert-band-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 4px }
.cert-band-steps li {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  padding: 7px 14px; border-radius: 999px;
}
.cert-band-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 230px }
.cert-band-cta .btn-primary { background: #fff; color: var(--deep-blue-deep) }
.cert-band-cta .btn-primary:hover { background: #eaf2fb; color: var(--deep-blue-deep) }
.cert-band-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45) }
.cert-band-cta .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1) }
.cert-band-cta .fine { font-size: 12.5px; color: rgba(255, 255, 255, .62); text-align: center; line-height: 1.5 }
@media (max-width: 860px) {
  .cert-band-inner { grid-template-columns: 1fr }
  .cert-band-cta { min-width: 0 }
}

/* ===== Program facts ===== */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 28px }
.fact {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.fact strong { display: block; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--deep-blue); line-height: 1.1 }
.fact span { font-size: 13.5px; color: var(--muted); font-weight: 500 }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr) } }

/* ===== Steps explainer ===== */
.steps { list-style: none; display: grid; gap: 14px; margin: 0; counter-reset: step }
.steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--deep-blue);
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.steps h3 { font-size: 16px; font-weight: 800; margin-bottom: 3px }
.steps p { font-size: 14.5px; color: var(--ink-secondary); margin: 0; line-height: 1.6 }

/* ===== Sign-up form ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px }
.field { display: flex; flex-direction: column; gap: 7px }
.field.full { grid-column: 1 / -1 }
.field label { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ink) }
.field .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.5 }
.field input[type="text"], .field input[type="email"], .field select {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23647588' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px }
.field input:focus, .field select:focus { outline: none; border-color: var(--deep-blue-light); box-shadow: 0 0 0 3px rgba(46, 123, 201, .15) }
.field.invalid input, .field.invalid select { border-color: var(--red) }
.field .err { font-size: 12.5px; color: var(--red); font-weight: 600; display: none }
.field.invalid .err { display: block }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; grid-column: 1 / -1 }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--deep-blue) }
.check label { font-size: 14.5px; font-weight: 500; color: var(--ink-secondary); line-height: 1.6 }
.check.invalid label { color: var(--red) }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr } }

/* ===== Progress bar ===== */
.progress-wrap { margin-bottom: 26px }
.progress-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 10px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ink-secondary);
}
.progress-head .pct { color: var(--deep-blue) }
.progress-track { height: 10px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; border: 1px solid var(--line) }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--deep-blue), var(--green)); transition: width .5s var(--ease) }

/* ===== Module map ===== */
.map-module { margin-bottom: 34px }
.map-module-head { margin-bottom: 14px }
.map-module-num { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark) }
.map-module-title { font-size: 21px; font-weight: 800; color: var(--ink); margin-top: 4px }
.map-list { display: flex; flex-direction: column; gap: 10px }
.map-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 20px; transition: all .2s var(--ease);
}
a.map-item:hover { border-color: var(--deep-blue-light); box-shadow: var(--shadow); transform: translateY(-1px) }
.map-item.is-locked { background: var(--bg-alt); border-style: dashed; color: var(--muted) }
.map-item.is-current { border-color: var(--deep-blue); box-shadow: 0 0 0 3px rgba(27, 95, 170, .1) }
.map-item.is-done { border-color: #cfe9d0 }
.map-dot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line);
}
.map-item.is-done .map-dot { background: var(--green-soft); color: var(--green-dark); border-color: #cfe9d0 }
.map-item.is-current .map-dot { background: var(--deep-blue); color: #fff; border-color: var(--deep-blue) }
.map-dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.map-text { min-width: 0 }
.map-badge { display: block; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }
.map-title { display: block; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-top: 2px }
.map-item.is-locked .map-title { color: var(--muted) }
.map-state {
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  padding: 6px 13px; border-radius: 999px; background: var(--bg-alt); color: var(--muted);
}
.map-item.is-done .map-state { background: var(--green-soft); color: var(--green-dark) }
.map-item.is-current .map-state { background: var(--blue-soft); color: var(--deep-blue) }
@media (max-width: 620px) {
  .map-item { grid-template-columns: 34px 1fr; gap: 14px }
  .map-dot { width: 34px; height: 34px }
  .map-state { grid-column: 2; justify-self: start }
}

/* ===== Resource card ===== */
.resource {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px;
}
.resource-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center }
.resource-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.resource h3 { font-size: 17px; font-weight: 800; margin-bottom: 5px }
.resource p { font-size: 14.5px; color: var(--ink-secondary); margin-bottom: 10px; line-height: 1.6 }

/* ===== Lesson page ===== */
.lesson-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted);
}
.lesson-rail a { color: var(--deep-blue) }
.lesson-rail a:hover { text-decoration: underline }
.lesson-keypoints { list-style: none; display: grid; gap: 9px; margin: 4px 0 0 }
.lesson-keypoints li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 15px; color: var(--ink-secondary); line-height: 1.6 }
.lesson-keypoints li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 9px; margin-left: 6px;
}
.read-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center;
  background: var(--blue-soft); border: 1px solid #cfe0f4; border-radius: var(--radius-lg);
  padding: 22px 26px; margin: 22px 0;
}
.read-cta h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; color: var(--deep-blue-deep) }
.read-cta p { font-size: 14px; color: #11395f; margin: 0; line-height: 1.6 }
@media (max-width: 680px) { .read-cta { grid-template-columns: 1fr } }

/* ===== Assessment ===== */
.assess-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-bottom: 8px;
}
.assess-head h2 { margin: 0 }
.pill {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px; background: var(--bg-alt); color: var(--muted); white-space: nowrap;
}
.pill.draft { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line) }
.pill.pass { background: var(--green-soft); color: var(--green-dark) }
.pill.fail { background: var(--red-soft); color: #a8392c }

.q { border-top: 1px solid var(--line); padding: 24px 0 }
.q:first-of-type { border-top: none; padding-top: 10px }
.q-num { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px }
.q-text { display: block; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); margin-bottom: 14px }
.q-options { display: flex; flex-direction: column; gap: 9px }
.opt {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 13px 16px; cursor: pointer; transition: all .15s var(--ease);
}
.opt:hover { border-color: var(--deep-blue-light); background: #fbfdff }
.opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--deep-blue); cursor: pointer }
.opt span { font-size: 15px; line-height: 1.55; color: var(--ink-secondary) }
.opt.selected { border-color: var(--deep-blue); background: var(--blue-soft) }
.opt.selected span { color: var(--ink) }
.graded .opt { cursor: default }
.graded .opt:hover { border-color: var(--line); background: var(--paper) }
.opt.correct { border-color: var(--green); background: var(--green-soft) }
.opt.correct span { color: #1f5c22 }
.opt.wrong { border-color: var(--red); background: var(--red-soft) }
.opt.wrong span { color: #8d2f24 }
.opt-tag {
  grid-column: 2; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; margin-top: 5px;
}
.opt.correct .opt-tag { color: var(--green-dark) }
.opt.wrong .opt-tag { color: #a8392c }
.q-explain {
  margin-top: 12px; border-left: 3px solid var(--line); padding: 4px 0 4px 16px;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-secondary);
}
.q.is-wrong .q-explain { border-left-color: var(--red) }
.q.is-right .q-explain { border-left-color: var(--green) }
.q-explain strong { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--ink) }
.q-source { display: block; margin-top: 6px; font-size: 13px; color: var(--muted) }

.result-panel { border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 22px; border: 1px solid }
.result-panel.pass { background: var(--green-soft); border-color: #cfe9d0 }
.result-panel.fail { background: var(--amber-bg); border-color: var(--amber-line) }
.result-score { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 900; line-height: 1.1; margin-bottom: 6px }
.result-panel.pass .result-score { color: var(--green-dark) }
.result-panel.fail .result-score { color: var(--amber) }
.result-panel h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px }
.result-panel p { font-size: 15px; line-height: 1.65; color: var(--ink-secondary); margin-bottom: 16px }

/* ===== Certificate page ===== */
.cert-preview {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(22px, 4vw, 44px); margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.cert-preview::before {
  content: ''; position: absolute; inset: 14px; border: 2px solid var(--deep-blue);
  border-radius: 6px; pointer-events: none;
}
.cert-preview::after {
  content: ''; position: absolute; inset: 20px; border: 1px solid var(--green); border-radius: 3px; pointer-events: none;
}
.cert-preview-inner { position: relative; text-align: center; padding: clamp(10px, 2vw, 22px) }
.cert-preview img.cert-logo { height: 58px; width: auto; margin: 0 auto 22px }
.cert-preview .cert-kicker {
  font-family: 'Inter', sans-serif; font-size: clamp(19px, 3.4vw, 32px); font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--deep-blue); margin-bottom: 8px;
}
.cert-preview .cert-rule { width: 110px; height: 3px; background: var(--green); border-radius: 2px; margin: 14px auto 20px }
.cert-preview .cert-lead { font-size: 14px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; font-family: 'Inter', sans-serif }
.cert-preview .cert-name {
  font-family: 'Inter', sans-serif; font-size: clamp(26px, 4.6vw, 42px); font-weight: 800;
  color: var(--ink); margin: 12px auto 10px; padding-bottom: 12px; max-width: 24ch;
  border-bottom: 1px solid var(--line); line-height: 1.2; word-break: break-word;
}
.cert-preview .cert-program { font-family: 'Inter', sans-serif; font-size: clamp(15px, 2.2vw, 19px); font-weight: 800; color: var(--deep-blue-deep); margin-top: 16px; line-height: 1.4 }
.cert-preview .cert-program span { display: block; font-weight: 600; color: var(--ink-secondary); font-size: .88em; margin-top: 4px }
.cert-preview .cert-approved { margin-top: 18px; font-size: 14px; color: var(--ink-secondary); font-style: italic }
.cert-sigs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px 28px; align-items: end; margin-top: 28px; max-width: 760px; margin-inline: auto }
.cert-seal { width: 104px; height: 104px; display: block; margin-bottom: -6px }
.cert-sig { border-top: 1px solid var(--ink); padding-top: 9px }
.cert-sig strong { display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: var(--ink) }
.cert-sig span { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: block; margin-top: 2px }
.cert-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 26px; font-size: 13px; color: var(--muted) }
.cert-meta b { font-family: 'Inter', sans-serif; color: var(--ink-secondary); font-weight: 700 }
.cert-fine { margin-top: 18px; font-size: 11.5px; color: var(--muted); line-height: 1.6; max-width: 72ch; margin-inline: auto }
.cert-proto-tag {
  position: absolute; top: 26px; right: 26px; z-index: 2;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line);
  padding: 5px 11px; border-radius: 4px;
}
@media (max-width: 620px) {
  .cert-sigs { grid-template-columns: 1fr; gap: 20px; justify-items: stretch }
  .cert-seal { order: -1; justify-self: center; margin-bottom: 0 }
  .cert-proto-tag { position: static; display: inline-block; margin-bottom: 14px }
}

/* ===== Verification ===== */
.verify-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }
.verify-form .field { flex: 1 1 280px }
.record { display: grid; gap: 0 }
.record-row { display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px; padding: 12px 0; border-top: 1px solid var(--line) }
.record-row:first-child { border-top: none }
.record-row dt { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--muted) }
.record-row dd { font-size: 15px; color: var(--ink) }
@media (max-width: 560px) { .record-row { grid-template-columns: 1fr; gap: 2px } }
.badge-valid {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dark); margin-bottom: 16px;
}
.badge-valid svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }

/* ===== Footer ===== */
.site-footer { background: #0a1929; color: white; padding: 56px 0 32px }
.footer-inner { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 28px; flex-wrap: wrap; gap: 24px }
.footer-brand img { height: 64px; width: auto; opacity: .95 }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, .6); transition: color .2s }
.footer-links a:hover { color: white }
.footer-copyright { font-size: 13px; color: rgba(255, 255, 255, .42); text-align: center }

/* ===== Focus ===== */
a:focus-visible, button:focus-visible, .nav-cta:focus-visible, .hamburger:focus-visible,
input:focus-visible, select:focus-visible, .opt:focus-within {
  outline: 3px solid var(--deep-blue-light); outline-offset: 3px; border-radius: 6px;
}
.nav-cta:focus-visible { outline-color: var(--orange) }
.site-footer a:focus-visible { outline-color: #9fc6ef }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
}
@media (max-width: 1024px) {
  .nav-links { display: none }
  .hamburger { display: flex }
}
@media (max-width: 768px) {
  .page-hero { padding: calc(124px + var(--banner-h)) 0 40px }
  .footer-inner { flex-direction: column; text-align: center }
  .footer-links { justify-content: center; gap: 6px 28px }
  .footer-links a { padding: 11px 8px; display: inline-block }
  .footer-brand { display: flex; justify-content: center; width: 100% }
  .card { padding: 22px 20px }
  .section { padding-bottom: 72px }
}

/* ===== Participant code =====
   The code is the only way back into an enrolment from another device,
   so on the track page it is given its own panel rather than a line of
   body copy, and it is selectable as one unit. */
.code-box {
  display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 4px solid var(--deep-blue);
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 22px;
}
.code-box-main { flex: 1; min-width: 220px }
.code-label {
  display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 6px;
}
.code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: .14em;
  color: var(--deep-blue-deep); line-height: 1.1;
  user-select: all; -webkit-user-select: all;
}
.code-note { flex: 2; min-width: 240px; font-size: 14px; color: var(--ink-secondary); line-height: 1.6; margin: 0 }
.code-note strong { color: var(--ink) }
.code-copy { flex-shrink: 0 }

/* ===== Saving / retry states =====
   A failed save must never read as a failed assessment, so the warning
   sits apart from the result panel and keeps the neutral amber of the
   other advisory notices rather than the red of a wrong answer. */
.save-warn {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--amber-line); background: var(--amber-bg);
  color: #5a3b00; font-size: 14px; line-height: 1.6;
}
.save-warn strong { color: var(--amber) }
.save-ok { margin-top: 14px; font-size: 14px; color: var(--green-dark); font-weight: 600 }

/* The resume panel is secondary to signing up, so it reads as a quiet
   disclosure under the form rather than a competing second form. */
.resume-toggle {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--deep-blue); cursor: pointer; text-decoration: underline;
}
.resume-panel { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--line) }
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ===== Full-width layouts (Justin 2026-10-21: use the width, no wasted side space) ===== */
.narrow { max-width: none }
@media (min-width: 900px) {
  .map-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .q-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .signup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start }
  .signup-layout > .facts { grid-column: 1 / -1; grid-row: 1 }
  .signup-layout > #enrolled-card { grid-column: 1 / -1; grid-row: 2 }
  .signup-layout > #how-card { grid-column: 1; grid-row: 3 }
  .signup-layout > #what-card { grid-column: 1; grid-row: 4 }
  .signup-layout > #signup-card { grid-column: 2; grid-row: 3 / span 2; margin-top: 0 }
  .signup-layout > .card + .card { margin-top: 0 }
  .signup-layout > #how-card, .signup-layout > #what-card { margin-bottom: 20px }
}

@media (max-width: 560px) {
  .insights-tabs { display: flex; flex-wrap: wrap; border-radius: var(--radius); justify-content: flex-start }
  .insights-tabs a { padding: 9px 14px }
}