/* PassStep1 — main stylesheet (modern clinical teal theme) */
:root {
  --c-primary: #0A7C7A;        /* teal-deep — buttons, links, header */
  --c-primary-dark: #0E2A3B;   /* ink navy — hovers, shadows */
  --c-primary-light: #0FA3A0;  /* teal */
  --c-accent: #0FA3A0;         /* teal accent */
  --c-ink: #0E2A3B;            /* headings */
  --c-correct: #17924A;        /* clinical green */
  --c-correct-bg: #E7F5EC;
  --c-incorrect: #D64545;      /* alert red */
  --c-incorrect-bg: #FBEAEA;
  --c-warn-bg: #FCEFD6;
  --c-warn: #8A5A12;
  --c-flag: #E1962F;           /* amber flag */
  --c-focus: #E1962F;          /* focus amber */
  --c-text: #16242F;
  --c-muted: #5C6B78;
  --c-border: #DCE3E9;
  --c-bg: #ffffff;
  --c-bg-alt: #EDF1F4;
  --c-bg-deep: #E2E8EE;
  --c-teal-tint: #E4F5F4;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(14,42,59,.05);
  --shadow: 0 1px 2px rgba(14,42,59,.06), 0 10px 24px -14px rgba(14,42,59,.18);
  --shadow-lg: 0 24px 60px -28px rgba(14,42,59,.4);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

/* Accessible focus states throughout */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg-alt);
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
hr { border: none; border-top: 1px solid var(--c-border); margin: 24px 0; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { color: var(--c-ink); margin-top: 0; line-height: 1.2; font-family: var(--font-display); letter-spacing: -.02em; }
h1 { font-size: 34px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }

/* === Announcement bar === */
.announcement {
  background: var(--c-primary);
  color: #fff;
  padding: 8px 20px;
  text-align: center;
  font-size: 14px;
}

/* === Header === */
.site-header {
  background: var(--c-primary-dark);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; color: #fff; text-decoration: none; letter-spacing: -.01em; font-family: var(--font-display); }
.brand:hover { text-decoration: none; color: #fff; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(150deg, var(--c-primary-light), var(--c-primary));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px var(--c-primary);
}
.main-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.main-nav a { color: #fff; text-underline-offset: 4px; }
.main-nav a:hover { color: #fff; text-decoration: underline; }
.nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,.35); }
.nav-user { color: rgba(255,255,255,.85); font-size: 14px; }
.nav-logout { color: rgba(255,255,255,.85) !important; font-size: 14px; }
.site-header .btn-primary,
.site-header .btn {
  background: linear-gradient(150deg, var(--c-primary-light), var(--c-primary)); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px var(--c-primary);
}
.site-header .btn:hover { filter: brightness(1.06); color: #fff; transform: translateY(-1px); }
.nav-toggle {
  display: none;
  background: none; border: none; font-size: 24px; cursor: pointer; color: #fff;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 66px; right: 0; left: 0;
    background: var(--c-primary-dark);
    flex-direction: column;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    align-items: flex-start;
    gap: 12px;
  }
  .main-nav.open { display: flex; }
  .nav-divider { display: none; }
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 11px 22px;
  background: linear-gradient(150deg, var(--c-primary-light), var(--c-primary));
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 10px 22px -12px var(--c-primary);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s, filter .14s, background .14s;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(150deg, var(--c-primary-light), var(--c-primary)); }
.btn-secondary { background: var(--c-ink); box-shadow: 0 10px 22px -12px rgba(14,42,59,.6); }
.btn-secondary:hover { background: #17384D; color: #fff; }
.btn-success { background: var(--c-correct); box-shadow: 0 10px 22px -12px var(--c-correct); }
.btn-success:hover { filter: brightness(1.05); }
.btn-danger { background: var(--c-incorrect); box-shadow: 0 10px 22px -12px var(--c-incorrect); }
.btn-danger:hover { filter: brightness(1.05); }
.btn-outline { background: #fff; color: var(--c-primary-dark); border: 1.5px solid var(--c-border); box-shadow: none; }
.btn-outline:hover { background: #fff; border-color: var(--c-primary); color: var(--c-primary); }
.btn-sm { padding: 6px 14px; font-size: 14px; }
.btn-lg { padding: 14px 28px; font-size: 17px; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* === Cards === */
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card-title { margin-top: 0; }

/* === Forms === */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: var(--c-text); }
.form-field input[type=text],
.form-field input[type=password],
.form-field input[type=email],
.form-field input[type=url],
.form-field input[type=number],
.form-field input[type=date],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--c-text);
}
.form-field textarea { min-height: 100px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(12,74,110,.12);
}
.form-field small { color: var(--c-muted); font-size: 13px; margin-top: 4px; display: block; }
.form-row { display: flex; gap: 16px; }
.form-row .form-field { flex: 1; }
.form-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.form-check input { width: 16px; height: 16px; }

/* === Alerts === */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 16px 0;
  font-size: 14px;
}
.alert-error   { background: var(--c-incorrect-bg); color: #8F1B12; border: 1px solid #fca5a5; }
.alert-success { background: var(--c-correct-bg); color: #00532A; border: 1px solid #6ee7b7; }
.alert-info    { background: #DCE9F5; color: #1e40af; border: 1px solid #7FB2E0; }
.alert-warn    { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid #E8C965; }

/* === Hero === */
.hero {
  position: relative;
  padding: 64px 20px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.hero .container.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-text { text-align: left; }
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary-dark);
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  padding: 6px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 20px;
}
.hero h1 {
  color: var(--c-primary-dark);
  font-size: 44px;
  line-height: 1.12;
  margin: 0 0 18px;
}
.hero .lead {
  font-size: 19px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 28px;
  color: var(--c-text);
}
.hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hero-microcopy {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-muted);
}
.hero-microcopy span { white-space: nowrap; }
.hero-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-illustration svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(33,43,50,.08));
}

@media (max-width: 880px) {
  .hero .container.hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-illustration svg { max-width: 300px; }
}
@media (max-width: 640px) {
  .hero { padding: 40px 20px 48px; }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 16px; }
  .hero-illustration { display: none; }
  .hero-microcopy { gap: 10px; font-size: 12px; }
}

/* === How-it-works steps === */
.section-steps { background: #fff; padding: 64px 0; border-bottom: 1px solid var(--c-border); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.step {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.step h3 { font-size: 18px; margin: 0 0 8px; color: var(--c-primary-dark); }
.step p { margin: 0; color: var(--c-muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 800px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* === Stats strip === */
.stats-strip {
  background: var(--c-primary-dark);
  color: #fff;
  padding: 44px 20px;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-tile { padding: 8px; }
.stat-number {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-caption { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500; }
@media (max-width: 720px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stat-number { font-size: 30px; }
}

/* === Feature grid === */
.features {
  padding: 72px 0;
  background: #fff;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.feature {
  background: #fff;
  padding: 26px 24px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-primary);
}
.feature-icon {
  width: 48px; height: 48px;
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 23px;
  margin-bottom: 16px;
  border: 1px solid var(--c-border);
}
.feature h3 { font-size: 18px; margin-bottom: 8px; color: var(--c-primary-dark); }
.feature p { color: var(--c-muted); margin: 0; font-size: 15px; line-height: 1.55; }

/* === Section === */
.section { padding: 80px 0; }
.section-pricing { background: #fff; }
.section-title { text-align: center; margin-bottom: 12px; font-size: 32px; }
.section-subtitle { text-align: center; color: var(--c-muted); margin-bottom: 40px; font-size: 17px; }

/* Plan "Best value" badge */
.plan { position: relative; }
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-correct);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius);
}

/* Final CTA card */
.section-cta {
  background: var(--c-primary);
  padding: 0;
}
.section-cta .container { padding: 72px 20px; }
.cta-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  position: relative;
}
.cta-card h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.cta-card p { color: rgba(255,255,255,.88); font-size: 17px; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* === Pricing === */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 40px 0;
}
.plan {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  display: flex; flex-direction: column;
}
.plan.featured { border: 2px solid var(--c-primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan.featured::before {
  content: "BEST VALUE";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--c-primary); color: #fff;
  padding: 4px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.plan-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--c-primary); }
.plan-price { font-size: 42px; font-weight: 800; color: var(--c-text); margin: 12px 0; }
.plan-period { color: var(--c-muted); font-size: 14px; margin-bottom: 24px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; flex: 1; }
.plan-features li { padding: 6px 0; padding-left: 24px; position: relative; font-size: 15px; }
.plan-features li::before {
  content: "✓"; color: var(--c-correct);
  position: absolute; left: 0; font-weight: 700;
}

/* === Quiz === */
.quiz-wrap { max-width: 820px; margin: 0 auto; padding: 32px 20px; }
.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.quiz-progress { font-size: 14px; color: var(--c-muted); }
.quiz-progress strong { color: var(--c-primary); font-weight: 700; }
.quiz-timer {
  background: var(--c-primary);
  color: #fff;
  padding: 6px 14px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.quiz-timer.warn { background: var(--c-warn); }
.quiz-timer.danger { background: var(--c-incorrect); }
.progress-bar {
  height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden;
  margin-bottom: 24px;
}
.progress-bar-fill { height: 100%; background: var(--c-primary-light); transition: width .3s; }

.question-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow);
}
.question-meta {
  font-size: 13px; color: var(--c-muted); margin-bottom: 8px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.question-meta .tag {
  background: var(--c-bg-deep); padding: 2px 8px; border-radius: 4px;
}
.question-title {
  font-size: 18px; line-height: 1.6; margin: 12px 0 24px;
  color: var(--c-text); font-weight: 500;
}
.question-images { margin: 16px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.question-images img { max-width: 100%; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--c-border); }

.answer-list { list-style: none; padding: 0; margin: 0; }
.answer-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  cursor: pointer; transition: all .15s;
  background: #fff;
}
.answer-option:hover { border-color: var(--c-primary-light); background: var(--c-bg-alt); }
.answer-option input[type=radio] { margin-top: 4px; }
.answer-option.selected { border-color: var(--c-primary); background: rgba(12,74,110,.04); }
.answer-option.correct { border-color: var(--c-correct); background: var(--c-correct-bg); }
.answer-option.incorrect { border-color: var(--c-incorrect); background: var(--c-incorrect-bg); }
.answer-option-letter {
  font-weight: 700; color: var(--c-primary);
  width: 24px; flex-shrink: 0;
}
.answer-option.correct .answer-option-letter { color: var(--c-correct); }
.answer-option.incorrect .answer-option-letter { color: var(--c-incorrect); }

.explanation {
  margin-top: 24px; padding: 20px;
  background: var(--c-bg-alt); border-left: 4px solid var(--c-primary-light);
  border-radius: var(--radius);
  display: none;
}
.explanation.visible { display: block; }
.explanation h4 { margin-top: 0; margin-bottom: 8px; }

.quiz-actions {
  margin-top: 24px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap;
}

/* === Tables === */
.table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden;
}
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.table th { background: var(--c-bg-alt); font-weight: 600; color: var(--c-muted); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--c-bg-alt); }

/* === Badges === */
.badge {
  display: inline-block; padding: 2px 10px;
  border-radius: 100px; font-size: 12px; font-weight: 600;
}
.badge-success { background: var(--c-correct-bg); color: #00532A; }
.badge-danger  { background: var(--c-incorrect-bg); color: #8F1B12; }
.badge-warn    { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-info    { background: #DCE9F5; color: #1e40af; }
.badge-muted   { background: var(--c-bg-deep); color: var(--c-muted); }

/* === Stats === */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-box {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: 20px;
}
.stat-label { font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 32px; font-weight: 800; color: var(--c-primary); margin: 4px 0; }
.stat-detail { font-size: 13px; color: var(--c-muted); }

/* === Footer === */
.site-footer {
  background: var(--c-primary-dark);
  border-top: 4px solid var(--c-primary);
  margin-top: 60px;
  padding: 50px 0 0;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}
.footer-inner { display: flex; gap: 60px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-inner > div:first-child { flex: 1.5; min-width: 220px; }
.footer-brand { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.footer-tagline { font-size: 14px; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; flex: 2; }
.footer-cols > div { min-width: 120px; }
.footer-cols h4 { font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.footer-cols a { display: block; color: rgba(255,255,255,.8); padding: 4px 0; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding: 20px 0; font-size: 13px; color: rgba(255,255,255,.65); }

/* === Site-main padding === */
.site-main { min-height: 60vh; padding: 32px 0; }
.site-main.no-padding { padding: 0; }

/* === Dashboard === */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* === Categories grid (for choosing quiz topic) === */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.cat-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: all .15s;
}
.cat-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); }
.cat-card.selected { border-color: var(--c-primary); background: rgba(12,74,110,.04); }
.cat-card input { display: none; }
.cat-card-name { font-weight: 600; color: var(--c-text); }
.cat-card-meta { font-size: 13px; color: var(--c-muted); }

/* === Performance bars === */
.perf-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }
.perf-row-name { width: 200px; flex-shrink: 0; }
.perf-row-bar { flex: 1; height: 8px; background: var(--c-border); border-radius: 4px; overflow: hidden; }
.perf-row-bar-fill { height: 100%; background: var(--c-primary-light); }
.perf-row-stat { width: 80px; text-align: right; color: var(--c-muted); }

/* === Misc === */
.text-center { text-align: center; }
.text-muted { color: var(--c-muted); }
.text-correct { color: var(--c-correct); }
.text-incorrect { color: var(--c-incorrect); }
.muted-row { color: var(--c-muted); font-size: 14px; }
.spacer-sm { height: 16px; }
.spacer { height: 32px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 24px; }
.tab { padding: 10px 16px; cursor: pointer; color: var(--c-muted); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--c-primary); text-decoration: none; }
.tab.active { color: var(--c-primary); border-color: var(--c-primary); font-weight: 600; }

/* === Pagination === */
.pagination { display: flex; gap: 4px; margin: 24px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: #fff; color: var(--c-text); font-size: 14px;
}
.pagination a:hover { background: var(--c-bg-alt); text-decoration: none; }
.pagination .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination .disabled { opacity: .5; pointer-events: none; }

/* === Auth pages === */
.auth-wrap { max-width: 440px; margin: 60px auto; padding: 0 20px; }
.auth-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 24px; margin-bottom: 8px; text-align: center; }
.auth-sub { color: var(--c-muted); text-align: center; margin-bottom: 32px; }
.auth-foot { text-align: center; margin-top: 24px; font-size: 14px; color: var(--c-muted); }

/* ===== Additional component styles ===== */

/* Auth */
.auth-alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--c-muted); }
.auth-alt a { color: var(--c-primary); }

/* Stat grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.stat-box {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
}
.stat-value { font-size: 32px; font-weight: 700; color: var(--c-primary); }
.stat-label { font-size: 14px; color: var(--c-text); font-weight: 600; margin-top: 4px; }
.stat-sub { font-size: 13px; margin-top: 4px; }
.muted { color: var(--c-muted); }
.small { font-size: 13px; }
.lead { font-size: 18px; color: var(--c-muted); margin-top: -8px; }

/* Page intro / header */
.page-intro { text-align: center; margin: 32px 0 24px; }
.page-intro h1 { margin-bottom: 8px; }
.page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 24px 0;
}
.page-header h1 { margin: 0; }
@media (max-width: 600px) {
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* Dashboard */
.dashboard-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin: 24px 0 16px;
}
.dashboard-sub-status { display: flex; align-items: center; gap: 12px; }

/* Mode grid */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 16px 0 32px;
}
.mode-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column;
}
.mode-card h3 { margin-top: 0; margin-bottom: 4px; }
.mode-card p { margin-top: 0; margin-bottom: 12px; }
.mode-card .form-field { margin-bottom: 10px; }
.mode-card button { margin-top: auto; }

/* Demo list */
.demo-list { max-height: 460px; overflow-y: auto; padding-right: 8px; }
.demo-item {
  display: flex; gap: 12px; padding: 10px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  margin-bottom: 6px; cursor: pointer; align-items: flex-start;
}
.demo-item:hover { background: var(--c-bg-alt); }
.demo-item input { margin-top: 4px; }
.demo-title { display: block; margin-top: 4px; }
.demo-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Result cards */
.results-header { margin: 24px 0; }
.results-summary {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.results-score { text-align: center; }
.results-pct { font-size: 56px; font-weight: 800; color: var(--c-primary); line-height: 1; }
.results-fraction { color: var(--c-muted); font-size: 14px; margin-top: 4px; }
.results-bar {
  flex: 1; min-width: 240px; height: 36px;
  border-radius: 18px; overflow: hidden;
  display: flex;
  background: var(--c-bg-deep);
}
.results-bar-correct { background: var(--c-correct); color: #fff; display: flex; align-items: center; padding-left: 12px; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; }
.results-bar-incorrect { background: var(--c-incorrect); color: #fff; display: flex; align-items: center; padding-left: 12px; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; }

.result-card {
  background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.result-card.is-correct   { border-left-color: var(--c-correct); }
.result-card.is-incorrect { border-left-color: var(--c-incorrect); }
.result-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.result-question { margin-bottom: 12px; }
.result-options { padding-left: 24px; margin: 0 0 12px; }
.result-options li { padding: 4px 0; }
.result-options .option-correct { color: var(--c-correct); font-weight: 600; }
.result-options .option-chosen { text-decoration: underline; }
.result-options .option-correct.option-chosen { background: var(--c-correct-bg); padding: 2px 6px; border-radius: 4px; }
.result-options li:not(.option-correct).option-chosen { background: var(--c-incorrect-bg); padding: 2px 6px; border-radius: 4px; color: var(--c-incorrect); }
.result-explanation { margin-top: 12px; }
.result-explanation summary { cursor: pointer; color: var(--c-primary); font-weight: 600; }
.result-explanation > div { padding: 12px; background: var(--c-bg-alt); border-radius: var(--radius); margin-top: 8px; }

/* Mini-bar (e.g. progress within a row) */
.mini-bar { height: 8px; background: var(--c-border); border-radius: 4px; overflow: hidden; display: inline-block; min-width: 80px; vertical-align: middle; margin-right: 6px; }
.mini-bar-fill { height: 100%; background: var(--c-primary-light); }

/* Accuracy color tags */
.acc-pct { font-weight: 600; }
.acc-good { color: var(--c-correct); }
.acc-mid  { color: #B57F00; }
.acc-weak { color: var(--c-incorrect); }

/* Static content pages */
.content-page { max-width: 760px; margin: 24px auto; }
.content-page h2 { margin-top: 32px; }
.content-page ul, .content-page ol { padding-left: 22px; }

/* Account page */
.account-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }
.account-grid .card { margin: 0; }
.danger-zone { border-color: var(--c-incorrect); }
.danger-zone h2 { color: var(--c-incorrect); }

/* Pricing variants used by /subscribe.php */
.pricing-card {
  background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius);
  padding: 24px; cursor: pointer; position: relative;
  display: flex; flex-direction: column;
}
.pricing-card input[type=radio] { position: absolute; opacity: 0; }
.pricing-card.featured { border-color: var(--c-primary); box-shadow: var(--shadow-lg); }
.pricing-card:has(input:checked) { border-color: var(--c-primary); background: #EFF5FB; }
.pricing-card .price { font-size: 36px; font-weight: 800; color: var(--c-text); margin: 12px 0 4px; }
.pricing-card .price-sub { font-size: 13px; margin-bottom: 16px; }
.pricing-badge {
  position: absolute; top: -12px; right: 16px; background: var(--c-primary);
  color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700;
}
.pricing-features { list-style: none; padding: 0; margin: 0; }
.pricing-features li { padding: 4px 0; font-size: 14px; }

.discount-row { padding: 16px; margin-top: 24px; }
.discount-row h3 { font-size: 16px; margin-bottom: 8px; }
.discount-row .form-row { gap: 8px; align-items: center; }
.discount-row input { padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius); flex: 1; }

.checkout-actions { text-align: center; margin: 32px 0; }
.checkout-actions p { margin-top: 12px; }

/* Form helpers */
.form-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.flex-2 { flex: 2; }
.btn-link { background: none; border: none; color: var(--c-primary); cursor: pointer; padding: 4px 8px; font: inherit; }
.btn-link:hover { text-decoration: underline; }

/* Filter bar (admin) */
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; }
.filter-bar input, .filter-bar select { padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 14px; }
.filter-bar input { flex: 1; min-width: 160px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; font-size: 14px; }
.table th { font-weight: 600; color: var(--c-muted); background: var(--c-bg-alt); }
.table tr:last-child td { border-bottom: none; }
.kv-table { width: 100%; }
.kv-table th { width: 200px; text-align: left; padding: 8px 12px 8px 0; vertical-align: top; color: var(--c-muted); font-weight: 600; }
.kv-table td { padding: 8px 0; }
.form-kv input, .form-kv select { width: 100%; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; background: var(--c-bg-deep); color: var(--c-text); font-size: 12px; font-weight: 600; border: none; cursor: pointer; }
.badge-success { background: var(--c-correct-bg); color: #00532A; }
.badge-error { background: var(--c-incorrect-bg); color: #8F1B12; }
.badge-warning { background: var(--c-warn-bg); color: var(--c-warn); }

/* Option-edit rows */
.opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.opt-row input[type=text] { flex: 1; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); }

/* Image grid */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 12px; }
.img-cell { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px; text-align: center; }
.img-cell img { max-height: 100px; }
.img-cell label { font-size: 12px; color: var(--c-muted); }

/* Site footer */
.site-footer { background: var(--c-primary-dark); color: rgba(255,255,255,.8); padding: 32px 0 24px; margin-top: 48px; }
.site-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 4px 0; font-size: 14px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; font-size: 13px; color: rgba(255,255,255,.65); text-align: center; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.site-main { min-height: 60vh; padding-bottom: 40px; }

/* Quiz extra */
.quiz-loading { text-align: center; padding: 48px; color: var(--c-muted); }

/* Utilities */
code { background: var(--c-bg-deep); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
input:disabled { background: var(--c-bg-alt); color: var(--c-muted); }

/* ====================================================================
   Phase-2 features: flag button, feedback widget, mock exam, global stats
   ==================================================================== */

/* Flag button in the question card */
.question-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.question-meta-spacer { flex: 1; }
.flag-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.flag-btn:hover { background: #FFF3CD; border-color: #FFB81C; color: #6B5300; }
.flag-btn.is-flagged {
  background: #FFF3CD;
  border-color: #E8A400;
  color: #6B5300;
  font-weight: 600;
}

/* Global stats (% of users got it right) shown after answering */
.global-stats {
  background: #EFF5FB;
  border: 1px solid #BBD8EF;
  color: #003087;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}
.global-stats strong { color: #005EB8; }

/* Feedback widget at the bottom of each question */
.feedback-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-border);
}
.feedback-toggle {
  font-size: 13px;
  color: var(--c-muted);
}
.feedback-toggle:hover { color: var(--c-primary); }
.feedback-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: inherit;
  margin: 6px 0;
}
.feedback-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback-msg { margin-left: 4px; }

/* Highlighted mode-card (e.g. mock exam) */
.mode-card.highlight {
  border-color: var(--c-primary-light);
  background: linear-gradient(135deg, #fff 0%, #EFF5FB 100%);
  position: relative;
}
.mode-card.highlight::before {
  content: "Exam mode";
  position: absolute;
  top: -10px; right: 14px;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Inline checkbox in mode-card */
.check-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.check-inline input { margin-top: 3px; }

/* Filter-bar tab active state */
.filter-bar .btn-link.active { font-weight: 700; color: var(--c-primary); }

/* ====================================================================
   Flagged-questions review page
   ==================================================================== */

.flagged-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }

.flagged-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.flagged-item[open] { box-shadow: 0 4px 16px rgba(12,74,110,.08); border-color: rgba(14,165,233,.4); }

.flagged-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  transition: background .15s ease;
}
.flagged-item > summary::-webkit-details-marker { display: none; }
.flagged-item > summary:hover { background: var(--c-bg-alt); }
.flagged-item[open] > summary { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); }

.flagged-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flagged-title-text {
  flex: 1;
  min-width: 220px;
  font-weight: 500;
  color: var(--c-text);
}
.flagged-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.reveal-toggle {
  color: var(--c-primary);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.flagged-item:not([open]) .reveal-toggle::after { content: " ▾"; }
.flagged-item[open] .reveal-toggle { color: var(--c-muted); }
.flagged-item[open] .reveal-toggle::after { content: " ▴"; }

.mono { font-family: monospace; }

.flagged-body {
  padding: 18px 20px;
  border-top: 1px solid var(--c-border);
  background: #F7F9FA;
}
.flagged-body .question-images {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0;
}
.flagged-body .question-images img {
  max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--c-border);
}
.flagged-footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--c-border);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .flagged-summary-row { gap: 8px; }
  .flagged-title-text { min-width: 100%; order: 2; }
  .flagged-meta { margin-left: 0; }
}

/* ====================================================================
   Quiz layout with side navigator
   ==================================================================== */

.quiz-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
}
.quiz-main { min-width: 0; }
.quiz-main .quiz-wrap { max-width: none; padding: 0; }

/* Navigator panel (right side on desktop) */
.quiz-nav {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.quiz-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.quiz-nav-header strong { font-size: 14px; color: var(--c-text); }
.nav-close { display: none; padding: 0; font-size: 18px; }
.nav-toggle { display: none; font-size: 13px; }

.quiz-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.nav-cell {
  position: relative;
  background: #E8EDEE;
  border: 1px solid #C4CDD1;
  color: #212B32;
  border-radius: 6px;
  padding: 8px 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: transform .08s ease, border-color .15s ease;
  min-height: 36px;
}
.nav-cell:hover { transform: scale(1.06); border-color: var(--c-primary-light); }
.nav-cell-num { display: block; font-weight: 600; }
.nav-cell-mark { display: block; font-size: 14px; line-height: 1; margin-top: 2px; }
.nav-cell.is-unanswered { background: #E8EDEE; color: #4C6272; }
.nav-cell.is-correct {
  background: #E7F3EC;
  border-color: #7BBF9A;
  color: #00532A;
}
.nav-cell.is-correct .nav-cell-mark { color: #007F3B; font-weight: 700; }
.nav-cell.is-incorrect {
  background: #FBEAE8;
  border-color: #E58B83;
  color: #8F1B12;
}
.nav-cell.is-incorrect .nav-cell-mark { color: #B02114; font-weight: 700; }
.nav-cell.is-answered {
  background: #DCE9F5;
  border-color: #7FB2E0;
  color: #003087;
}
.nav-cell.is-flagged {
  box-shadow: inset 0 0 0 2px #E8A400;
}
.nav-cell.is-current {
  outline: 3px solid var(--c-primary);
  outline-offset: 1px;
  z-index: 2;
}
.nav-flag {
  position: absolute;
  top: -4px; right: -2px;
  font-size: 10px;
}

.quiz-nav-legend {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 11px;
  color: var(--c-muted);
}
.quiz-nav-legend > div {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.nav-swatch {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #E8EDEE;
  border: 1px solid #C4CDD1;
  font-size: 10px;
  font-weight: 700;
}
.nav-swatch.is-correct    { background: #E7F3EC; border-color: #7BBF9A; color: #007F3B; }
.nav-swatch.is-incorrect  { background: #FBEAE8; border-color: #E58B83; color: #B02114; }
.nav-swatch.is-answered   { background: #DCE9F5; border-color: #7FB2E0; color: #003087; }
.nav-swatch.is-unanswered { }
.nav-swatch.is-flagged    { box-shadow: inset 0 0 0 2px #E8A400; background: #fff; }
.nav-swatch.is-current    { outline: 2px solid var(--c-primary); }

/* Action row: split into a group on the right when Skip is present */
.quiz-actions .action-group { display: inline-flex; gap: 8px; }

/* Mobile: navigator becomes a drawer */
@media (max-width: 1024px) {
  .quiz-layout { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .nav-close { display: inline-flex; }
  .quiz-nav {
    position: fixed;
    top: 0; right: 0;
    bottom: 0;
    width: 280px;
    max-width: 86vw;
    max-height: none;
    border-radius: 0;
    border-right: none;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1000;
    box-shadow: -8px 0 32px rgba(0,0,0,.2);
  }
  .quiz-nav.is-open { transform: translateX(0); }
  .quiz-nav-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 600px) {
  .quiz-nav-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ====================================================================
   Footer social-media icons
   ==================================================================== */
.footer-socials {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.footer-socials a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.footer-socials svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* =====================================================================
   PassStep1 — landing additions + FRED exam interface
   ===================================================================== */

/* Hero tweaks */
.hero { background: var(--c-bg-alt); }
.hero-accent { color: var(--c-primary); }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--c-teal-tint); color: var(--c-primary);
  font-weight:600; font-size:12.5px; letter-spacing:.02em;
  padding:6px 13px; border-radius:100px; text-transform:none;
}
.hero-illustration { position: relative; overflow: visible; }

/* Hero FRED mock */
.hero-fred{
  background:#F3F4F2; border:1px solid #C7CDCE; border-radius:12px;
  box-shadow: var(--shadow-lg); overflow:hidden; transform: rotate(.4deg);
  max-width: 460px; margin-left:auto;
}
.hf-top{ display:flex; align-items:center; gap:12px; background:#4A5A64; color:#fff; padding:9px 14px; font-size:12px; }
.hf-item{ font-weight:600; }
.hf-flag{ color:#F2C14E; }
.hf-spacer{ margin-left:auto; }
.hf-top strong{ color:#fff; }
.hf-body{ padding:16px 16px 8px; background:#F7F7F5; }
.hf-stem{ font-size:13px; line-height:1.5; color:#20303a; margin:0 0 12px; }
.hf-stem strong{ color:#0E2A3B; }
.hf-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; font-size:12.5px; margin-bottom:2px; }
.hf-rad{ width:15px; height:15px; border-radius:50%; border:1.5px solid #9aa6ac; flex:none; }
.hf-lt{ font-weight:700; color:#3a4a54; width:13px; }
.hf-opt.correct{ background: var(--c-correct-bg); }
.hf-opt.correct .hf-rad{ border-color: var(--c-correct); background: radial-gradient(circle, var(--c-correct) 42%, transparent 46%); }
.hf-opt.correct .hf-lt{ color: var(--c-correct); }
.hf-ok{ margin-left:auto; color: var(--c-correct); font-weight:700; }
.hf-opt.struck{ color:#9aa6ac; }
.hf-opt.struck .hf-lbl{ text-decoration: line-through; }
.hf-bottom{ display:flex; align-items:center; gap:12px; background:#4A5A64; color:#dfe6ea; padding:9px 14px; font-size:11px; }
.hf-nav{ margin-left:auto; display:flex; gap:6px; }
.hf-b{ background:#5c6b74; padding:4px 10px; border-radius:5px; font-weight:600; color:#fff; }
.hero-float{
  position:absolute; font-family: var(--font-display); font-size:12px; font-weight:600;
  color: var(--c-primary); background:#fff; border:1px solid var(--c-border);
  border-radius:100px; padding:7px 13px; box-shadow: var(--shadow);
}
.hf-tr{ top:-14px; right:0; }
.hf-bl{ bottom:26px; left:-14px; }
@media (max-width:900px){ .hero-float{ display:none; } .hero-fred{ transform:none; margin:0 auto; } }

/* Exam-feel dark section */
.exam-feel{ background: var(--c-ink); color:#fff; padding: 78px 0; }
.ef-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.ef-eyebrow{ font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#5fd6d0; }
.exam-feel h2{ color:#fff; margin:14px 0 12px; font-size:34px; }
.ef-head p{ color:#a9bcc7; font-size:17px; margin:0; }
.ef-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ef-card{ background:#17384D; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding:24px; }
.ef-ic{ width:42px; height:42px; border-radius:11px; background:rgba(15,163,160,.16); color:#5fd6d0; display:grid; place-items:center; font-size:18px; margin-bottom:14px; }
.ef-card h3{ color:#fff; font-size:17px; margin:0 0 7px; }
.ef-card p{ color:#9fb3bf; font-size:14px; margin:0; line-height:1.55; }
@media (max-width:860px){ .ef-grid{ grid-template-columns:1fr; } .exam-feel h2{ font-size:28px; } }

/* Domains */
.domains-section{ background: var(--c-bg-alt); }
.domains-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:40px; align-items:start; }
.pill-wrap{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{ background:#fff; border:1px solid var(--c-border); border-radius:100px; padding:9px 15px; font-size:13.5px; font-weight:500; color:var(--c-primary-dark); transition:.14s; }
.pill:hover{ border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-1px); }
.domain-note{ background: var(--c-teal-tint); border:1px solid #C6E9E6; border-radius: var(--radius-lg); padding:24px; }
.domain-note p{ margin:0; color: var(--c-primary-dark); font-size:14.5px; }
@media (max-width:860px){ .domains-grid{ grid-template-columns:1fr; } }

/* FAQ */
.faq-section{ background:#fff; }
details.faq{ background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:2px 22px; margin-bottom:12px; }
details.faq summary{ list-style:none; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--c-ink); padding:18px 0; display:flex; align-items:center; justify-content:space-between; }
details.faq summary::-webkit-details-marker{ display:none; }
.faq-x{ color:var(--c-primary); font-size:22px; font-weight:400; transition:.2s; }
details.faq[open] .faq-x{ transform: rotate(45deg); }
details.faq p{ margin:0 0 20px; color:var(--c-muted); font-size:15px; }
details.faq a{ color:var(--c-primary); font-weight:600; }

/* Section rhythm + step accents pick up theme */
.step-num{ background: linear-gradient(150deg, var(--c-primary-light), var(--c-primary)) !important; color:#fff !important; }
.plan-name{ color: var(--c-primary-dark) !important; }
.plan.featured{ box-shadow: 0 24px 50px -24px rgba(15,163,160,.5) !important; }

/* =====================================================================
   FRED-style exam interface (quiz.php)
   ===================================================================== */
.site-main:has(.exam-shell){ padding:0; }
.exam-shell{
  max-width: 1000px; margin: 22px auto; background:#F4F5F3;
  border:1px solid #C7CDCE; border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow-lg); position:relative;
}

/* Top bar */
.exam-top{ display:flex; align-items:center; gap:8px; background:#4A5A6E; color:#eef2f5; padding:0 16px; height:52px; font-size:13.5px; }
.exam-item{ font-weight:600; }
.exam-sep{ width:1px; height:22px; background:#5b6b7d; margin:0 4px; }
.exam-tbtn{ display:flex; align-items:center; gap:6px; background:transparent; border:1px solid transparent; color:#dbe3ea; padding:6px 11px; border-radius:7px; font-size:13px; font-weight:500; }
.exam-tbtn:hover{ background:rgba(255,255,255,.10); }
.exam-tbtn.on{ background:rgba(226,150,47,.22); color:#ffce85; border-color:rgba(226,150,47,.4); }
.exam-top-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.exam-mode-badge{ font-size:12px; color:#cfe7e5; background:rgba(15,163,160,.22); padding:4px 10px; border-radius:100px; }
.exam-time{ font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; background:rgba(0,0,0,.18); padding:5px 12px; border-radius:6px; }
.exam-time.warn{ color:#ffce85; }
.exam-time.danger{ color:#ff9b8f; background:rgba(214,69,69,.25); }

/* Body */
.exam-body{ background:#F4F5F3; min-height:420px; max-height: calc(100vh - 240px); overflow-y:auto; }
.exam-qwrap{ max-width:800px; margin:0 auto; padding:26px 30px 40px; }
.exam-qhead{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.exam-qnum{ font-family:var(--font-display); font-weight:700; color:var(--c-ink); font-size:15px; }
.exam-qtag{ font-size:11px; font-weight:600; color:var(--c-primary); background:var(--c-teal-tint); padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.exam-stem{ font-size:16.5px; line-height:1.66; color:#1c2b36; margin-bottom:20px; white-space:pre-wrap; }
.question-images{ margin:14px 0; display:flex; flex-wrap:wrap; gap:12px; }
.question-images img{ max-width:100%; border:1px solid var(--c-border); border-radius:8px; }

/* Options */
.exam-opts{ display:flex; flex-direction:column; gap:9px; }
.exam-opt{ display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid var(--c-border); border-radius:10px; padding:13px 15px; cursor:pointer; transition:.12s; }
.exam-opt:hover{ border-color:#b6c2cb; }
.exam-opt .radio{ width:22px; height:22px; border-radius:50%; border:2px solid #b3bfc8; flex:none; display:grid; place-items:center; transition:.12s; }
.exam-opt .radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c-primary-light); transform:scale(0); transition:.12s; }
.exam-opt .lt{ font-weight:700; color:#42525d; width:16px; flex:none; }
.exam-opt .txt{ flex:1; font-size:15.5px; color:#1c2b36; }
.exam-opt .strike{ flex:none; width:26px; height:26px; border-radius:6px; border:none; background:transparent; color:#aab6bf; font-size:14px; opacity:0; transition:.12s; display:grid; place-items:center; cursor:pointer; }
.exam-opt:hover .strike{ opacity:1; }
.exam-opt .strike:hover{ background:#f0f2f4; color:var(--c-incorrect); }
.exam-opt.picked{ border-color:var(--c-primary-light); background:#f3fbfa; }
.exam-opt.picked .radio{ border-color:var(--c-primary-light); }
.exam-opt.picked .radio::after{ transform:scale(1); }
.exam-opt.struck{ background:#f7f8f9; opacity:.7; }
.exam-opt.struck .txt, .exam-opt.struck .lt{ text-decoration:line-through; color:#a7b3bc; }
.exam-opt.struck .strike{ opacity:1; color:var(--c-incorrect); }
.exam-opt.reveal{ cursor:default; }
.exam-opt.reveal:hover{ border-color:var(--c-border); }
.exam-opt.chosen{ border-color:var(--c-primary-light); }
.exam-opt.correct-ans{ border-color:var(--c-correct); background:var(--c-correct-bg); }
.exam-opt.correct-ans .radio{ border-color:var(--c-correct); }
.exam-opt.correct-ans .radio::after{ background:var(--c-correct); transform:scale(1); }
.exam-opt.correct-ans .lt{ color:var(--c-correct); }
.exam-opt.wrong-ans{ border-color:var(--c-incorrect); background:var(--c-incorrect-bg); }
.exam-opt.wrong-ans .radio{ border-color:var(--c-incorrect); }
.exam-opt.wrong-ans .radio::after{ background:var(--c-incorrect); transform:scale(1); }
.exam-opt.wrong-ans .lt{ color:var(--c-incorrect); }
.exam-opt .verdict{ margin-left:auto; font-weight:700; font-size:18px; flex:none; }
.exam-opt.correct-ans .verdict{ color:var(--c-correct); }
.exam-opt.wrong-ans .verdict{ color:var(--c-incorrect); }

/* Submit */
.exam-submitrow{ margin-top:22px; }
.exam-submit{ background:linear-gradient(150deg,var(--c-primary-light),var(--c-primary)); color:#fff; border:none; padding:13px 28px; border-radius:10px; font-weight:600; font-size:15px; box-shadow:0 10px 20px -12px var(--c-primary); cursor:pointer; }
.exam-submit:disabled{ background:#c3cdd4; box-shadow:none; cursor:not-allowed; }
.exam-submit:not(:disabled):hover{ transform:translateY(-1px); }

/* Explanation */
.exam-expl{ margin-top:26px; border-top:2px dashed var(--c-border); padding-top:24px; }
.expl-verdict{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:16px; padding:8px 16px; border-radius:100px; margin-bottom:16px; }
.expl-verdict.right{ background:var(--c-correct-bg); color:var(--c-correct); }
.expl-verdict.wrong{ background:var(--c-incorrect-bg); color:var(--c-incorrect); }
.expl-stats{ font-size:14px; color:var(--c-muted); margin-bottom:16px; }
.expl-stats strong{ color:var(--c-ink); }
.expl-body{ font-size:15.5px; line-height:1.68; color:#26333d; }
.expl-body p{ margin:0 0 12px; }
.expl-body h3, .expl-body h4{ font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-primary); margin:20px 0 8px; }

/* Feedback block */
.feedback-block{ margin-top:22px; }
.feedback-toggle{ background:none; border:none; color:var(--c-muted); font-size:13px; text-decoration:underline; cursor:pointer; padding:0; }
.feedback-form textarea{ width:100%; border:1px solid var(--c-border); border-radius:8px; padding:10px; font-family:inherit; font-size:14px; margin:8px 0; }
.feedback-actions{ display:flex; align-items:center; gap:10px; }

/* Bottom bar */
.exam-bottom{ display:flex; align-items:center; gap:4px; background:#4A5A6E; color:#dbe3ea; padding:0 14px; height:56px; }
.exam-bbtn{ display:flex; align-items:center; gap:7px; background:transparent; border:none; color:#dbe3ea; padding:8px 12px; border-radius:7px; font-size:12.5px; font-weight:500; cursor:pointer; }
.exam-bbtn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.exam-bbtn.on{ background:rgba(15,163,160,.25); color:#8fe6e2; }
.exam-dots{ display:flex; gap:5px; align-items:center; margin:0 10px; flex:1; justify-content:center; flex-wrap:wrap; max-width:340px; overflow:hidden; }
.exam-dot{ width:10px; height:10px; border-radius:50%; background:#6b7a8b; border:none; padding:0; position:relative; cursor:pointer; }
.exam-dot.is-correct{ background:#8fe6c2; }
.exam-dot.is-incorrect{ background:#f0a3a3; }
.exam-dot.is-answered{ background:#8fe6e2; }
.exam-dot.cur{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28); }
.exam-dot.flagged::after{ content:""; position:absolute; top:-3px; right:-3px; width:5px; height:5px; border-radius:50%; background:var(--c-flag); }
.exam-bottom-right{ margin-left:auto; display:flex; gap:8px; }
.exam-navbtn{ background:#5c6b7d; border:none; color:#fff; padding:9px 18px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; }
.exam-navbtn:hover{ background:#6a7a8d; }
.exam-navbtn:disabled{ opacity:.4; cursor:not-allowed; }
.exam-navbtn.primary{ background:linear-gradient(150deg,var(--c-primary-light),var(--c-primary)); }

/* Slide-out navigator */
.exam-nav{ position:absolute; top:52px; bottom:56px; right:0; width:280px; background:#fff; border-left:1px solid var(--c-border); transform:translateX(100%); transition:transform .18s; padding:16px; overflow-y:auto; z-index:5; }
.exam-nav.is-open{ transform:translateX(0); box-shadow:-16px 0 40px -20px rgba(14,42,59,.4); }
.exam-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.exam-nav-close{ background:none; border:none; font-size:16px; color:var(--c-muted); cursor:pointer; }
.exam-nav-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.nav-cell{ position:relative; aspect-ratio:1; border:1px solid var(--c-border); border-radius:7px; background:#fff; font-size:12px; font-weight:600; color:var(--c-muted); cursor:pointer; display:grid; place-items:center; }
.nav-cell .nav-cell-mark{ position:absolute; bottom:2px; right:4px; font-size:9px; }
.nav-cell .nav-flag{ position:absolute; top:1px; right:2px; font-size:8px; color:var(--c-flag); }
.nav-cell.is-correct{ background:var(--c-correct-bg); border-color:var(--c-correct); color:var(--c-correct); }
.nav-cell.is-incorrect{ background:var(--c-incorrect-bg); border-color:var(--c-incorrect); color:var(--c-incorrect); }
.nav-cell.is-answered{ background:var(--c-teal-tint); border-color:var(--c-primary-light); color:var(--c-primary); }
.nav-cell.is-current{ outline:2px solid var(--c-ink); outline-offset:1px; }
.exam-nav-legend{ margin-top:16px; font-size:12px; color:var(--c-muted); display:flex; flex-direction:column; gap:6px; }
.exam-nav-legend .nav-swatch{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; border:1px solid var(--c-border); margin-right:6px; font-size:9px; }
.nav-swatch.is-correct{ background:var(--c-correct-bg); color:var(--c-correct); }
.nav-swatch.is-incorrect{ background:var(--c-incorrect-bg); color:var(--c-incorrect); }
.nav-swatch.is-answered{ background:var(--c-teal-tint); color:var(--c-primary); }
.nav-swatch.is-flagged{ color:var(--c-flag); }

/* Modals */
.exam-overlay{ position:fixed; inset:0; background:rgba(14,42,59,.42); display:none; align-items:flex-start; justify-content:center; padding-top:80px; z-index:200; }
.exam-overlay.show{ display:flex; }
.exam-modal{ background:#fff; border-radius:14px; width:min(560px,92vw); max-height:76vh; overflow:hidden; box-shadow:var(--shadow-lg); flex-direction:column; }
.exam-modal.narrow{ width:340px; }
.exam-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--c-border); font-family:var(--font-display); font-weight:700; color:var(--c-ink); font-size:16px; }
.exam-modal-close{ background:#f0f2f4; border:none; width:32px; height:32px; border-radius:8px; font-size:15px; color:var(--c-muted); cursor:pointer; }
.exam-modal-body{ padding:18px 20px; overflow-y:auto; }
.labgrp{ margin-bottom:18px; }
.labgrp h5{ font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-primary); margin:0 0 8px; }
.labrow{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px solid #eef1f4; }
.labrow span:last-child{ font-weight:600; }
.calc-disp{ background:var(--c-ink); color:#fff; font-family:var(--font-display); font-size:26px; text-align:right; padding:16px 18px; border-radius:10px; margin-bottom:12px; overflow:hidden; }
.calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-grid button{ padding:15px; border-radius:9px; border:1px solid var(--c-border); background:#f7f8f9; font-size:16px; font-weight:600; color:var(--c-ink); cursor:pointer; }
.calc-grid button:hover{ background:#eef1f4; }
.calc-grid button.op{ background:var(--c-teal-tint); color:var(--c-primary); }
.calc-grid button.eq{ background:var(--c-primary); color:#fff; grid-column:span 2; }
.calc-grid button.wide{ grid-column:span 2; }
.exam-notes{ width:100%; min-height:220px; border:1px solid var(--c-border); border-radius:10px; padding:14px; font-size:14px; font-family:inherit; resize:vertical; }

/* Highlight */
body.hl-mode .exam-stem, body.hl-mode .exam-opt .txt{ cursor:text; }
mark.uhl{ background:#ffe89e; padding:0 1px; border-radius:2px; }

@media (max-width:768px){
  .exam-shell{ margin:0; border-radius:0; border-left:none; border-right:none; }
  .exam-qwrap{ padding:20px 16px 32px; }
  .exam-bbtn span{ display:none; }
  .exam-dots{ display:none; }
  .exam-tbtn .lbl{ display:none; }
  .exam-nav{ width:80%; }
  .exam-body{ max-height:none; }
}

/* =====================================================================
   Multi-block exam: block badge, break screen, per-block results
   ===================================================================== */
.exam-block-badge{ font-size:12px; font-weight:600; color:#fff; background:rgba(15,163,160,.30); border:1px solid rgba(15,163,160,.5); padding:4px 11px; border-radius:100px; }

/* Break screen */
.exam-break-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; background:var(--c-bg-alt); }
.exam-break-card{ background:#fff; border:1px solid var(--c-border); border-radius:20px; box-shadow:var(--shadow-lg); max-width:560px; width:100%; padding:40px; text-align:center; }
.eb-eyebrow{ display:inline-block; font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); background:var(--c-teal-tint); padding:6px 14px; border-radius:100px; }
.exam-break-card h1{ font-size:34px; margin:18px 0 10px; }
.eb-sub{ color:var(--c-muted); font-size:15.5px; line-height:1.6; margin:0 auto 26px; max-width:440px; }
.eb-timer-wrap{ margin:26px 0; }
.eb-timer{ font-family:var(--font-display); font-size:60px; font-weight:700; color:var(--c-ink); line-height:1; letter-spacing:-.02em; }
.eb-timer.empty{ color:var(--c-incorrect); }
.eb-timer-label{ text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:var(--c-muted); margin-top:8px; }
.eb-pool-bar{ height:8px; background:var(--c-bg-deep); border-radius:100px; overflow:hidden; margin:16px auto 0; max-width:320px; }
.eb-pool-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--c-primary-light),var(--c-primary)); transition:width 1s linear; }
.eb-progress{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:24px 0 28px; }
.eb-block{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--c-bg-alt); color:var(--c-muted); border:1px solid var(--c-border); }
.eb-block.done{ background:var(--c-correct-bg); color:var(--c-correct); border-color:var(--c-correct); }
.eb-block.next{ background:var(--c-teal-tint); color:var(--c-primary); border-color:var(--c-primary-light); outline:2px solid var(--c-primary-light); outline-offset:1px; }
.eb-hint{ margin:14px 0 0; }

/* Per-block results tiles */
.exam-block-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.exam-block-tile{ background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:16px; text-align:center; }
.ebt-num{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--c-muted); }
.ebt-pct{ font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--c-primary); line-height:1.1; margin:4px 0 2px; }
.ebt-frac{ font-size:13px; }

/* Resume-exam banner (dashboard) */
.resume-exam-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--c-teal-tint); border:1px solid #C6E9E6; border-left:4px solid var(--c-primary);
  border-radius:12px; padding:16px 20px; margin-bottom:22px; }
.resume-exam-banner strong{ display:block; color:var(--c-ink); font-family:var(--font-display); }
.resume-exam-banner .muted{ font-size:14px; }

/* =====================================================================
   Step switcher (Step 1 / Step 2) + step gating
   ===================================================================== */
.step-switch{ display:inline-flex; gap:4px; background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:12px; padding:4px; margin:6px 0 20px; }
.step-tab{ display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:9px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--c-muted); text-decoration:none; transition:.14s; }
.step-tab:hover{ color:var(--c-ink); text-decoration:none; }
.step-tab.active{ background:#fff; color:var(--c-primary); box-shadow:var(--shadow-sm); }
.step-lock{ font-size:12px; opacity:.7; }
.step-locked{ text-align:center; padding:32px; }
.step-locked h3{ margin-bottom:8px; }
.step-locked p{ max-width:460px; margin:0 auto 18px; }

/* Pricing: step scope tabs on subscribe page */
.scope-switch{ display:inline-flex; gap:4px; background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:100px; padding:5px; margin:0 auto 30px; }
.scope-tab{ padding:10px 22px; border-radius:100px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--c-muted); text-decoration:none; cursor:pointer; border:none; background:transparent; transition:.14s; }
.scope-tab:hover{ color:var(--c-ink); }
.scope-tab.active{ background:linear-gradient(150deg,var(--c-primary-light),var(--c-primary)); color:#fff; box-shadow:0 8px 18px -10px var(--c-primary); }
.scope-note{ text-align:center; color:var(--c-muted); font-size:14px; margin:-14px auto 26px; max-width:520px; }

/* =====================================================================
   Brand logo (BoardsAtlas lockup)
   ===================================================================== */
.brand-logo{ height:40px; width:auto; display:block; }
.brand{ gap:0; }
.footer-logo{ height:44px; width:auto; display:block; margin-bottom:10px; }
.admin-brand-logo{ width:36px; height:36px; object-fit:contain; flex:none; }

@media (max-width: 768px){
  .brand-logo{ height:32px; }
  .footer-logo{ height:38px; }
}

/* =====================================================================
   Free diagnostic block + country pricing
   ===================================================================== */
.diag-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.diag-progress{ height:7px; background:var(--c-bg-deep); border-radius:100px; overflow:hidden; margin-top:10px; }
.diag-progress span{ display:block; height:100%; background:linear-gradient(90deg,var(--c-primary-light),var(--c-primary)); transition:width .25s; }
.diag-stem{ font-size:16.5px; line-height:1.65; color:var(--c-ink); }
.diag-options{ display:flex; flex-direction:column; gap:9px; }
.diag-option{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid var(--c-border); border-radius:11px; cursor:pointer; transition:.13s; background:#fff; }
.diag-option:hover{ border-color:var(--c-primary-light); background:var(--c-teal-tint); }
.diag-option.static{ cursor:default; }
.diag-option.static:hover{ border-color:var(--c-border); background:#fff; }
.diag-option input{ margin-top:3px; }
.diag-letter{ font-family:var(--font-display); font-weight:700; color:var(--c-muted); min-width:18px; }
.diag-option.is-correct{ border-color:var(--c-correct); background:var(--c-correct-bg); }
.diag-option.is-correct .diag-letter{ color:var(--c-correct); }
.diag-option.is-wrong{ border-color:var(--c-incorrect); background:#FDF0F0; }
.diag-option.is-wrong .diag-letter{ color:var(--c-incorrect); }
.diag-explanation{ margin-top:14px; padding:15px 17px; background:var(--c-bg-alt); border-left:3px solid var(--c-primary); border-radius:0 10px 10px 0; font-size:15px; line-height:1.65; }

/* Country-adjusted price */
.price-was{ font-size:16px; color:var(--c-muted); text-decoration:line-through; margin-left:8px; font-weight:500; }

/* Admin DB connection monitor */
.db-monitor{ border:1px solid var(--c-border); border-radius:12px; padding:16px 18px; margin-bottom:22px; background:#fff; }
.db-monitor.db-warn{ border-color:#E1962F; background:#FFF9F0; }
.db-monitor.db-crit{ border-color:var(--c-incorrect); background:#FDF0F0; }
.db-monitor-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.db-monitor-figures{ display:flex; align-items:baseline; gap:14px; }
.db-big{ font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--c-ink); }
.db-cap{ color:var(--c-muted); font-weight:500; }
.db-pct{ color:var(--c-muted); font-size:14px; }
.db-bar{ height:8px; background:var(--c-bg-deep); border-radius:100px; overflow:hidden; margin-top:12px; }
.db-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--c-primary-light),var(--c-primary)); }
.db-warn .db-bar span{ background:#E1962F; }
.db-crit .db-bar span{ background:var(--c-incorrect); }

/* ===================== Reddit landing page ===================== */
.reddit-hero{ background:linear-gradient(160deg,#0E2A3B 0%,#0A7C7A 140%); color:#fff; padding:56px 0 48px; }
.reddit-flag{ display:inline-block; background:rgba(255,255,255,.15); padding:6px 14px; border-radius:100px; font-weight:600; font-size:14px; margin-bottom:16px; }
.reddit-hero h1{ color:#fff; font-size:38px; line-height:1.15; margin:0 0 14px; }
.reddit-hero .lead{ color:rgba(255,255,255,.92); max-width:720px; }
.reddit-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.reddit-price{ display:flex; flex-direction:column; line-height:1.1; }
.reddit-was{ text-decoration:line-through; opacity:.65; font-size:16px; }
.reddit-now{ font-family:var(--font-display); font-weight:700; font-size:34px; }
.reddit-note{ font-size:12.5px; opacity:.8; }
.reddit-microcopy{ margin-top:14px; font-size:13.5px; opacity:.85; }
.reddit-section{ padding:44px 0; }
.reddit-section h2{ font-size:26px; margin-bottom:6px; }
.reddit-band{ background:var(--c-bg-alt); }
.reddit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }
.reddit-q{ margin:18px 0; }
.reddit-q-meta{ font-size:12.5px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.reddit-q-stem{ font-size:16px; line-height:1.6; margin-bottom:14px; }
.reddit-options{ display:flex; flex-direction:column; gap:9px; }
.reddit-opt{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid var(--c-border); border-radius:10px; background:#fff; text-align:left; cursor:pointer; font:inherit; transition:.12s; }
.reddit-opt:hover:not(:disabled){ border-color:var(--c-primary-light); background:var(--c-teal-tint); }
.reddit-opt:disabled{ cursor:default; }
.reddit-letter{ font-family:var(--font-display); font-weight:700; color:var(--c-muted); }
.reddit-opt.is-correct{ border-color:var(--c-correct); background:var(--c-correct-bg); }
.reddit-opt.is-correct .reddit-letter{ color:var(--c-correct); }
.reddit-opt.is-wrong{ border-color:var(--c-incorrect); background:#FDF0F0; }
.reddit-expl{ margin-top:14px; padding:14px 16px; background:var(--c-bg-alt); border-left:3px solid var(--c-primary); border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.6; }
.reddit-shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:20px; }
.reddit-shots img{ width:100%; border:1px solid var(--c-border); border-radius:12px; display:block; }
@media (max-width:640px){ .reddit-hero h1{ font-size:29px; } }