/* Prep Retention visual identity, v2 (2026-10-09).
   Type: Source Serif 4 (headings, wordmark), Source Sans 3 (body), IBM Plex Mono (labels, citations). All self-hosted, OFL.
   Palette: warm paper, deep harbor navy, cranberry accent. Contrast ratios (WCAG formula, 0.04045 threshold):
   ink #13233A on paper #F6F3EC 14.26:1; muted #4B5563 on paper 6.82:1, on white 7.56:1; navy #17345A on paper 11.31:1;
   white on navy 12.54:1; cranberry #A3303F on white 6.88:1, on paper 6.21:1; link #1E4F8F on white 8.17:1, on paper 7.37:1;
   footer text #C9D4E3 on #0E2240 10.60:1. Feedback colors keep the DESIGN_RESEARCH.md values (icon + word + color).
   font-display: optional (NOW 13, 2026-10-15): with swap, a late font re-flowed the page on slow phones (10 of 116 page
   views over CLS 0.1). web.dev "Optimize CLS": optional keeps the fallback for that visit if the (preloaded) font is
   late, so text never jumps; the font is cached and used from the next page. Check: node scripts/cls-fonts-check.mjs */
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin-wght-italic.woff2') format('woff2');
  font-weight: 200 900; font-style: italic; font-display: optional;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}

:root {
  --text: #13233A;
  --muted: #4B5563;
  --primary: #17345A;
  --primary-deep: #0E2240;
  --primary-hover: #0F2640;
  --link: #1E4F8F;
  --accent: #A3303F;
  --accent-soft: #F7E6E4;
  --accent-text: #92400E;
  --accent-marker: #B45309;
  --highlight: #F3E3B5;
  --ok-text: #166534;
  --ok-border: #15803D;
  --ok-bg: #F0FDF4;
  --bad-text: #B91C1C;
  --bad-border: #B91C1C;
  --bad-bg: #FEF2F2;
  --page: #F6F3EC;
  --page-2: #EFEAE0;
  --surface: #FFFFFF;
  --quote-bg: #F8F5EE;
  --selected-bg: #EAF0F7;
  --input-border: #64748B;
  --line: #E4DED3;
  --divider: #D9D2C5;
  --track: #E6E1D7;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 8px;
  --radius-lg: 14px;
  --measure: 68ch;
  --shadow-1: 0 1px 2px rgba(19, 35, 58, .06), 0 1px 1px rgba(19, 35, 58, .04);
  --shadow-2: 0 2px 4px rgba(19, 35, 58, .05), 0 8px 24px -8px rgba(19, 35, 58, .14);
  --shadow-3: 0 40px 80px -32px rgba(14, 34, 64, .38), 0 18px 36px -18px rgba(14, 34, 64, .22), 0 0 0 1px rgba(14, 34, 64, .06);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-family: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; padding: var(--s7) 0 var(--s8); }
main:focus { outline: none; }
h1, h2, h3, h4 { color: var(--primary); line-height: 1.2; margin: 0 0 var(--s4); font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 42px; letter-spacing: -0.02em; }
h2 { font-size: 30px; margin-top: var(--s6); }
h3 { font-size: 22px; margin-top: var(--s5); }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
small, .small { font-size: 15px; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--s5); }
.narrow { max-width: 760px; }
.prose { max-width: calc(var(--measure) + 2 * var(--s5)); }
.eyebrow, .section-head p.eyebrow, .tool-copy > p.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--link); padding: var(--s3) var(--s4); z-index: 100; }
.skip-link:focus { left: var(--s4); top: var(--s2); }

/* Header */
.site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); padding-top: var(--s3); padding-bottom: var(--s3); }
.brand { color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s3); line-height: 1.1; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--serif); font-size: 23px; font-weight: 650; letter-spacing: -0.015em; color: var(--primary); }
.brand-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; padding: 0; align-items: center; }
.nav-list a, .nav-list .btn-link { color: var(--text); display: inline-block; padding: var(--s2) 0; min-height: 44px; line-height: 28px; text-decoration: none; font-weight: 600; font-size: 17px; }
.nav-list a:hover, .nav-list .btn-link:hover { color: var(--link); text-decoration: underline; }
.nav-list a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav-list .btn-small { background: var(--primary); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.nav-list .btn-small[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: #fff; }
.nav-list .btn-small:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
.btn-link { background: none; border: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; padding: 0; }

/* Footer */
.site-footer { background: var(--primary-deep); color: #C9D4E3; padding: var(--s7) 0 var(--s6); font-size: 15px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(201, 212, 227, .2); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s3); color: #fff; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.footer-brand .brand-mark { width: 30px; height: 30px; }
.footer-tag { margin: var(--s2) 0 0; max-width: 40ch; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0; margin: 0; align-items: center; }
.footer-links a { color: #fff; display: inline-block; min-height: 24px; text-decoration-color: rgba(255, 255, 255, .45); }
.footer-disclaimer { max-width: 100ch; }
.footer-copy { color: #C9D4E3; margin: 0; }
.site-footer a:focus-visible { outline-color: #fff; }

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5); border-radius: var(--radius);
  background: var(--primary); color: #fff; border: 2px solid var(--primary);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-1);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); box-shadow: none; }
.btn-secondary:hover { background: var(--selected-bg); color: var(--primary-hover); }
.btn-lg { min-height: 56px; padding: var(--s3) var(--s6); font-size: 19px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.arrow-link { font-weight: 700; color: var(--primary); text-decoration: none; }
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { text-decoration: underline; }

.field { margin-bottom: var(--s5); }
.field label, .label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.hint { display: block; color: var(--muted); font-size: 16px; margin-bottom: var(--s2); }
.state-note[hidden] { display: none; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  width: 100%; max-width: 32rem; min-height: 48px; padding: var(--s2) var(--s3);
  border: 2px solid var(--input-border); border-radius: var(--radius);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--link); }
textarea { min-height: 120px; max-width: 100%; }
input.short { max-width: 10rem; }
[aria-invalid="true"] { border-color: var(--bad-border) !important; }
.field-error { color: var(--bad-text); font-weight: 700; margin: var(--s1) 0; }
.field-error::before { content: "\26A0\FE0E  "; }
.check { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.check input { width: 24px; height: 24px; margin-top: 4px; flex: none; accent-color: var(--primary); }
.check label { font-weight: 400; }
.pw-wrap { position: relative; max-width: 32rem; }
.pw-wrap input { width: 100%; padding-right: 56px; }
.pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--radius); color: var(--muted); cursor: pointer; padding: 0; }
.pw-eye:hover { color: var(--primary); }
.pw-eye:focus-visible { outline: 3px solid var(--link); outline-offset: 0; }
.pw-eye .eye-shut { display: none; }
.pw-eye[aria-pressed="true"] .eye-open { display: none; }
.pw-eye[aria-pressed="true"] .eye-shut { display: inline; }

.alert { border: 1px solid var(--divider); border-left-width: 6px; padding: var(--s4); border-radius: var(--radius); margin-bottom: var(--s5); background: var(--surface); }
.alert:empty { display: none; }
.alert-error { border-color: var(--bad-border); background: var(--bad-bg); }
.alert-ok { border-color: var(--ok-border); background: var(--ok-bg); }
.alert-info { border-color: var(--link); background: var(--selected-bg); }
.alert h2 { font-size: 20px; margin: 0 0 var(--s2); color: inherit; font-family: var(--sans); font-weight: 700; }
.alert ul { margin: 0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); margin-bottom: var(--s5); box-shadow: var(--shadow-1); }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.grid > .card .push { margin-top: auto; }
.page-head { margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: var(--s3); }

/* ---------- Home ---------- */
main.home-main, body.home main { padding-top: 0; }
.hero { position: relative; padding: var(--s8) 0 var(--s8); overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(246, 243, 236, 0) 70%, var(--page) 100%),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(23, 52, 90, .045) 35px 36px),
    var(--page); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(16px, calc(50% - 600px)); width: 1px; background: rgba(163, 48, 63, .18); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s7); align-items: center; position: relative; }
.hero h1 { font-size: 52px; line-height: 1.06; max-width: 17ch; margin-bottom: var(--s5); }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.lead { font-size: 21px; max-width: 54ch; color: var(--text); }
.hero .lead { margin-bottom: var(--s6); }
.hero-note { color: var(--muted); font-size: 16px; margin: var(--s4) 0 0; }
.hero-visual { position: relative; padding: var(--s4) 0 var(--s6) var(--s4); }
.hero-visual { padding-bottom: 120px; }
.hero-visual .shot-float { position: absolute; left: -36px; top: 500px; width: 64%; border: 1px solid var(--line); }
.shot-crop { position: relative; }
.shot.shot-crop img { height: 540px; object-fit: cover; object-position: top; }
.shot-crop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }

/* Browser frame for product screenshots */
.shot { margin: 0; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-3); }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #F1EDE5; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CFC7B8; display: block; }
.shot-url { margin-left: 10px; flex: 1; max-width: 300px; height: 20px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 18px; color: var(--muted); padding: 0 8px; overflow: hidden; white-space: nowrap; }
.shot img { display: block; width: 100%; height: auto; }
.shot-card { border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-3); }
.shot-card img { display: block; width: 100%; height: auto; }

/* Exam facts strip */
.facts { background: var(--primary-deep); color: #fff; }
.facts-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.fact { padding: var(--s5) var(--s5); border-left: 1px solid rgba(201, 212, 227, .18); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact-num { display: block; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.1; color: #fff; }
.fact-label { display: block; color: #C9D4E3; font-size: 16px; margin-top: var(--s1); }
.facts-source { color: #C9D4E3; font-size: 14px; padding: 0 0 var(--s4); margin: 0; }
.facts-source a { color: #fff; }

/* Section heads */
.section { padding: var(--s9) 0 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s7); }
.section-head h2 { font-size: 40px; margin-top: 0; letter-spacing: -0.02em; }
.section-head p { font-size: 20px; color: var(--muted); }

/* Tool index (jump list) */
.tool-index { list-style: none; padding: 0; margin: 0 0 var(--s8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.tool-index a { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); font-weight: 700; box-shadow: var(--shadow-1); min-height: 64px; }
.tool-index a:hover { border-color: var(--primary); }
.tool-index .num { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 500; }
.ticon { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--selected-bg); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.ticon svg { width: 22px; height: 22px; }

/* Tool rows */
.tool { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s8); align-items: center; padding: var(--s7) 0; scroll-margin-top: var(--s5); }
.tool + .tool { border-top: 1px solid var(--line); }
.tool.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.tool.flip .tool-copy { order: 2; }
.tool.flip .tool-visual { order: 1; }
.tool h3 { font-size: 32px; margin: var(--s3) 0 var(--s4); letter-spacing: -0.015em; }
.tool-copy > p { font-size: 19px; }
.tool-points { list-style: none; padding: 0; margin: var(--s5) 0 0; border-top: 1px solid var(--line); }
.tool-points li { padding: var(--s3) 0 var(--s3) 30px; border-bottom: 1px solid var(--line); position: relative; }
.tool-points li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.tool-label { display: inline-flex; align-items: center; gap: var(--s3); }
.tool-visual { position: relative; }
.tool-visual::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; background: var(--page-2); border-radius: 24px; z-index: -1; }
.tool.flip .tool-visual::before { inset: 8% 10% -6% -4%; }
.tool-visual { isolation: isolate; }
.caption { font-size: 15px; color: var(--muted); margin: var(--s3) 0 0; }

/* Pull quote on sources */
.source-band { margin: var(--s9) 0 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s8) 0; }
.source-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.source-band blockquote { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.4; color: var(--primary); border-left: 3px solid var(--accent); padding-left: var(--s5); }
.source-band .cite { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: var(--s3); display: block; }

/* Plan cards */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); box-shadow: var(--shadow-1); margin: 0; }
.plan h2, .plan h3 { font-size: 24px; margin: 0 0 var(--s2); }
.plan .covers { color: var(--muted); margin-bottom: var(--s4); }
.plan .plan-list { flex: 1 0 auto; }
.plan .price { margin: 0 0 var(--s1); }
.plan h2, .plan h3 { margin-top: var(--s4); }
.plan .price-sub { color: var(--muted); font-size: 15px; margin-bottom: var(--s5); }
.plan .plan-list { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.plan .plan-list li { padding: var(--s2) 0 var(--s2) 28px; position: relative; border-top: 1px solid var(--line); }
.plan .plan-list li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 6px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.plan .plan-list li.no { color: var(--muted); }
.plan .plan-list li.no::before { border: 0; width: 10px; height: 2.5px; background: var(--input-border); transform: none; top: 22px; }
.plan .push { margin-top: auto; }
.plan .btn { width: 100%; }
.plan-tag { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--selected-bg); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--s4); align-self: flex-start; }
.plan.featured { border: 2px solid var(--primary); box-shadow: var(--shadow-2); background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F5 100%); }
.plan.featured .ribbon { position: absolute; top: -14px; left: var(--s6); background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; padding: 3px 12px; border-radius: 999px; box-shadow: var(--shadow-1); }
.plan.featured .plan-tag { background: var(--accent-soft); color: var(--accent); }
.plans-note { color: var(--muted); margin-top: var(--s4); }

/* States line */
/* "More states coming" lives in the home page footer only (owner request 2026-10-09: Massachusetts up front). */
.states-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 16px; margin: 0 0 var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(201, 212, 227, .2); }
.states-line p { margin: 0; }
.state-pill { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 999px; padding: 2px 12px; text-decoration: none; }
.state-pill svg { width: 16px; height: 16px; }
.state-more { color: #C9D4E3; }

/* Closing CTA */
.cta-band { margin-top: var(--s9); background: var(--primary); color: #fff; border-radius: var(--radius-lg); padding: var(--s7); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s5); align-items: center; }
.cta-band h2 { color: #fff; margin: 0 0 var(--s2); font-size: 32px; }
.cta-band p { color: #DCE4EF; margin: 0; }
.cta-band .btn { background: #fff; color: var(--primary); border-color: #fff; }
.cta-band .btn:hover { background: var(--selected-bg); }

.fine { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.fine h2 { font-size: 20px; font-family: var(--sans); font-weight: 700; color: var(--text); margin: 0 0 var(--s2); }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: var(--s3); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 14px; height: 8px; border-left: 3px solid var(--ok-border); border-bottom: 3px solid var(--ok-border); transform: rotate(-45deg); }

/* Pricing */
.price { font-family: var(--serif); font-size: 46px; font-weight: 600; color: var(--primary); line-height: 1.05; margin: var(--s2) 0; letter-spacing: -0.02em; }
.price-terms { color: var(--muted); }
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: var(--s5); margin: var(--s6) 0; border-radius: 0 var(--radius) var(--radius) 0; }
.callout-title { color: var(--accent); font-weight: 700; margin: 0 0 var(--s2); font-family: var(--sans); font-size: 20px; }
.ph { background: var(--highlight); padding: 0 2px; border-radius: 2px; }
.draft-note { background: var(--highlight); padding: var(--s3) var(--s4); border-radius: var(--radius); }
.compare-table th[scope="col"] { font-family: var(--serif); font-size: 18px; }
.compare-table td.yes { color: var(--ok-text); font-weight: 700; }
.compare-table td.no { color: var(--muted); }
.compare-table .col-bundle { background: #FBF9F5; }

/* Tables */
/* position: relative (2026-10-15): a screen-reader-only (absolute) label inside a table used the page as its box, escaped
   the scroll clip and made phone dashboards with scores scroll sideways (434 px on a 390 px screen). */
.table-wrap { position: relative; overflow-x: auto; margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { background: var(--quote-bg); font-size: 16px; }
th { color: var(--primary); }

/* Meters */
.meter { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; min-width: 120px; margin-top: 6px; }
.meter > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.status-label { font-weight: 700; }
.big-number { font-family: var(--sans); font-size: 48px; font-weight: 700; color: var(--primary); line-height: 1.05; letter-spacing: -0.02em; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s5); }
.dash-head h1 { margin: 0; }
.exam-card > h2 { margin-top: 0; font-size: 30px; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.dash-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.panel { background: var(--quote-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin: 0; }
.panel h3 { margin-top: 0; font-size: 20px; }
.panel .btn { margin-top: var(--s1); }
.due-box { border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--surface); padding: var(--s5); border-radius: var(--radius); margin: 0; }
.due-box h3 { margin-top: 0; font-size: 20px; }
.due-box .btn { margin-bottom: var(--s3); }
.readiness-panel { border-top: 4px solid var(--primary); background: var(--surface); }
.fc-panel { border-top: 4px solid var(--link); background: var(--surface); }
.quiz-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); }
.quiz-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); background: var(--surface); display: flex; flex-direction: column; gap: var(--s2); box-shadow: var(--shadow-1); }
.quiz-list li > span { font-weight: 600; }
.quiz-list .btn { align-self: flex-start; margin-top: auto; }
.quiz-list h2 { margin-top: 0; }

/* Exam runner */
.exam-bar { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); padding: var(--s3) 0; box-shadow: 0 6px 18px -14px rgba(19, 35, 58, .5); }
.exam-bar-inner { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; }
.exam-bar p { margin: 0; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.timer-wrap .timer { margin: 0; }
.timer-note { margin: 0; max-width: 34ch; text-align: center; font-size: 12px; line-height: 1.3; }
.timer { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 19px; color: var(--primary); font-family: var(--mono); background: var(--quote-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s1) var(--s3); }
.progress-text { font-weight: 700; }
.progress { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; margin-top: var(--s2); width: min(320px, 70vw); }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.save-status { color: var(--muted); font-size: 16px; min-height: 1.6em; }
main.exam-main, body.exam-page main { padding-top: 0; }
.question-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); max-width: calc(var(--measure) + 50px); margin: var(--s5) 0; scroll-margin-top: 120px; box-shadow: var(--shadow-2); }
.question-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.question-card legend { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: var(--s5); padding: 0; line-height: 1.45; color: var(--text); }
.q-num { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--accent); margin-bottom: var(--s2); }
.option { display: flex; gap: var(--s3); align-items: flex-start; border: 2px solid #C9C2B4; border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s3); cursor: pointer; min-height: 48px; background: var(--surface); transition: border-color .12s ease, background-color .12s ease; }
.option:hover { background: var(--quote-bg); border-color: var(--input-border); }
.option input { width: 22px; height: 22px; margin-top: 4px; flex: none; accent-color: var(--primary); }
.option .letter { font-weight: 700; min-width: 1.5em; color: var(--primary); }
.option:has(input:checked) { background: var(--selected-bg); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.option:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
.flag-btn[aria-pressed="true"] { background: #FEF3C7; color: var(--accent-text); border-color: var(--accent-marker); }
.navigator { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--s2); list-style: none; padding: 0; max-width: 760px; }
.navigator button { width: 100%; min-height: 44px; font: inherit; font-weight: 700; border: 2px solid #C9C2B4; background: var(--surface); color: var(--text); border-radius: var(--radius); cursor: pointer; position: relative; }
.navigator button.answered { background: var(--selected-bg); border-color: var(--primary); color: var(--primary); }
.navigator button.current { box-shadow: 0 0 0 3px var(--accent); }
.navigator button.flagged::after { content: "F"; position: absolute; top: 1px; right: 3px; font-size: 12px; color: var(--accent-text); }
/* Sticky action bar (owner request 2026-10-09: Submit must be visible without scrolling).
   Pattern: a persistent bar fixed to the bottom of the viewport holding the question actions, with Submit as
   the high-contrast primary. NN/g "Scrolling and Attention": "Keep major CTAs above the fold". NN/g sticky
   headers: a persistent bar should be small and "an opaque color, different from the background of main
   content areas". WCAG 2.2 SC 2.4.11 (technique C43): scroll-padding so the bar never hides the focused item.
   Cranberry #A3303F with white text is 6.88:1. */
html:has(body.exam-page) { scroll-padding-bottom: 120px; }
body.exam-page main { padding-bottom: 120px; }
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 2px solid var(--primary); box-shadow: 0 -8px 24px -12px rgba(14, 34, 64, .45); padding: var(--s3) 0; padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
.action-bar[hidden] { display: none; }
.action-bar-inner { display: flex; align-items: center; gap: var(--s3) var(--s4); }
.action-nav { display: flex; gap: var(--s3); align-items: center; }
.action-nav .btn[hidden] { display: none; }
.action-count { margin: 0 0 0 auto; color: var(--muted); font-size: 16px; white-space: nowrap; }
.btn-submit { background: var(--accent); border-color: var(--accent); color: #fff; min-height: 52px; padding: var(--s3) var(--s6); font-size: 19px; }
.btn-submit:hover { background: #87232F; border-color: #87232F; }
.btn-submit.is-final { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 6px var(--accent); }
/* Short desktop screens (for example 1280x720): tighten the question so its choices fit above the action bar. */
@media (min-width: 641px) and (max-height: 820px) {
  .exam-bar { padding: var(--s2) 0; }
  .exam-bar .progress { margin-top: var(--s1); }
  body.exam-page #lock-note { margin: var(--s2) 0 0; line-height: 1.4; }
  body.exam-page .question-card { margin: var(--s2) 0 var(--s3); padding: var(--s4) var(--s5); }
  body.exam-page .question-card legend { font-size: 20px; margin-bottom: var(--s3); line-height: 1.4; }
  body.exam-page .q-num { margin-bottom: var(--s1); }
  body.exam-page .option { padding: var(--s2) var(--s4); margin-bottom: var(--s2); }
  .action-bar { padding: var(--s2) 0; }
}
.legend-row { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 16px; color: var(--muted); }

dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); max-width: min(560px, calc(100vw - 32px)); color: var(--text); box-shadow: var(--shadow-3); }
dialog::backdrop { background: rgba(14, 34, 64, .55); }
dialog h2 { margin-top: 0; }

/* Results */
.score-card { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.verdict { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; padding: var(--s1) var(--s3); border-radius: 999px; border: 2px solid; }
.verdict svg { width: 20px; height: 20px; flex: none; }
.verdict.ok { color: var(--ok-text); border-color: var(--ok-border); background: var(--ok-bg); }
.verdict.bad { color: var(--bad-text); border-color: var(--bad-border); background: var(--bad-bg); }
.verdict.none { color: var(--muted); border-color: var(--input-border); background: var(--quote-bg); }
.result-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--input-border); border-radius: var(--radius-lg); padding: var(--s6); margin-bottom: var(--s5); max-width: calc(var(--measure) + 80px); box-shadow: var(--shadow-1); }
.result-card.is-correct { border-left-color: var(--ok-border); }
.result-card.is-incorrect, .result-card.is-unanswered { border-left-color: var(--bad-border); }
.result-card h3 { margin-top: 0; font-size: 20px; }
.result-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.r-stem { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.45; }
.r-options { list-style: none; padding: 0; margin: var(--s4) 0; }
.r-option { border: 2px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.r-option.correct-answer { border-color: var(--ok-border); background: var(--ok-bg); }
.r-option.wrong-pick { border-color: var(--bad-border); background: var(--bad-bg); border-style: dashed; }
.r-option-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; }
.r-tag { display: inline-flex; gap: var(--s1); align-items: center; font-weight: 700; font-size: 16px; }
.r-tag svg { width: 18px; height: 18px; }
.r-tag.ok { color: var(--ok-text); }
.r-tag.bad { color: var(--bad-text); }
.r-expl { margin: var(--s2) 0 0; }
.source-box { background: var(--quote-bg); border: 1px solid var(--line); border-left: 4px solid var(--primary); padding: var(--s4) var(--s5); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--s4) 0; }
.source-box h3, .source-box h4 { margin: 0 0 var(--s2); color: var(--primary); font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.source-box blockquote { margin: 0 0 var(--s3); padding: 0; font-family: var(--serif); font-size: 18px; line-height: 1.55; }
.source-cite { color: var(--muted); font-size: 14px; margin: 0; font-family: var(--mono); }
.source-links { margin: var(--s2) 0 0; padding-left: 1.2em; }
.source-links li { margin: 0 0 var(--s1); overflow-wrap: anywhere; }
.source-locked { border-left-color: var(--muted); }
.source-locked h4 { display: flex; align-items: center; gap: var(--s2); }
.source-locked .lock-icon { width: 16px; height: 16px; flex: none; }
.source-locked p { margin: 0; }
.question-note { color: var(--muted); font-size: 15px; margin: var(--s3) 0 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.h3like { font-size: 22px; margin-top: 0; }
.card h3 { margin-top: 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
fieldset.field { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--surface); }

/* Leak deterrents on paid question content (exam and results pages). */
.protected { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.protected input, .protected textarea, .protected select { -webkit-user-select: text; user-select: text; }
.print-block { display: none; }
@media print {
  .protected, .exam-bar, .action-bar, #nav-section, #q-controls { display: none !important; }
  .print-block { display: block; font-size: 20px; padding: 24px; }
}

/* Upgrade prompt after the free sample test */
.upsell { border: 2px solid var(--primary); background: var(--surface); border-radius: var(--radius-lg); padding: var(--s6); margin: var(--s5) 0; box-shadow: var(--shadow-2); }
.upsell h2 { margin-top: 0; }
.upsell .price-line { font-weight: 700; }
.badge { display: inline-block; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; padding: 2px var(--s3); border-radius: 999px; margin-bottom: var(--s2); }
.card.featured { border: 2px solid var(--primary); }
.inline-account { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin: 0 0 var(--s5); background: var(--surface); }
.inline-account legend { font-weight: 700; color: var(--primary); padding: 0 var(--s2); }
.pw-count { color: var(--muted); font-size: 16px; }
.signed-out-banner { margin: 0 0 var(--s4); border-radius: 0; }

/* Post-purchase upgrade offer */
.offer { border: 2px solid var(--primary); background: var(--surface); border-radius: var(--radius-lg); padding: var(--s6); margin: 0 0 var(--s5); box-shadow: var(--shadow-2); }
.offer h2 { margin-top: 0; }
.offer .offer-price { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--primary); margin: var(--s2) 0; }
.offer .offer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.offer .decline { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; font: inherit; cursor: pointer; }

/* Checkout: the card area is set apart so it reads as the secure part of the form (Baymard, perceived security). */
.order-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3); }
.card-zone { background: var(--quote-bg); border: 1px solid var(--divider); border-radius: var(--radius-lg); padding: var(--s5); margin-bottom: var(--s5); }
.card-zone h2 { display: flex; align-items: center; gap: var(--s2); margin-top: 0; }
.card-zone h2 svg { width: 20px; height: 20px; color: var(--primary); }

/* Flashcards */
.flashcard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--s6); min-height: 240px; box-shadow: var(--shadow-2); margin-bottom: var(--s4); max-width: 760px;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(23, 52, 90, .05) 31px 32px); background-position: 0 72px; }
.flashcard .fc-concept { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }
.flashcard .fc-prompt { font-family: var(--serif); font-size: 24px; line-height: 1.4; margin: 0 0 var(--s4); }
.flashcard .fc-answer { font-size: 20px; font-weight: 700; color: var(--ok-text); }
.fc-status { font-weight: 700; }

/* Sample and quizzes pages */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--s6); display: grid; gap: var(--s3); }
.steps li { counter-increment: step; position: relative; padding: var(--s4) var(--s4) var(--s4) 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.steps li::before { content: counter(step); position: absolute; left: var(--s4); top: var(--s4); width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s7); align-items: start; }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow-1); }
.aside-card h2 { margin-top: 0; font-size: 22px; }

@media (max-width: 960px) {
  .hero-grid, .tool, .tool.flip, .source-band-grid, .split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .tool.flip .tool-copy, .tool.flip .tool-visual { order: initial; }
  .hero h1 { font-size: 44px; }
  .hero-visual { padding: 0; }
  .hero-visual .shot-float { display: none; }
  .shot.shot-crop img { height: 420px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan.featured { order: -1; }
  .tool-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-top { grid-template-columns: minmax(0, 1fr); }
  .facts-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--s4); }
  main { padding: var(--s6) 0 var(--s7); }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .hero { padding: var(--s7) 0; }
  .hero::before { display: none; }
  .hero h1 { font-size: 36px; }
  .section { padding-top: var(--s8); }
  .section-head h2 { font-size: 30px; }
  .tool h3 { font-size: 26px; }
  .tool-index { grid-template-columns: minmax(0, 1fr); }
  .card, .question-card, .result-card, .plan, .offer, .upsell { padding: var(--s4); }
  .exam-bar { position: static; }
  html:has(body.exam-page) { scroll-padding-bottom: 150px; }
  body.exam-page main { padding-bottom: 150px; }
  .action-bar { padding-top: var(--s2); }
  .action-bar-inner { flex-wrap: wrap; gap: var(--s2); }
  .action-nav { width: 100%; gap: var(--s2); }
  .action-nav .btn { flex: 1 1 0; padding: var(--s2) var(--s2); font-size: 16px; min-height: 48px; }
  .action-nav .flag-btn { flex-grow: 1.6; }
  .action-count { display: none; }
  .btn-submit { width: 100%; min-height: 48px; font-size: 18px; }
  .facts-inner { grid-template-columns: minmax(0, 1fr); }
  .fact { border-left: 0; padding-left: 0; border-top: 1px solid rgba(201, 212, 227, .18); }
  .fact:first-child { border-top: 0; }
  .cta-band { padding: var(--s5); }
  .source-band blockquote { font-size: 21px; }
  .brand-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Home page Massachusetts exam FAQ */
.faq { display: grid; gap: var(--s3); max-width: 860px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s5); box-shadow: var(--shadow-1); }
.faq-item summary { cursor: pointer; list-style-position: outside; padding: var(--s2) 0; }
.faq-item summary h3 { display: inline; font-size: 20px; margin: 0; }
.faq-item p { margin: var(--s2) 0; }
.faq-src { color: var(--muted); font-size: 16px; }

/* Clickable buttons drawn on product screenshots: each hotspot goes to the real tool */
.shot-hot { position: relative; line-height: 0; }
.shot-hot img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; border-radius: 8px; cursor: pointer; transition: box-shadow .15s, background-color .15s; }
.hotspot:hover, .hotspot:focus-visible { background-color: rgba(23, 51, 89, .10); box-shadow: 0 0 0 3px var(--accent, #a32638); outline: none; }

/* Study guide */
.sg-toc { columns: 2 16rem; padding-left: 1.2em; margin: 0 0 var(--s6); }
.sg-toc li { margin: 0 0 var(--s1); break-inside: avoid; }
.sg-topic { margin: var(--s7) 0 0; }
.sg-topic > h2 { border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
.sg-entry { margin: var(--s5) 0; }
.sg-entry h3 { margin: 0 0 var(--s2); font-size: 18px; }
.sg-points { margin: 0 0 var(--s2); padding-left: 1.2em; }
.paid-note { display: inline-block; background: var(--quote-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3); }

/* Install prompt (phones only, see app.js) */
.install-prompt { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 50; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--s3) var(--s4); }
.install-prompt p { margin: 0 0 var(--s2); }
.install-actions { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.install-close { min-height: 44px; }
@media print { .install-prompt { display: none; } }

/* Read aloud (Web Speech API, see app.js). On a question it sits in the card's top corner, on the line of the
   question number, so it adds no height (the choices must still fit above the action bar on short screens). */
.read-row { display: flex; justify-content: flex-end; margin: 0 0 var(--s2); }
.question-card { position: relative; }
.question-card .read-row { position: absolute; top: var(--s1); right: var(--s1); margin: 0; }
.question-card .q-num { padding-right: 140px; }
.read-aloud { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; padding: var(--s1) var(--s3); font-size: 15px; }
.read-aloud .read-icon { width: 20px; height: 20px; flex: none; }
.read-aloud[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
@media print { .read-row { display: none; } }

/* Home tool screenshots: clickable areas over the real buttons. Positions live here, not in style attributes, because the CSP (style-src 'self') blocks inline styles. */
.hs-1 { left: 7.31%; top: 20.6%; width: 19.3%; height: 10.2%; }
.hs-2 { left: 53.43%; top: 20.6%; width: 19.3%; height: 10.2%; }
.hs-3 { left: 7.31%; top: 50.9%; width: 19.3%; height: 10.2%; }
.hs-4 { left: 53.43%; top: 50.9%; width: 19.3%; height: 10.2%; }
.hs-5 { left: 7.31%; top: 81.0%; width: 19.3%; height: 10.2%; }
.hs-6 { left: 53.43%; top: 81.0%; width: 19.3%; height: 10.2%; }
.hs-7 { left: 9.5%; top: 43.9%; width: 42%; height: 16.6%; }

/* Name and address rows on sign-up and checkout */
.name-row, .addr-row { display: flex; flex-wrap: wrap; gap: 0 var(--s4); max-width: 32rem; }
.name-row .field { flex: 1 1 12rem; }
.addr-row .field:first-child { flex: 1 1 14rem; }
.addr-row .field:last-child { flex: 0 1 10rem; }

/* Dashboard: the package they bought, first */
.purchase-card { border-left: 6px solid var(--good-border, #2E7D32); }
.purchase-card h2 { margin-top: 0; }
.purchase-card .eyebrow { margin: 0 0 var(--s1); }
.pill-ok { display: inline-block; background: #E6F4EA; color: #1E5E2B; font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 999px; margin-right: var(--s1); }

/* Home: why Prep Retention */
.standout-grid { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--s4); }
.standout { display: flex; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow-1); }
.standout h3 { margin: 0 0 var(--s2); font-size: 20px; }
.standout p { margin: 0; }
.standout-ck { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.standout-ck svg { width: 18px; height: 18px; }

.footer-bugs { margin: 0 0 var(--s3); color: #fff; font-weight: 600; }
.footer-bugs a { color: #fff; }

/* Bundle saving highlight (owner request 2026-10-12): the real separate price and the saving. */
.saving-line { margin: 0.25rem 0 0.5rem; font-size: 1rem; }
.saving-line .was { color: var(--muted, #5b6472); margin-right: 0.4rem; }
.saving-line strong { color: #0b6b3a; background: #e3f4ea; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }

/* Public SEO pages: free practice tests and exam guides (2026-10-12). */
.seo-page { padding-top: 1.5rem; padding-bottom: 3rem; max-width: 52rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; margin: 0 0 1rem; font-size: 0.9rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--muted); }
.seo-updated { color: var(--muted); font-size: 0.9rem; margin: -0.25rem 0 1rem; }
.free-test { margin: 1.5rem 0; }
.ft-q { border: 1px solid #d5dbe5; border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1rem; background: #fff; }
.ft-q legend { display: contents; }
.ft-num { display: inline-block; font-weight: 700; margin-right: 0.5rem; }
.ft-topic { color: var(--muted); font-size: 0.85rem; }
.ft-stem { display: block; margin: 0.4rem 0 0.6rem; font-size: 1.05rem; }
.ft-opts { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.ft-opts li { margin: 0.25rem 0; }
.ft-opts label { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.45rem 0.6rem; border-radius: 8px; cursor: pointer; min-height: 44px; }
.ft-opts label:hover { background: #f1f4f9; }
.ft-opts input { margin-top: 0.3rem; flex: none; }
.ft-letter { font-weight: 700; }
.ft-q.is-right { border-color: #2e7d4f; }
.ft-q.is-wrong { border-color: #a3303f; }
.ft-result { font-weight: 700; }
.ft-q.is-right .ft-result { color: #1d5e39; }
.ft-q.is-wrong .ft-result { color: #8a2533; }
.ft-ans summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ft-expl { padding-left: 1.1rem; }
.ft-expl li { margin: 0.35rem 0; }
.ft-expl .ft-right { font-weight: 600; }
.ft-quote { margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border-left: 4px solid #c9d4e3; background: #f6f8fb; font-size: 0.95rem; }
.ft-quote footer { margin-top: 0.4rem; font-size: 0.85rem; }
.ft-actions { margin: 1rem 0; }
.seo-cta { margin: 2rem 0; padding: 1.25rem; border-radius: 12px; background: #eef2f8; }
.seo-sources ul, .seo-more ul { padding-left: 1.1rem; }
.footer-head { font-weight: 700; margin: 0 0 0.4rem; }
.free-list { columns: 2 18rem; padding-left: 1.1rem; }
.free-list li { margin: 0.3rem 0; break-inside: avoid; }
/* Company homepage state chooser and the two-state chooser pages (2026-10-12). */
.state-choice { margin-top: var(--s5); }
.state-choice .choose-title { font-size: 20px; margin: 0 0 var(--s3); }
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
@media (max-width: 720px) { .plans-2 { grid-template-columns: 1fr; } }

/* Account tag on paid question cards (NOW 10): faint but readable (#6B7280 on white is 4.8:1, WCAG AA). */
.acct-tag { margin: 0 0 var(--s2); text-align: right; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: #6B7280; line-height: 1.4; overflow-wrap: anywhere; }
/* State line near the top of a state's pages (Pennsylvania, NOW 11): easy to see, plain, readable. */
.state-page-note-bar { background: var(--selected-bg); border-bottom: 1px solid var(--line); }
.state-page-note-bar .state-page-note { max-width: 1160px; margin: 0 auto; padding: var(--s3) var(--s5); font-size: 16px; line-height: 1.5; color: var(--text); }
p.state-page-note.alert { font-size: 16px; line-height: 1.5; margin: var(--s3) 0; }
/* On an exam question the Read aloud button sits in the top right corner: keep the tag left of it, never under it. */
.question-card .acct-tag { text-align: left; padding-right: 140px; min-height: 20px; }
/* Request a state (NOW 13) on the sign-up page. */
.state-request { margin-top: var(--s3); }
.state-request summary { cursor: pointer; color: var(--link); text-decoration: underline; min-height: 44px; display: flex; align-items: center; }
.state-request-body { display: grid; gap: var(--s2); margin-top: var(--s2); max-width: 420px; }

/* Dashboard look (NOW 16, G 2026-10-15 "give this site some soul"). Method: NN/g "Visual hierarchy in UX" (scale,
   contrast and grouping: "Bigger elements stand out more", grouping "through proximity and the use of white space or
   explicitly through enclosure"; at most 3 text sizes) and WCAG 1.4.1 Use of Color (color never the only cue).
   Contrast (WCAG formula): white on navy #17345A 12.54:1; ok text #166534 on white 7.13:1; bad text #B91C1C on white
   6.47:1, on #FEF2F2 5.91:1; accent #A3303F on #F7E6E4 5.66:1. */
.exam-card > h2.exam-card-title { background: var(--primary); color: #fff; margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5); padding: var(--s4) var(--s6); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; font-size: 30px; }
.exam-card h3.dash-h { font-size: 24px; color: var(--primary); margin: var(--s7, 48px) 0 var(--s3); padding: var(--s2) 0 var(--s2) var(--s3); border-left: 6px solid var(--accent); border-top: 1px solid var(--line); padding-top: var(--s4); }
.panel h3.panel-title, .due-box h3.panel-title { font-size: 21px; color: var(--primary); padding-bottom: var(--s2); border-bottom: 3px solid var(--accent); margin-bottom: var(--s3); }
.meter.is-pass > span { background: var(--ok-border); }
.meter.is-below > span { background: var(--bad-border); }
.pct.is-pass, .big-number.is-pass { color: var(--ok-text); }
.pct.is-below, .big-number.is-below { color: var(--bad-text); }
.score-cue { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.score-cue.is-pass { color: var(--ok-text); }
.score-cue.is-below { color: var(--bad-text); }
.score-cue .cue-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1; color: #fff; }
.score-cue.is-pass .cue-icon { background: var(--ok-border); }
.score-cue.is-below .cue-icon { background: var(--bad-border); }
.weak-panel { margin: var(--s6) 0 var(--s4); padding: var(--s5); background: var(--accent-soft); border: 1px solid #E8C5C0; border-left: 8px solid var(--accent); border-radius: var(--radius-lg); }
.weak-title { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font-size: 24px; color: var(--accent); }
.weak-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 20px; font-weight: 700; flex: none; }
.weak-intro { margin: 0 0 var(--s3); color: var(--text); }
.weak-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.weak-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.weak-main { flex: 1 1 260px; min-width: 0; }
.weak-name { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.weak-score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: 2px; font-size: 16px; }
@media (max-width: 640px) {
  .exam-card > h2.exam-card-title { font-size: 24px; padding: var(--s3) var(--s4); margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); }
  .weak-item .btn { width: 100%; }
}

/* Owner state switcher (NOW 19): owner login only. */
.owner-switch label { display: block; font-weight: 600; margin-bottom: .4rem; }
.owner-switch select { max-width: 100%; }

/* Discount code box at checkout (NOW 20). */
.code-box .code-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.code-box input { flex: 1 1 12rem; text-transform: uppercase; }

/* NOW 23: "Coming soon" badge on Tennessee and Kansas links, and their buy buttons while buying is closed. */
.badge-soon { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #FEF3C7; color: #78350F; font-size: .75rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.btn.btn-soon, .btn.btn-soon:hover { background: #E5E7EB; color: #374151; border-color: #D1D5DB; cursor: default; box-shadow: none; }
/* Test site banner (preview only, added by the Worker when TEST_SITE is on). */
.test-site-banner { background: #7C2D12; color: #fff; text-align: center; padding: .5rem 1rem; font-size: .95rem; line-height: 1.4; }
.test-site-banner strong { color: #fff; }