:root{
  --bg:#ffffff;
  --fg:#0b1220;
  --muted:#5b677a;
  --line:#e6e8ee;
  --card:#f8fafc;
  --accent:#1f4db8;
  --accent2:#0f766e;
  --warn:#b45309;
  --bad:#dc2626;
  --good:#16a34a;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }

/* =====================================================================
   BASELINE SYSTEM — v24 CANONICAL
   =====================================================================
   Single source of truth for:
     • html/body font-size (16px) + line-height (1.6)
     • .container max-width (1040px) + responsive padding
     • heading clamp() scale
     • p/li/td/th typography normalization
     • button tap targets (min 44×44px)
     • :focus-visible ring
     • overflow-x / overflow-wrap protection
     • responsive media (img/svg/video/iframe)
   
   Location: END of this file (section "PREMIUM AUDIT v24 GLOBAL PATCH")
   
   All earlier declarations of these properties have been NEUTRALIZED
   with comments so they do not conflict. If you need to adjust any
   of these baseline values, edit the v24 section at the bottom only.
   
   DO NOT add new html{font-size}, body{line-height}, or .container
   blocks anywhere else in this file.
   ===================================================================== */


a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
/* NEUTRALIZED (v24 baseline is canonical): .container{ max-width:1100px; margin:0 auto; padding:24px; } */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--line);
  gap:12px; flex-wrap:wrap;
}
.brand{ font-weight:900; letter-spacing:.2px; font-size:18px; }
.navlinks{ display:flex; gap:16px; flex-wrap:wrap; }
.badge{
  display:inline-block; padding:3px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:14px; color:var(--muted); background:#fff;
}
.hero{
  padding:28px 0 12px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
@media (max-width: 880px){ .hero{ grid-template-columns:1fr; } }
h1{ margin:0 0 8px; font-size:34px; line-height:1.1; }
h2{ margin:22px 0 10px; font-size:22px; }
p{ color:inherit; line-height:1.6; margin:0 0 10px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px;
}
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 880px){ .grid{ grid-template-columns:1fr; } }
.hr{ border-top:1px solid var(--line); margin:18px 0; }
.small{ font-size:14px; color:var(--muted); }
.kpi{ font-weight:800; color:var(--fg); font-size:16px; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.btn{
  appearance:none; border:1px solid var(--line);
  padding:10px 14px; border-radius:12px;
  background:#fff; cursor:pointer; font-weight:700;
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.notice{
  border-left:4px solid var(--accent2);
  background:#f0fdfa; padding:10px 12px; border-radius:12px; color:#134e4a;
}
.warn{
  border-left:4px solid var(--warn);
  background:#fff7ed; padding:10px 12px; border-radius:12px; color:#7c2d12;
}
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; padding:10px; border-bottom:1px solid var(--line); font-size:14px; }
.table th{ color:var(--fg); }
.table td{ color:var(--muted); }

.pillrow{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:7px 10px; font-size:14px; cursor:pointer; font-weight:650;
}
.pill.active{ border-color:var(--accent); color:var(--accent); }

.choice{
  display:block; width:100%; text-align:left; padding:12px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
}

.pill.locked{
  opacity:.45; cursor:not-allowed; background:#f8fafc; color:#94a3b8;
  border-color:#e2e8f0;
}
.pill.locked:hover{ filter:none; opacity:.45; }
.pill:disabled{ cursor:not-allowed; }
.choice:hover{ border-color: var(--fg); }
.choice.correct{ border-color: var(--fg); background:#f0fdf4; }
.choice.wrong{ border-color: var(--fg); background:#fef2f2; }
.quizHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.progress{ font-weight:800; }
.timer{ font-weight:800; color:var(--accent2); }
.footer{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px;
}


/* Rationale block */
.rationale{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 43, 70, 0.15);
  border-radius: 12px;
  background: rgba(15, 43, 70, 0.03);
}
.rationale__label{
  font-weight: 700;
  margin-bottom: 6px;
}
.rationale__text{
  line-height: 1.45;
  white-space: pre-wrap;
}


/* Premium imagery */
.hero-illustration{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: radial-gradient(1200px 420px at 20% 10%, rgba(0,0,0,.06), rgba(0,0,0,0));
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.hero-illustration img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
}


/* Question media (image-based MC) */
.qMedia{background:#fff;border:1px solid rgba(0,0,0,.06);padding:10px;border-radius:14px;}
.qMedia img{display:block;}


/* ===== Phase 1 visual polish (2026-02) ===== */
/* NEUTRALIZED (v24 baseline is canonical): .container{ padding: 0 18px; } */
.hero{ padding: 18px 0 10px; align-items:start; }
@media (min-width: 881px){
  h1{ font-size: 38px; letter-spacing: -0.02em; }
}
.authority-strip{
  margin: 14px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 14px;
}
.authority-points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.authority-points li{
  font-size: 14px;
  color: var(--fg);
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  white-space: nowrap;
}
.trust-note{
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.hero-illustration img{
  width: 100%;
  height: auto;
  display:block;
  max-height: 260px;
  object-fit: contain;
}
@media (max-width: 880px){
  .hero-illustration img{ max-height: 220px; }
}

/* Flashcards — playing-card proportions */
.flashwrap{
  margin: 18px 0 10px;
  display:flex;
  justify-content:center;
}
.flashcard3d{
  width: min(360px, 92vw);
  aspect-ratio: 5 / 7;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  border-radius: 18px;
  outline: none;
}
.flashcard3d.is-flipped{ transform: rotateY(180deg); }
.flashface{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(11,18,32,.10);
  padding: 14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.flashface.back{ transform: rotateY(180deg); }
.flashbadgeRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.flashimg{
  margin: 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 120px;
}
.flashimg img{
  max-width: 100%;
  max-height: 160px;
  width:auto;
  height:auto;
  display:block;
}
.flashtitle{
  font-weight: 800;
  color: var(--fg);
  font-size: 18px;
  line-height: 1.25;
  margin-top: 4px;
}
.flashbody{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
  overflow:auto;
}
.flashhint{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--muted);
  font-size: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 8px;
  background: #ffffff;
}

/* Pills row */
.pillrow{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
}
.pill.active{
  background: #ffffff;
  border-color: var(--accent);
}


/* === PREMIUM UI PATCH v1 === */

/* Base typography upgrade */
/* NEUTRALIZED (v24 baseline is canonical): html { font-size: 17px; } */
/* NEUTRALIZED (v24 baseline is canonical): body { line-height: 1.65; } */

/* Container breathing room */
/* NEUTRALIZED (v24 baseline is canonical):
.container { max-width: 1000px; padding-left: 20px; padding-right: 20px; } */

/* Headings stronger */
/* NEUTRALIZED (v24 clamp headings are canonical):
h1 { font-size: 2.1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; } */

/* Body readability */
p, li, td, th {
  font-size: 1rem;
  line-height: 1.65;
}

/* Chips / pills — better tap targets */
.pill, .badge {
  font-size: 0.9rem;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 999px;
}

/* Buttons — more premium weight */
button, .btn, .button {
  padding: 12px 18px;
  font-size: 1rem;
  border-radius: 10px;
}

/* Cards and sections */
.card, .section, .panel {
  padding: 20px;
}

/* Footer readability */
.small, .footer, footer {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mobile comfort pass */
@media (max-width: 640px) {
  html { font-size: 16px; }
  
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .pill, .badge {
    min-height: 42px;
    padding: 10px 16px;
  }
  
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.35rem; }
}

/* === END PREMIUM UI PATCH === */


/* === PREMIUM IMAGE LAYER v2 === */
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 18px;
}
.hero-card{
  border: 1px solid rgba(215,225,238,0.9);
  background: linear-gradient(135deg, rgba(247,249,252,0.95), rgba(238,243,248,0.95));
  border-radius: 18px;
  padding: 18px;
}
.hero-visual{
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(215,225,238,0.9);
  background: #ffffff;
}
.hero-photo{
  display:flex;
  flex-direction: column;
}
.hero-photo-main{
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hero-photo-strip{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hero-thumb{
  border: 1px solid rgba(215,225,238,0.9);
  background: #ffffff;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.hero-thumb img{
  width: 92px;
  height: 62px;
  object-fit: cover;
  display:block;
}
.hero-thumb:focus{
  outline: 3px solid rgba(15, 115, 255, 0.25);
  outline-offset: 2px;
}
.hero-photo-caption{
  margin-top: 8px;
  font-size: 0.92rem;
}
.muted{
  color: rgba(30, 44, 64, 0.75);
}
.feature-inline{
  display:flex;
  gap: 14px;
  align-items: center;
  margin: 16px 0 6px;
}
.feature-inline img{
  width: 86px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(215,225,238,0.9);
  background: #ffffff;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}
/* === END PREMIUM IMAGE LAYER v2 === */


/* === PREMIUM NAV + FEATURE CARDS v3 === */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(215,225,238,0.9);
}
.nav .brand{ font-weight: 800; letter-spacing: -0.01em; }
.navlinks{ display:flex; gap: 10px; flex-wrap: wrap; }
.navlinks a.navlink{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid transparent;
  color: inherit;
  font-weight: 600;
  font-size: 0.98rem;
}
.navlinks a.navlink:hover{
  border-color: var(--accent);
  color: var(--fg);
  background: rgba(247,249,252,0.9);
}
.navlinks a.navlink.active{
  border-color: var(--accent);
  background: rgba(238,243,248,0.95);
  color: var(--fg);
}

/* Feature cards */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.feature-card{
  border: 1px solid rgba(215,225,238,0.9);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}
.feature-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}
.feature-desc{
  margin: 0;
  color: rgba(30, 44, 64, 0.78);
  font-size: 0.98rem;
}

/* Trust block */
.trust-block{
  border: 1px solid rgba(215,225,238,0.9);
  background: linear-gradient(135deg, rgba(247,249,252,0.95), rgba(238,243,248,0.95));
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
}
.trust-row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.trust-row img{
  width: 86px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
.trust-points{
  margin: 10px 0 0 0;
  padding-left: 18px;
}
.trust-points li{
  margin: 6px 0;
}

/* Mobile */
@media (max-width: 700px){
  .feature-grid{ grid-template-columns: 1fr; }
  .navlinks{ gap: 8px; }
  .navlinks a.navlink{ padding: 10px 12px; }
}
/* === END PREMIUM NAV + FEATURE CARDS v3 === */


/* === PREMIUM PAGE HEADER + MODE SELECTOR v4 === */
.page-header{
  border: 1px solid rgba(215,225,238,0.9);
  background: linear-gradient(135deg, rgba(247,249,252,0.95), rgba(238,243,248,0.95));
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
  margin-bottom: 18px;
}
.page-header .row{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}
.page-header .row img{
  width: 86px;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
.page-header h1{
  margin:0;
}
.page-header .sub{
  margin-top:6px;
  margin-bottom:0;
  color: rgba(30, 44, 64, 0.78);
}

.mode-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 8px;
}
.mode-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
  border-radius: 16px;
  padding: 14px;
}
.mode-card:hover{
  background: rgba(247,249,252,0.9);
}
.mode-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin:0 0 6px 0;
}
.mode-desc{
  margin:0;
  color: rgba(30, 44, 64, 0.78);
  font-size: 0.98rem;
}
.mode-meta{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mode-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(238,243,248,0.7);
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 700px){
  .mode-grid{ grid-template-columns: 1fr; }
}
/* === END PREMIUM PAGE HEADER + MODE SELECTOR v4 === */

.expect-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
}
.expect-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(30,44,64,0.18);
}
.how-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 8px;
}
@media (max-width: 820px){
  .expect-grid, .how-steps{ grid-template-columns: 1fr; }
}
/* === END PREMIUM EXPECTATION BLOCK v5 === */


/* === PREMIUM FOOTER + BUTTON HIERARCHY v6 === */
.btn, a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 800;
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(238,243,248,0.95);
  color: inherit;
  text-decoration:none;
}
.btn:hover{ background: rgba(247,249,252,0.95); }

/* NEUTRALIZED (v24 canonical btn rules below are authoritative — do not re-add) */
/* .btn-primary{ background: #1e2c40; color:#fff; border-color: #1e2c40; } */
/* .btn-primary:hover{ filter: brightness(0.98); } */
/* .btn-secondary{ background: rgba(238,243,248,0.95); color: inherit; } */

.footer-shell{
  border-top: 1px solid rgba(215,225,238,0.9);
  background: rgba(247,249,252,0.9);
  padding: 22px 0;
  margin-top: 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.footer-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.footer-links a{
  display:inline-block;
  margin: 6px 0;
  text-decoration:none;
  color: inherit;
}
.footer-links a:hover{ text-decoration: underline; }
.footer-meta{
  color: rgba(30,44,64,0.75);
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 820px){
  .footer-grid{ grid-template-columns: 1fr; }
}
/* === END PREMIUM FOOTER + BUTTON HIERARCHY v6 === */


/* === PREMIUM PRACTICE UI + TABLES v7 === */
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.pillrow .pill{
  cursor:pointer;
  user-select:none;
}
.pillrow .pill.active{
  border-color: var(--fg);
  background: rgba(238,243,248,0.95);
}
.warn{
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(255,249,249,0.9);
  border-radius: 14px;
  padding: 14px;
}
/* Tables */
table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(215,225,238,0.9);
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
}
th, td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(215,225,238,0.7);
}
th{
  text-align:left;
  background: rgba(247,249,252,0.9);
  font-weight: 800;
}
tr:last-child td{ border-bottom:none; }

/* Inputs */
input, select, textarea{
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
input:focus, select:focus, textarea:focus{
  outline: 2px solid rgba(30,44,64,0.35);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(30,44,64,0.10);
}
/* === END PREMIUM PRACTICE UI + TABLES v7 === */


/* === PREMIUM QUIZ UI v8 === */
.quiz-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.quiz-progress{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.quiz-timer{
  font-weight: 800;
  color: rgba(30,44,64,0.78);
}
.quiz-media{
  margin-bottom: 12px;
}
.quiz-media img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
.quiz-prompt{
  font-weight: 900;
  letter-spacing:-0.01em;
  font-size: 1.12rem;
  margin-bottom: 10px;
}
.quiz-choices{
  display:grid;
  gap: 10px;
}
.choice{
  text-align:left;
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.choice:hover{
  background: rgba(247,249,252,0.95);
}
.choice:disabled{
  cursor: default;
  opacity: 1;
}
.choice.correct{
  border-color: rgba(40, 120, 70, 0.55);
  background: rgba(235, 248, 240, 0.95);
}
.choice.wrong{
  border-color: rgba(160, 60, 60, 0.45);
  background: rgba(255, 242, 242, 0.95);
}
.rationale{
  margin-top: 12px;
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(247,249,252,0.95);
  border-radius: 16px;
  padding: 14px;
}
.rationale__label{
  font-weight: 900;
  letter-spacing:-0.01em;
  margin-bottom: 8px;
}
.rationale__text{
  color: rgba(30,44,64,0.85);
  white-space: pre-wrap;
  line-height: 1.65;
}
.warn a{
  font-weight: 900;
}
/* === END PREMIUM QUIZ UI v8 === */


/* === PREMIUM RESULTS + BUTTON GROUP v9 === */
.results-card{
  padding: 18px;
}
.results-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(215,225,238,0.8);
  margin-bottom: 12px;
}
.results-kicker{
  font-weight: 900;
  letter-spacing:-0.01em;
  color: rgba(30,44,64,0.72);
}
.results-score{
  font-weight: 950;
  letter-spacing:-0.02em;
  font-size: 1.5rem;
  margin-top: 6px;
}
.results-sub{
  margin-top: 6px;
  color: rgba(30,44,64,0.78);
}
.results-badge{
  min-width: 84px;
  height: 84px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 1.4rem;
  letter-spacing:-0.02em;
  background: rgba(238,243,248,0.95);
  border: 1px solid rgba(215,225,238,0.9);
}
.results-actions{
  gap: 10px;
  flex-wrap: wrap;
}
.results-actions .btn{
  min-height: 44px;
}
/* === END PREMIUM RESULTS + BUTTON GROUP v9 === */


/* === IMAGE SIZING FIX v15 === */
.hero-visual{
  max-height: 360px;
  object-fit: cover;
}
.hero-photo img{
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
.clinical-preview img{
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(215,225,238,0.9);
  background:#fff;
}
@media (max-width: 700px){
  .hero-visual{ max-height: 260px; }
  .hero-photo img{ max-height: 300px; }
  .clinical-preview img{ max-height: 240px; }
}
/* === END IMAGE SIZING FIX v15 === */


/* === HOMEPAGE REBUILD v16 (mockup-style) === */
.hero-pro{
  position: relative;
  min-height: 460px;
  color: #fff;
  overflow: hidden;
}
.hero-pro__bg{
  position:absolute;
  inset:0;
  background: url('/assets/images/hero-bg-480.webp') center/cover no-repeat;
  transform: scale(1.03);
}
.hero-pro__overlay{
  position:absolute;
  inset:0;
  background: rgba(10,18,32,0.72);
}
.hero-pro__inner{
  position: relative;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: center;
  padding: 44px 0 34px;
}
.hero-pro h1{
  margin:0;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.hero-pro__sub{
  margin: 14px 0 0;
  max-width: 560px;
  color: rgba(255,255,255,0.86);
  font-size: 1.02rem;
  line-height: 1.55;
}
.hero-pro__actions{ margin-top: 18px; }
.hero-pro__bullets{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  gap: 10px;
}
.hero-pro__bullets li{
  position: relative;
  padding-left: 26px;
  color: rgba(255,255,255,0.88);
  font-weight: 650;
}
.hero-pro__bullets li:before{
  content: "✓";
  position:absolute;
  left:0;
  top:0;
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(26,107,204,0.95);
  color:#fff;
  font-weight: 900;
  font-size: 0.8rem;
}
.hero-pro__media{
  display:flex;
  justify-content:flex-end;
}
.hero-pro__media img{
  width: 100%;
  max-width: 420px;
  max-height: 420px;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

/* proof strip */
.proof-strip{
  background: rgba(255,251,230,0.95);
  border-top: 1px solid rgba(240,232,190,0.9);
  border-bottom: 1px solid rgba(240,232,190,0.9);
}
.proof-strip__inner{
  padding: 12px 0;
  text-align:center;
  color: rgba(30,44,64,0.88);
  font-weight: 700;
}

/* imaging preview */
.imaging-preview{
  padding: 34px 0 12px;
}
.imaging-preview h2{
  text-align:center;
  margin:0;
  font-size: 1.6rem;
  font-weight: 950;
  letter-spacing:-0.02em;
}
.imaging-preview__sub{
  text-align:center;
  margin: 10px 0 18px;
  color: rgba(30,44,64,0.72);
}
.imaging-preview__panel{
  background: #0c1220;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(215,225,238,0.18);
  box-shadow: 0 18px 50px rgba(12,18,32,0.14);
}
.imaging-preview__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:center;
}
.imaging-preview__img{
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.imaging-preview__img img{
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 14px;
}
.imaging-preview__note{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:center;
  max-width: 720px;
  margin: 12px auto 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(247,249,252,0.95);
}
.imaging-preview__check{
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(26,107,204,0.95);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  margin-top: 2px;
}
.imaging-preview__noteTitle{
  font-weight: 900;
  letter-spacing:-0.01em;
}
.imaging-preview__noteSub{
  margin-top: 2px;
  color: rgba(30,44,64,0.75);
}

/* feature cards */
.feature-grid{
  padding: 22px 0 10px;
}
.feature-grid__wrap{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature-card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(215,225,238,0.9);
  background: rgba(255,255,255,0.92);
  text-decoration:none;
  color: inherit;
}
.feature-card:hover{
  background: rgba(247,249,252,0.95);
}
.feature-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(238,243,248,0.95);
  border: 1px solid rgba(215,225,238,0.9);
  font-weight: 900;
}
.feature-title{
  font-weight: 900;
  letter-spacing:-0.01em;
}

/* mobile */
@media (max-width: 860px){
  .hero-pro__inner{ grid-template-columns: 1fr; }
  .hero-pro__media{ justify-content:flex-start; margin-top: 14px; }
  .feature-grid__wrap{ grid-template-columns: 1fr; }
  .imaging-preview__grid{ grid-template-columns: 1fr; }
  .hero-pro{ min-height: 0; }
}
/* === END HOMEPAGE REBUILD v16 === */


/* v17 quick-win status colors */
.ok{ color:#15803d; font-weight:800; }

/* v17 global btn tap target */
.btn{ min-height:44px; }


/* v19 focus-visible — NEUTRALIZED (v24 baseline has complete selector set):
a:focus-visible, button:focus-visible, .pill:focus-visible, .choice:focus-visible, .btn:focus-visible, .flashcard3d:focus-visible{
  outline: 3px solid rgba(26,107,204,0.55);
  outline-offset: 2px;
} */


/* v19 mobile nav refinement */
@media (max-width: 640px){
  .nav.nav-open .navlinks a{ padding: 10px 12px; border-radius: 12px; }
  .nav.nav-open .navlinks a:hover{ background: rgba(238,243,248,0.95); }
}

/* v21 nav-toggle */
.nav-toggle{
  display:none;
  border:1px solid rgba(15,23,42,0.15);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
  line-height:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(15,23,42,0.80);
  margin:3px 0;
  border-radius:2px;
}
/* Support legacy + current class names */
.navlinks, .navlinks{ display:flex; gap:10px; align-items:center; }

@media (max-width: 640px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .navlinks, .navlinks{ display:none; width:100%; flex-direction:column; align-items:stretch; margin-top:10px; }
  .nav.nav-open .navlinks,
  .nav.nav-open .navlinks{ display:flex; }
  .nav.nav-open .navlinks a,
  .nav.nav-open .navlinks a{ padding:10px 12px; border-radius:12px; }
}



/* ===== Mobile Authority Pass (surgical) ===== */

/* Base readability uplift */
/* NEUTRALIZED (v24 baseline is canonical): html{ font-size:17px; } */
/* NEUTRALIZED (v24 baseline is canonical): body{ line-height:1.65; } */

/* Improve paragraph readability */
p{ font-size:1rem; }

/* Stronger tap targets */
.btn{
  min-height:44px;
  padding:12px 16px;
}

/* Navigation touch comfort */
.navlinks a{
  padding:6px 4px;
  display:inline-block;
}

/* Mobile-first scaling */
@media (max-width:768px){

  .container{ padding:18px; }

  .brand{ font-size:20px; }

  h1{ font-size:30px; line-height:1.15; }
  h2{ font-size:20px; }

  .card{ padding:18px; }

  .btn{ width:100%; max-width:420px; }

  .grid{ gap:16px; }

  .small{ font-size:14px; }

}

/* Very small devices */
@media (max-width:420px){

  /* NEUTRALIZED (v24 baseline: keep 16px at all sizes): html{ font-size:18px; } */

  .container{ padding:16px; }

  h1{ font-size:28px; }

}



/* Mobile Nav Toggle (surgical) */
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--fg);
  margin:4px 0;
  border-radius:2px;
}

@media (max-width:640px){
  .nav{ align-items:center; }
  .nav-toggle{ display:inline-block; }
  .navlinks{ display:none; width:100%; }
  .nav.nav-open .navlinks{ display:flex; flex-direction:column; gap:10px; padding-top:10px; }
  .nav.nav-open .navlinks a{ padding:10px 8px; border:1px solid var(--line); border-radius:12px; background:#fff; }
}


/* === Readability overrides (v21 soft-launch) =========================
   Goal: avoid "text is too small" reports on mobile/desktop without
   breaking layout. Keep changes conservative and override-only.
   =================================================================== */
/* NEUTRALIZED (v24 baseline is canonical — same values, consolidated there):
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.55; }
p, li { line-height: 1.55; }
.muted, .meta, .small { font-size: 14px; }
.tiny { font-size: 14px; } */
.card p, .card li { line-height: 1.6; }



/* === DECLUTTER v1 (2026-02-16) === */

/* flatter containers, less “boxed” feel */
.hero-card,
.page-header{
  background: #fff !important;
  border-color: var(--fg) !important;
  box-shadow: none !important;
}
.hero-card{ padding: 14px !important; border-radius: 14px !important; }
.page-header{ padding: 14px !important; border-radius: 14px !important; }

/* cards: softer + less padding */
.mode-card{
  border-color: var(--line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
.mode-card:hover{ background: #fff !important; border-color: #dfe4ee !important; }

/* pills: quieter */
.mode-pill{
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  padding: 4px 8px !important;
  font-size: 0.85rem !important;
}

/* headings + spacing */
main h2{
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
main p{ max-width: 70ch; }

/* reduce visual noise in dense grids */
.grid{ gap: 12px !important; }
.card{ box-shadow:none !important; border-color: var(--line) !important; }

/* mobile: reduce “wrap clutter” in nav */
.navlinks{ gap: 12px !important; }
.navlink{ padding: 6px 10px !important; }



/* === DESKTOP POLISH v1 (2026-02-16) === */
@media (min-width: 900px){
  /* NEUTRALIZED (v24 baseline 16px is canonical): html{ font-size:17px; } */
  /* NEUTRALIZED (v24 baseline container is canonical): .container{ max-width:1000px; padding:44px 32px; } */
  .nav{ flex-wrap:nowrap; padding:18px 0; }
  .navlinks{ flex-wrap:nowrap; gap:18px !important; }
  .navlink{ padding:6px 8px !important; border-radius:10px !important; background:transparent !important; }
  .navlink:hover{ border-color:transparent !important; text-decoration:underline; }

  .hero-card,
  .page-header{ padding:22px !important; }

  .mode-grid{ gap:16px !important; margin:18px 0 10px !important; }
  .mode-card{ padding:16px !important; }

  main h2{ margin-top:26px !important; }
  .grid{ gap:16px !important; }
  main p{ max-width:72ch; }
}



/* === FLASHCARDS DESKTOP TUNING v1 (2026-02-16) === */
.page-flashcards .flashwrap{
  display:flex;
  justify-content:center;
}
@media (min-width: 900px){
  .page-flashcards .flashwrap{
    margin: 28px 0 18px;
    min-height: calc(100vh - 260px);
    align-items: center;
  }
  .page-flashcards .flashcard3d{
    width: 340px;              /* smaller + focused */
    max-width: 340px;
    transition: transform 780ms cubic-bezier(.2,.8,.2,1); /* slower flip */
  }
  .page-flashcards .flashface{
    border: 2px solid rgba(26,107,204,0.18); /* visible outline */
    box-shadow: 0 14px 34px rgba(11,18,32,.14);
  }
  .page-flashcards .flashface.front{
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
  }
  .page-flashcards .flashface.back{
    background: linear-gradient(180deg, #ffffff 0%, #f4fff8 100%);
  }
  .page-flashcards .flashhint{
    font-size: 14px;
  }
  .page-flashcards .flashbody{
    font-size: 15px;
    line-height: 1.6;
  }
}



/* === FLASHCARD PREMIUM TWEAKS v1 (2026-02-16) === */
.flashcard3d{ outline: none; }
.flashcard3d::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:10px;
  height:8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(59,130,246,.55));
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
  z-index: 3;
  pointer-events:none;
}
.flashcard3d.is-flipped::before{
  background: linear-gradient(90deg, rgba(16,185,129,.95), rgba(34,197,94,.55));
  box-shadow: 0 8px 18px rgba(16,185,129,.18);
}
.flashface.front{
  background: linear-gradient(180deg, rgba(239,246,255,1), rgba(255,255,255,1));
}
.flashface.back{
  background: linear-gradient(180deg, rgba(236,253,245,1), rgba(255,255,255,1));
}
.flashface{
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 44px rgba(11,18,32,.12);
}
@media (min-width: 900px){
  .flashwrap{ min-height: calc(100vh - 220px); align-items:center; }
  .flashcard3d{ width: min(460px, 92vw); }
  .flashwrap:hover .flashcard3d{ transform: translateY(-3px) scale(1.015); }
  .flashwrap:hover .flashcard3d.is-flipped{ transform: rotateY(180deg) translateY(-3px) scale(1.015); }
}



/* === FLASHCARDS PREMIUM DESKTOP v2 (2026-02-16) === */
/* Desktop: center card, reduce visual sprawl, and add premium finish */
@media (min-width: 900px){
  .flashwrap{
    margin: 10px 0 18px;
    min-height: 70vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .flashcard3d{
    width: 440px; /* smaller, intentional */
    max-width: 72vw;
  }
}

/* Premium framing + color treatment */
.flashface{
  position: absolute;
  outline: 2px solid rgba(23, 53, 97, 0.10);
  box-shadow: 0 18px 46px rgba(11,18,32,.14);
}
.flashface::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:7px;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  opacity: .95;
}
.flashface.front{
  background: linear-gradient(180deg, rgba(33, 90, 165, 0.08), rgba(255,255,255,1) 38%);
}
.flashface.front::before{ background: linear-gradient(90deg, rgba(33,90,165,1), rgba(126,179,255,1)); }
.flashface.back{
  background: linear-gradient(180deg, rgba(30, 140, 98, 0.08), rgba(255,255,255,1) 38%);
}
.flashface.back::before{ background: linear-gradient(90deg, rgba(30,140,98,1), rgba(145,228,190,1)); }

/* Smoother, slower flip */
.flashcard3d{ transition: transform 900ms cubic-bezier(.2,.8,.2,1); }

/* Desktop hover lift (keeps flipped state) */
@media (min-width: 900px) and (hover:hover){
  .flashcard3d:hover{ transform: translateY(-4px) scale(1.01); }
  .flashcard3d.is-flipped:hover{ transform: rotateY(180deg) translateY(-4px) scale(1.01); }
}



/* ===================================================================
   PREMIUM AUDIT v24 — GLOBAL READABILITY + MOBILE UX NORMALIZATION
   Applied: 2026-02-17
   Purpose: Fix text-too-small, horizontal overflow, and mobile UX
   ================================================================ */

/* 1. Reset conflicting font-size declarations to a single clear source */
html {
  font-size: 16px;           /* base; em/rem are relative to this */
  -webkit-text-size-adjust: 100%; /* prevent iOS auto-zoom on rotate */
  text-size-adjust: 100%;
}
body {
  font-size: 1rem;           /* 16px */
  line-height: 1.6;
  overflow-x: hidden;        /* prevent horizontal scroll globally */
}

/* 2. Prevent any element from causing horizontal scroll */
*, *::before, *::after {
  max-width: 100%;
  box-sizing: border-box;
}
img, svg, video, iframe, embed { max-width: 100%; height: auto; }

/* 3. Normalize container — single authoritative definition */
.container {
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}
@media (min-width: 640px) {
  .container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 900px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

/* 4. Heading scale — readable, calm, institutional */
h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.25rem, 3vw, 1.7rem);  line-height: 1.2;  letter-spacing: -0.01em; }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem);  line-height: 1.3; }

/* 5. Body text — readable at arm's length on mobile */
p, li, td, th, label {
  font-size: 1rem;
  line-height: 1.65;
}
.small, .muted, .meta { font-size: 0.88rem; }
.tiny { font-size: 0.82rem; }

/* 6. Buttons — consolidated tap targets */
.btn, a.btn, button.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 11px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

/* 7. Focus visibility — a11y requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(26,107,204,0.5);
  outline-offset: 2px;
}

/* 8. Mobile-specific cleanup */
@media (max-width: 639px) {
  /* Prevent long words / URLs from causing overflow */
  p, li, h1, h2, h3, td, th {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Nav: remove horizontal flex overflow */
  .nav {
    flex-wrap: nowrap;
    align-items: center;
  }
  /* Cards don't overflow on small phones */
  .card, .mode-card, .feature-card {
    min-width: 0;
    overflow: hidden;
  }
  /* Choice buttons */
  .choice {
    font-size: 0.95rem;
    padding: 12px 14px;
  }
  /* Quiz prompt text */
  .quiz-prompt {
    font-size: 1.05rem;
  }
}

/* 9. Old flashcard CSS — suppress conflicting legacy rules
   (The flashcard page now uses scoped .fc-* classes.
    These overrides silence the old .flashcard3d etc. selectors
    so they don't interfere with the new page layout.) */
.page-flashcards .flashwrap  { display: none !important; }
.page-flashcards .flashcard3d { display: none !important; }
.page-flashcards .btnrow     { display: none !important; }

/* 10. Pricing page — improve conversion readability */
.pricing-highlight {
  border: 2px solid var(--accent);
  border-radius: 16px;
}

/* === END PREMIUM AUDIT v24 GLOBAL PATCH === */



/* ===================================================================
   EYECERTPREP v24 — DIAGNOSTIC FIX PATCH
   Applied: 2026-02-17
   Changes:
   1. btn-primary canonical color (pricing page used .primary not .btn-primary)
   2. footer-shell, footer-grid, footer-title, footer-meta (used in footerHTML)
   3. hero-card, hero-grid layout
   4. active navlink indicator
   =================================================================== */

/* Canonical primary button (both .primary and .btn-primary) */
.btn.primary,
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover,
.btn.btn-primary:hover {
  background: #1a3fa0;
  border-color: #1a3fa0;
  text-decoration: none;
}

/* Secondary button */
.btn.btn-secondary,
a.btn.btn-secondary {
  background: #fff;
  color: var(--fg);
  border-color: var(--line);
}
.btn.btn-secondary:hover {
  border-color: #a0aec0;
  text-decoration: none;
}

/* Footer shell — used in Layout.footerHTML() */
.footer-shell {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding: 28px 0 22px;
  background: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.8fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
}
.footer-title {
  font-weight: 900;
  font-size: 1rem;
  color: var(--fg);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}
.footer-links a {
  color: var(--muted);
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-meta {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Active navlink */
.navlink.active {
  color: var(--accent);
  font-weight: 800;
  border-bottom: 2px solid var(--accent);
}
@media (max-width: 640px) {
  .navlink.active {
    border-bottom: none;
    border-left: 3px solid var(--accent);
    padding-left: 10px !important;
    background: #f0f5ff !important;
  }
}

/* hero-card / hero-grid for pricing page */
.hero-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* page-header row layout */
.page-header {
  padding: 18px 0 4px;
}
.page-header .row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.page-header .row img {
  width: 48px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.page-header .sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 4px 0 0;
}

/* premium-badge pill */
.premium-badge {
  background: linear-gradient(135deg, #1f4db8 0%, #0f766e 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
}

/* === END DIAGNOSTIC FIX PATCH === */



/* ===================================================================
   READINESS BAND + WEAK DOMAIN CALLOUTS
   Applied: 2026-02-17
   =================================================================== */

/* ── Readiness Block ── */
.readiness-block {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
}
.readiness-block__kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.readiness-block__label {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.readiness-block__sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* Tone variants — using existing palette, no new colors */
.readiness-block--good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.readiness-block--good .readiness-block__label {
  color: var(--good);
}

.readiness-block--neutral {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.readiness-block--neutral .readiness-block__label {
  color: var(--accent);
}

.readiness-block--warn {
  background: #fff7ed;
  border-color: #fed7aa;
}
.readiness-block--warn .readiness-block__label {
  color: var(--warn);
}

/* ── Weak Domains Block ── */
.weak-domains-block {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
}
.weak-domains-block--clear {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.weak-domains-block__header {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.weak-domains-block__none {
  font-size: 0.88rem;
  color: var(--good);
  margin: 0;
}

.weak-domain-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  flex-wrap: nowrap;
}
.weak-domain-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.weak-domain-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--fg);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weak-domain-pct {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--warn);
  white-space: nowrap;
  flex-shrink: 0;
}
.weak-domain-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: var(--warn);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile safety */
@media (max-width: 420px) {
  .readiness-block,
  .weak-domains-block {
    padding: 12px 13px;
  }
  .readiness-block__label {
    font-size: 1.05rem;
  }
  .weak-domain-name {
    font-size: 0.85rem;
  }
}


/* === END READINESS + WEAK DOMAIN STYLES === */

/* === PERFORMANCE SNAPSHOT (v24) === */
.performance-snapshot {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  overflow: hidden;
}
.performance-snapshot__header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.performance-snapshot__score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 4px;
  line-height: 1.2;
  word-break: break-word;
}
.performance-snapshot__status {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.performance-snapshot__time {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Tone modifiers — use existing CSS vars, no new hard-coded colors */
.performance-snapshot--good {
  border-left: 4px solid var(--good);
}
.performance-snapshot--good .performance-snapshot__status {
  color: var(--good);
}
.performance-snapshot--neutral {
  border-left: 4px solid var(--line);
}
.performance-snapshot--warn {
  border-left: 4px solid var(--warn);
}
.performance-snapshot--warn .performance-snapshot__status {
  color: var(--warn);
}

/* Mobile safety at 360px */
@media (max-width: 360px) {
  .performance-snapshot {
    padding: 12px 13px;
    border-radius: 10px;
  }
  .performance-snapshot__score {
    font-size: 1.1rem;
  }
}
/* === END PERFORMANCE SNAPSHOT === */


/* ===== Homepage authority pass (institutional + conversion clarity) ===== */
.subhead{
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.65;
  max-width: 72ch;
}
.authority-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 18px 0 14px;
}
.authority-stat{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.authority-stat__label{
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}
.authority-stat__value{
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.authority-stat__note{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.feature-grid-pro{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.feature-pro{
  display:block;
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  text-decoration:none;
  color: inherit;
}
.feature-pro:hover{
  background: rgba(248,250,252,0.9);
}
.feature-pro__title{
  font-weight: 850;
  letter-spacing: -0.01em;
}
.feature-pro__desc{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.small.subtle{ color: var(--muted); }

@media (max-width: 860px){
  .authority-stats{ grid-template-columns: 1fr; }
  .feature-grid-pro{ grid-template-columns: 1fr; }
}


/* --- Authority/Readability Patch (v24) --- */
.hero-card{
  background: #ffffff !important; /* remove translucent gradient that reduces contrast over hero imagery */
  border: 1px solid var(--line) !important;
}
.hero-card .small,
.hero-card p,
.hero-card li{
  color: #1f2937 !important; /* readable on light card */
}
/* Ensure hero CTA buttons have readable labels */
.hero .btn,
.hero a.btn,
.hero button.btn{
  color: var(--fg) !important;
}
.btn-primary, a.btn-primary{
  color: #ffffff !important;
}


/* === Credibility Section Premium Pass === */
.credibility-section{padding:48px 0;background:#ffffff;color:var(--fg);}

.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:16px}
.cred-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:20px}
.cred-card h2{margin-bottom:10px}
.cred-card ul{margin:0;padding-left:18px}
.cred-note{font-size:0.95rem;color:#475569;line-height:1.35;}

/* =========================================================
   EYE CERT PREP — SURGICAL PATCH BUNDLE (v24.4)
   - Fix hero card contrast inheritance
   - Normalize low-contrast muted rgba text
   - Improve small disclaimer readability
   ========================================================= */
.hero-pro .card{ color: var(--fg); }
.hero-pro .card h1,
.hero-pro .card h2,
.hero-pro .card h3{ color: var(--fg); }
.hero-pro .card p,
.hero-pro .card li{ color: var(--muted); }

/* Bring marginal small-note contrast up slightly */
.cred-note{ color: var(--muted); }

/* Normalize several low-contrast rgba text styles to theme vars */
.muted{ color: var(--muted); }
.feature-desc{ color: var(--muted); }
.page-header .sub{ color: var(--muted); }
.mode-desc{ color: var(--muted); }
.footer-meta{ color: var(--muted); }
.quiz-timer{ color: var(--accent2); }
.results-kicker{ color: var(--fg); }
.results-sub{ color: var(--muted); }
.imaging-preview__sub{ color: var(--muted); }
.imaging-preview__noteSub{ color: var(--muted); }

/* Footer links: slightly stronger for small sizes (keeps premium feel) */
.footer-links a{ color: var(--fg); text-decoration: underline; text-decoration-color: rgba(17,24,39,0.25); text-underline-offset: 3px; }
.footer-links a:hover{ text-decoration-color: rgba(17,24,39,0.55); }


/* v24.6 SURGICAL FOLLOWUP — ensure credibility section is never white-on-light inside hero */
.hero-pro .credibility-section { color: var(--fg); }
.hero-pro .credibility-section h2,
.hero-pro .credibility-section h3 { color: var(--fg); }
.hero-pro .credibility-section p,
.hero-pro .credibility-section li,
.hero-pro .credibility-section .cred-note { color: var(--muted); }
/* If credibility cards use .cred-card, enforce readable text */
.hero-pro .cred-card { color: var(--fg); }
.hero-pro .cred-card p,
.hero-pro .cred-card li { color: var(--muted); }


/* Visibility overrides for hero + disclaimer */
.hero-pro .hero-pro__sub{color: rgba(255,255,255,0.88);}
.hero-pro .hero-pro__meta{color: rgba(255,255,255,0.78);}
.hero-pro .cred-note{color: rgba(255,255,255,0.86);}
.hero-pro .btn-secondary{background: rgba(255,255,255,0.92); color:#0b1220; border-color: rgba(255,255,255,0.85);}
.hero-pro .btn-secondary:hover{background: rgba(255,255,255,0.98);}

.footer a{color: inherit;}
.footer a:hover{opacity:1; text-decoration: underline;}

/* ===== Visual Authority Pass v1 (Feature blocks + Footer + CTA) ===== */

/* Feature list upgrade */
.feature-list{
  max-width:720px;
  margin:28px auto 36px;
  padding:0;
  list-style:none;
}
.feature-list li{
  padding:14px 16px;
  margin-bottom:10px;
  background:#ffffff;
  border:1px solid rgba(16,24,40,0.06);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(16,24,40,0.05);
  line-height:1.45;
}
.feature-list li strong{
  display:block;
  font-weight:600;
  color:#0f172a;
  margin-bottom:2px;
}
@media (hover:hover){
  .feature-list li:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(16,24,40,0.08);
  }
}

/* Footer breathing room */
footer{
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid rgba(16,24,40,0.08);
}

/* CTA authority (safe overrides) */
.btn-primary{
  background:#2563eb;
  color:#fff;
  font-weight:600;
  padding:14px 22px;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(37,99,235,0.28);
}
.btn-primary:hover{ background:#1d4ed8; }
.btn-secondary{
  background:#f8fafc;
  border:1px solid rgba(16,24,40,.12);
}

/* Feature grid + cards (stronger premium feel) */
.feature-grid-pro{
  max-width: 920px;
  margin: 18px auto 0;
  gap: 16px;
}
.feature-pro{
  box-shadow: 0 10px 26px rgba(16,24,40,0.06);
  border: 1px solid rgba(16,24,40,0.08);
  padding: 16px;
}
@media (hover:hover){
  .feature-pro:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(16,24,40,0.10);
    background: #fff;
  }
}
.feature-pro__title{
  font-size: 1.02rem;
}
.feature-pro__desc{
  font-size: 0.96rem;
}

/* Add breathing room before footer on pages with CTA rows */
.cta-row{
  margin-top: 18px;
}

/* ===== Medical SaaS Visual System (Option A) ===== */
:root{
  --bg: #ffffff;
  --text: #0b1220;
  --fg: #0b1220;
  --muted: #475569;
  --muted2:#64748b;
  --line: rgba(16,24,40,0.10);
  --line2: rgba(16,24,40,0.06);
  --shadow-sm: 0 6px 18px rgba(16,24,40,0.06);
  --shadow-md: 0 14px 34px rgba(16,24,40,0.10);
  --radius: 16px;
  --radius-sm: 12px;
  --primary: #2563eb;
  --primary-hover:#1d4ed8;
}

html{ -webkit-text-size-adjust:100%; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

/* Type scale */
h1,h2,h3{ letter-spacing:-0.01em; }
h1{
  font-size: clamp(2.1rem, 3.1vw, 3.0rem);
  line-height: 1.12;
}
h2{
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  line-height: 1.2;
}
p, li{ color: var(--muted); }

.small, .subtle{ color: var(--muted2) !important; }

/* Consistent content width */
.container, main{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Section rhythm (safe) */
.section, section{
  padding-top: clamp(42px, 5.5vw, 68px);
  padding-bottom: clamp(42px, 5.5vw, 68px);
}

/* Card system */
.card, .feature-pro, .track-card, .panel{
  border-radius: var(--radius);
  border: 1px solid var(--line2);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
@media (hover:hover){
  .card:hover, .feature-pro:hover, .track-card:hover, .panel:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* Links */
a{ color: var(--primary); }
a:hover{ color: var(--primary-hover); }

/* Buttons */
.btn{
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,0.24);
}
.btn-primary:hover{ background: var(--primary-hover); }
.btn-secondary{
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--text);
}

/* Feature grid (desktop comfort) */
.feature-grid-pro{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
footer{
  color: var(--muted2);
}

/* ===== Phase 2 Visual Authority Pass (Option A hardening) ===== */

/* Make homepage feel denser on desktop without changing other pages */
body.home section{
  padding-top: clamp(28px, 4.2vw, 52px);
  padding-bottom: clamp(28px, 4.2vw, 52px);
}

/* Hero CTA spacing + readability */
body.home .hero-pro .cta-row{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.home .hero-pro .btn{
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
body.home .hero-pro .btn-secondary{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Force feature cards to look like cards across all patch layers */
.feature-grid-pro{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 840px){
  .feature-grid-pro{ grid-template-columns: 1fr; }
}
.feature-grid-pro a.feature-pro{
  display:block;
  text-decoration:none;
  background:#ffffff !important;
  border:1px solid rgba(16,24,40,0.08) !important;
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(16,24,40,0.06);
}
.feature-grid-pro a.feature-pro:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(16,24,40,0.10);
}
.feature-pro__title{
  color: var(--text,#0f172a) !important;
  font-weight: 700;
  margin-bottom: 4px;
}
.feature-pro__desc{
  color: var(--muted,#475569) !important;
}

/* Footer: clearer separation + cleaner columns */
footer{
  margin-top: 72px;
}
.footer-grid{
  gap: 18px;
}
.footer-grid a{
  text-decoration: none;
}
.footer-grid a:hover{
  text-decoration: underline;
}


/* ===== Header Alignment Fix (v11) ===== */
body.home header,
body.home .site-header,
body.home .nav-wrap{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Ensure nav container matches content width */
.site-header .inner,
header .inner{
  max-width: 1100px;
  margin: 0 auto;
}


/* ===== Homepage footer removal (v11) ===== */
body.home footer{
  display:none !important;
}




/* =========================================================
   EYE CERT PREP — VISUAL AUTHORITY PACK (v12.1)
   - Stabilize header width (prevents left/right "jump")
   - Increase CTA contrast + depth (conversion)
   - Add minimal footer on tool pages (reduce clutter)
   - Improve focus rings + hover authority
   ========================================================= */

.nav-shell{
  background:#fff;
  border-bottom: 1px solid var(--line);
}
.nav{
  border-bottom: none !important;
  padding: 14px 0 !important;
}
.brand-link{
  color: inherit;
  text-decoration: none;
}
.brand-link:hover{ text-decoration: none; }

.navlinks{ align-items:center; }
.navlink{
  border-radius: 10px;
  padding: 10px 12px;
}
.navlink:hover{
  background: rgba(26,107,204,0.08);
  text-decoration:none;
}
.navlink.active{
  background: rgba(26,107,204,0.12);
}

/* CTA authority */
.btn.primary,
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
  font-weight: 700;
  letter-spacing: .1px;
  box-shadow: 0 10px 24px rgba(26,107,204,0.22);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn.primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(26,107,204,0.28);
}

/* Secondary button: keep calm but visible */
.btn.btn-secondary,
a.btn.btn-secondary{
  background: rgba(248,250,252,0.98);
  border-color: rgba(215,225,238,1);
}
.btn.btn-secondary:hover{
  background:#ffffff;
  border-color: rgba(160,174,192,1);
}

/* Footer variants */
.footer-shell--minimal{
  margin-top: 22px;
  padding: 14px 0;
  background: #fff;
}
.footer-min{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
}
.footer-min__brand{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.footer-min__meta{
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 4px;
}
.footer-min__links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-min__links a{
  text-decoration:none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.footer-min__links a:hover{
  color: var(--fg);
  border-color: var(--line);
  background: rgba(26,107,204,0.06);
  text-decoration:none;
}
@media (max-width: 720px){
  .footer-min{ flex-direction: column; align-items:flex-start; }
}



@media (min-width: 640px){
  .hero-pro__bg{
    background: url('/assets/images/hero-bg-800.webp') center/cover no-repeat;
  }
}
@media (min-width: 1024px){
  .hero-pro__bg{
    background: url('/assets/images/hero-bg-1600.webp') center/cover no-repeat;
  }
}





/* =========================================================
   PHASE 2C — HOMEPAGE RHYTHM TIGHTENING
   - Move "What to Expect" + Lite preview up
   - Move "Built by..." into credibility cards
   - Reduce vertical gaps around imaging preview
   ========================================================= */

.proof-strip--cards{ padding: 22px 0; }
.proof-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.proof-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.proof-card__title{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.proof-card__text{
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.98rem;
}

/* Tighten section rhythm */
.credibility-section{ padding: 36px 0 !important; }
.imaging-preview{ padding: 34px 0 !important; }
.imaging-preview__panel{ margin-top: 12px !important; }
.section{ padding: 42px 0 !important; }



/* Footer intentionally disabled */
#footer{display:none !important;}

.cat-pill.locked{opacity:.55;cursor:not-allowed;}
.cat-pill .lock{font-size:10px;margin-left:8px;letter-spacing:.06em;}
.cat-pill .free{font-size:10px;margin-left:8px;letter-spacing:.06em;}

/* COA mode badges */
.mode-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mode-badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.12);white-space:nowrap;}
.mode-badge-free{background:rgba(0,0,0,.04);}
.mode-badge-locked{background:rgba(0,0,0,.08);}


/* =====================================================================
   PHASE 3A AUTHORITY PATCH — 2026-02-21
   New components: trust-bar, authority-strip, founder-block,
   for-section, compare-table, pricing-preview, feature badge variants
   ===================================================================== */

/* Ensure btn-primary and btn-secondary work consistently */
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.btn-secondary {
  background: #fff;
  color: var(--accent);
  border-color: var(--line);
}
.btn-primary:hover { opacity: .9; text-decoration: none; color: #fff !important; }
.btn-secondary:hover { border-color: var(--accent); text-decoration: none; }

/* subhead utility */
.subhead { color: #64748b; font-size: .95rem; margin: 0 0 24px; max-width: 600px; }

/* subtle utility */
.subtle { color: var(--muted); }

/* Improve mode-card badge display */
.mode-badge-free  { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.mode-badge-locked{ background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }

/* Performance snapshot tones */
.performance-snapshot { border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; }
.performance-snapshot__header { font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.performance-snapshot__score  { font-size:1.4rem; font-weight:900; color:var(--fg); }
.performance-snapshot__status { font-size:.9rem; margin-top:4px; }
.performance-snapshot__time   { font-size:.82rem; color:var(--muted); margin-top:4px; }
.performance-snapshot--good   { border-color:var(--good); background:#f0fdf4; }
.performance-snapshot--warn   { border-color:var(--warn); background:#fff7ed; }
.performance-snapshot--bad    { border-color:var(--bad); background:#fef2f2; }

/* nav-shell */
.nav-shell { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); }

/* ===== BEGIN v6.1.4 MOBILE REPAIR ===== */

/* Hide nav links by default on mobile — hamburger reveals them */
@media (max-width: 720px) {
  .navlinks {
    display: none !important;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 4px;
  }

  /* When nav is open, show links stacked */
  .nav.nav-open .navlinks {
    display: flex !important;
  }

  .nav.nav-open .navlinks a,
  .nav.nav-open .navlinks .navlink {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    text-decoration: none;
  }

  /* Nav row: brand on left, hamburger on right */
  .nav {
    flex-wrap: wrap;
    align-items: center;
  }
  .brand {
    flex: 1;
  }
}

/* --- HERO: stack vertically on mobile instead of side-by-side --- */
@media (max-width: 860px) {
  .hero-pro__inner {
    grid-template-columns: 1fr !important;
    padding: 32px 16px 28px !important;
    gap: 24px !important;
  }
  .hero-pro__media {
    display: none; /* hide the technician photo on mobile — saves space */
  }
  .hero-pro__content h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
  }
  .hero-pro__sub {
    font-size: 0.95rem !important;
  }
  .hero-pro__actions {
    flex-direction: column;
    gap: 10px;
  }
  .hero-pro__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* --- CONTAINER: tight padding on small screens --- */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* --- GENERAL MOBILE COMFORT --- */
@media (max-width: 640px) {
  /* Grids collapse to single column */
  .for-grid, .next-steps-grid, .feature-grid-pro, .adaptive-grid, .founder-stat-grid, .adaptive-stat-grid, .proof-cards {
    grid-template-columns: 1fr !important;
  }

  /* Pricing preview stacks */
  .pricing-preview__inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pricing-preview__amount {
    font-size: 2.2rem !important;
  }

  /* Founder section stacks */
  .founder-inner {
    grid-template-columns: 1fr !important;
  }

  /* Buttons: full width on mobile for tap comfort */
  .hero-pro__actions .btn, .btnrow .btn {
    width: 100%;
    justify-content: center;
  }

  /* Compare table: allow horizontal scroll rather than crush */
  .compare-table {
    font-size: 0.82rem;
  }

  /* Quiz choice buttons: full width, easy to tap */
  .choice {
    font-size: 0.95rem;
    padding: 14px 12px;
    width: 100%;
  }

  /* True/false buttons */
  .ecp-tf-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .ecp-tf-btn {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
  }

  /* T/F card full width */
  .ecp-tf-card {
    max-width: 100%;
    margin: 12px 0;
    border-radius: 12px;
  }

  /* Flashcard full width */
  .flashcard3d, .fc-card {
    width: min(100%, 420px) !important;
    min-width: 0 !important;
  }
}

/* --- PREMIUM BADGE IN NAV: hide on small nav to save space --- */
@media (max-width: 640px) {
  #premiumBadge {
    display: none !important;
  }
}

/* ===== END v6.1.4 MOBILE REPAIR ===== */

/* =============================================================
   v6.1.6 — NAV OVERFLOW FIX
   Root cause: nav bar wider than mobile viewport (~520px vs 384px).
   body{overflow-x:hidden} was hiding the scrollbar but browser
   still calculated layout at desktop width, breaking media queries.
   This is the single authoritative mobile nav + hero rule.
   ============================================================= */

/* Fix: overflow-x hidden on html AND body */
html {
  overflow-x: hidden;
}

/* At any screen under 768px: collapse nav to hamburger */
@media (max-width: 768px) {

  /* Show hamburger button — three clean lines */
  .nav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    gap: 5px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #0b1220 !important;
    border-radius: 2px !important;
    flex-shrink: 0;
  }

  /* Hide all nav links — hamburger reveals them */
  .navlinks {
    display: none !important;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 4px;
    flex-wrap: nowrap;
  }

  /* Show links when hamburger is tapped */
  .nav.nav-open .navlinks {
    display: flex !important;
  }

  .nav.nav-open .navlinks a,
  .nav.nav-open .navlinks .navlink {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--fg);
  }

  /* Nav row: brand left, hamburger right, no overflow */
  .nav {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 12px;
  }

  .brand {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Hide "COA Exam Prep" badge — it pushes brand too wide on mobile */
  .brand .badge {
    display: none;
  }

  /* Hide premium badge */
  #premiumBadge {
    display: none !important;
  }
}

/* Stack hero vertically on mobile */
@media (max-width: 768px) {
  .hero-pro__inner {
    grid-template-columns: 1fr !important;
    padding: 28px 16px 24px !important;
    gap: 20px !important;
  }
  .hero-pro__media {
    display: none !important;
  }
  .hero-pro__content h1 {
    font-size: clamp(1.55rem, 6vw, 2.2rem) !important;
  }
  .hero-pro__actions {
    flex-direction: column;
  }
  .hero-pro__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ===== END v6.1.6 ===== */