/* ===== NYS Alarm Installer License Exam Practice — 2026 Visual System =====
 * Direction: Dark Command Center
 * Fonts: Syne (display) · DM Sans (body) · JetBrains Mono (numbers/timer)
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ───── Tokens ───── */
:root {
  --bg:        #070d1b;
  --bg-2:      #0d1628;
  --bg-3:      #111e35;
  --glass:     rgba(14, 24, 50, 0.7);
  --glass-2:   rgba(255,255,255,0.04);
  --glass-3:   rgba(255,255,255,0.07);
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.13);
  --border-blue: rgba(79, 142, 245, 0.35);

  --ink:   #dce8ff;
  --ink-2: #8ba3cc;
  --ink-3: #4a6080;
  --ink-4: #2d3f57;

  --blue:       oklch(66% 0.21 252);
  --blue-2:     oklch(56% 0.21 252);
  --blue-dim:   rgba(79,142,245,.12);
  --blue-glow:  rgba(79,142,245,.28);
  --blue-glow2: rgba(79,142,245,.08);

  --success:       oklch(65% 0.18 145);
  --success-dim:   rgba(34,197,94,.10);
  --success-glow:  rgba(34,197,94,.22);
  --success-border:rgba(34,197,94,.28);

  --danger:       oklch(62% 0.21 24);
  --danger-dim:   rgba(239,68,68,.10);
  --danger-glow:  rgba(239,68,68,.22);
  --danger-border:rgba(239,68,68,.28);

  --warn:       oklch(73% 0.17 68);
  --warn-dim:   rgba(245,158,11,.10);
  --warn-glow:  rgba(245,158,11,.22);

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.syne { font-family: 'Syne', sans-serif; }

/* Background dot grid (applied to body) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(79,142,245,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}
#root { position: relative; z-index: 1; }

/* ───── App shell ───── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ───── Top bar ───── */
.topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 28px;
  background: rgba(7,13,27,0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; user-select: none; text-decoration: none;
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
  display: grid; place-items: center;
  color: white; font-family:'Syne', sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: 0.02em;
  box-shadow: 0 0 14px var(--blue-glow);
  flex-shrink: 0;
}
.brand-name {
  font-family:'Syne', sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--ink); letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand-name span {
  display: block; font-family:'DM Sans', sans-serif;
  font-weight: 400; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 2px;
}

.font-size-ctrl {
  display: flex; align-items: center; gap: 3px;
}
.font-size-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--ink-2); border-radius: 6px;
  cursor: pointer; line-height: 1;
  padding: 4px 8px; font-size: 13px; font-weight: 700;
  transition: background 0.15s, color 0.15s;
  font-family:'Syne', sans-serif;
}
.font-size-btn:hover { background: var(--bg-3,rgba(255,255,255,0.06)); color: var(--ink); }
.font-size-btn:disabled { opacity: 0.3; cursor: default; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ───── Container ───── */
.container {
  max-width: 1140px; width: 100%;
  margin: 0 auto;
  padding: 40px 28px 100px;
  flex: 1;
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px;
  font-family:'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: all .18s cubic-bezier(.22,1,.36,1);
  white-space: nowrap; text-decoration: none; letter-spacing: -0.01em;
}
.btn:active { transform: scale(.97); }
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
  color: #fff; border-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 0 var(--blue-glow);
}
.btn-primary:hover {
  box-shadow: 0 0 20px var(--blue-glow), 0 4px 16px var(--blue-glow2);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--glass-2); color: var(--ink-2); border-color: var(--border);
}
.btn-ghost:hover { background: var(--glass-3); border-color: var(--border-2); color: var(--ink); }

.btn-outline {
  background: transparent; color: var(--blue); border-color: var(--border-blue);
}
.btn-outline:hover { background: var(--blue-dim); border-color: var(--blue); }

.btn-danger {
  background: var(--danger-dim); color: var(--danger); border-color: var(--danger-border);
}
.btn-danger:hover { background: var(--danger-glow); }

.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 11px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }


/* ───── Hero ───── */
.hero {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 64px 56px;
  margin-bottom: 36px;
}
.hero::before {
  content:'';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% -10%, rgba(79,142,245,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 100%, rgba(124,58,237,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.hero::after {
  content:'';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-blue), transparent);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 20px;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 var(--blue-glow); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: .7; }
}
.hero h1 {
  font-family:'Syne', sans-serif;
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -0.03em; margin: 0 0 18px;
  background: linear-gradient(135deg, #dce8ff 0%, var(--blue) 60%, #a78bfa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; max-width: 820px;
}
.hero p {
  font-size: 17px; color: var(--ink-2); margin: 0 0 30px; max-width: 600px; line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--border);
  position: relative; flex-wrap: wrap;
}
.hero-stat {}
.hero-stat .num {
  font-family:'Syne', sans-serif; font-size: 26px; font-weight: 700;
  color: var(--ink); display: block; letter-spacing: -0.02em;
}
.hero-stat .lbl {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500;
}

.disclaimer-banner {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-2); border: 1px solid var(--border);
  padding: 9px 14px; border-radius: 9px;
  font-size: 12px; color: var(--ink-3);
}
.disclaimer-banner::before {
  content:'i'; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-4); color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; font-style: italic; font-family: serif;
  flex-shrink: 0;
}

/* ───── Section title ───── */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 20px; gap: 16px;
}
.section-title h2 {
  font-family:'Syne', sans-serif; font-size: 20px; font-weight: 700;
  margin: 0; letter-spacing: -0.02em; color: var(--ink);
}
.section-title .sub { font-size: 13px; color: var(--ink-3); }

/* ───── Category cards ───── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cat-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  cursor: default;
}
.cat-card::before {
  content: attr(data-num);
  position: absolute; right: -8px; bottom: -16px;
  font-family:'Syne', sans-serif; font-size: 88px; font-weight: 800;
  color: rgba(255,255,255,0.03); line-height: 1; pointer-events: none;
  letter-spacing: -0.04em; user-select: none;
}
.cat-card:hover {
  border-color: var(--border-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5), 0 0 0 1px var(--border-blue);
}
.cat-card:hover .cat-card-glow { opacity: 1; }
.cat-card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--blue-dim), transparent 70%);
  pointer-events: none; opacity: 0;
  transition: opacity .2s;
}

/* Final exam card */
.cat-card.final {
  background: linear-gradient(145deg, #0c1529 0%, #111e38 50%, #0c1529 100%);
  border-color: var(--border-blue);
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; justify-content: space-between;
  padding: 28px 32px; gap: 32px;
  box-shadow: 0 0 0 1px var(--border-blue), 0 0 40px rgba(79,142,245,.08);
}
.cat-card.final:hover {
  box-shadow: 0 0 0 1px var(--blue), 0 8px 40px var(--blue-glow);
  transform: translateY(-2px);
}
.cat-card.final .cat-title { color: var(--ink); }
.cat-card.final .cat-meta { color: var(--ink-3); }
.cat-card.final .cat-desc { color: var(--ink-2); }
.cat-card-final-info { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.cat-pill {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--blue); background: var(--blue-dim); border: 1px solid rgba(79,142,245,.2);
  padding: 4px 10px; border-radius: 999px; width: fit-content;
}
.cat-title {
  font-family:'Syne', sans-serif; font-size: 18px; font-weight: 700;
  margin: 0; letter-spacing: -0.02em; color: var(--ink);
}
.cat-desc { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.cat-meta {
  display: flex; gap: 14px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap;
}
.cat-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.cat-card-actions { margin-top: auto; padding-top: 4px; }

/* ───── Test screen ───── */
.test-shell {
  display: grid; grid-template-columns: 1fr 268px; gap: 20px; align-items: start;
}
@media (max-width: 700px) {
  .test-shell { grid-template-columns: 1fr; }
}

.test-header {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; backdrop-filter: blur(10px);
}
.test-header-title {
  font-family:'Syne', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
}
.test-header-ctx { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* Timer */
.timer {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-3); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 10px;
  font-family:'JetBrains Mono', monospace; font-weight: 600; font-size: 18px;
  color: var(--ink); letter-spacing: 0.04em;
  transition: all .3s;
}
.timer.warn {
  background: var(--warn-dim); border-color: var(--warn-glow); color: var(--warn);
}
.timer.danger {
  background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger);
  animation: timer-pulse 1.1s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--danger-glow); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

/* Progress bar */
.progress-bar {
  height: 3px; background: var(--border); border-radius: 4px;
  overflow: hidden; margin-bottom: 18px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-2), var(--blue));
  transition: width .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px var(--blue-glow);
}

/* Question card */
.qcard {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px;
  backdrop-filter: blur(10px);
}
.qmeta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: 18px;
}
.topic-tag {
  font-size: 11px; background: var(--blue-dim); border: 1px solid rgba(79,142,245,.18);
  padding: 4px 10px; border-radius: 999px; color: var(--blue);
  letter-spacing: 0.04em; text-transform: none; font-weight: 500;
}
.qtext {
  font-size: 20px; font-weight: 500; line-height: 1.45;
  color: var(--ink); margin: 0 0 30px; letter-spacing: -0.01em;
}

/* Choices */
.choices { display: flex; flex-direction: column; gap: 9px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass-2); border: 1.5px solid var(--border);
  border-radius: 11px; padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  position: relative; overflow: hidden;
}
.choice::before {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(79,142,245,.04), transparent);
  opacity: 0; transition: opacity .15s;
}
.choice:hover {
  border-color: var(--border-blue); background: var(--blue-dim);
  transform: translateX(3px); box-shadow: 0 0 0 0 transparent;
}
.choice:hover::before { opacity: 1; }
.choice.selected {
  border-color: var(--blue); background: var(--blue-dim);
  box-shadow: 0 0 16px var(--blue-glow2);
}
.choice .letter {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--border-2); background: var(--bg-3);
  display: grid; place-items: center;
  font-family:'Syne', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--ink-3); flex-shrink: 0;
  transition: all .15s;
}
.choice.selected .letter {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 10px var(--blue-glow);
}
.choice .label { font-size: 15px; line-height: 1.4; font-weight: 400; }

/* Test actions */
.test-actions {
  margin-top: 30px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
}
.test-actions-right { display: flex; gap: 8px; }

/* Side panel */
.test-side {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  position: sticky; top: 78px;
  backdrop-filter: blur(10px);
}
.side-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin: 0 0 12px;
}
.qnav-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 14px;
}
@media (max-width: 700px) { .qnav-grid { grid-template-columns: repeat(10, 1fr); } }
.qnav-cell {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px;
  font-size: 11px; font-weight: 600; background: var(--bg-3);
  border: 1px solid var(--border); color: var(--ink-3);
  cursor: pointer; transition: all .12s; user-select: none;
}
.qnav-cell:hover { border-color: var(--border-2); color: var(--ink-2); }
.qnav-cell.answered { background: var(--blue-dim); border-color: rgba(79,142,245,.25); color: var(--blue); }
.qnav-cell.current {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
}
.legend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--ink-3); }
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-sw {
  width: 12px; height: 12px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-3);
}
.legend-sw.answered { background: var(--blue-dim); border-color: rgba(79,142,245,.3); }
.legend-sw.current { background: var(--blue); border-color: var(--blue); }
.side-summary {
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; color: var(--ink-2);
}
.side-summary strong { color: var(--ink); font-weight: 700; }

/* ───── Modal ───── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,8,18,0.7);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-xl); padding: 32px;
  max-width: 440px; width: 100%;
  box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px var(--border);
  animation: modal-up .2s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-up { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 {
  font-family:'Syne', sans-serif; font-size: 19px; font-weight: 700;
  margin: 0 0 10px; letter-spacing: -0.02em; color: var(--ink);
}
.modal p { margin: 0 0 20px; color: var(--ink-2); font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ───── Results ───── */
.results-hero {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px;
  margin-bottom: 22px;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.results-hero::before {
  content:'';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(79,142,245,0.06) 0%, transparent 60%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .results-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .score-ring { justify-self: center; }
}

.score-ring {
  width: 160px; height: 160px;
  display: grid; place-items: center; position: relative;
}
.score-ring .ring-track { stroke: var(--border-2); }
.score-ring .ring-fill {
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1.2s cubic-bezier(.22,1,.36,1);
}
.score-ring .ring-text {
  position: absolute; display: flex; flex-direction: column; align-items: center;
}
.score-ring .pct {
  font-family:'Syne', sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -0.03em;
}
.score-ring .lbl {
  font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

.verdict-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
}
.verdict-badge::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.verdict-badge.pass {
  background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border);
  box-shadow: 0 0 16px var(--success-glow);
}
.verdict-badge.fail {
  background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger-border);
  box-shadow: 0 0 16px var(--danger-glow);
}

.results-title {
  font-family:'Syne', sans-serif; font-size: 26px; font-weight: 800;
  margin: 0 0 8px; letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.results-sub { color: var(--ink-3); font-size: 13px; margin: 0 0 22px; }
.results-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 720px) { .results-stats { grid-template-columns: repeat(2, 1fr); } }
.rstat {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.rstat .lbl {
  font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.rstat .num {
  font-family:'Syne', sans-serif; font-size: 24px; font-weight: 700;
  margin-top: 4px; letter-spacing: -0.02em;
}
.rstat .num.success { color: var(--success); }
.rstat .num.danger { color: var(--danger); }

/* Recommendation */
.recommend {
  background: var(--bg-3); border: 1px solid rgba(245,158,11,.18);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 22px;
  display: flex; gap: 16px;
  box-shadow: 0 0 28px rgba(245,158,11,.04);
}
.recommend.success { border-color: var(--success-border); box-shadow: 0 0 28px var(--success-glow); }
.recommend-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--warn-dim); border: 1px solid rgba(245,158,11,.2);
  display: grid; place-items: center; flex-shrink: 0; color: var(--warn);
}
.recommend.success .recommend-icon {
  background: var(--success-dim); border-color: var(--success-border); color: var(--success);
}
.recommend h4 {
  margin: 0 0 7px; font-family:'Syne', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.recommend p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.recommend ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.recommend ul li { margin-bottom: 4px; }

.results-actions { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }

/* ───── Review ───── */
.review-section-title {
  font-family:'Syne', sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ink); margin: 28px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.review-section-title .count { font-family:'DM Sans', sans-serif; font-size: 12px; color: var(--ink-3); font-weight: 400; }

.rev-item {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 10px;
  transition: border-color .15s;
}
.rev-item.correct { border-left: 3px solid var(--success); }
.rev-item.wrong { border-left: 3px solid var(--danger); }
.rev-item.unanswered { border-left: 3px solid var(--ink-4); }

.rev-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  font-weight: 600; letter-spacing: 0.07em; margin-bottom: 12px;
}
.rev-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.rev-status.correct { background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border); }
.rev-status.wrong { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger-border); }
.rev-status.unanswered { background: var(--bg-3); color: var(--ink-3); border: 1px solid var(--border); }

.rev-q { font-size: 15px; font-weight: 500; margin: 0 0 14px; line-height: 1.4; color: var(--ink); }

.rev-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rev-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  font-size: 13.5px; transition: none;
}
.rev-choice.correct { background: var(--success-dim); border-color: var(--success-border); }
.rev-choice.wrong { background: var(--danger-dim); border-color: var(--danger-border); }
.rev-choice .ltr {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--border-2);
  display: grid; place-items: center;
  font-family:'Syne', sans-serif; font-weight: 700; font-size: 11px; color: var(--ink-3);
  flex-shrink: 0;
}
.rev-choice.correct .ltr { background: var(--success); color: #fff; border-color: var(--success); box-shadow: 0 0 8px var(--success-glow); }
.rev-choice.wrong .ltr { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 0 8px var(--danger-glow); }
.rev-choice .tag {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.rev-choice.correct .tag { color: var(--success); }
.rev-choice.wrong .tag { color: var(--danger); }

.explain {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px; padding: 12px 14px;
  font-size: 13px; color: var(--ink-2); margin-top: 8px;
  line-height: 1.5;
}
.explain strong {
  color: var(--ink-3); display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
}
.explain.correct { border-color: var(--success-border); }
.explain.correct strong { color: var(--success); }
.explain.wrong { border-color: var(--danger-border); }
.explain.wrong strong { color: var(--danger); }

.expand-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 18px; margin: 16px 0;
  background: var(--glass-2); border: 1px dashed var(--border-2);
  border-radius: 11px; cursor: pointer;
  font-family:'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink-2); transition: all .15s;
}
.expand-toggle:hover { border-style: solid; border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }

/* ───── History ───── */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 16px; align-items: center;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; font-size: 13px;
  transition: border-color .15s;
}
.history-item:hover { border-color: var(--border-2); }
.history-item .h-cat { font-weight: 600; color: var(--ink); }
.history-item .h-date { font-size: 12px; color: var(--ink-3); }
.history-item .h-score { font-family:'Syne', sans-serif; font-weight: 700; font-size: 15px; }
.history-item .h-score.pass { color: var(--success); }
.history-item .h-score.fail { color: var(--danger); }
.history-empty {
  padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px;
  background: var(--glass-2); border: 1px dashed var(--border); border-radius: 11px;
}

/* ───── Footer ───── */
.footer {
  padding: 48px 28px 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
}
.footer-brand-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
  display: grid; place-items: center;
  color: white; font-family:'Syne', sans-serif;
  font-weight: 800; font-size: 11px;
}
.footer-brand-name {
  font-family:'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink);
}
.footer-brand-name span { display: block; font-size: 10px; color: var(--ink-4); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
}
.footer-links a {
  font-size: 12.5px; color: var(--ink-3); text-decoration: none; transition: color 0.15s;
}
.footer-links a:hover { color: var(--ink); }
.footer-divider { width: 100%; height: 1px; background: var(--border); }
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-4); text-align: center; line-height: 1.6;
}

/* ───── Responsive ───── */
@media (max-width: 640px) {
  .hero { padding: 36px 24px; }
  .hero h1 { font-size: 28px; }
  .container { padding: 24px 16px 80px; }
  .qcard { padding: 22px 18px; }
  .qtext { font-size: 16px; }
  .results-hero { padding: 24px; }
  .cat-card.final { flex-direction: column; align-items: flex-start; gap: 20px; }
  .history-item { grid-template-columns: 1fr auto; }
  .history-item .h-date, .history-item .mono { display: none; }
}

/* ───── Scroll bar (Webkit) ───── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ───── Selection ───── */
::selection { background: var(--blue-dim); color: var(--ink); }


/* ═══════════════════════════════════════════════════════════
   STUDY GUIDE STYLES
═══════════════════════════════════════════════════════════ */

/* ─── Module card additions ─── */
.cat-card-pillrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-card-actions { display: flex; gap: 8px; }

.studied-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--success); background: var(--success-dim);
  border: 1px solid var(--success-border);
  padding: 3px 9px; border-radius: 999px;
}

/* ─── Module Overview ─── */
.overview-back { margin-bottom: 16px; }

.overview-hero {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px 44px 36px;
  margin-bottom: 22px;
}
.overview-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 90% -20%, color-mix(in oklab, var(--mod-accent), transparent 70%) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at -10% 100%, color-mix(in oklab, var(--mod-accent), transparent 85%) 0%, transparent 60%);
}
.overview-hero::after {
  content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mod-accent-border), transparent);
}
.overview-hero-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; position: relative;
}
.studied-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--success); background: var(--success-dim);
  border: 1px solid var(--success-border);
  padding: 5px 11px; border-radius: 999px;
}
.studied-badge .studied-date {
  font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3); text-transform: none;
}

.overview-title {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.025em; margin: 0 0 14px; line-height: 1.08;
  color: var(--ink); position: relative;
}
.overview-desc {
  font-size: 16px; color: var(--ink-2); margin: 0 0 22px;
  max-width: 760px; line-height: 1.55; position: relative;
}
.overview-meta {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 22px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.overview-meta-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2);
}
.overview-meta-item svg { color: var(--mod-accent); }

.overview-actions {
  display: flex; gap: 10px; flex-wrap: wrap; position: relative;
}

/* Overview info grid */
.overview-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.9fr;
  gap: 14px;
  margin-bottom: 8px;
}
@media (max-width: 920px) { .overview-grid { grid-template-columns: 1fr; } }

.overview-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
}
.overview-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.overview-card-head svg { color: var(--mod-accent); }
.overview-card-head h3 {
  margin: 0; font-family:'Syne', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
}

.overview-topic-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.topic-chip {
  font-size: 12px; padding: 5px 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 999px; color: var(--ink-2);
}

.overview-section-list {
  margin: 0; padding: 0; list-style: none;
  counter-reset: secnum;
}
.overview-section-list li {
  counter-increment: secnum;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.overview-section-list li:last-child { border-bottom: none; }
.overview-section-list li::before {
  content: counter(secnum, decimal-leading-zero)' ';
  font-family:'JetBrains Mono', monospace;
  color: var(--ink-4); margin-right: 8px;
  font-size: 11px;
}
.overview-section-list li a {
  color: var(--ink-2); text-decoration: none; transition: color .12s;
  cursor: pointer;
}
.overview-section-list li a:hover { color: var(--mod-accent); }

.overview-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.overview-stat {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px; padding: 12px;
}
.overview-stat .lbl {
  font-size: 10px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
}
.overview-stat .val {
  font-family:'Syne', sans-serif; font-size: 20px; font-weight: 700;
  margin-top: 4px; color: var(--ink); letter-spacing: -0.02em;
}
.overview-stat .val.good    { color: var(--success); }
.overview-stat .val.bad     { color: var(--danger); }
.overview-stat .val.pending { color: var(--ink-3); font-size: 14px; font-weight: 600; font-family:'DM Sans', sans-serif; padding-top: 4px; }

/* ─── Pre-Test Prompt ─── */
.pretest-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px 44px;
  max-width: 760px; margin: 0 auto;
}
.pretest-head { margin-bottom: 22px; }
.pretest-head h2 {
  font-size: 28px; font-weight: 800; margin: 12px 0 6px;
  letter-spacing: -0.02em;
}
.pretest-sub { color: var(--ink-3); font-size: 13px; margin: 0; }

.pretest-reminder {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}
.reminder-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--warn-dim); border: 1px solid rgba(245,158,11,0.22);
  border-radius: 8px; display: grid; place-items: center; color: var(--warn);
}
.pretest-reminder strong { color: var(--ink); font-weight: 600; font-size: 14px; }
.pretest-reminder .reminder-good {
  font-size: 13px; color: var(--success); margin-top: 6px; font-weight: 500;
}

.pretest-review {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 24px;
}
.pretest-review-head {
  display: flex; align-items: center; gap: 8px;
  font-family:'Syne', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.pretest-review-head svg { color: var(--blue); }
.pretest-review-list {
  margin: 0; padding-left: 18px; color: var(--ink); font-size: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.pretest-review-list li::marker { color: var(--ink-4); }

.pretest-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   STUDY PAGE
═══════════════════════════════════════════════════════════ */
.study-page-shell { flex: 1; }

.study-page-container {
  max-width: 1240px; width: 100%;
  margin: 0 auto;
  padding: 28px 24px 100px;
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 920px) {
  .study-page-container { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
}

/* ─── Sidebar TOC ───
 * Sticky (not fixed) so it scrolls away naturally at the bottom of its grid
 * cell instead of ever overlapping the footer. top:84px clears the sticky
 * header (~64-68px tall) with a small safety margin; the inner card caps its
 * own height and scrolls internally if the module has a lot of sections.
 * Disabled below 920px (stacked mobile layout) per the mobile-usability note
 * in the task -- narrow layouts keep the original static/stacked sidebar. */
.study-toc {
  position: sticky; top: 84px;
  align-self: start;
}
@media (max-width: 920px) {
  .study-toc { position: static; }
}
.study-toc-inner {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  max-height: calc(100vh - 84px - 24px); overflow-y: auto;
  backdrop-filter: blur(8px);
}
.study-toc-back { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.study-toc-back .btn { font-size: 12px; padding: 7px 10px; }

.toc-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 10px;
}
.toc-sub {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-4);
  margin: 14px 0 6px 4px;
}
.toc-nav { display: flex; flex-direction: column; gap: 1px; }
.toc-link {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; padding: 8px 10px;
  color: var(--ink-2); text-decoration: none; border-radius: 7px;
  border-left: 2px solid transparent;
  cursor: pointer; transition: all .12s; line-height: 1.35;
}
.toc-link:hover { background: var(--glass-2); color: var(--ink); }
.toc-link.active {
  background: var(--mod-accent-dim, var(--blue-dim));
  color: var(--mod-accent, var(--blue));
  border-left-color: var(--mod-accent, var(--blue));
  font-weight: 600;
}
.toc-num {
  font-family:'JetBrains Mono', monospace; font-size: 10px;
  color: var(--ink-4); flex-shrink: 0; padding-top: 2px;
}
.toc-link.active .toc-num { color: var(--mod-accent, var(--blue)); }

.toc-footer {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.toc-footer .btn { font-size: 12px; padding: 9px 12px; }

/* ─── Main study content ─── */
.study-main { min-width: 0; }

.study-header { margin-bottom: 28px; }
.study-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.study-time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
}
.study-h1 {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 800;
  letter-spacing: -0.025em; margin: 0 0 14px; line-height: 1.08;
  color: var(--ink);
}
.study-lede {
  font-size: 16px; color: var(--ink-2);
  margin: 0 0 22px; max-width: 760px; line-height: 1.6;
}

.study-toolbar {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.study-search {
  display: flex; align-items: center; gap: 10px;
  flex: 1; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 14px;
  transition: border-color .15s;
}
.study-search:focus-within {
  border-color: var(--mod-accent-border, var(--border-blue));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--mod-accent), transparent 88%);
}
.study-search svg { color: var(--ink-3); flex-shrink: 0; }
.study-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--ink); font-family: inherit; font-size: 14px;
  padding: 11px 0;
}
.study-search input::placeholder { color: var(--ink-3); }
.study-search-clear {
  background: var(--glass-2); border: 1px solid var(--border);
  color: var(--ink-3); border-radius: 6px;
  width: 24px; height: 24px;
  display: grid; place-items: center; cursor: pointer;
}
.study-search-clear:hover { color: var(--ink); border-color: var(--border-2); }

.study-search-empty {
  background: var(--bg-3); border: 1px dashed var(--border-2);
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; color: var(--ink-3); margin-top: 14px;
}
.study-search-empty strong { color: var(--ink); }

.study-mark {
  background: color-mix(in oklab, var(--mod-accent, var(--blue)), transparent 75%);
  color: var(--ink); border-radius: 3px; padding: 0 2px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--mod-accent, var(--blue)), transparent 60%);
}

/* Sections */
.study-section { margin-bottom: 40px; scroll-margin-top: 100px; }

.study-h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.study-h2 svg { color: var(--mod-accent, var(--blue)); flex-shrink: 0; }
.study-h2-num {
  font-family:'JetBrains Mono', monospace; font-size: 13px;
  color: var(--mod-accent, var(--blue));
  background: var(--mod-accent-dim, var(--blue-dim));
  border: 1px solid var(--mod-accent-border, var(--border-blue));
  padding: 4px 9px; border-radius: 6px;
}
.study-section.active .study-h2 { color: var(--mod-accent, var(--blue)); }
.study-section-sub {
  color: var(--ink-3); font-size: 14px; margin: -8px 0 14px;
}
.study-section-body { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.study-section-body strong { color: var(--ink); font-weight: 600; }

.study-subhead {
  font-family:'Syne', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--ink); margin: 22px 0 10px; letter-spacing: -0.01em;
}

.study-p { margin: 0 0 14px; }

.study-bullets {
  margin: 0 0 16px; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.study-bullets li {
  position: relative; padding-left: 22px;
}
.study-bullets li::before {
  content:''; position: absolute;
  left: 6px; top: 10px; width: 6px; height: 6px;
  background: var(--mod-accent, var(--blue));
  border-radius: 50%;
  box-shadow: 0 0 6px color-mix(in oklab, var(--mod-accent, var(--blue)), transparent 50%);
}

/* Inline boxes */
.study-box {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 14px 0;
  border-radius: 11px; border: 1px solid;
  font-size: 14px; line-height: 1.55;
}
.study-box-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 7px; display: grid; place-items: center;
  border: 1px solid; margin-top: 1px;
}
.study-box-body { flex: 1; }
.study-box-body div { color: var(--ink); }
.study-box-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 5px;
}

.study-box.exam-tip {
  background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.22);
}
.study-box.exam-tip .study-box-icon {
  background: var(--warn-dim); border-color: rgba(245,158,11,0.28); color: var(--warn);
}
.study-box.exam-tip .study-box-label { color: var(--warn); }

.study-box.warning {
  background: var(--danger-dim); border-color: var(--danger-border);
}
.study-box.warning .study-box-icon {
  background: rgba(239,68,68,0.18); border-color: var(--danger-border); color: var(--danger);
}
.study-box.warning .study-box-label { color: var(--danger); }

.study-box.field-note {
  background: var(--success-dim); border-color: var(--success-border);
}
.study-box.field-note .study-box-icon {
  background: rgba(34,197,94,0.18); border-color: var(--success-border); color: var(--success);
}
.study-box.field-note .study-box-label { color: var(--success); }

/* Callout (rule-style) */
.study-callout {
  display: flex; gap: 14px; align-items: stretch;
  padding: 16px 18px; margin: 16px 0;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 11px; font-size: 14px; line-height: 1.55;
  color: var(--ink);
}
.study-callout-bar {
  width: 3px; flex-shrink: 0; border-radius: 3px;
  background: var(--mod-accent, var(--blue));
  box-shadow: 0 0 6px color-mix(in oklab, var(--mod-accent, var(--blue)), transparent 50%);
}
.study-callout.tone-rule .study-callout-bar { background: var(--mod-accent, var(--blue)); }

/* Diagram blocks */
.study-diagram-wrap {
  margin: 18px 0;
  padding: 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow-x: auto;
}

/* Tables */
.study-table-wrap {
  overflow-x: auto; margin: 16px 0;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 11px;
}
.study-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.study-table thead th {
  text-align: left; padding: 12px 14px;
  background: var(--glass-2); color: var(--ink-2);
  font-family:'Syne', sans-serif; font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}
.study-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--ink); vertical-align: top;
}
.study-table tbody tr:last-child td { border-bottom: none; }
.study-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.012); }

/* Key terms grid */
.terms-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.term-card {
  background: var(--glass); border: 1px solid var(--border);
  border-left: 3px solid var(--mod-accent, var(--blue));
  border-radius: 9px; padding: 14px 16px;
}
.term-name {
  font-family:'Syne', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--mod-accent, var(--blue));
  letter-spacing: 0.02em; margin-bottom: 4px;
}
.term-def { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.term-def strong { color: var(--ink); }

/* Key numbers grid */
.numbers-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.num-card {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px; padding: 14px 16px;
}
.num-val {
  font-family:'JetBrains Mono', monospace; font-weight: 700;
  font-size: 16px; color: var(--mod-accent, var(--blue));
  letter-spacing: 0.02em; margin-bottom: 4px;
}
.num-lbl { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.num-lbl strong { color: var(--ink); }

/* Boxes stacked */
.boxes-list { display: flex; flex-direction: column; gap: 8px; }

/* Quick review */
.quick-review-section {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px 32px;
}
.quick-review-list {
  margin: 0; padding: 0;
  counter-reset: review;
  display: flex; flex-direction: column; gap: 10px;
  list-style: none;
}
.quick-review-list li {
  counter-increment: review;
  position: relative; padding: 12px 14px 12px 50px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px; font-size: 14px; color: var(--ink);
  line-height: 1.5;
}
.quick-review-list li::before {
  content: counter(review, decimal-leading-zero);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family:'JetBrains Mono', monospace; font-weight: 700;
  font-size: 12px; color: var(--mod-accent, var(--blue));
  background: var(--mod-accent-dim, var(--blue-dim));
  border: 1px solid var(--mod-accent-border, var(--border-blue));
  border-radius: 5px; padding: 3px 6px;
}

/* Bottom finish card */
.study-finish { margin: 32px 0 16px; }
.study-finish-card {
  background: var(--glass); border: 1px solid var(--mod-accent-border, var(--border-blue));
  border-radius: var(--radius-xl); padding: 26px 28px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  box-shadow: 0 0 32px color-mix(in oklab, var(--mod-accent, var(--blue)), transparent 90%);
  flex-wrap: wrap;
}
.study-finish-card h3 {
  font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em;
}
.study-finish-card p { margin: 0; color: var(--ink-3); font-size: 13px; }
.study-finish-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.study-foot-back {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding-top: 20px;
}

/* ═══════════════════════════════════════════════════════════
   RESULTS — REVIEW TOPICS LINK BACK TO STUDY
═══════════════════════════════════════════════════════════ */
.review-topics-card {
  background: var(--bg-3); border: 1px solid var(--border-blue);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 22px;
  box-shadow: 0 0 28px rgba(79,142,245,0.08);
}
.review-topics-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.review-topics-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--blue-dim); border: 1px solid var(--border-blue);
  display: grid; place-items: center; flex-shrink: 0; color: var(--blue);
}
.review-topics-head h4 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.review-topics-head p { margin: 0; color: var(--ink-3); font-size: 13px; }

.review-topics-list { display: flex; flex-direction: column; gap: 8px; }
.review-topic-link {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
  transition: border-color .12s, transform .12s, background .12s;
}
.review-topic-link:hover {
  border-color: var(--border-blue); background: var(--glass-3);
  transform: translateX(3px);
}
.review-topic-bar { width: 3px; border-radius: 2px; flex-shrink: 0; }
.review-topic-text { flex: 1; min-width: 0; }
.review-topic-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px;
}
.review-topic-meta { font-size: 12px; color: var(--ink-3); }
.review-topic-missed { color: var(--danger); font-weight: 600; }
.review-topic-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--blue);
  align-self: center; padding: 6px 10px; border-radius: 7px;
  background: var(--blue-dim); border: 1px solid var(--border-blue);
  flex-shrink: 0;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .overview-hero { padding: 28px 22px; }
  .overview-title { font-size: 24px; }
  .pretest-card { padding: 26px 22px; }
  .study-page-container { padding: 16px 14px 80px; }
  .study-h1 { font-size: 24px; }
  .study-h2 { font-size: 18px; }
  .quick-review-section { padding: 22px 20px; }
  .quick-review-list li { padding: 12px 12px 12px 46px; font-size: 13.5px; }
  .study-finish-card { padding: 22px; flex-direction: column; align-items: flex-start; }
  /* Infographic mobile polish */
  .section-visuals { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .section-visuals svg { min-width: 280px; }
  .section-visuals table { font-size: 12px !important; }
  .study-table thead th { font-size: 10px !important; padding: 8px 10px !important; }
  .study-table tbody td { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ───── Light Mode ───── */
[data-theme="light"] {
  --bg:        #f0f4ff;
  --bg-2:      #e4eaf8;
  --bg-3:      #d8e2f5;
  --glass:     rgba(255,255,255,0.80);
  --glass-2:   rgba(0,0,0,0.04);
  --glass-3:   rgba(0,0,0,0.06);
  --border:    rgba(0,0,0,0.14);
  --border-2:  rgba(0,0,0,0.20);
  --border-blue: rgba(37,99,235,0.55);

  /* ink-3/ink-4 were too pale for real text (contrast ~3.9:1 and ~2:1 against
     the light background) -- darkened so muted text, labels, footer links,
     and breadcrumbs meet at least WCAG AA (4.5:1) in light mode. Dark mode's
     :root values above are untouched. */
  --ink:   #0f1c35;
  --ink-2: #2d4a7a;
  --ink-3: #3d5a82;
  --ink-4: #55719c;

  --blue:       oklch(50% 0.21 252);
  --blue-2:     oklch(42% 0.21 252);
  --blue-dim:   rgba(37,99,235,.10);
  --blue-glow:  rgba(37,99,235,.20);
  --blue-glow2: rgba(37,99,235,.06);

  --success:       oklch(48% 0.18 145);
  --success-dim:   rgba(22,163,74,.10);
  --success-glow:  rgba(22,163,74,.18);
  --success-border:rgba(22,163,74,.30);

  --danger:       oklch(50% 0.21 24);
  --danger-dim:   rgba(220,38,38,.09);
  --danger-glow:  rgba(220,38,38,.18);
  --danger-border:rgba(220,38,38,.28);

  --warn:       oklch(55% 0.17 68);
  --warn-dim:   rgba(217,119,6,.09);
  --warn-glow:  rgba(217,119,6,.18);
}

[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}

[data-theme="light"] body::before {
  background-image: radial-gradient(circle, rgba(37,99,235,.08) 1px, transparent 1px);
}

/* Light mode card/glass adjustments */
[data-theme="light"] .topbar {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .card,
[data-theme="light"] .module-card,
[data-theme="light"] .question-card,
[data-theme="light"] .results-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .review-item,
[data-theme="light"] .study-sidebar,
[data-theme="light"] .study-body,
[data-theme="light"] .overview-card,
[data-theme="light"] .history-table,
[data-theme="light"] .modal,
[data-theme="light"] .study-toc-inner {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.16);
}
[data-theme="light"] .choice-btn {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.16);
  color: var(--ink);
}
/* Outline/ghost buttons rely on the border alone for affordance -- the
   default light-mode border tokens were too faint (~2:1 contrast) to read
   as a button edge, so give these two variants a slightly stronger border
   in light mode specifically. */
[data-theme="light"] .btn-outline {
  border-color: rgba(37,99,235,0.55);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(0,0,0,0.18);
}
/* Pricing card "Special Offer Ends In" countdown badge -- the amber text
   (label + timer together) reads fine in dark mode, but in light mode the
   whole banner should read as red (urgency color, matching the timer's own
   style) per explicit request -- not just the digits. .offer-badge carries
   no inline color itself (see app.jsx), so this class-based color applies
   to the label and the timer alike. */
.offer-badge {
  color: #facc15;
}
[data-theme="light"] .offer-badge {
  color: var(--danger);
}
[data-theme="light"] .choice-btn:hover {
  background: rgba(37,99,235,.07);
  border-color: var(--blue);
}
[data-theme="light"] .choice-btn.selected {
  background: rgba(37,99,235,.12);
}
[data-theme="light"] .nav-cell {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
  color: var(--ink-2);
}
[data-theme="light"] .nav-cell.answered {
  background: rgba(37,99,235,.14);
}
[data-theme="light"] .brand-mark {
  background: var(--blue);
}
[data-theme="light"] .modal-backdrop {
  background: rgba(0,0,0,0.35);
}

/* Theme toggle button */
.theme-toggle {
  background: var(--glass-3);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: all 0.2s;
  white-space: nowrap;
}
.theme-toggle:hover {
  background: var(--blue-dim);
  border-color: var(--border-blue);
  color: var(--ink);
}

/* Light mode — Final Exam card */
[data-theme="light"] .final-exam-card,
[data-theme="light"] [class*="final"] {
  background: #1e3a6e !important;
  color: #dce8ff !important;
}
[data-theme="light"] .final-exam-card *,
[data-theme="light"] [class*="final"] * {
  color: #dce8ff !important;
}

/* ─── Missed-correct (unanswered question correct answer indicator) ─── */
.rev-choice.missed-correct {
  border-color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.08);
}
.rev-choice.missed-correct .tag {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.3);
}
[data-theme="light"] .rev-choice.missed-correct {
  border-color: rgba(180,117,23,0.4);
  background: rgba(180,117,23,0.07);
}
[data-theme="light"] .rev-choice.missed-correct .tag {
  color: #854f0b;
}

/* ═══════════════════════════════════════════
   AUTH + PAYWALL MODALS
═══════════════════════════════════════════ */

.nys-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: overlayIn 0.15s ease;
}
@keyframes overlayIn { from { opacity:0 } to { opacity:1 } }

.nys-auth-card, .nys-paywall-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 36px 32px;
  width: 100%; max-width: 420px;
  animation: cardIn 0.18s ease;
}
@keyframes cardIn { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }

.nys-paywall-card { max-width: 460px; }

.nys-modal-x {
  position: absolute; top: 12px; right: 12px;
  background: var(--bg-3); border: 1px solid var(--border); cursor: pointer;
  font-size: 16px; color: var(--ink-2); padding: 6px 10px;
  line-height: 1; border-radius: 8px;
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background 0.15s;
}
.nys-modal-x:hover { background: var(--bg-4, #21262d); color: var(--ink); }
.nys-modal-x:hover { background: var(--bg-3); color: var(--ink); }

.nys-auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg-3); border-radius: 10px; padding: 4px;
  margin-bottom: 20px;
}
.nys-auth-tabs button {
  flex: 1; border: none; cursor: pointer;
  padding: 8px 12px; border-radius: 7px;
  font-size: 14px; font-weight: 500;
  background: transparent; color: var(--ink-3);
  transition: all 0.15s;
}
.nys-auth-tabs button.active {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.nys-auth-input {
  width: 100%; padding: 11px 14px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: 9px; color: var(--ink); font-size: 14px;
  outline: none; box-sizing: border-box;
  transition: border-color 0.15s;
}
.nys-auth-input:focus { border-color: var(--blue); }

.nys-auth-error {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px; color: #f87171; line-height: 1.5;
}

.nys-paywall-features { margin: 0 0 8px; }

/* Light mode overrides */
[data-theme="light"] .nys-auth-card,
[data-theme="light"] .nys-paywall-card {
  background: #ffffff; border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
[data-theme="light"] .nys-auth-tabs { background: #f3f4f6; }
[data-theme="light"] .nys-auth-tabs button.active { background: #ffffff; }
[data-theme="light"] .nys-auth-input { background: #f9fafb; border-color: rgba(0,0,0,0.15); color: #111; }
[data-theme="light"] .nys-auth-input:focus { border-color: #378ADD; }

/* ───── Auth / Payw

  .brand-name span { display: none; }           /* hide subtitle line */
  .font-size-ctrl { display: none; }            /* hide A+/A- on mobile */
  .topbar-right { gap: 6px; }
  .topbar-right .btn-ghost,
  .topbar-right .btn-outline { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }               /* show only logo mark */
  .topbar-right a[href="blog.html"] { display: none; } /* hide Articles link */
  .theme-toggle { padding: 6px 8px; font-size: 12px; }
}

/* ── Container ── */
@media (max-width: 768px) {
  .container { padding: 20px 14px 80px; }
}

/* ── Hero (home screen) ── */
@media (max-width: 768px) {
  .hero { padding: 32px 22px 28px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(24px, 7vw, 36px); margin-bottom: 12px; }
  .hero p { font-size: 15px; margin-bottom: 20px; }
  .hero-cta { gap: 8px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; margin-top: 28px; padding-top: 20px; }
  .hero-stat .num { font-size: 20px; }
}
@media (max-width: 480px) {
  .hero { padding: 24px 16px 22px; }
  .disclaimer-banner { font-size: 11px; }
}

/* ── Module cards grid ── */
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 18px 16px; }
  .cat-card.final { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 16px; }
  .cat-title { font-size: 16px; }
  .cat-desc { font-size: 13px; }
  .cat-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .cat-card-actions .btn { flex: 1; justify-content: center; min-width: 0; }
}

/* ── Section title ── */
@media (max-width: 480px) {
  .section-title { flex-direction: column; gap: 4px; margin-bottom: 14px; }
  .section-title h2 { font-size: 17px; }
}

/* ── Test / Quiz screen ── */
@media (max-width: 768px) {
  .test-shell { grid-template-columns: 1fr; gap: 14px; }
  .test-side { position: static; order: -1; padding: 14px; }
  .test-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .test-header-title { font-size: 14px; }
  .timer { font-size: 15px; padding: 7px 12px; }
  .qcard { padding: 20px 16px; }
  .qtext { font-size: 16px; margin-bottom: 20px; }
  .qmeta { flex-wrap: wrap; gap: 6px; }
  .choice { padding: 12px 13px; gap: 10px; }
  .choice .label { font-size: 14px; }
  .choice .letter { width: 26px; height: 26px; font-size: 11px; }
  .test-actions { flex-direction: column; gap: 10px; }
  .test-actions-right { display: flex; gap: 8px; width: 100%; }
  .test-actions-right .btn { flex: 1; justify-content: center; }
  .test-actions > .btn { width: 100%; justify-content: center; }
  .qnav-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; }
}
@media (max-width: 480px) {
  .qcard { padding: 16px 13px; }
  .qtext { font-size: 15px; }
  .choice { padding: 10px 11px; }
  .choice .label { font-size: 13px; }
}

/* ── Results screen ── */
@media (max-width: 768px) {
  .results-hero { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .score-ring { justify-self: center; width: 130px; height: 130px; }
  .score-ring .pct { font-size: 28px; }
  .results-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .results-title { font-size: 20px; }
  .results-actions { flex-direction: column; }
  .results-actions .btn { width: 100%; justify-content: center; }
  .recommend { flex-direction: column; gap: 10px; }
}

/* ── Review items ── */
@media (max-width: 768px) {
  .rev-item { padding: 16px 14px; }
  .rev-head { flex-wrap: wrap; gap: 6px; }
  .rev-q { font-size: 14px; }
  .rev-choice { font-size: 13px; padding: 7px 10px; }
  .history-item { grid-template-columns: 1fr auto; gap: 8px; }
  .history-item .h-date,
  .history-item .mono { display: none; }
}

/* ── Study overview ── */
@media (max-width: 768px) {
  .overview-hero { padding: 26px 18px 22px; }
  .overview-title { font-size: clamp(22px, 6vw, 32px); }
  .overview-desc { font-size: 14px; }
  .overview-actions .btn { flex: 1; justify-content: center; }
  .overview-grid { grid-template-columns: 1fr; }
}

/* ── Study page ── */
@media (max-width: 768px) {
  .study-page-container { grid-template-columns: 1fr; gap: 14px; padding: 14px 14px 80px; }
  .study-toc { position: static; }
  .study-toc-inner { max-height: 280px; }
  .study-h1 { font-size: clamp(22px, 6vw, 32px); }
  .study-lede { font-size: 14px; }
}

/* ── Modals ── */
@media (max-width: 480px) {
  .modal { padding: 22px 18px; }
  .modal h3 { font-size: 17px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }
}

/* ── Pricing / paywall ── */
@media (max-width: 480px) {
  .nys-paywall-card { padding: 24px 18px; }
}

/* ── Footer ── */
@media (max-width: 480px) {
  .footer { padding: 32px 16px 24px; }
  .footer-links { gap: 6px 14px; }
  .footer-links a { font-size: 11.5px; }
}

/* ── General touch improvements ── */
@media (max-width: 768px) {
  .btn { min-height: 44px; }               /* iOS tap target minimum */
  .choice { min-height: 48px; }
  .btn-lg { padding: 13px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE STYLES
   ≤768px tablet  |  ≤480px phone
═══════════════════════════════════════════════════════════ */

/* ── Topbar ── */
@media (max-width: 768px) {
  .topbar { padding: 10px 16px; gap: 8px; }
  .brand-name span { display: none; }
  .font-size-ctrl { display: none; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn-ghost,
  .topbar-right .btn-outline { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .theme-toggle { padding: 6px 8px; font-size: 12px; }
}

/* ── Container ── */
@media (max-width: 768px) {
  .container { padding: 20px 14px 80px; }
}

/* ── Hero ── */
@media (max-width: 768px) {
  .hero { padding: 32px 22px 28px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(24px, 7vw, 36px); margin-bottom: 12px; }
  .hero p { font-size: 15px; margin-bottom: 20px; }
  .hero-cta { gap: 8px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; margin-top: 28px; padding-top: 20px; }
  .hero-stat .num { font-size: 20px; }
  .disclaimer-banner { font-size: 11px; }
}
@media (max-width: 480px) {
  .hero { padding: 24px 16px 22px; }
}

/* ── Module cards ── */
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 18px 16px; }
  .cat-card.final { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 16px; }
  .cat-title { font-size: 16px; }
  .cat-desc { font-size: 13px; }
  .cat-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .cat-card-actions .btn { flex: 1; justify-content: center; min-width: 0; }
}
@media (max-width: 480px) {
  .section-title { flex-direction: column; gap: 4px; margin-bottom: 14px; }
  .section-title h2 { font-size: 17px; }
}

/* ── Quiz / Test screen ── */
@media (max-width: 768px) {
  .test-shell { grid-template-columns: 1fr; gap: 14px; }
  .test-side { position: static; order: -1; padding: 14px; }
  .test-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .test-header-title { font-size: 14px; }
  .timer { font-size: 15px; padding: 7px 12px; }
  .qcard { padding: 20px 16px; }
  .qtext { font-size: 16px; margin-bottom: 20px; }
  .qmeta { flex-wrap: wrap; gap: 6px; }
  .choice { padding: 12px 13px; gap: 10px; }
  .choice .label { font-size: 14px; }
  .choice .letter { width: 26px; height: 26px; font-size: 11px; }
  .test-actions { flex-direction: column; gap: 10px; }
  .test-actions-right { display: flex; gap: 8px; width: 100%; }
  .test-actions-right .btn { flex: 1; justify-content: center; }
  .test-actions > .btn { width: 100%; justify-content: center; }
  .qnav-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; }
}
@media (max-width: 480px) {
  .qcard { padding: 16px 13px; }
  .qtext { font-size: 15px; }
  .choice { padding: 10px 11px; }
  .choice .label { font-size: 13px; }
}

/* ── Results ── */
@media (max-width: 768px) {
  .results-hero { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .score-ring { justify-self: center; width: 130px; height: 130px; }
  .score-ring .pct { font-size: 28px; }
  .results-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .results-title { font-size: 20px; }
  .results-actions { flex-direction: column; }
  .results-actions .btn { width: 100%; justify-content: center; }
  .recommend { flex-direction: column; gap: 10px; }
}

/* ── Review ── */
@media (max-width: 768px) {
  .rev-item { padding: 16px 14px; }
  .rev-head { flex-wrap: wrap; gap: 6px; }
  .rev-q { font-size: 14px; }
  .rev-choice { font-size: 13px; padding: 7px 10px; }
  .history-item { grid-template-columns: 1fr auto; gap: 8px; }
  .history-item .h-date,
  .history-item .mono { display: none; }
}

/* ── Study overview ── */
@media (max-width: 768px) {
  .overview-hero { padding: 26px 18px 22px; }
  .overview-title { font-size: clamp(22px, 6vw, 32px); }
  .overview-desc { font-size: 14px; }
  .overview-actions { flex-wrap: wrap; }
  .overview-actions .btn { flex: 1; justify-content: center; min-width: 140px; }
  .overview-grid { grid-template-columns: 1fr; }
}

/* ── Study page ── */
@media (max-width: 768px) {
  .study-page-container { grid-template-columns: 1fr; gap: 14px; padding: 14px 14px 80px; }
  .study-toc { position: static; }
  .study-toc-inner { max-height: 260px; }
  .study-h1 { font-size: clamp(22px, 6vw, 32px); }
  .study-lede { font-size: 14px; }
}

/* ── Modals ── */
@media (max-width: 480px) {
  .modal { padding: 22px 18px; }
  .modal h3 { font-size: 17px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }
}

/* ── Touch targets ── */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .choice { min-height: 48px; }
  .footer { padding: 32px 16px 24px; }
  .footer-links a { font-size: 11.5px; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE STYLES — hamburger nav + layout fixes
═══════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow globally.
 * IMPORTANT: only `body` sets overflow-x here, never `html`. When both html
 * and body declare overflow-x:hidden, each becomes its own independent
 * scroll container (overflow-y computes to `auto` on both, per spec, since
 * neither axis is left at `visible`) instead of body's overflow propagating
 * to the viewport as normal. That split scroll context is what made the
 * study page's `position: sticky` sidebar stop sticking on scroll. */
body { overflow-x: hidden; }
* { min-width: 0; }
img { max-width: 100%; }

/* ── Desktop nav / Mobile nav toggle ── */
.desktop-nav { display: flex; align-items: center; gap: 10px; }
.mobile-nav  { display: none; align-items: center; gap: 8px; }

/* ── Hamburger button ── */
.hamburger {
  background: transparent; border: 1px solid var(--border);
  color: var(--ink); border-radius: 8px;
  padding: 8px 11px; font-size: 18px; line-height: 1;
  cursor: pointer; transition: background .15s;
}
.hamburger:hover { background: var(--bg-3); }

/* ── Mobile dropdown ── */
.mob-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 8px 0; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mob-item {
  background: none; border: none; color: var(--ink-2);
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500;
  padding: 13px 20px; text-align: left; cursor: pointer;
  text-decoration: none; display: block;
  transition: background .12s, color .12s;
  min-height: 48px;
}
.mob-item:hover { background: var(--bg-3); color: var(--ink); }
.mob-item.highlight { color: var(--blue); font-weight: 600; }
.mob-item.danger { color: var(--danger); }
.mob-email {
  font-size: 12px; color: var(--ink-4); padding: 6px 20px 10px;
  border-top: 1px solid var(--border); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 6px; letter-spacing: 0.04em;
}
.mob-badge.admin { color: #fff; background: linear-gradient(135deg,#7c3aed,#4f8ef5); }
.mob-badge.pro   { color: var(--success); background: var(--success-dim); border: 1px solid var(--success-border); }

/* ── Desktop account menu (Hello, [name] ▾) -- houses Articles + Sign Out
     so the main header row doesn't have to show them directly ── */
.account-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  z-index: 210;
}
.account-menu-item {
  background: none; border: none; color: var(--ink-2);
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500;
  padding: 9px 12px; text-align: left; cursor: pointer;
  text-decoration: none; display: block; border-radius: 7px;
  transition: background .12s, color .12s;
}
.account-menu-item:hover { background: var(--bg-3); color: var(--ink); }
.account-menu-item.danger { color: var(--danger); }

/* ── Topbar must be relative for dropdown ── */
.topbar { position: sticky; top: 0; z-index: 90; }

/* ── Container — no overflow ── */
.container { overflow-x: hidden; }

@media (max-width: 768px) {
  /* Topbar */
  .topbar { padding: 10px 14px; position: sticky; }
  .desktop-nav { display: none !important; }
  .mobile-nav  { display: flex; }
  .brand-name span { display: none; }

  /* Container */
  .container { padding: 18px 14px 80px; }

  /* Hero */
  .hero { padding: 28px 18px 24px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(22px, 6.5vw, 34px); margin-bottom: 10px; }
  .hero p { font-size: 14px; margin-bottom: 18px; }
  .hero-cta { flex-direction: column; gap: 8px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 16px; margin-top: 20px; padding-top: 16px; flex-wrap: wrap; }
  .hero-stat .num { font-size: 19px; }
  .hero-stat .lbl { font-size: 10px; }
  .disclaimer-banner { font-size: 11px; }

  /* Section title */
  .section-title { flex-direction: column; gap: 3px; margin-bottom: 12px; }
  .section-title h2 { font-size: 17px; }

  /* Module cards */
  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 16px 14px; }
  .cat-card::before { font-size: 60px; }
  .cat-card.final { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 14px; }
  .cat-title { font-size: 16px; }
  .cat-desc { font-size: 13px; }
  .cat-card-actions { display: flex; gap: 8px; }
  .cat-card-actions .btn { flex: 1; justify-content: center; font-size: 13px; }

  /* Quiz screen */
  .test-shell { grid-template-columns: 1fr; gap: 12px; }
  .test-side { position: static; order: -1; padding: 12px; }
  .test-header { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  .test-header-title { font-size: 13px; }
  .timer { font-size: 14px; padding: 6px 10px; }
  .qcard { padding: 18px 14px; }
  .qtext { font-size: 15px; margin-bottom: 18px; }
  .qmeta { flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
  .choices { gap: 7px; }
  .choice { padding: 11px 12px; gap: 10px; min-height: 48px; }
  .choice .label { font-size: 14px; line-height: 1.35; }
  .choice .letter { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; flex-shrink: 0; }
  .test-actions { flex-direction: column; gap: 8px; margin-top: 18px; }
  .test-actions-right { display: flex; gap: 8px; width: 100%; }
  .test-actions-right .btn { flex: 1; justify-content: center; }
  .test-actions > .btn:not(.test-actions-right .btn) { width: 100%; justify-content: center; }
  .qnav-grid { grid-template-columns: repeat(10, 1fr); gap: 3px; }
  .progress-bar { margin-bottom: 12px; }

  /* Results */
  .results-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; }
  .score-ring { justify-self: center; width: 120px; height: 120px; }
  .score-ring svg { width: 100%; height: 100%; }
  .results-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .results-title { font-size: 19px; }
  .results-actions { flex-direction: column; gap: 8px; }
  .results-actions .btn { width: 100%; justify-content: center; }
  .recommend { flex-direction: column; gap: 10px; }

  /* Review */
  .rev-item { padding: 14px 12px; }
  .rev-head { flex-wrap: wrap; gap: 4px; }
  .rev-q { font-size: 14px; }
  .rev-choice { font-size: 13px; padding: 7px 10px; }
  .history-item { grid-template-columns: 1fr auto; gap: 8px; }
  .history-item .h-date,
  .history-item .mono { display: none; }

  /* Study overview */
  .overview-hero { padding: 22px 16px 18px; }
  .overview-title { font-size: clamp(20px, 5.5vw, 30px); }
  .overview-desc { font-size: 14px; }
  .overview-meta { gap: 14px; }
  .overview-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .overview-actions .btn { width: 100%; flex: none; justify-content: center; min-width: 0; text-align: center; }
  .overview-actions .btn-lg {
    font-size: 0.92rem;
    padding: 12px 14px;
    gap: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .overview-actions .btn-lg svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }
  .overview-grid { grid-template-columns: 1fr; }

  /* Study page */
  .study-page-container { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 80px; }
  .study-toc { position: static; }
  .study-toc-inner { max-height: 240px; }
  .study-h1 { font-size: clamp(20px, 5.5vw, 30px); }
  .study-lede { font-size: 14px; }

  /* Modals */
  .modal { padding: 20px 16px; margin: 16px; max-width: calc(100vw - 32px); }
  .modal h3 { font-size: 17px; }
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions .btn { width: 100%; justify-content: center; }

  /* General touch targets */
  .btn { min-height: 44px; }
  .footer { padding: 28px 14px 20px; }
  .footer-links { gap: 5px 14px; }
  .footer-links a { font-size: 11.5px; }
}

@media (max-width: 380px) {
  .container { padding: 14px 10px 80px; }
  .hero { padding: 22px 12px 20px; }
  .qcard { padding: 14px 10px; }
  .cat-card { padding: 14px 12px; }
}


/* ══════════════════════════════════════════
   HOME PAGE — RESPONSIVE SECTION CLASSES
══════════════════════════════════════════ */

/* Base section styles */
.home-hero-section  { padding: 72px 0 56px; }
.home-section       { padding: 60px 0; }
.section-alt        { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* 4-col grid — auto-wraps to 1 col on mobile */
.home-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Pricing card */
.pricing-card { padding: 36px 32px; }

/* ── Mobile overrides ── */
@media (max-width: 768px) {
  .home-hero-section  { padding: 44px 0 32px; }
  .home-section       { padding: 36px 0; }
  .home-4col-grid     { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pricing-card       { padding: 28px 18px; }
}
@media (max-width: 480px) {
  .home-hero-section  { padding: 32px 0 24px; }
  .home-section       { padding: 28px 0; }
  .home-4col-grid     { grid-template-columns: 1fr; gap: 10px; }
  .pricing-card       { padding: 24px 14px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE SAFETY — added 2026-06-24
   Fixes: body overflow, modal trapping, SVG overflow,
   infographic scrollability on mobile
═══════════════════════════════════════════════════════ */

/* Prevent body from ever scrolling horizontally.
 * Only `body` -- see the matching comment above the other overflow-x rule
 * for why `html` must not also declare a non-visible overflow-x here. */
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Modal overlay: allow scroll if card taller than screen ── */
.nys-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.nys-auth-card,
.nys-paywall-card {
  margin: auto;           /* center when overlay is flex-start */
  flex-shrink: 0;         /* never squish card height */
}

/* ── Horizontal-scrollable diagram wrapper ── */
.svg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.svg-scroll > svg {
  display: block;
}

/* ── Infographic SVGs: prevent overflow:hidden clipping content ── */
.section-visuals svg,
.visual-box svg {
  overflow: visible;
}

/* ── Mobile: compact home sections ── */
@media (max-width: 640px) {
  .home-hero-section { padding: 28px 0 20px !important; }

  /* Reduce large top spacing in section headers on mobile */
  .home-section > .container > div:first-child[style*="marginBottom:40"],
  .home-section > .container > div:first-child[style*="marginBottom: 40"] {
    margin-bottom: 20px !important;
  }

  /* Section-visuals: ensure infographic cards don't create wide scroll on full body */
  .section-visuals {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Quick-reference and key-numbers grids */
  .key-numbers-grid  { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)) !important; }
  .key-terms-list    { column-count: 1 !important; }

  /* Auth/paywall modals: full width on small screens */
  .nys-auth-card,
  .nys-paywall-card  { max-width: calc(100vw - 24px) !important; }

  /* BackToTop: respect iOS home indicator */
  .nys-back-top {
    bottom: max(76px, calc(60px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

@media (max-width: 480px) {
  /* home-4col-grid: force 1 col if still somehow at 2 */
  .home-4col-grid { grid-template-columns: 1fr !important; }

  /* Paywall features: single col with smaller text */
  .nys-paywall-features > div { padding: 6px 0 !important; }
  .nys-paywall-features span  { font-size: 13px !important; }

  /* Reduce paywall card emoji padding */
  .nys-paywall-card > div[style*="fontSize:44"] { margin-bottom: 8px !important; }
  .nys-paywall-card h2 { font-size: 19px !important; }

  /* Study page: reduce section header padding */
  .study-section { padding: 20px 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT PASS 2 — 2026-06-24
   True responsive layouts: not overflow hacks, real mobile design
═══════════════════════════════════════════════════════════════ */

/* ── Desktop/Mobile visibility toggle ── */
/* Default: show desktop version, hide mobile-only content */
.d-none-mobile { display: block; }
.d-only-mobile { display: none !important; }

/* ── @640px: all phones and small tablets ── */
@media (max-width: 640px) {

  /* 1. Reduce container side padding so content gets more room */
  .container {
    padding-left:  14px !important;
    padding-right: 14px !important;
  }

  /* 2. Toggle: hide desktop diagrams, show mobile HTML alternatives */
  .d-none-mobile { display: none !important; }
  .d-only-mobile { display: flex !important; flex-direction: column; gap: 8px; }

  /* 3. Stack ALL 2-column grids inside study visual containers */
  .section-visuals [style*="1fr 1fr"],
  .visual-box      [style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 4. Circuit diagram: remove grey-divider bg when stacked */
  .circuit-responsive-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    background: transparent !important;
  }

  /* 5. Paywall card: compact padding on small screens */
  .nys-paywall-card {
    padding: 20px 14px !important;
    border-radius: 12px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
  }
  .nys-auth-card {
    padding: 22px 14px !important;
    border-radius: 12px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
  }

  /* 6. Modal close button: always fixed at top-right of card */
  .nys-modal-x {
    position: sticky !important;
    top: 0 !important;
    float: right !important;
    margin-bottom: -36px !important;
    z-index: 20 !important;
  }

  /* 7. Study section headers: tighter on mobile */
  .study-section-header { padding: 16px 0 8px !important; }

  /* 8. Section-visuals: never cause body overflow */
  .section-visuals {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .section-visuals > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 9. Visual-box: full width, no min-width */
  .visual-box {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 10. Prevent any single element causing overflow */
  .visual-box img,
  .visual-box svg,
  .visual-box table {
    max-width: 100% !important;
  }
}

/* ── @480px: narrow phones ── */
@media (max-width: 480px) {
  .container {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }

  /* Feature card grid: force 1 column (belt + suspenders) */
  .home-4col-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* All study 3-col grids: auto-fit min 100px */
  .section-visuals [style*="1fr 1fr 1fr"],
  .visual-box      [style*="1fr 1fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
}


/* ── VisualBox: prevent overflow clipping, allow horizontal scroll on SVGs ── */
.visual-box {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.visual-box-body {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.visual-box-body > * {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .visual-box { margin: 10px 0 4px !important; }
  .visual-box-body { padding: 10px 12px !important; }

  /* All inline grids inside visual-box-body → stack on mobile */
  .visual-box-body [style*="1fr 1fr"],
  .visual-box-body [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* But keep 2-col for very simple content at >= 360px */
  .visual-box-body [style*="repeat(2"],
  .visual-box-body [style*="repeat(auto"] {
    /* Let auto-fit handle itself */
    max-width: 100% !important;
  }
}

/* ── Module 3 "Dual-Technology AND Gate" infographic: mobile horizontal scroll ──
   Root cause of the original bug: the PIR / AND-gate / Microwave row mixes
   shrinkable flex items (PIR + Microwave, flex:1 1 130px) with a
   fixed-width AND-gate box (flex:0 0 52px). On narrow phone screens this
   row's rendered width can exceed the visible card width, and since
   .visual-box-body scrolls horizontally, the AND-gate box ends up scrolled
   out of view instead of forced onto its own line.
   V1 fix (reverted) stacked the row to a single column on mobile — broke
   the diagram's unified-composition meaning.
   V2 fix (reverted) scaled the whole diagram down proportionally via CSS
   transform at a 380px design width — too narrow, made the diagram look
   cramped/portrait and visually cut.
   V3 kept the diagram at a fixed desktop-like width (760px) inside a
   dedicated horizontal-scroll wrapper, but the width override was missing
   !important so it silently lost to the component's inline
   style={{width:'100%'}} (v4 fixed that).
   V5 (this version) fixes a second, deeper bug found by live-measuring the
   deployed page at a real 383px mobile viewport: a PRE-EXISTING, unrelated
   global mobile rule ".section-visuals svg { min-width: 280px; }" (meant to
   keep OTHER, larger Study diagrams legible on mobile) was also clamping
   this AND-gate icon's SVG -- which is only meant to be 52px wide -- up to
   280px. Since the SVG's height follows its fixed 52:80 viewBox aspect
   ratio, that inflated it to ~430px tall, which then stretched the entire
   row to match via align-items:stretch -- producing the "AND gate huge /
   whole diagram enormous, can't see it" symptom. Fixing that alone dropped
   the measured row height from 484px to 269px. This version also trims
   the fixed design width from 760px down to 520px (still comfortably above
   the ~328px natural min-content width, so no wrapping risk) so less
   horizontal scrolling is needed to see the whole diagram.
   The wrapper only enables its own overflow-x:auto; it never grows past
   100% of its parent, so it cannot cause page-level horizontal overflow.
   Scoped to this one infographic only via
   .dualtech-and-gate-scroll-wrap / .dualtech-and-gate-visual; no other
   visual, and no global .visual-box or .section-visuals rule, is touched. */
@media (max-width: 640px) {
  .dualtech-and-gate-scroll-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dualtech-and-gate-scroll-wrap > .dualtech-and-gate-visual {
    /* !important required: the React component sets an inline
       style={{width:'100%'}} on this element for desktop, and inline
       styles always beat external stylesheet rules regardless of
       selector specificity unless !important is used. Without it, this
       rule silently loses and the diagram stays squeezed to the mobile
       container width instead of the fixed desktop-like design width. */
    width: 520px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
  /* Undo the pre-existing global ".section-visuals svg { min-width:280px }"
     rule for this ONE icon-sized SVG only (the AND-gate glyph, the 2nd
     child of the PIR/AND/Microwave row). That global rule is untouched and
     still applies to every other Study SVG, including the PIR and
     Microwave SVGs in this same component. */
  .dualtech-and-gate-scroll-wrap .dualtech-and-gate-visual > div:first-child > div:nth-child(2) svg {
    min-width: 0 !important;
  }
}

/* ── Transformer diagram: desktop/mobile split ─────────────────────────────
   .transformer-desktop = original 3-col SVG layout (hidden on mobile)
   .transformer-mobile  = stacked pure-HTML cards   (hidden on desktop)
   Uses !important to override any inline display style from React.       */
.transformer-mobile { display: none !important; }
.transformer-desktop { display: block; }

@media (max-width: 640px) {
  .transformer-desktop { display: none !important; }
  .transformer-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .transformer-mobile > * {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}