/* Passclex — Shared Styles v2.0 (Redesign: App-like Dashboard) */
/* Last updated: May 2026 */

/* ===== SELF-HOSTED FONTS (2026-07-26) =====
   Variable woff2 subsets served from /fonts/ instead of fonts.googleapis.com.
   Removes two third-party origins from the critical path (LCP fix).
   Files are Google Fonts' own subsets; each unicode-range downloads only when used. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


:root {
  --font-body: 'Inter', sans-serif;
  --font-head: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --navy: #0B1D3A;
  --navy-mid: #132B52;
  --teal: #00B4A6;
  --teal-light: #00D4C4;
  --teal-glow: rgba(0, 180, 166, 0.15);
  --cream: #F5F0E8;
  --cream-dark: #E8E0D2;
  --gold: #D4A843;
  --gold-light: #F0CC6B;
  --white: #FFFFFF;
  --text-dark: #1A1A1A;
  --text-muted: #5A6B7F;
  --coral: #E8635A;
  --teal-text: #00786E;
  --coral-text: #C0392B;
  --gold-text: #9A7B1E;
  --bg: #FAFAF7;
  --hero-glow: var(--teal-glow);
  --cs-accent: var(--teal-light);
  --cs-accent-dark: var(--teal);
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text-dark); background: var(--bg); }
a { color: var(--teal-text); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn-primary:hover, .cta-btn:hover, .topic-card:hover, .back-link:hover, button:hover { text-decoration: none; }

/* ===== NAV ===== */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background: var(--navy); }
.logo { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; color: var(--white); display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; letter-spacing: -0.01em; line-height: 1; }
.logo:hover { text-decoration: none; }
.logo-icon { width: 32px; height: 32px; background: var(--teal); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(-4deg); flex-shrink: 0; }
.logo-icon svg { display: block; }
.logo-text { display: inline-block; }
.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links > a { color: rgba(255,255,255,0.65); font-size: 0.85rem; font-weight: 600; transition: color 0.2s; text-decoration: none; white-space: nowrap; }
.nav-links > a:hover { color: var(--white); text-decoration: none; }
.nav-badge { background: var(--teal); color: var(--navy); font-size: 0.65rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 100px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links > a.nav-badge, .nav-links > a.nav-badge:hover { color: var(--navy); text-decoration: none; font-size: 0.65rem; font-weight: 700; }
.nav-links > a.nav-qbank { background: var(--teal); color: var(--navy); font-size: 0.82rem; font-weight: 800; padding: 0.5rem 1rem; border-radius: 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.nav-links > a.nav-qbank:hover { background: var(--teal-light, #2ed3c6); color: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,180,166,0.3); }
/* "Paid" tag inside the QBank nav button, so the paid product reads as separate from the free library */
.nav-qbank-tag { background: var(--navy); color: var(--white); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.42rem; border-radius: 5px; line-height: 1; }
/* Just above the hamburger breakpoint the tag makes the row ~50px wider: tighten spacing so "Study Guides" stays on one line */
@media (min-width: 961px) and (max-width: 1080px) { .nav-links { gap: 0.75rem; } .nav-links > a.nav-qbank { padding: 0.5rem 0.75rem; } .nav-dropdown-btn { white-space: nowrap; } }

/* ===== NAV DROPDOWNS ===== */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { background: none; border: none; color: rgba(255,255,255,0.65); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; padding: 0; transition: color 0.2s; }
.nav-dropdown-btn:hover { color: var(--white); }
.nav-dropdown-btn svg { transition: transform 0.2s; }
.nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }
/* Desktop: taller hit area for the text nav controls. The negative margin cancels the padding, so the in-flow box, the nav height and the dropdown's top: 100% anchor do not move */
@media (min-width: 961px) { .nav-links > a:not(.nav-qbank):not(.nav-badge), .nav-dropdown-btn { padding: 0.65rem 0; margin: -0.65rem 0; } }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--white); border-radius: 12px; padding: 0.5rem; padding-top: 0.5rem; min-width: 200px; box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04); z-index: 1002; margin-top: 0.5rem; }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; background: transparent; }
.nav-dropdown-menu a { display: block; color: var(--text-dark) !important; font-size: 0.85rem !important; font-weight: 500; padding: 0.55rem 0.9rem !important; border-radius: 8px; transition: background 0.15s; text-decoration: none; white-space: nowrap; border: none !important; width: auto !important; }
.nav-dropdown-menu a:hover { background: var(--cream); color: var(--navy) !important; text-decoration: none; }
.nav-dropdown-divider { height: 1px; background: rgba(0,0,0,0.06); margin: 0.3rem 0.5rem; }

/* ===== HAMBURGER ===== */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; position: relative; min-width: 44px; min-height: 44px; box-sizing: border-box; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; transition: all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-overlay { display: none; }

/* ===== SKIP LINK (a11y — visible on focus) ===== */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 8px 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: top 0.15s ease; }
.skip-link:focus { top: 0; outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 960px) {
  .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .nav-links { display: none; position: fixed; top: 0; right: 0; width: 280px; height: 100vh; background: var(--navy-mid); flex-direction: column; align-items: flex-start; padding: 5rem 2rem 2rem; gap: 0; z-index: 1000; box-shadow: -4px 0 24px rgba(0,0,0,0.3); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links > a { color: rgba(255,255,255,0.8); font-size: 1rem; padding: 0.85rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-links > a:hover { color: var(--teal-light); }
  .nav-links .nav-badge { margin-top: 1rem; align-self: flex-start; }
  /* The Login badge is a full-width flex item on mobile — center its label and give it side padding + a real
     tap height so "LOGIN" doesn't jam against the left edge of the pill (the .nav-links>a rule zeroes h-padding). */
  .nav-links > a.nav-badge { text-align: center; padding: 0.75rem 1rem; font-size: 0.8rem; border-bottom: none; }
  .nav-links > a.nav-qbank { margin-top: 1rem; width: 100%; justify-content: center; padding: 0.85rem 1rem; font-size: 0.95rem; border-bottom: none; }
  .nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; }
  .nav-overlay.open { display: block; }

  /* Mobile dropdown styles */
  .nav-dropdown { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-dropdown-btn { color: rgba(255,255,255,0.8); font-size: 1rem; padding: 0.85rem 0; width: 100%; justify-content: space-between; }
  .nav-dropdown-menu { position: static; transform: none; background: rgba(0,0,0,0.15); border-radius: 10px; padding: 0.3rem 0; margin: 0 0 0.5rem 0; box-shadow: none; min-width: auto; }
  .nav-dropdown-menu a { color: rgba(255,255,255,0.7) !important; font-size: 0.9rem !important; padding: 0.85rem 1rem !important; border-radius: 6px; }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: var(--teal-light) !important; }
  .nav-dropdown-divider { background: rgba(255,255,255,0.08); }
}

/* ===== PAGE HERO (unified with Dosage Calc style) ===== */
.page-hero { background: var(--navy); color: var(--white); padding: 2.5rem 5% 2rem; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%); pointer-events: none; }
.page-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.breadcrumb { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-bottom: 0.7rem; position: relative; z-index: 2; }
.breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-light); text-decoration: none; }
.page-hero h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; margin-bottom: 0.7rem; position: relative; z-index: 2; }
.page-hero h1 em { font-style: italic; color: var(--teal-light); }
.page-hero > p, .page-hero-inner > p { color: rgba(255,255,255,0.7); font-size: 1rem; max-width: 640px; line-height: 1.6; position: relative; z-index: 2; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 100px; background: rgba(0,180,166,0.1); color: var(--teal-light); border: 1px solid rgba(0,180,166,0.25); }
.hero-badge-teal { background: rgba(0,180,166,0.1); color: var(--teal-light); }
.hero-badge-gold { background: rgba(212,168,67,0.1); color: var(--gold-light); border-color: rgba(212,168,67,0.25); }
.hero-badge-dot { display: none; }
.hero-cta { margin-top: 1.4rem; position: relative; z-index: 2; }
.landing-preview-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; font: inherit; }
.landing-preview-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.hero-quiz-jump { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.3rem; background: var(--teal); color: var(--navy); font-size: 0.92rem; font-weight: 800; padding: 0.72rem 1.4rem; border-radius: 11px; text-decoration: none; position: relative; z-index: 2; min-height: 44px; box-shadow: 0 6px 20px rgba(0,180,166,0.28); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.hero-quiz-jump:hover { background: var(--teal-light); color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,180,166,0.38); text-decoration: none; }
.pn-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(0,180,166,0.1); color: var(--teal-light); font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 100px; border: 1px solid rgba(0,180,166,0.25); letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 2; }

/* ===== TOC: Desktop sidebar (>960px), Mobile pills (≤960px) ===== */
.toc { background: var(--white); border-radius: 14px; padding: 1.2rem; box-shadow: 0 1px 8px rgba(0,0,0,0.035); border: 1px solid rgba(0,0,0,0.04); width: 220px; flex-shrink: 0; position: sticky; top: 20px; align-self: flex-start; max-height: calc(100vh - 40px); overflow-y: auto; }
.toc h2 { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; font-family: var(--font-body); }
.toc-list { list-style: none; columns: 1; column-gap: 0; }
.toc-list li { margin-bottom: 1px; }
.toc-list a { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: all 0.15s; line-height: 1.3; }
.toc-list a:hover { background: rgba(0,0,0,0.02); color: var(--text-dark); text-decoration: none; }
.toc-list a:hover .num { color: var(--teal-text); }
.toc-list .num { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(0,0,0,0.2); font-weight: 600; width: 20px; flex-shrink: 0; margin-top: 2px; }
.toc-back { border-top: 1px solid rgba(0,0,0,0.05); margin-top: 12px; padding-top: 12px; }
.toc-back a { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 0.78rem; color: var(--text-muted); text-decoration: none; }
.toc-back a:hover { color: var(--teal-text); text-decoration: none; }
.toc-quiz { margin-top: 12px; }
.toc-quiz a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 0.8rem; background: var(--teal); color: var(--navy); font-size: 0.8rem; font-weight: 700; border-radius: 9px; text-decoration: none; text-align: center; line-height: 1.25; }
.toc-quiz a:hover { background: var(--teal-light); text-decoration: none; }

@media (max-width: 960px) {
  .toc { display: none; }
}

/* Mobile TOC (pills) */
.mobile-toc { display: none; background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 14px 5%; }
.mobile-toc-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
.mobile-toc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-toc-pill { background: #F4F3EF; color: var(--text-muted); padding: 12px 11px; border-radius: 7px; font-size: 0.72rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: all 0.15s; }
.mobile-toc-pill:hover { background: rgba(0,180,166,0.08); color: var(--teal-text); border-color: rgba(0,180,166,0.15); text-decoration: none; }
.pill-num { font-family: var(--font-mono); font-weight: 600; margin-right: 3px; }
@media (max-width: 960px) {
  .mobile-toc { display: block; }
}

/* ===== CONTENT LAYOUT ===== */
.content-layout { max-width: 1320px; margin: 0 auto; padding: 2rem 4% 4rem; display: flex; gap: 44px; }
.content-main { flex: 1; min-width: 0; max-width: 900px; }
@media (max-width: 960px) {
  .content-layout { padding: 1.5rem 4% 4rem; }
  .content-main { max-width: 100%; margin: 0 auto; }
}

/* Legacy <article class="content"> wrapper — now acts as .content-main */
article.content { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; }
@media (max-width: 960px) {
  article.content { max-width: 700px; margin: 0 auto; }
}

/* ===== CONTENT SECTIONS (Cards) ===== */
.content-section {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin-bottom: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.04);
}
.content-section > h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; margin-bottom: 0.3rem; color: var(--text-dark); line-height: 1.25; border-top: none; padding-top: 0; }
.section-subtitle { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.2rem; line-height: 1.5; }
.content-section h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--navy); }
.content-section p { font-size: 1rem; line-height: 1.8; color: #444; margin-bottom: 0.8rem; }
.content-section ul, .content-section ol { margin: 0.4rem 0 1rem 1.4rem; font-size: 0.97rem; line-height: 1.85; }
.content-section li { margin-bottom: 0.25rem; }
@media (max-width: 700px) {
  .content-section { padding: 1.4rem 1.2rem; border-radius: 14px; margin-bottom: 12px; }
}

/* ===== TABLES ===== */
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead { background: var(--navy); color: var(--white); }
th { padding: 0.7rem 1rem; text-align: left; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
td { padding: 0.65rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); line-height: 1.5; }
tbody tr:nth-child(even) { background: var(--bg); }

/* ===== CALLOUTS ===== */
.callout { border-radius: 0 10px 10px 0; padding: 1rem 1.3rem; margin: 1.2rem 0; font-size: 0.85rem; line-height: 1.65; }
.callout-teal { background: rgba(0,180,166,0.05); border-left: 3px solid var(--teal); }
.callout-gold { background: rgba(212,168,67,0.05); border-left: 3px solid var(--gold); }
.callout-coral { background: rgba(232,99,90,0.05); border-left: 3px solid var(--coral); }
.callout strong:first-child { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; }

/* ===== CHEATSHEET ===== */
.cheatsheet { background: var(--navy); color: var(--white); border-radius: 16px; padding: 2rem 2.5rem; margin-bottom: 14px; }
.cheatsheet h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; margin-bottom: 0.3rem; color: var(--cs-accent); }
.cheatsheet .cs-sub { color: rgba(255,255,255,0.4); font-size: 0.82rem; margin-bottom: 1.5rem; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cs-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 1.1rem 1.2rem; }
.cs-card h4 { font-size: 0.78rem; color: var(--cs-accent); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cs-card ul { list-style: none; font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.7; }
.cs-card li::before { content: '· '; color: rgba(255,255,255,0.2); }
@media (max-width: 700px) {
  .cheatsheet { padding: 1.5rem 1.2rem; border-radius: 14px; }
  .cs-grid { grid-template-columns: 1fr; }
}

/* ===== BACK LINK ===== */
.back-bar { padding: 1.5rem 0 0; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem 0; font-size: 0.85rem; font-weight: 600; color: var(--teal-text); text-decoration: none; }
.back-link:hover { gap: 0.6rem; text-decoration: none; }
/* Cheatsheet landing pages: the "View all cheatsheets" link under the related cards (the anchor's inline style sets only colour and weight) */
.related-section > p > a[href="/cheatsheets/"] { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== CTA ===== */
.cta-signup { background: var(--navy); color: var(--white); padding: 3rem 2.5rem; margin: 0; text-align: center; position: relative; overflow: hidden; }
.cta-signup::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, var(--teal-glow) 0%, transparent 65%); pointer-events: none; }
.cta-inner { position: relative; z-index: 5; max-width: 500px; margin: 0 auto; }
.cta-inner h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin-bottom: 0.5rem; }
.cta-inner p { color: rgba(255,255,255,0.5); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.8rem; }
.cta-form { display: flex; gap: 0.7rem; max-width: 440px; margin: 0 auto 1.2rem; }
.cta-form input { flex: 1; padding: 0.85rem 1.1rem; border-radius: 10px; border: 2px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: var(--white); font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color 0.25s; }
.cta-form input::placeholder { color: rgba(255,255,255,0.55); }
.cta-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,166,0.35); }
@media (max-width: 768px) { .cta-form input { font-size: 1rem; } } /* 16px: stops iOS Safari zooming on tap */
.cta-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.cta-btn { flex-shrink: 0; min-height: 44px; padding: 0.85rem 1.5rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.cta-btn:hover { background: var(--teal-light); transform: translateY(-1px); }
.cta-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cta-reassurance { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.cta-reassurance span { display: flex; align-items: center; gap: 0.3rem; }
.cta-inner .cta-consent { max-width: 440px; margin: -0.35rem auto 0.85rem; color: rgba(255,255,255,0.62); font-size: 0.75rem; line-height: 1.5; }
.cta-consent a { display: inline-block; padding: 0.5rem 0.15rem; margin: -0.5rem -0.15rem; color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 500px) {
  .cta-form { flex-direction: column; }
  .cta-signup { padding: 2rem 1.3rem; }
}

/* ===== TOAST ===== */
.cta-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box; text-align: left; background: var(--navy); color: var(--white); padding: 0.85rem 1.4rem; border-radius: 12px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 8px 30px rgba(0,0,0,0.25); z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s; border: 1px solid rgba(255,255,255,0.08); }
.cta-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.4s ease, opacity 0.4s ease; }

/* ===== STUDY GUIDE: Quiz CTA (top, cream banner) ===== */
.guide-quiz-cta { background: var(--cream); padding: 1.2rem 5%; border-bottom: 1px solid var(--cream-dark); }
.guide-quiz-cta-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.guide-quiz-cta-text { flex: 1; min-width: 240px; }
.guide-quiz-cta .eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 0.3rem; }
.guide-quiz-cta h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); margin: 0 0 0.2rem; line-height: 1.25; }
.guide-quiz-cta p { color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; margin: 0; }
.guide-quiz-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-weight: 800; font-size: 0.92rem; padding: 0.75rem 1.4rem; border-radius: 10px; text-decoration: none; transition: all 0.2s; flex-shrink: 0; }
.guide-quiz-btn:hover { background: var(--teal-light); transform: translateY(-1px); text-decoration: none; }

/* ===== STUDY GUIDE: Quiz CTA (bottom, teal band) =====
   Teal background so it's visually distinct from the navy signup CTA that
   follows immediately below — two stacked navy bands looked monotonous. */
.guide-quiz-cta-bottom { background: var(--teal); color: var(--navy); padding: 2.8rem 5%; text-align: center; position: relative; overflow: hidden; }
.guide-quiz-cta-bottom::before { content: ''; position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%); pointer-events: none; }
.guide-quiz-cta-bottom::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(11,29,58,0.12) 0%, transparent 70%); pointer-events: none; }
.guide-quiz-cta-bottom > * { position: relative; z-index: 2; }
.guide-quiz-cta-bottom h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1.2; margin-bottom: 0.6rem; color: var(--navy); }
.guide-quiz-cta-bottom h2 em { color: var(--white); font-style: italic; }
.guide-quiz-cta-bottom p { color: rgba(11,29,58,0.78); font-size: 1rem; max-width: 540px; margin: 0 auto 1.4rem; line-height: 1.55; }
.guide-quiz-cta-bottom .guide-quiz-btn { font-size: 1rem; padding: 0.9rem 1.8rem; background: var(--navy); color: var(--white); }
.guide-quiz-cta-bottom .guide-quiz-btn:hover { background: var(--navy-mid); color: var(--white); transform: translateY(-1px); text-decoration: none; }
.guide-quiz-cta-bottom .guide-qbank-note { font-size: 0.85rem; color: rgba(11,29,58,0.68); margin: 1.3rem auto 0; max-width: 520px; }
.guide-quiz-cta-bottom .guide-qbank-note a { color: var(--navy); text-decoration: underline; font-weight: 700; }

/* ===== RELATED STUDY GUIDES ===== */
.related-guides { max-width: 1100px; margin: 0 auto; padding: 2.5rem 5% 1rem; }
.related-guides h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; color: var(--navy); margin-bottom: 0.4rem; }
.related-guides .sub { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.related-guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (max-width: 640px) { .related-guides-grid { grid-template-columns: 1fr; } }
.related-guide-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; transition: all 0.2s; }
.related-guide-card:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(0,180,166,0.08); transform: translateY(-2px); text-decoration: none; }
.related-guide-icon { font-size: 1.5rem; flex-shrink: 0; }
.related-guide-info { flex: 1; min-width: 0; }
.related-guide-info h3 { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); margin: 0 0 0.15rem; line-height: 1.3; }
.related-guide-info p { font-size: 0.75rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.related-guide-arrow { font-size: 0.85rem; font-weight: 800; color: var(--teal-text); flex-shrink: 0; }

/* Big cheatsheet download button (replaces inline forms on study guides) */
.cs-dl-btn-big { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 1rem; font-weight: 800; padding: 0.95rem 2rem; border-radius: 12px; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; box-shadow: 0 6px 18px rgba(0,180,166,0.25); }
.cs-dl-btn-big:hover { background: var(--teal-light); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,180,166,0.35); text-decoration: none; }

/* ===== FOOTER ===== */
.footer { background: var(--navy); color: rgba(255,255,255,0.55); padding: 3rem 5% 1.5rem; margin: 0; border: none; width: 100%; font-size: 0.9rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand { padding-right: 1rem; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: var(--white); text-decoration: none; letter-spacing: -0.01em; line-height: 1; margin-bottom: 0.9rem; }
.footer-logo:hover { text-decoration: none; opacity: 0.9; }
.footer-logo-icon { width: 28px; height: 28px; background: var(--teal); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(-4deg); flex-shrink: 0; }
.footer-tagline { color: rgba(255,255,255,0.55); line-height: 1.6; font-size: 0.85rem; margin-bottom: 0.6rem; max-width: 320px; }
.footer-built { color: rgba(255,255,255,0.55); line-height: 1.55; font-size: 0.82rem; margin-bottom: 0.9rem; max-width: 320px; }
.footer-built a { color: var(--teal-light); text-decoration: none; font-weight: 600; }
.footer-built a:hover { color: var(--white); text-decoration: none; }
.footer-contact { font-size: 0.82rem; }
.footer-contact a { color: var(--teal-light); text-decoration: none; }
.footer-contact a:hover { color: var(--white); text-decoration: none; }
.footer-col .footer-heading { font-size: 0.72rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.95rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.footer-col a, .footer-link-btn { color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.15s; line-height: 1.45; display: inline-block; }
.footer-col a:hover, .footer-link-btn:hover { color: var(--teal-light); text-decoration: none; }
.footer-link-btn { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 1.4rem; text-align: center; }
.footer-disclaimer { font-size: 0.7rem; color: rgba(255,255,255,0.6); line-height: 1.6; max-width: 760px; margin: 0 auto 0.7rem; }
.footer-legal-links a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-legal-links a:hover { color: var(--teal-light); }
.footer-copyright { font-size: 0.7rem; color: rgba(255,255,255,0.6); }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
  .footer-tagline { max-width: 100%; }
}
@media (max-width: 520px) {
  .footer { padding: 2.4rem 5% 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; padding-bottom: 1.6rem; }
}
@media (max-width: 768px) {
  .footer-col ul { gap: 0; }
  .footer-col a, .footer-link-btn { display: block; width: 100%; padding: 0.8rem 0; }
  .footer-legal-links a { display: inline-block; padding: 0.8rem 0.4rem; }
}

/* ===== CATEGORY LANDING (Glass Cards) ===== */
.topics-section { max-width: 1100px; margin: 0 auto; padding: 1.5rem 5% 4rem; }
.topics-section > h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin-bottom: 0.4rem; }
.topics-section > p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.6; }
.topic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.topic-card { background: var(--white); border-radius: 14px; padding: 1.4rem 1.5rem; border: 1px solid rgba(0,0,0,0.04); transition: all 0.25s ease; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.topic-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); text-decoration: none; }
.topic-card:hover.tc-teal { border-color: rgba(0,180,166,0.3); }
.topic-card:hover.tc-coral { border-color: rgba(232,99,90,0.3); }
.topic-card:hover.tc-gold { border-color: rgba(212,168,67,0.3); }
.topic-card:hover.tc-navy { border-color: rgba(11,29,58,0.2); }
.topic-card::before { display: none; }
.topic-card-icon { font-size: 1.6rem; display: block; }
.tci-teal, .tci-coral, .tci-gold, .tci-navy { display: none; }
.topic-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0; line-height: 1.3; color: var(--text-dark); }
.topic-card p { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; flex: 1; margin: 0; }
.topic-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-tag { font-size: 0.68rem; font-weight: 500; background: #F4F3EF; color: var(--text-muted); padding: 2px 7px; border-radius: 5px; }
.topic-card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); transition: all 0.2s; margin-top: 2px; }
.topic-card:hover .topic-card-link { color: var(--teal-text); }
@media (max-width: 700px) { .topic-cards { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 960px) { .topic-cards { grid-template-columns: repeat(2, 1fr); } }

/* ===== CHEATSHEET CTA ===== */
.cheatsheet-cta { display: flex; flex-direction: column; gap: 1rem; background: rgba(0,180,166,0.05); border: 1px solid rgba(0,180,166,0.15); border-radius: 14px; padding: 1.8rem 2rem; }
.cheatsheet-cta-icon { font-size: 2rem; line-height: 1; }
.cheatsheet-cta-text { display: flex; flex-direction: column; gap: 4px; }
.cheatsheet-cta-text strong { font-size: 1rem; color: var(--text-dark); }
.cheatsheet-cta-text span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.cheatsheet-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cheatsheet-form input[type="email"] { flex: 1; min-width: 200px; padding: 0.75rem 1rem; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.1); background: var(--white); font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dark); outline: none; transition: border-color 0.2s; }
.cheatsheet-form input[type="email"]:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,166,0.35); }
.cheatsheet-btn { flex-shrink: 0; padding: 0.75rem 1.5rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.cheatsheet-btn:hover { background: var(--teal-light); transform: translateY(-1px); text-decoration: none; }
.cheatsheet-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cheatsheet-dl-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; border-radius: 10px; text-decoration: none; transition: all 0.2s; }
.cheatsheet-dl-btn:hover { background: var(--teal-light); transform: translateY(-1px); text-decoration: none; }

/* Cheatsheet and worksheet landing pages: Download button with its format and email facts beside it */
.page-hero .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.page-hero .hero-cta .hero-cta-facts { margin: 0; max-width: none; font-size: 0.92rem; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.88); }
@media (max-width: 600px) {
  .page-hero .hero-cta { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .page-hero .hero-cta .landing-cta-btn { width: 100%; justify-content: center; min-height: 48px; box-sizing: border-box; }
  .page-hero .hero-cta .hero-cta-facts { text-align: center; }
}


/* =========================================================
   BLOG
   ========================================================= */

/* Blog index page — listing card grid */
.blog-index { max-width: 1100px; margin: 0 auto; padding: 2.5rem 5% 4rem; }
.blog-index-intro { max-width: 720px; margin-bottom: 2.5rem; }
.blog-index-intro p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.blog-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 1.6rem 1.6rem 1.4rem; text-decoration: none; color: inherit; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 0.6rem; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(11,29,58,0.08); border-color: var(--teal); text-decoration: none; }
.blog-card-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-text); }
.blog-card-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.2); }
.blog-card-eyebrow .read-time { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.blog-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--navy); line-height: 1.3; margin: 0; }
.blog-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; flex: 1; }
.blog-card-cta { font-size: 0.85rem; font-weight: 700; color: var(--teal-text); display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; transition: gap 0.2s; }
.blog-card:hover .blog-card-cta { gap: 0.55rem; }

/* Individual blog post */
.blog-post { max-width: 960px; margin: 0 auto; padding: 2.5rem 5% 1rem; }
.blog-post .post-eyebrow { font-size: 0.78rem; font-weight: 700; color: var(--teal-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.blog-post .post-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.2); }
.blog-post .post-eyebrow .read-time { color: var(--text-muted); font-weight: 600; }
.blog-post .post-eyebrow .post-date { color: var(--text-muted); font-weight: 600; }
.blog-post .post-lead { font-size: 1.1rem; line-height: 1.65; color: #2A3B4F; margin: 0.6rem 0 1.8rem; padding: 1rem 1.2rem; background: var(--cream); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; }
.blog-post h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--navy); margin: 2.2rem 0 0.7rem; line-height: 1.25; }
.blog-post h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin: 1.6rem 0 0.5rem; line-height: 1.35; }
.blog-post p { font-size: 1rem; line-height: 1.8; color: #333; margin-bottom: 1rem; }
.blog-post ul, .blog-post ol { font-size: 1rem; line-height: 1.8; color: #333; margin: 0.5rem 0 1.2rem 1.5rem; }
.blog-post li { margin-bottom: 0.35rem; }
.blog-post strong { color: var(--navy); }
.blog-post a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 2px; }
.blog-post a:hover { color: var(--navy); }
.blog-post blockquote { border-left: 4px solid var(--teal); padding: 0.8rem 1.2rem; margin: 1.4rem 0; background: var(--bg); color: #2A3B4F; font-size: 0.98rem; line-height: 1.7; border-radius: 0 8px 8px 0; }
.blog-post .post-author { display: flex; align-items: center; gap: 0.8rem; padding: 1.4rem 0 1rem; margin-top: 2.2rem; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.92rem; color: var(--text-muted); }
.blog-post .post-author strong { color: var(--navy); }
.blog-post .post-callout { background: rgba(0,180,166,0.05); border: 1px solid rgba(0,180,166,0.15); border-radius: 11px; padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.blog-post .post-callout > strong { display: block; margin-bottom: 0.3rem; color: var(--teal-text); font-size: 0.96rem; }
.blog-post .post-callout p { margin-bottom: 0.4rem; }
.blog-post .post-callout p:last-child { margin-bottom: 0; }
.blog-post .post-callout .post-callout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: 0.9rem; }
.blog-post .post-cta-btn { display: inline-flex; align-items: center; background: var(--teal); color: var(--navy); font-weight: 800; font-size: 0.9rem; padding: 0.8rem 1.4rem; min-height: 44px; box-sizing: border-box; border-radius: 9px; text-decoration: none; }
.blog-post .post-cta-btn:hover { background: var(--teal-light, #00D4C4); text-decoration: none; }
.blog-post .post-cta-link { color: var(--teal-text); font-weight: 700; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 2px; }
.blog-post .post-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.8rem; border-radius: 11px; border: 1px solid rgba(0,0,0,0.06); }
.blog-post table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.blog-post thead { background: var(--navy); color: var(--white); }
.blog-post th { padding: 0.7rem 1rem; text-align: left; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
.blog-post td { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); line-height: 1.55; vertical-align: top; }
.blog-post tbody tr:nth-child(even) { background: var(--bg); }
/* F4: pin the row-label column so the comparison columns stay reachable when the table scrolls */
.blog-post .post-table-wrap th:first-child,
.blog-post .post-table-wrap td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 rgba(0,0,0,0.07); }
.blog-post .post-table-wrap thead th:first-child { background: var(--navy); }
.blog-post .post-table-wrap tbody td:first-child { background: var(--bg); }

/* Related posts */
.blog-related { max-width: 960px; margin: 0 auto; padding: 2rem 5% 1rem; }
.blog-related h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.9rem; }
.blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem; }
.blog-related-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 11px; padding: 1rem 1.2rem; text-decoration: none; color: inherit; transition: all 0.2s; display: flex; flex-direction: column; gap: 0.3rem; }
.blog-related-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,180,166,0.08); text-decoration: none; }
.blog-related-card .eyebrow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-text); }
.blog-related-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin: 0; }

@media (max-width: 700px) {
  .blog-post { padding: 1.8rem 5% 1rem; }
  .blog-post h2 { font-size: 1.45rem; margin-top: 1.6rem; }
  .blog-post .post-lead { font-size: 1rem; padding: 0.85rem 1rem; }
  .blog-grid { grid-template-columns: 1fr; }
}


/* On-this-page contents for long reference articles: six quick links, the full list in a native <details>, and the article's PDF action */
.blog-post .post-toc { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; margin: 1rem 0 1.5rem; }
.blog-post .post-toc .post-toc-title { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.blog-post .post-toc ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.35; }
.blog-post .post-toc li { margin: 0; }
.blog-post .post-toc .post-toc-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.blog-post .post-toc .post-toc-main a { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 0.4rem 0.8rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--cream-dark); color: var(--teal-text); font-weight: 700; text-align: center; text-decoration: none; }
.blog-post .post-toc .post-toc-main a:hover { border-color: var(--teal); color: var(--navy); }
.blog-post .post-toc a:focus-visible, .blog-post .post-toc summary:focus-visible, .blog-post .post-toc .post-toc-pdf:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.blog-post .post-toc .post-toc-all { margin-top: 0.4rem; }
.blog-post .post-toc .post-toc-all summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 700; font-size: 0.92rem; color: var(--navy); cursor: pointer; list-style: none; }
.blog-post .post-toc .post-toc-all summary::-webkit-details-marker { display: none; }
.blog-post .post-toc .post-toc-all summary::after { content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.blog-post .post-toc .post-toc-all[open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
.blog-post .post-toc .post-toc-all ul { padding-top: 0.2rem; }
.blog-post .post-toc .post-toc-all li a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0.35rem 0.2rem; color: var(--teal-text); font-weight: 600; text-decoration: none; }
.blog-post .post-toc .post-toc-all li a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.blog-post .post-toc .post-toc-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.7rem; padding-top: 0.8rem; border-top: 1px solid var(--cream-dark); }
.blog-post .post-toc .post-toc-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 0.5rem 1.1rem; border: 0; border-radius: 9px; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-weight: 800; font-size: 0.92rem; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.blog-post .post-toc .post-toc-pdf:hover { background: var(--teal-light, #00D4C4); color: var(--navy); }
.blog-post .post-toc .post-toc-note { font-size: 0.85rem; color: var(--text-muted); }
.blog-post .post-toc ~ h2[id] { scroll-margin-top: 20px; }
/* Jump-link target headings take focus (tabindex=-1) so keyboard users continue from the section; no ring on a mouse jump */
.blog-post h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
@media (min-width: 620px) {
  .blog-post .post-toc .post-toc-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-post .post-toc .post-toc-all ul { columns: 2; column-gap: 1.5rem; }
  .blog-post .post-toc .post-toc-all li { break-inside: avoid; }
}
@media (max-width: 480px) {
  .blog-post .post-toc .post-toc-pdf { width: 100%; }
}

/* ===== STUDY GUIDE: FAQ accordion section =====
   Sits at the end of <article class="content"> before the cheatsheet section.
   Uses native <details>/<summary> for accessibility + zero JS. */
.guide-faq { background: var(--white); border-radius: 16px; padding: 2rem 2.5rem; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04); }
.guide-faq > h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; margin-bottom: 0.3rem; color: var(--text-dark); line-height: 1.25; }
.guide-faq .section-subtitle { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.3rem; line-height: 1.5; }
.faq-item { border: 1px solid rgba(0,0,0,0.06); border-radius: 11px; margin-bottom: 0.55rem; overflow: hidden; transition: all 0.2s ease; background: var(--bg); }
.faq-item[open] { border-color: var(--teal); background: var(--white); box-shadow: 0 4px 14px rgba(0,180,166,0.06); }
.faq-item summary { padding: 0.95rem 2.5rem 0.95rem 1.2rem; cursor: pointer; font-weight: 700; font-size: 0.96rem; color: var(--navy); list-style: none; position: relative; transition: background 0.15s; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; color: var(--teal-text); transition: transform 0.2s; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { background: rgba(0,180,166,0.04); }
.faq-answer { padding: 0 1.2rem 1.1rem; font-size: 0.92rem; line-height: 1.7; color: #444; }
.faq-answer p { margin: 0 0 0.6rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--navy); }
.faq-answer a { color: var(--teal-text); }
@media (max-width: 700px) {
  .guide-faq { padding: 1.4rem 1.2rem; }
  .faq-item summary { padding: 0.85rem 2rem 0.85rem 1rem; font-size: 0.92rem; }
  .faq-answer { padding: 0 1rem 1rem; font-size: 0.9rem; }
}


/* ===== STUDY GUIDE: Last-reviewed meta line =====
   Lives at the bottom of <article class="content">. Styled for light background
   (used to sit in the dark hero — colors are inverted for the new placement). */
.guide-meta { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); padding: 1.4rem 1rem 0.6rem; margin: 0.8rem 0 0; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); }
.guide-meta svg { color: var(--teal-text); flex-shrink: 0; }
.guide-meta strong { color: var(--text-dark); font-weight: 700; }


/* ===== STUDY GUIDE: Report an error link in back bar ===== */
.back-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 5% 0.5rem; max-width: 1100px; margin: 0 auto; }
.report-error-link { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; transition: color 0.2s; background: none; border: none; font-family: inherit; padding: 0.4rem 0; }
.report-error-link:hover { color: var(--coral-text); text-decoration: none; }
.report-error-link svg { width: 13px; height: 13px; }


/* ===== CATEGORY INDEX: "Test Yourself" quiz row =====
   Full-width cream band on category landing pages (e.g. /ob-maternity/).
   Replaces the inline-styled .topics-section that was constrained to 1100px
   wide, which made the cream background look boxed in on wide screens. */
.cat-quiz-row { background: var(--cream); padding: 3.2rem 5% 3.5rem; margin-top: 2rem; }
.cat-quiz-row > h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; color: var(--text-dark); text-align: center; margin-bottom: 0.4rem; }
.cat-quiz-row > h2 em { color: var(--teal-text); font-style: italic; }
.cat-quiz-row > p { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.cat-quiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.cat-quiz-card { background: var(--white); padding: 1.8rem 1.5rem; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); text-align: center; text-decoration: none; transition: all 0.2s; display: block; color: inherit; }
.cat-quiz-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-color: var(--teal); text-decoration: none; }
.cat-quiz-card-num { width: 54px; height: 54px; background: var(--teal); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-weight: 700; font-size: 1.4rem; margin: 0 auto 1rem; }
.cat-quiz-card h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 0.4rem; }
.cat-quiz-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; }
.cat-quiz-card-cta { display: inline-block; background: var(--teal); color: var(--navy); padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; }


/* ===========================================================
   NGN ENGINE (Next Generation NCLEX — case studies)
   =========================================================== */
.ngn-container { max-width: 960px; margin: 0 auto; padding: 2rem 5% 4rem; }

/* Start screen */
.ngn-start { text-align: center; padding: 2.6rem 1.5rem; background: var(--white); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); }
.ngn-start h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--text-dark); margin-bottom: 0.5rem; }
.ngn-start p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; max-width: 620px; margin: 0 auto 1.4rem; }
.ngn-start-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 680px; margin: 0 auto 1.6rem; }
.ngn-start-step { font-size: 0.72rem; font-weight: 600; color: var(--navy); background: rgba(0,180,166,0.08); border: 1px solid rgba(0,180,166,0.2); padding: 0.3rem 0.7rem; border-radius: 100px; }
.ngn-begin-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 1rem; font-weight: 800; padding: 0.85rem 2rem; border-radius: 12px; border: none; cursor: pointer; transition: all 0.2s; }
.ngn-begin-btn:hover { background: var(--teal-light); transform: translateY(-2px); }

/* Scenario — tabbed medical record */
.ngn-scenario { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; overflow: hidden; margin-bottom: 1.2rem; }
.ngn-scenario-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 0.7rem 1.1rem 0; }
.ngn-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0.5rem 0.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ngn-tab { background: none; border: none; border-bottom: 2.5px solid transparent; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--text-muted); padding: 0.55rem 0.9rem; cursor: pointer; transition: all 0.15s; margin-bottom: -1px; }
.ngn-tab:hover { color: var(--navy); }
.ngn-tab-active { color: var(--teal-text); border-bottom-color: var(--teal); }
.ngn-tab-panels { padding: 1.1rem 1.3rem 1.3rem; }
.ngn-tab-panel { display: none; font-size: 0.9rem; line-height: 1.65; color: #333; }
.ngn-tab-panel-active { display: block; }
.ngn-tab-panel table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 0.3rem 0; }
.ngn-tab-panel thead { background: transparent; }  /* override global navy thead so navy header text stays visible */
.ngn-tab-panel td, .ngn-tab-panel th { padding: 0.4rem 0.7rem; border-bottom: 1px solid rgba(0,0,0,0.06); text-align: left; }
.ngn-tab-panel th { font-weight: 700; color: var(--navy); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: transparent; border-bottom: 2px solid rgba(0,0,0,0.12); }

/* Progress */
.ngn-progress { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.ngn-progress-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; }
.ngn-progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.4s ease; }
.ngn-progress-text { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* Question card */
.ngn-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 1.8rem 2rem; }
.ngn-step { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text); background: rgba(212,168,67,0.12); padding: 0.25rem 0.7rem; border-radius: 100px; margin-bottom: 0.7rem; }
.ngn-qnum { font-size: 0.72rem; font-weight: 700; color: var(--teal-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.ngn-stem { font-size: 1.05rem; font-weight: 600; color: var(--text-dark); line-height: 1.6; margin-bottom: 0.5rem; }
.ngn-sata-hint { font-size: 0.8rem; font-weight: 700; color: var(--coral-text); margin-bottom: 1rem; }
.ngn-options { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.8rem; }
.ngn-option { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 1rem; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px; cursor: pointer; transition: all 0.15s; font-size: 0.92rem; line-height: 1.5; color: var(--text-dark); }
.ngn-option:hover { border-color: rgba(0,180,166,0.4); background: rgba(0,180,166,0.03); }
.ngn-option input { position: absolute; opacity: 0; pointer-events: none; }
.ngn-option-box { width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.2); flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.ngn-option input[type="radio"] ~ .ngn-option-box { border-radius: 50%; }
.ngn-option input[type="checkbox"] ~ .ngn-option-box { border-radius: 5px; }
.ngn-option input:checked ~ .ngn-option-box { border-color: var(--teal); background: var(--teal); }
.ngn-option input:checked ~ .ngn-option-box::after { content: '✓'; color: var(--navy); font-size: 0.7rem; font-weight: 900; }
.ngn-option input:checked ~ .ngn-option-text { font-weight: 600; }
.ngn-locked { cursor: default; pointer-events: none; }
.ngn-option.ngn-correct { border-color: #16a34a; background: rgba(22,163,74,0.07); }
.ngn-option.ngn-correct .ngn-option-box { border-color: #16a34a; background: #16a34a; }
.ngn-option.ngn-wrong { border-color: #dc2626; background: rgba(220,38,38,0.06); }
.ngn-option.ngn-wrong .ngn-option-box { border-color: #dc2626; background: #dc2626; }
.ngn-option.ngn-missed { border-color: #16a34a; border-style: dashed; }

/* Rationale */
.ngn-rationale { margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: 0.88rem; line-height: 1.7; color: #444; }
.ngn-rationale strong { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; }
.ngn-rationale-correct { background: rgba(22,163,74,0.07); border-left: 3px solid #16a34a; }
.ngn-rationale-correct strong { color: #16a34a; }
.ngn-rationale-partial { background: rgba(212,168,67,0.08); border-left: 3px solid var(--gold); }
.ngn-rationale-partial strong { color: #b8860b; }
.ngn-rationale-wrong { background: rgba(220,38,38,0.05); border-left: 3px solid #dc2626; }
.ngn-rationale-wrong strong { color: #dc2626; }
.ngn-rat-score { font-weight: 700; }

/* Nav buttons */
.ngn-nav { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.4rem; }
.ngn-submit-btn { background: var(--navy); color: #fff; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; padding: 0.7rem 1.6rem; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s; }
.ngn-submit-btn:hover:not(:disabled) { background: #142d52; transform: translateY(-1px); }
.ngn-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ngn-next-btn { display: none; align-items: center; gap: 0.4rem; background: var(--teal); color: var(--navy); font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; padding: 0.7rem 1.6rem; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s; }
.ngn-next-btn:hover { background: var(--teal-light); transform: translateY(-1px); }

/* Results */
.ngn-results { display: none; text-align: center; background: var(--white); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); padding: 2.5rem 2rem; }
.ngn-results h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--text-dark); margin-bottom: 0.3rem; }
.ngn-score-ring { width: 168px; height: 168px; margin: 1.4rem auto; position: relative; }
.ngn-score-ring svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.ngn-score-ring circle { fill: none; stroke-width: 8; }
.ngn-score-ring .bg { stroke: rgba(0,0,0,0.06); }
.ngn-score-ring .fill { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset 1.5s ease; }
.ngn-score-ring .fill.fail { stroke: var(--coral); }
.ngn-score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.ngn-score-pct { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); display: block; }
.ngn-score-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ngn-results-msg { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; max-width: 420px; margin: 0.8rem auto 1.6rem; }

/* Results — step breakdown */
.ngn-step-section { text-align: left; margin: 1.5rem 0; padding: 1.4rem 1.2rem; background: var(--bg); border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; }
.ngn-step-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); margin-bottom: 1rem; text-align: center; }
.ngn-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.ngn-step-item { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.7rem; }
.ngn-step-name { font-size: 0.78rem; font-weight: 700; color: var(--navy); flex: 1; }
.ngn-step-bar { width: 60px; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.ngn-step-bar span { display: block; height: 100%; border-radius: 3px; }
.ngn-step-pct { font-size: 0.85rem; font-weight: 800; width: 38px; text-align: right; flex-shrink: 0; }
.ngn-step-pass .ngn-step-bar span { background: #16a34a; } .ngn-step-pass .ngn-step-pct { color: #16a34a; }
.ngn-step-mid .ngn-step-bar span { background: var(--gold); } .ngn-step-mid .ngn-step-pct { color: #b8860b; }
.ngn-step-fail .ngn-step-bar span { background: var(--coral); } .ngn-step-fail .ngn-step-pct { color: var(--coral-text); }

/* Results — per-question review */
.ngn-review-section { text-align: left; margin-top: 1.5rem; }
.ngn-review-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--navy); margin-bottom: 1rem; text-align: center; }
.ngn-rev-card { background: var(--bg); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 0.8rem; border-left: 4px solid rgba(0,0,0,0.1); }
.ngn-rev-correct { border-left-color: #16a34a; }
.ngn-rev-partial { border-left-color: var(--gold); }
.ngn-rev-wrong { border-left-color: #dc2626; }
.ngn-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.ngn-rev-step { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-text); }
.ngn-rev-verdict { font-size: 0.74rem; font-weight: 700; }
.ngn-rev-v-correct { color: #16a34a; }
.ngn-rev-v-partial { color: #b8860b; }
.ngn-rev-v-wrong { color: #dc2626; }
.ngn-rev-stem { font-size: 0.92rem; font-weight: 600; color: var(--text-dark); line-height: 1.5; margin-bottom: 0.7rem; }
.ngn-rev-opts { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.ngn-rev-opt { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: #555; padding: 0.35rem 0.5rem; border-radius: 6px; }
.ngn-rev-correct-opt, .ngn-rev-opt.ngn-rev-correct { background: rgba(22,163,74,0.07); color: #166534; }
.ngn-rev-opt.ngn-rev-wrong { background: rgba(220,38,38,0.06); color: #991b1b; }
.ngn-rev-mark { font-weight: 800; width: 14px; flex-shrink: 0; }
.ngn-rev-rationale { font-size: 0.85rem; line-height: 1.6; color: #444; background: var(--white); padding: 0.7rem 0.9rem; border-radius: 8px; border-left: 3px solid var(--teal); }

.ngn-results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.8rem; }
.ngn-retry-btn { background: var(--teal); color: var(--navy); font-family: var(--font-body); font-weight: 800; font-size: 0.9rem; padding: 0.75rem 1.6rem; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s; }
.ngn-retry-btn:hover { background: var(--teal-light); transform: translateY(-2px); }
.ngn-study-btn { display: inline-flex; align-items: center; background: transparent; color: var(--text-muted); font-weight: 600; font-size: 0.85rem; padding: 0.75rem 1.3rem; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12); text-decoration: none; transition: all 0.2s; }
.ngn-study-btn:hover { border-color: var(--teal); color: var(--teal-text); text-decoration: none; }

/* NGN hub cards */
.ngn-hub { max-width: 1000px; margin: 0 auto; padding: 2.5rem 5% 4rem; }
.ngn-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ngn-case-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 1.5rem 1.6rem; text-decoration: none; color: inherit; transition: all 0.2s; display: flex; flex-direction: column; gap: 0.5rem; }
.ngn-case-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(11,29,58,0.08); border-color: var(--teal); text-decoration: none; }
.ngn-case-card .ngn-case-tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-text); }
.ngn-case-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--navy); margin: 0; line-height: 1.3; }
.ngn-case-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0; flex: 1; }
.ngn-case-card .ngn-case-meta { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }

@media (max-width: 640px) {
  .ngn-card { padding: 1.3rem 1.2rem; }
  .ngn-nav { flex-direction: column; }
  .ngn-submit-btn, .ngn-next-btn { width: 100%; justify-content: center; }
}

/* --- NGN item type: MATRIX/GRID --- */
.ngn-matrix-wrap { overflow-x: auto; margin-top: 0.8rem; }
.ngn-matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ngn-matrix thead { background: transparent; }  /* override global navy thead so navy header text stays visible */
.ngn-matrix th { padding: 0.55rem 0.7rem; text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); background: transparent; border-bottom: 2px solid rgba(0,0,0,0.1); }
.ngn-matrix th:first-child { text-align: left; }
.ngn-matrix-label { padding: 0.6rem 0.7rem; font-size: 0.88rem; color: var(--text-dark); border-bottom: 1px solid rgba(0,0,0,0.06); line-height: 1.4; }
.ngn-matrix-cell { text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0.5rem; }
.ngn-matrix-radio { display: inline-flex; cursor: pointer; }
.ngn-matrix-radio input { position: absolute; opacity: 0; pointer-events: none; }
.ngn-matrix-radio .ngn-option-box { width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.25); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ngn-matrix-radio input:checked ~ .ngn-option-box { border-color: var(--teal); background: var(--teal); }
.ngn-matrix-radio input:checked ~ .ngn-option-box::after { content: '✓'; color: var(--navy); font-size: 0.7rem; font-weight: 900; }
.ngn-matrix-cell.ngn-mx-correct { background: rgba(22,163,74,0.1); }
.ngn-matrix-cell.ngn-mx-correct::after { content: '✓'; color: #16a34a; font-weight: 900; }
.ngn-matrix-cell.ngn-mx-wrong { background: rgba(220,38,38,0.08); }
.ngn-matrix-cell.ngn-mx-wrong:not(.ngn-mx-correct)::after { content: '✗'; color: #dc2626; font-weight: 900; }
.ngn-matrix-cell.ngn-mx-correct .ngn-option-box, .ngn-matrix-cell.ngn-mx-wrong .ngn-option-box { display: none; }

/* --- NGN item type: CLOZE (dropdowns in a sentence) --- */
.ngn-cloze { font-size: 1rem; line-height: 2.2; color: var(--text-dark); margin-top: 0.6rem; }
.ngn-cloze-select { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--navy); padding: 0.3rem 0.5rem; border: 1.5px solid var(--teal); border-radius: 7px; background: rgba(0,180,166,0.05); margin: 0 0.2rem; cursor: pointer; }
.ngn-cloze-select:disabled { cursor: default; }
.ngn-cloze-select.ngn-cloze-correct { border-color: #16a34a; background: rgba(22,163,74,0.1); color: #166534; }
.ngn-cloze-select.ngn-cloze-wrong { border-color: #dc2626; background: rgba(220,38,38,0.08); color: #991b1b; }
.ngn-cloze-rev { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 6px; font-weight: 700; margin: 0 0.15rem; }
.ngn-cloze-rev.ngn-cloze-correct { background: rgba(22,163,74,0.12); color: #166534; }
.ngn-cloze-rev.ngn-cloze-wrong { background: rgba(220,38,38,0.1); color: #991b1b; }
.ngn-cloze-review { line-height: 2; font-size: 0.92rem; }

/* --- NGN item type: BOW-TIE --- */
.ngn-bowtie { margin-top: 0.6rem; }
.ngn-bt-bank { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 1.1rem; padding: 0.7rem 0.9rem; background: var(--bg); border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); }
.ngn-bt-bank-label { font-weight: 700; color: var(--navy); }
.ngn-bt-token { display: inline-block; background: var(--white); border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; padding: 0.15rem 0.55rem; margin: 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.ngn-bt-cols { display: flex; align-items: center; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.ngn-bt-col { flex: 1; min-width: 180px; background: var(--white); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 0.9rem; }
.ngn-bt-col-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal-text); text-align: center; margin-bottom: 0.6rem; }
.ngn-bt-slot { margin-bottom: 0.5rem; }
.ngn-bt-slot:last-child { margin-bottom: 0; }
.ngn-bt-select { width: 100%; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--navy); padding: 0.5rem 0.6rem; border: 1.5px solid rgba(0,0,0,0.15); border-radius: 8px; background: var(--white); cursor: pointer; }
.ngn-bt-select.ngn-cloze-correct { border-color: #16a34a; background: rgba(22,163,74,0.08); }
.ngn-bt-select.ngn-cloze-wrong { border-color: #dc2626; background: rgba(220,38,38,0.06); }
.ngn-bt-arrow { font-size: 1.4rem; color: var(--text-muted); font-weight: 800; }
.ngn-bt-review { font-size: 0.85rem; line-height: 1.7; }
.ngn-bt-rev-row { margin-bottom: 0.3rem; }
.ngn-bt-rev-yours { color: var(--text-muted); }
.ngn-bt-rev-right { color: #166534; font-weight: 600; }
@media (max-width: 640px) { .ngn-bt-cols { flex-direction: column; } .ngn-bt-arrow { transform: rotate(90deg); } }

/* --- NGN item type: HIGHLIGHT --- */
.ngn-highlight { margin-top: 0.6rem; }
.ngn-hl-intro { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.ngn-hl-passage { font-size: 1rem; line-height: 2; color: var(--text-dark); }
.ngn-hl-seg { cursor: pointer; padding: 0.05rem 0.15rem; border-radius: 4px; border-bottom: 2px dotted rgba(0,0,0,0.15); transition: background 0.12s; }
.ngn-hl-seg:hover { background: rgba(0,180,166,0.1); }
.ngn-hl-seg.ngn-hl-on { background: rgba(212,168,67,0.35); border-bottom-color: transparent; }
.ngn-hl-seg.ngn-hl-correct { background: rgba(22,163,74,0.25); border-bottom: 2px solid #16a34a; cursor: default; }
.ngn-hl-seg.ngn-hl-wrong { background: rgba(220,38,38,0.18); border-bottom: 2px solid #dc2626; cursor: default; text-decoration: line-through; }
.ngn-hl-seg.ngn-hl-missed { border-bottom: 2px dashed #16a34a; cursor: default; }
.ngn-hl-review .ngn-hl-seg { cursor: default; }

/* --- NGN item type: TREND --- */
.ngn-trend-table-wrap { overflow-x: auto; margin: 0.6rem 0 1rem; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); }
.ngn-trend-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ngn-trend-table thead { background: var(--navy); color: var(--white); }
.ngn-trend-table th { padding: 0.5rem 0.8rem; text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.ngn-trend-table td, .ngn-trend-table tbody th { padding: 0.45rem 0.8rem; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: left; font-weight: 400; color: var(--text-dark); }
.ngn-trend-table tbody th { font-weight: 700; color: var(--navy); }
.ngn-trend-table tbody tr:nth-child(even) { background: var(--bg); }

/* Review-card variants for new types */
.ngn-rev-matrix { overflow-x: auto; margin-bottom: 0.7rem; }
.ngn-rev-matrix .ngn-matrix-cell.ngn-mx-correct::after { content: '✓'; }
.ngn-rev-matrix .ngn-matrix-cell.ngn-mx-wrong::after { content: '✗'; }


/* ===========================================================
   QUIZ ENGINE (PEQ = Passclex Engine Quiz)
   Shared styles for the upgraded quiz experience.
   =========================================================== */

/* --- Mode selector (on start screen) --- */
.peq-mode-row { margin: 0 auto 1.5rem; max-width: 440px; text-align: left; }
.peq-mode-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.55rem; text-align: center; }
.peq-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.peq-mode-opt { display: flex; flex-direction: column; gap: 0.2rem; background: var(--white); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 11px; padding: 0.7rem 0.85rem; cursor: pointer; transition: all 0.15s ease; position: relative; }
.peq-mode-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.peq-mode-opt strong { font-size: 0.92rem; color: var(--text-dark); font-weight: 700; }
.peq-mode-opt span { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.peq-mode-opt:hover { border-color: rgba(0,180,166,0.4); }
.peq-mode-opt:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; } /* the radio itself is visually hidden, so the card shows keyboard focus */
.peq-mode-opt.peq-mode-active { border-color: var(--teal); background: rgba(0,180,166,0.04); box-shadow: 0 0 0 3px rgba(0,180,166,0.08); }
.peq-mode-opt.peq-mode-active strong { color: var(--teal-text); }

/* Sideways phone: count + mode side by side so the whole start card, Start included, fits one screen.
   Floats, not grid: the engine sets .quiz-start's display inline when it hides/shows the card. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  .quiz-container .quiz-start { padding: 1.25rem 1.5rem; }
  .quiz-container .quiz-start > .peq-count-row,
  .quiz-container .quiz-start > .peq-mode-row { width: calc(50% - 0.6rem); max-width: none; margin: 0 0 1rem; }
  .quiz-container .quiz-start > .peq-count-row { float: left; }
  .quiz-container .quiz-start > .peq-mode-row { float: right; }
  .quiz-container .quiz-start > .quiz-start-btn { display: flex; width: fit-content; margin: 0 auto; clear: both; }
}

/* --- History badge (on start screen) --- */
.peq-history-badge { margin: 1.4rem auto 0; max-width: 440px; padding: 0.9rem 1rem; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; text-align: center; }
.peq-hist-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.5rem; }
.peq-hist-pills { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.peq-hist-pill { font-size: 0.78rem; font-weight: 700; padding: 0.22rem 0.55rem; border-radius: 6px; min-width: 42px; text-align: center; }
.peq-hist-pass { background: rgba(22,163,74,0.1); color: #16a34a; }
.peq-hist-fail { background: rgba(232,99,90,0.1); color: var(--coral-text); }
.peq-hist-best { font-size: 0.78rem; color: var(--text-muted); }
.peq-hist-best strong { color: var(--text-dark); }

/* --- Mark-for-review button (in quiz nav) --- */
.peq-mark-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 1.5px solid rgba(0,0,0,0.1); color: var(--text-muted); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; padding: 0.55rem 0.95rem; border-radius: 9px; cursor: pointer; transition: all 0.15s ease; margin-right: auto; }
.peq-mark-btn:hover { border-color: var(--gold); color: var(--gold-text); }
.peq-mark-btn svg { transition: all 0.15s ease; }
.peq-mark-btn.peq-marked { background: rgba(212,168,67,0.1); border-color: var(--gold); color: var(--gold-text); }
.peq-mark-btn.peq-marked svg { fill: var(--gold); stroke: var(--gold); }

/* --- Selected (no-reveal) option in Exam mode --- */
.quiz-option.selected-exam { border-color: var(--navy); background: rgba(11,29,58,0.04); }
.quiz-option.selected-exam .quiz-option-letter { background: var(--navy); color: var(--white); }

/* --- Time breakdown item --- */
.peq-rb-time strong { color: var(--navy); }

/* --- Missed-questions review section --- */
.peq-missed-section { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.08); text-align: left; }
.peq-missed-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--navy); margin: 0 0 1rem; line-height: 1.25; text-align: center; }

.peq-mq-card { background: var(--bg); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 1.2rem 1.3rem; margin-bottom: 0.9rem; }
.peq-mq-num { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem; }
.peq-mq-q { font-size: 0.98rem; font-weight: 700; color: var(--text-dark); line-height: 1.5; margin-bottom: 0.85rem; }
.peq-mq-opts { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.peq-mq-opt { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; font-size: 0.86rem; color: var(--text-dark); line-height: 1.45; background: var(--white); }
.peq-mq-opt.peq-mq-correct { border-color: #16a34a; background: rgba(22,163,74,0.06); }
.peq-mq-opt.peq-mq-wrong { border-color: #dc2626; background: rgba(220,38,38,0.05); }
.peq-mq-letter { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.06); display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.peq-mq-opt.peq-mq-correct .peq-mq-letter { background: #16a34a; color: var(--white); }
.peq-mq-opt.peq-mq-wrong .peq-mq-letter { background: #dc2626; color: var(--white); }
.peq-mq-rationale { font-size: 0.85rem; color: var(--text-dark); line-height: 1.65; background: rgba(255,255,255,0.7); padding: 0.7rem 0.9rem; border-radius: 8px; border-left: 3px solid var(--teal); }
.peq-mq-rationale strong { color: var(--navy); font-weight: 700; }

/* --- Category breakdown (on results screen, used by /mock-exam/) --- */
.peq-category-section { margin: 1.6rem 0 0; padding: 1.4rem 1.2rem; background: var(--bg); border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; }
.peq-category-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); margin: 0 0 1rem; text-align: center; }
.peq-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.65rem; }
.peq-category-item { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 11px; padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.peq-category-name { font-size: 0.86rem; font-weight: 700; color: var(--navy); }
.peq-category-bar { width: 100%; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; }
.peq-category-bar span { display: block; height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.peq-category-score { display: flex; align-items: baseline; gap: 0.4rem; }
.peq-category-score strong { font-size: 1.1rem; font-weight: 800; }
.peq-category-score span { font-size: 0.74rem; color: var(--text-muted); }
.peq-category-link { display: inline-block; font-size: 0.74rem; font-weight: 600; color: var(--teal-text); margin-top: 0.1rem; }
.peq-category-link:hover { text-decoration: underline; }
.peq-cat-pass .peq-category-bar span { background: #16a34a; }
.peq-cat-pass .peq-category-score strong { color: #16a34a; }
.peq-cat-mid .peq-category-bar span { background: var(--gold); }
.peq-cat-mid .peq-category-score strong { color: var(--gold-text); }
.peq-cat-fail .peq-category-bar span { background: var(--coral); }
.peq-cat-fail .peq-category-score strong { color: var(--coral-text); }

/* --- Progress trend (on results screen) --- */
.peq-trend-section { margin: 2rem 0 0; padding-top: 1.8rem; border-top: 1px solid rgba(0,0,0,0.08); }
.peq-trend-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); margin: 0 0 0.9rem; text-align: center; }
.peq-trend-pills { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.peq-trend-pill { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 72px; padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); background: var(--white); }
.peq-trend-pill strong { font-size: 1.05rem; font-weight: 700; }
.peq-trend-pill span { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.peq-trend-pill.peq-hist-pass { background: rgba(22,163,74,0.05); border-color: rgba(22,163,74,0.2); }
.peq-trend-pill.peq-hist-pass strong { color: #16a34a; }
.peq-trend-pill.peq-hist-fail { background: rgba(232,99,90,0.05); border-color: rgba(232,99,90,0.2); }
.peq-trend-pill.peq-hist-fail strong { color: var(--coral-text); }

@media (max-width: 600px) {
  .peq-mode-options { grid-template-columns: 1fr; }
  .peq-mq-card { padding: 1rem; }
  .peq-mq-q { font-size: 0.92rem; }
}

/* ============================================================
   EDITORIAL study-guide BODY redesign — component system for the
   redesigned guide reading body. Layered after the base rules; only
   restyles .ed-* reading content (page chrome untouched).
   ============================================================ */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--teal),var(--teal-light));transition:width .1s linear}

article.content.ed-article{max-width:780px}

.ed-section{margin:0 0 clamp(2.6rem,5vw,3.8rem);scroll-margin-top:24px}
.ed-kicker{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.85rem}
.ed-kicker .n{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--teal-text);letter-spacing:.02em}
.ed-kicker .rule{flex:1;height:1px;background:var(--cream-dark)}
.ed-section>h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,3vw,2.15rem);
  line-height:1.16;color:var(--navy);margin-bottom:.9rem;letter-spacing:-.01em}
.ed-lead{font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.6;color:var(--text-dark);
  font-weight:500;margin-bottom:1.3rem;text-wrap:pretty;max-width:720px}
.ed-lead strong{color:var(--teal-text);font-weight:700}
.ed-section>p{font-size:1.02rem;line-height:1.8;color:#384451;margin-bottom:1rem;text-wrap:pretty;max-width:64ch}
.ed-section>p b,.ed-section>p strong{color:var(--navy)}
.ed-h3{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-muted);margin:2.1rem 0 .9rem;font-family:var(--font-body)}

.ed-list{list-style:none;margin:.3rem 0 1.2rem;display:flex;flex-direction:column;gap:.6rem;max-width:66ch}
.ed-list>li{position:relative;padding-left:1.4rem;font-size:1.01rem;line-height:1.65;color:#384451;text-wrap:pretty}
.ed-list>li::before{content:'';position:absolute;left:1px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.ed-list li b,.ed-list li strong{color:var(--navy);font-weight:700}
.ed-list ul{list-style:none;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.ed-list ul li{position:relative;padding-left:1.2rem;font-size:.95rem;line-height:1.6;color:#4a5663}
.ed-list ul li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#c9bfae}

.ed-rows{display:flex;flex-direction:column;border-top:1px solid var(--cream-dark);margin:.4rem 0 1.3rem;max-width:760px}
.ed-row{display:grid;grid-template-columns:185px 1fr;gap:1.4rem;padding:1.05rem 0;border-bottom:1px solid var(--cream-dark)}
.ed-row dt{font-weight:800;color:var(--navy);font-size:1rem;line-height:1.3}
.ed-row dt small{display:block;font-weight:600;color:var(--text-muted);font-size:.78rem;margin-top:.25rem;text-transform:uppercase;letter-spacing:.04em}
.ed-row dd{font-size:.97rem;line-height:1.7;color:#384451}
.ed-row dd b,.ed-row dd strong{color:var(--teal-text);font-weight:700}
@media(max-width:620px){.ed-row{grid-template-columns:1fr;gap:.35rem;padding:.95rem 0}}

.ed-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0 1.3rem;max-width:760px}
.ed-compare .col{background:#fff;border:1px solid var(--cream-dark);border-radius:14px;padding:1.3rem 1.4rem}
.ed-compare .col h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-text);font-weight:800;margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.ed-compare .col h3 .d{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.ed-compare .col p{font-size:.92rem;line-height:1.6;color:#384451;margin:0 0 .5rem}
.ed-compare .col p:last-child{margin:0}
.ed-compare .col p b{color:var(--navy)}
.ed-compare .col.r h3{color:var(--coral-text)}
.ed-compare .col.r h3 .d{background:var(--coral)}
@media(max-width:560px){.ed-compare{grid-template-columns:1fr}}

.ed-mnemonic{margin:1.6rem 0;padding:1.6rem 0 1.6rem 1.8rem;border-left:3px solid var(--gold);max-width:720px}
.ed-mnemonic .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#9a7b1f;margin-bottom:.6rem}
.ed-mnemonic q{font-family:var(--font-head);font-weight:800;font-style:italic;font-size:clamp(1.45rem,2.8vw,1.9rem);line-height:1.2;color:var(--navy);display:block;margin-bottom:.8rem}
.ed-mnemonic q::before,.ed-mnemonic q::after{content:''}
.ed-mnemonic p{font-size:.96rem;line-height:1.7;color:#384451;margin:0}
.ed-mnemonic p b{color:var(--navy)}

.ed-flow{margin:1.2rem 0 1.3rem;display:flex;flex-direction:column;max-width:720px}
.ed-step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem}
.ed-step .marker{display:flex;flex-direction:column;align-items:center}
.ed-step .bub{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--teal);
  color:var(--teal-text);font-family:var(--font-mono);font-weight:700;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ed-step .line{flex:1;width:2px;background:var(--cream-dark);min-height:12px}
.ed-step:last-child .line{display:none}
.ed-step .txt{padding-bottom:1rem;padding-top:.35rem;font-size:1rem;line-height:1.55}
.ed-step .txt b{color:var(--navy)}
.ed-step .txt span{color:var(--text-muted);font-size:.92rem;display:block;margin-top:.1rem}
.ed-step.alt .bub{background:var(--coral);border-color:var(--coral);color:#fff}
.ed-step.alt .txt b{color:var(--coral-text)}

.ed-note{display:flex;gap:.9rem;background:rgba(0,180,166,.05);border-radius:12px;padding:1.05rem 1.25rem;margin:1.3rem 0;max-width:720px}
.ed-note.coral{background:rgba(232,99,90,.06)}
.ed-note.gold{background:rgba(212,168,67,.08)}
.ed-note>svg{flex-shrink:0;width:20px;height:20px;color:var(--teal-text);margin-top:.12rem}
.ed-note.coral>svg{color:var(--coral-text)}
.ed-note.gold>svg{color:#9a7b1f}
.ed-note .nt strong{display:block;font-size:.9rem;color:var(--navy);margin-bottom:.25rem}
.ed-note .nt p{font-size:.92rem;line-height:1.62;color:#384451;margin:0}
.ed-note .nt p+p{margin-top:.5rem}

.ed-check{margin:1.4rem 0;background:#fff;border:1px solid var(--cream-dark);border-radius:14px;overflow:hidden;max-width:720px}
.ed-check summary{list-style:none;cursor:pointer;padding:1.05rem 1.3rem;display:flex;align-items:center;gap:.8rem;font-weight:700;color:var(--navy);font-size:.97rem;line-height:1.4}
.ed-check summary::-webkit-details-marker{display:none}
.ed-check summary .q{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:var(--cream);color:var(--teal-text);font-family:var(--font-mono);font-size:.8rem;font-weight:700;flex-shrink:0}
.ed-check summary .chev{margin-left:auto;transition:transform .2s;color:var(--text-muted);flex-shrink:0}
.ed-check[open] summary .chev{transform:rotate(180deg)}
.ed-check .ans{padding:0 1.3rem 1.2rem 3.4rem;font-size:.95rem;line-height:1.7;color:#384451}
.ed-check .ans b{color:var(--teal-text)}
.ed-check.ed-reveal{margin:.35rem 0 1.4rem}
.ed-check.ed-reveal summary{min-height:44px;color:var(--teal-text);font-size:.92rem}
.ed-check.ed-reveal summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.ed-check.ed-reveal .lbl-hide,.ed-check.ed-reveal[open] .lbl-show{display:none}
.ed-check.ed-reveal[open] .lbl-hide{display:inline}
.ed-check.ed-reveal .ans{padding:.2rem 1.3rem .2rem}
.ed-check.ed-reveal .ed-flow{margin:.6rem 0 0}
.ed-reveal-prompt{font-size:.9rem;color:var(--text-muted);margin:-.35rem 0 .6rem}
.ed-reveal-all{display:flex;justify-content:flex-end;max-width:720px;margin:.2rem 0 .4rem}
.ed-reveal-toggle{background:none;border:0;padding:.7rem .4rem;min-height:44px;cursor:pointer;font:inherit;font-weight:700;font-size:.92rem;color:var(--teal-text);text-decoration:underline;text-underline-offset:3px}
.ed-reveal-toggle:hover{color:var(--navy)}
.ed-reveal-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.ed-check.ed-reveal summary .chev{transition:none}}
.guide-quiz-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;max-width:100%}
.guide-quiz-actions .guide-quiz-btn{flex-shrink:1;max-width:100%;justify-content:center;text-align:center;text-wrap:balance}
.guide-quiz-alt{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;font-weight:700;color:var(--teal-text);text-decoration:underline;text-underline-offset:3px}
.guide-quiz-alt:hover{color:var(--navy)}
.guide-quiz-cta-bottom .guide-quiz-actions{align-items:center;margin:0 auto}
.guide-quiz-cta-bottom .guide-quiz-alt{color:var(--navy)}
.guide-quiz-cta-bottom .guide-quiz-alt:hover{color:var(--navy);text-decoration-thickness:2px}
.toc-quiz a.toc-quiz-alt{margin-top:2px;min-height:44px;background:none;color:var(--teal-text);font-size:.78rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toc-quiz a.toc-quiz-alt:hover{background:none;color:var(--navy)}

.ed-formula{background:var(--navy);border-radius:16px;padding:1.7rem;text-align:center;margin:1.3rem 0;color:#fff;max-width:720px}
.ed-formula .eq{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);letter-spacing:.01em}
.ed-formula .eq em{color:var(--teal-light);font-style:italic}
.ed-formula .sub{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:.7rem;font-family:var(--font-mono)}

.illus{position:relative;border-radius:14px;overflow:hidden;margin:1.2rem 0 1.3rem;max-width:720px;
  background:repeating-linear-gradient(135deg,rgba(0,180,166,.05) 0 10px,rgba(0,180,166,.02) 10px 20px);
  border:1px dashed rgba(0,120,110,.35);display:flex;align-items:center;justify-content:center;text-align:center}
.illus span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--teal-text);
  text-transform:uppercase;padding:.4rem .7rem;background:rgba(255,255,255,.72);border-radius:6px}

.ed-faq{display:flex;flex-direction:column;gap:.55rem;max-width:760px}
.ed-faq details{border:1px solid var(--cream-dark);border-radius:12px;background:#fff;overflow:hidden}
.ed-faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.3rem;display:flex;align-items:center;gap:.9rem;font-weight:700;color:var(--navy);font-size:1rem;line-height:1.4}
.ed-faq summary::-webkit-details-marker{display:none}
.ed-faq summary .pl{margin-left:auto;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--teal-text);transition:transform .2s}
.ed-faq details[open] summary .pl{transform:rotate(45deg)}
.ed-faq .fa{padding:0 1.3rem 1.2rem;font-size:.96rem;line-height:1.75;color:#384451}
.ed-faq .fa b,.ed-faq .fa strong{color:var(--navy)}
.ed-faq .fa em{color:var(--teal-text);font-style:normal;font-weight:600}

.term{border-bottom:1.5px dotted var(--teal-text);cursor:help;font-weight:600;color:inherit}
.term:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
#termTip{position:fixed;z-index:10000;max-width:280px;background:var(--navy);color:#fff;padding:.7rem .85rem;
  border-radius:10px;font-size:.82rem;line-height:1.5;box-shadow:0 12px 34px rgba(11,29,58,.32);
  opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;border:1px solid rgba(255,255,255,.1)}
#termTip.show{opacity:1;visibility:visible}
#termTip strong{color:var(--teal-light);display:block;margin-bottom:.15rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
#termTip::after{content:'';position:absolute;bottom:-6px;left:var(--ax,20px);width:12px;height:12px;background:var(--navy);transform:rotate(45deg);border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}

.ed-cheat{background:var(--navy);border-radius:18px;padding:clamp(1.7rem,4vw,2.3rem);color:#fff;
  position:relative;overflow:hidden;max-width:760px;margin-top:.5rem}
.ed-cheat::before{content:'';position:absolute;top:-30%;right:-10%;width:320px;height:320px;background:radial-gradient(circle,rgba(0,180,166,.18),transparent 70%)}
.ed-cheat-in{position:relative;z-index:2;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.ed-cheat .ic{width:48px;height:48px;border-radius:12px;background:rgba(0,212,196,.14);display:flex;align-items:center;justify-content:center;color:var(--teal-light);flex-shrink:0}
.ed-cheat .txt{flex:1;min-width:200px}
.ed-cheat h3{font-family:var(--font-head);font-weight:800;font-size:1.4rem;margin-bottom:.25rem}
.ed-cheat p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.5;margin:0}
.ed-cheat .cs-dl-btn-big{flex-shrink:0}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}