/* Generated by self-host-fonts.command on 2026-07-26. Do not edit by hand;
   re-run the script to refresh. Font files live in static/fonts/. */
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/figtree-v9-_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* HomeschoolCompareHQ Design System v1.0
   Locked palette + type. Warm, trustworthy, neutral on the faith question. */

:root {
  --ink:   #1B2A3A;
  --teal:  #2F7E7E;
  --clay:  #D98B5A;
  --sage:  #8FB09C;
  --mist:  #EAF0EF;
  --paper: #FBFAF7;

  --teal-dark: #266767;
  --sage-tint: #E4EEE8;
  --border: #DCE3E1;
  --text: #1B2A3A;
  --text-soft: #566572;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius: 8px;
  --radius-sm: 5px;
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

a { color: var(--teal); }

/* Accessibility helpers */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 2px; }

/* ---- Header ---- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--border); padding: 14px 0; position: relative; z-index: 20; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img { display: block; height: 34px; width: auto; }
.site-nav a {
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  margin-left: 28px; padding: 4px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* ---- Subjects dropdown (desktop: hover or click) ---- */
.nav-dropdown { position: relative; display: inline-block; margin-left: 28px; }
.nav-dropdown-toggle {
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent;
}
.nav-dropdown-toggle:hover, .nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--teal); }
.nav-caret { font-size: 11px; line-height: 1; transition: transform 0.15s ease; }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret,
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 9px); left: 0; min-width: 184px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(27, 42, 58, 0.13); padding: 6px; display: none; z-index: 60;
}
/* Invisible hover bridge so the menu doesn't close when crossing the gap */
.nav-dropdown-menu::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; margin-left: 0; padding: 9px 14px; white-space: nowrap;
  border-bottom: none; border-radius: 6px;
}
.nav-dropdown-menu a:hover { background: var(--mist); color: var(--teal); border-bottom-color: transparent; }

/* ---- Main / footer ---- */
.site-main { padding: 40px 0 20px; }
.site-footer { border-top: 1px solid var(--border); padding: 28px 0; margin-top: 64px; background: var(--mist); }
.site-footer p { font-size: 13.5px; color: var(--text-soft); margin-bottom: 6px; max-width: 780px; }
.footer-disclosure { font-weight: 500; color: var(--ink) !important; margin-top: 14px; }
/* The inline disclosure link has to out-specify the !important ink above */
.site-footer .footer-disclosure a { color: var(--teal-dark); text-decoration: underline; font-weight: 600; }
.site-footer .footer-disclosure a:hover { color: var(--teal); }

/* ---- Headings ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.2; }

.section-header {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--teal); border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 14px; margin-top: 32px;
}

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: 13.5px; color: var(--text-soft); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); text-decoration: underline; }
.breadcrumb span { margin: 0 7px; color: var(--border); }

/* ---- Score scale: a marker on a named range ----
   Replaced the five-dot fill on 2026-07-28. A filled-dot row reads as a rating out
   of five; this reads as a position between two named ends, which is the actual
   claim. The end words are what do the work, so they never get dropped. */
.scale { width: 100%; }
.scale-track { position: relative; height: 6px; margin: 0 7px 5px; background: var(--mist); border-radius: 3px; }
.scale-mark {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--teal); transform: translate(-50%, -50%);
  /* Ring in the page colour so the marker stays legible on a zebra-striped row. */
  box-shadow: 0 0 0 3px var(--paper);
}
/* The value word leads. It is never centred under the track: a centred word lines up
   with the marker only at 3, and at 2 or 4 the mismatch reads as a bug. */
.scale-value { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.scale-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; line-height: 1.3; color: var(--text-soft); }
.scale--compact .scale-track { height: 5px; margin: 2px 6px 4px; background: var(--border); }
.scale--compact .scale-value { font-size: 12.5px; margin-bottom: 4px; }
.scale--compact .scale-mark { width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--paper); }
.scale--compact .scale-ends { font-size: 11px; }
.compare-table tbody tr:nth-child(even) .scale-mark { box-shadow: 0 0 0 2.5px var(--mist); }

/* ---- Comparison hub: dense rows ----
   Bordered rows rather than a card grid. 234 cards at two per row was a wall with nothing
   to read in it; a row fits the sharpest difference in roughly a third of the height. */
.cmp-list { border-top: 1px solid var(--border); }
.cmp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 6px; border-bottom: 1px solid var(--mist);
  text-decoration: none; color: inherit;
}
.cmp-row:hover { background: var(--mist); }
.cmp-row:hover .cmp-row-title { color: var(--teal-dark); }
.cmp-row-main { min-width: 0; }
.cmp-row-title { display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cmp-row-diff { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }
.cmp-diff-val { color: var(--ink); font-weight: 600; }
.cmp-vs { color: var(--text-soft); font-weight: 400; }
.cmp-row-subject { flex-shrink: 0; font-size: 11.5px; color: var(--text-soft); background: var(--mist); border-radius: 20px; padding: 3px 10px; }
.cmp-row:hover .cmp-row-subject { background: #fff; }
.cmp-more-wrap { display: flex; justify-content: center; margin-top: 20px; }
@media (max-width: 560px) {
  .cmp-row { flex-direction: column; gap: 6px; }
  .cmp-row-subject { align-self: flex-start; }
}

/* ---- Chips ---- */
.chip {
  display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--mist); color: var(--ink); line-height: 1.5;
}
.chip--sage { background: var(--sage-tint); color: var(--teal-dark); }
.chip--faith { background: var(--ink); color: var(--paper); }
.chip--stance { background: var(--teal-dark); color: var(--paper); }
.chip-set { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ---- Entry header ---- */
.entry-header { margin-bottom: 20px; }
.entry-title { font-size: 34px; letter-spacing: -0.01em; }
.entry-meta { font-size: 14px; color: var(--text-soft); margin-top: 8px; font-family: var(--font-body); }
.entry-meta span { margin-right: 8px; }
.entry-meta span:not(:last-child)::after { content: "\00b7"; margin-left: 10px; color: var(--border); }

/* ---- Who it's for (prominence) ---- */
.whofor {
  background: var(--sage-tint); border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 8px 0 8px;
}
.whofor-label {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--teal-dark); margin-bottom: 8px;
}
.whofor-text { font-size: 19px; line-height: 1.55; color: var(--ink); }

/* ---- Entry two-column layout ---- */
.entry-layout { display: grid; grid-template-columns: 340px 1fr; gap: 44px; margin-top: 12px; align-items: start; }
@media (max-width: 820px) { .entry-layout { grid-template-columns: 1fr; gap: 8px; } }

/* Scored attributes */
.score-list { display: flex; flex-direction: column; gap: 18px; }
.score-row { display: flex; flex-direction: column; gap: 6px; }
.score-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.score-label-wrap { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.score-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
/* Value on the label line, opposite the attribute name, where the dots used to sit. */
.score-value { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }

/* Attribute help bubble (click the ? to see all five levels + the guide link) */
.score-help { position: relative; display: inline-flex; }
.score-help-toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--mist); color: var(--teal-dark);
  font-size: 11px; font-weight: 700; line-height: 1;
  border: 1px solid var(--border); user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.score-help-toggle::-webkit-details-marker { display: none; }
.score-help-toggle::marker { content: ""; }
.score-help-toggle:hover { background: var(--sage-tint); border-color: var(--sage); }
.score-help[open] .score-help-toggle { background: var(--teal); color: #fff; border-color: var(--teal); }
.score-help-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 250px; max-width: 78vw; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(27,42,58,0.14);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.score-help-lead { font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; line-height: 1.45; }
.score-help-scale { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.score-help-scale li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
.score-help-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.score-help-link { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }
.score-help-link:hover { text-decoration: underline; }

/* Labels block */
/* Key on the left, value beside it. This was a column stack, and because a flex column
   stretches its children, every chip rendered at the full 340px column width: a pill
   containing the word "Spiral" spanned the whole column and read as a disabled input.
   The 2026-07-28 label restyle made that worse by turning the key into label-above-input.
   A two-column grid reads as a spec list and matches the Cost table. */
.labels { display: flex; flex-direction: column; gap: 11px; }
.label-group { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 5px 12px; align-items: baseline; }
.label-key { font-size: 13px; color: var(--text-soft); }
.label-group > .chip, .label-group > .chip-set { grid-column: 2; justify-self: start; }
.label-note { grid-column: 2; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
@media (max-width: 420px) {
  .label-group { grid-template-columns: 1fr; gap: 4px; }
  .label-group > .chip, .label-group > .chip-set, .label-note { grid-column: 1; }
}

/* Spec / cost table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.spec-table tr:nth-child(even) { background: var(--mist); }
.spec-table td:first-child { font-weight: 600; color: var(--text-soft); width: 50%; }

/* Affiliate */
.affiliate-btn {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 13px 18px; margin-top: 18px; background: var(--teal); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none; border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.affiliate-btn:hover { background: var(--teal-dark); }
/* Was uppercase with letter-spacing: the only all-caps control on the site, and it was
   the money button. Shouty and generic against everything around it. */
.affiliate-btn-retailer { font-size: 15px; font-weight: 600; }
.affiliate-btn-price { font-weight: 500; opacity: 0.9; font-size: 13px; }
.affiliate-note { font-size: 12px; color: var(--text-soft); margin-top: 8px; font-style: italic; }

/* Owner voice lists */
.voice-list { list-style: none; padding: 0; margin-top: 6px; }
.voice-list li { position: relative; padding: 7px 0 7px 26px; font-size: 15.5px; line-height: 1.5; border-bottom: 1px solid var(--border); }
.voice-list li:last-child { border-bottom: none; }
.voice-list li::before { position: absolute; left: 2px; top: 7px; font-weight: 700; }
.voice-list--praise li::before { content: "+"; color: var(--teal); }
.voice-list--limits li::before { content: "\2013"; color: var(--clay); }

/* Prose */
.prose { font-size: 16px; line-height: 1.65; color: var(--text); }
.prose p { margin-bottom: 14px; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose li { margin-bottom: 6px; }

/* Alternatives / compare links */
.alt-list { list-style: none; padding: 0; margin-top: 8px; }
.alt-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.alt-list li:last-child { border-bottom: none; }
.alt-list a { color: var(--teal); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.alt-list a:hover { text-decoration: underline; }

/* Sourcing note */
.sourcing-note {
  font-size: 12.5px; color: var(--text-soft); border-top: 1px solid var(--border);
  padding-top: 16px; margin-top: 44px; font-style: italic; max-width: 760px;
}

/* ---- Cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 20px; }
@media (max-width: 680px) { .card-grid { grid-template-columns: 1fr; } }
.entry-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: #fff;
  text-decoration: none; display: block; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entry-card:hover { border-color: var(--teal); box-shadow: 0 3px 14px rgba(27,42,58,0.07); }
.entry-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.entry-card-meta { font-size: 13.5px; color: var(--text-soft); margin-bottom: 10px; }
.entry-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.entry-card-excerpt { font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }

/* ---- Category / subject page ---- */
.category-header { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.category-title { font-size: 32px; letter-spacing: -0.01em; margin-bottom: 6px; }
.category-meta { font-size: 15px; color: var(--text-soft); max-width: 640px; }
.no-entries { font-size: 16px; color: var(--text-soft); margin-top: 24px; }

/* ---- Homepage ---- */
/* Hero is two columns from 900px up. The text column keeps its 600px measure; the aside
   takes the 480px that used to sit empty. Below 900px the aside drops under the CTAs. */
.home-hero { padding: 40px 0 36px; margin-bottom: 20px; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .home-hero { grid-template-columns: 1fr; gap: 32px; } }
.home-hero-aside { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.home-aside-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--teal); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.home-aside-list dt { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.home-aside-list dd { font-size: 14.5px; color: var(--text-soft); line-height: 1.55; margin: 4px 0 16px; }
.home-aside-list dd:last-child { margin-bottom: 0; }
.home-aside-list a { color: var(--teal); font-weight: 600; text-underline-offset: 3px; }
.home-title { font-size: 46px; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px; max-width: 720px; }
.home-tagline { font-size: 18px; color: var(--text-soft); max-width: 640px; line-height: 1.55; }
.home-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn-primary, .btn-secondary {
  display: inline-block; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; text-decoration: none;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-secondary { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn-secondary:hover { background: var(--sage-tint); }
.home-section { margin-bottom: 52px; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 680px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
.category-card {
  display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; background: #fff; transition: border-color 0.15s ease;
}
.category-card:hover { border-color: var(--teal); }
.category-card-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.category-card-count { font-size: 13px; color: var(--text-soft); }


/* ---- Comparison page ---- */
.compare-header { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.compare-title { font-size: 34px; letter-spacing: -0.01em; line-height: 1.15; }
.compare-intro { font-size: 16px; color: var(--text-soft); margin-top: 10px; max-width: 680px; }

.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; margin-bottom: 32px; }
.compare-table thead th {
  text-align: left; padding: 12px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink);
  border-bottom: 2px solid var(--teal); width: 34%; vertical-align: bottom; overflow-wrap: anywhere;
}
.compare-table thead th:first-child { width: 32%; }
/* `anywhere` was breaking words mid-syllable once three columns were squeezed onto a
   phone ("adva/nced", "Independ/ence"). `break-word` only breaks a word that cannot fit
   on a line of its own, and the stacked mobile layout below means that never happens. */
.compare-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: break-word; }
.compare-table tbody tr:nth-child(even) { background: var(--mist); }
/* Label case rule (July 2026 audit): UPPERCASE is reserved for section headings
   (.section-header) and the compact card micro-labels (.cscore-name). Attribute and
   field names inside a table or list stay sentence case, so "Rigor" reads the same
   on an entry page, a comparison table, and in the guides. */
.compare-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cell-empty { color: var(--border); }

/* ---- Comparison table on a phone ----
   Three columns cannot work at 360px: each score column got about 110px, which forced the
   attribute names and the scale end words to break mid-word. Below 700px the table stops
   being a table and each attribute becomes a stacked block, with each program's own name
   printed from data-col. Full width per program means nothing has to break. */
@media (max-width: 700px) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: auto; }
  .compare-table { table-layout: auto; }
  .compare-table thead { display: none; }
  .compare-table tbody tr { padding: 14px 0 16px; border-bottom: 1px solid var(--border); }
  .compare-table tbody tr:nth-child(even) { background: transparent; }
  .compare-table td { border-bottom: 0; padding: 0; }
  .compare-table td.compare-label { font-size: 15px; margin-bottom: 10px; }
  .compare-table td[data-col] { padding: 8px 0 0 12px; border-left: 2px solid var(--mist); margin-top: 8px; }
  .compare-table td[data-col]::before {
    content: attr(data-col); display: block;
    font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 5px;
  }
  /* Full-bleed track now that a program owns the whole row width. */
  .compare-table .scale--compact .scale-mark { box-shadow: 0 0 0 2.5px var(--paper); }
}

/* ---- "Where they match" ----
   Deliberately small and dense. On the average pair this covers 4.9 of ~11 rows, and
   before the 2026-07-30 rebuild those rows were full-width table rows showing the same
   value twice. Stating them still matters (both being spiral is a finding) but they are
   reference, not comparison, so they read as a compact strip below the differences. */
.compare-same {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.compare-same li {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: 20px; background: var(--mist);
  font-size: 13.5px;
}
.compare-same-key { font-weight: 600; color: var(--ink); }
.compare-same-val { color: var(--text-soft); }

/* ---- Owner voice, side by side ----
   The page's substance. Same voice-list styling as the entry pages so a reader who has
   seen one recognises the other. */
.compare-voice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
@media (max-width: 680px) { .compare-voice { grid-template-columns: 1fr; gap: 20px; } }
.compare-voice-block { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.compare-voice-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.25;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.compare-voice-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft); margin: 0 0 8px;
}
.compare-voice-block .voice-list { margin-bottom: 18px; }
.compare-voice-block .voice-list:last-child { margin-bottom: 0; }
.compare-table--cost { margin-bottom: 32px; }

.compare-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 680px) { .compare-verdict { grid-template-columns: 1fr; } }
.compare-verdict-block { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.compare-verdict-block .section-header { margin-top: 0; }
.compare-verdict-block .prose { flex: 1 1 auto; margin-bottom: 18px; }

.entry-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto;
  padding: 11px 16px; border: 1.5px solid var(--teal); border-radius: var(--radius-sm);
  color: var(--teal); font-size: 14px; font-weight: 700; text-decoration: none; text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.entry-link-btn:hover { background: var(--teal); color: #fff; }

/* ---- Guides ---- */
.guide { max-width: 720px; }
.guide-title { font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 10px; }
.guide-subtitle { font-size: 18px; color: var(--text-soft); margin-bottom: 28px; line-height: 1.5; }
.guide-body { font-size: 17px; line-height: 1.72; }
.guide-body h2 { font-size: 24px; margin-top: 38px; margin-bottom: 12px; }
.guide-body h3 { font-size: 19px; margin-top: 26px; margin-bottom: 8px; }
.guide-body p { margin-bottom: 16px; }
.guide-body ul, .guide-body ol { margin-bottom: 16px; padding-left: 22px; }
.guide-body li { margin-bottom: 6px; }
.guide-body a { color: var(--teal); text-decoration: underline; }
.guide-body blockquote { border-left: 3px solid var(--teal); background: var(--mist); padding: 16px 20px; margin: 24px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.guide-body blockquote p:last-child { margin-bottom: 0; }

/* ---- Chip filters (multi-select, all values visible) ----
   One row per attribute: uppercase label, then pill toggles. Selected pills fill
   teal. Groups over the cap collapse behind "+N more" (see .cf-row--open). */
.cf-filters { margin: 18px 0 0; }
.cf-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 16px;
  align-items: start; padding: 9px 0; border-top: 1px solid var(--border);
}
.cf-row:first-child { border-top: none; }
.cf-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft); padding-top: 7px;
}
.cf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cf-chip {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; line-height: 1.5;
  padding: 5px 13px; border-radius: 20px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.cf-chip:hover { border-color: var(--sage); background: var(--mist); }
.cf-chip.is-on { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--paper); }
.cf-chip.is-on:hover { background: var(--teal); border-color: var(--teal); }
.cf-more { color: var(--teal-dark); border-style: dashed; }
/* Overflow chips stay hidden until the group is expanded */
.cf-chip--extra { display: none; }
.cf-row--open .cf-chip--extra { display: inline-block; }
.cf-clear {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--teal-dark);
  background: none; border: none; cursor: pointer; text-decoration: underline;
  align-self: center; padding: 0;
}
@media (max-width: 680px) {
  .cf-row { grid-template-columns: 1fr; gap: 7px; padding: 11px 0; }
  .cf-label { padding-top: 0; }
  .cf-chip { font-size: 14px; padding: 7px 14px; }
}

/* ---- Feedback form ---- */
.fb-wrap { max-width: 640px; margin: 0 auto; }
.fb-form { margin-top: 8px; }
.fb-field { margin-bottom: 20px; }
.fb-field label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.fb-opt { font-weight: 500; font-size: 13px; color: var(--text-soft); }
.fb-field input[type="text"], .fb-field input[type="email"], .fb-field select, .fb-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff;
}
.fb-field textarea { resize: vertical; line-height: 1.55; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.fb-help { font-size: 13.5px; color: var(--text-soft); margin-top: 6px; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Honeypot: hidden from people, still reachable by bots that fill everything */
.fb-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-note {
  font-size: 14px; color: var(--text-soft); background: var(--mist);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
}
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fb-actions button[disabled] { opacity: 0.6; cursor: default; }
.fb-status { font-size: 14px; color: var(--text-soft); }
.fb-done {
  background: var(--sage-tint); border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px;
}
.fb-done:focus { outline: none; }
.fb-done-title { font-size: 22px; margin-bottom: 8px; }
.fb-done p { font-size: 15.5px; color: var(--text-soft); margin-bottom: 8px; }
.fb-done p:last-child { margin-bottom: 0; }
/* Quiet link at the end of every entry page */
.entry-correction { font-size: 13.5px; color: var(--text-soft); margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 560px) {
  .fb-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Find Your Fit quiz ----
   One question per screen. Options are plain buttons so they work with keyboard and
   screen readers without extra wiring. */
/* The whole Find Your Fit page shares one measure. The quiz used to be centred at 620px
   while the header ran the full container, which left two competing left edges. */
.ff-page { max-width: 660px; }
.ff { max-width: 620px; margin: 6px 0 0; }
.guide-group { margin-bottom: 34px; }
.guide-group-blurb { font-size: 14.5px; color: var(--text-soft); margin: -6px 0 14px; }
.guide-group--single .card-grid { grid-template-columns: 1fr; }
.ff-progress { display: flex; gap: 5px; margin-bottom: 22px; }
.ff-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.ff-bar.is-done { background: var(--teal-dark); }
.ff-bar.is-now { background: var(--sage); }
.ff-count {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft); margin-bottom: 8px;
}
.ff-q { font-size: 26px; line-height: 1.25; margin-bottom: 6px; }
.ff-sub { font-size: 15px; color: var(--text-soft); margin-bottom: 20px; }
.ff-opt {
  display: block; width: 100%; text-align: left; font-family: var(--font-body);
  font-size: 16px; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 14px 17px;
  margin-bottom: 9px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
/* Bare-label questions ("Math", "Reading") wrap into a chip grid. One-word options in
   620px-wide full-width buttons read as a form with seven empty fields. Options that
   carry a description keep the stack, because the description needs the line. */
.ff-opts--compact { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-opts--compact .ff-opt { display: inline-block; width: auto; margin-bottom: 0; padding: 11px 20px; }
.ff-opt:hover { border-color: var(--sage); background: var(--mist); }
.ff-opt small { display: block; font-weight: 400; font-size: 13.5px; color: var(--text-soft); margin-top: 3px; }
.ff-nav { margin-top: 14px; }
.ff-link {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--teal-dark);
  background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;
}
.ff-link:hover { color: var(--teal); }

/* Results */
.ff-card {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: 15px 17px; margin-bottom: 11px; text-decoration: none; color: inherit;
}
.ff-card:hover { border-color: var(--sage); }
.ff-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ff-card-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.ff-fit {
  flex-shrink: 0; background: var(--sage-tint); color: var(--teal-dark);
  font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.ff-card-meta { font-size: 13.5px; color: var(--text-soft); margin: 6px 0 9px; }
/* Results cards show the same score scale as entry and comparison pages, capped at the
   three closest matches so a card stays scannable. */
.ff-hits { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ff-scale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.ff-scale-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ff-scale-head .score-value { font-size: 12.5px; }
.ff-card .scale-mark { box-shadow: 0 0 0 3px #fff; }
.ff-card-go { font-size: 13.5px; font-weight: 600; color: var(--teal); }
.ff-more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.ff-foot { font-size: 13.5px; color: var(--text-soft); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 680px) {
  .ff-q { font-size: 22px; }
  .ff-more .btn-primary { width: 100%; text-align: center; }
}

/* ---- Results bar ----
   The seam between filtering and results: match count, clear, and sort. Sits below
   every filter control and directly above the card grid. */
.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 18px 0 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.filter-count { font-size: 15px; color: var(--ink); font-weight: 700; margin: 0 !important; }
.results-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.results-sort label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.results-sort select {
  font-family: var(--font-body); font-size: 14.5px; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink); cursor: pointer;
}
.no-matches { text-align: center; padding: 26px 0 8px; }
.no-matches .no-entries { margin: 0 0 14px; }
.no-matches .btn-secondary { display: inline-block; }
@media (max-width: 680px) {
  .results-sort { margin-left: 0; flex-basis: 100%; }
  .results-sort select { flex: 1; min-width: 0; }
}

/* ---- Search box ---- */
.subject-search { margin: 22px 0 0; }
.subject-search input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 12px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.subject-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.subject-search input::placeholder { color: var(--text-soft); }
/* pull the filter bar snug under the search box */
.subject-search + .cf-filters { margin-top: 14px; }

/* ---- Filter by score panel ---- */
.score-filter { border-top: 1px solid var(--border); margin-bottom: 0; }
.score-filter summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 15px 0; font-size: 14px; font-weight: 700; color: var(--teal-dark);
}
.score-filter summary::-webkit-details-marker { display: none; }
.score-filter .sf-chev { font-size: 11px; transition: transform 0.15s ease; }
.score-filter[open] .sf-chev { transform: rotate(90deg); }
/* Badge reports active score ranges while the panel is closed */
.score-filter .sf-badge {
  background: var(--teal-dark); color: var(--paper); border-radius: 20px;
  padding: 1px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  text-transform: none;
}
.sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px; padding: 4px 0 22px; }
.sf-item .sf-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 9px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sf-item .sf-cur { font-size: 11.5px; font-weight: 600; color: var(--teal-dark); text-align: right; }
.range-dual { position: relative; height: 26px; }
.range-track { position: absolute; top: 11px; left: 0; width: 100%; height: 4px; background: var(--border); border-radius: 2px; }
.range-fill { position: absolute; top: 11px; height: 4px; background: var(--teal); border-radius: 2px; }
.range-dual input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range-dual input[type=range]::-webkit-slider-runnable-track { background: none; height: 26px; }
.range-dual input[type=range]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; height: 17px; width: 17px; border-radius: 50%;
  background: var(--teal); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(27,42,58,0.28); cursor: pointer;
}
.range-dual input[type=range]::-moz-range-track { background: none; height: 26px; }
.range-dual input[type=range]::-moz-range-thumb {
  pointer-events: auto; height: 17px; width: 17px; border-radius: 50%;
  background: var(--teal); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(27,42,58,0.28); cursor: pointer;
}
.range-dual input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-soft); margin-top: 2px; }

/* ---- Number-badge score block on cards ---- */
.card-scores {
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--mist);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 12px;
}
/* space-between keeps the number badges aligned across a row when a longer
   label ("Parent involvement") wraps to two lines at narrow widths. */
.cscore { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-content: space-between; }
.cscore-name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-soft); line-height: 1.25; }
.cscore-body { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cscore-val {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 7px; background: var(--sage-tint); color: var(--teal-dark);
  font-size: 13.5px; font-weight: 700;
}
.cscore-anchor { font-size: 11.5px; color: var(--text-soft); line-height: 1.25; }
@media (max-width: 400px) { .card-scores { grid-template-columns: repeat(2, 1fr); } }

/* ---- Mobile nav ---- */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 8px; background: none; border: none; cursor: pointer; }
.nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 680px) {
  .nav-toggle { display: flex; }
  .site-header .container { position: relative; flex-wrap: wrap; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 10px; }
  .site-nav.open { display: flex; }
  .site-nav a { margin-left: 0; padding: 13px 4px; border-top: 1px solid var(--border); border-bottom: none; font-size: 16px; }
  /* Dropdown flattens into an always-expanded list inside the hamburger */
  .nav-dropdown { display: block; position: static; margin-left: 0; width: 100%; order: -1; }
  .nav-dropdown-toggle { width: 100%; justify-content: flex-start; padding: 13px 4px; border-top: 1px solid var(--border); font-size: 16px; cursor: default; }
  .nav-dropdown-menu { position: static; display: block; border: none; box-shadow: none; border-radius: 0; padding: 0; min-width: 0; background: none; }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { padding: 12px 4px 12px 22px; border-top: 1px solid var(--border); border-radius: 0; }
  .nav-caret { display: none; }
  .home-title { font-size: 34px; }
  .entry-title, .compare-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   v1.1 Polish pass - editorial detail, brand-tying, tactile
   ============================================================ */

/* Thin two-tone brand rule across the very top of every page */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0 78%, var(--clay) 78% 100%);
}

/* Optical sizing for the variable display face */
h1, h2, h3, .site-logo, .entry-card-title, .category-card-name {
  font-optical-sizing: auto;
}

/* Section headers get a short clay "kicker" under the label - editorial cue */
.section-header {
  position: relative;
}
.section-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 34px;
  height: 2px;
  background: var(--clay);
}

/* Cards: a teal top accent that reveals on hover, plus a small lift */
.entry-card, .category-card {
  position: relative;
  overflow: hidden;
}
.entry-card::before, .category-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.entry-card:hover::before, .category-card:hover::before {
  transform: scaleX(1);
}
.entry-card:hover, .category-card:hover {
  transform: translateY(-2px);
}

/* Chips: a hairline for crisper definition */
.chip {
  box-shadow: inset 0 0 0 1px rgba(27, 42, 58, 0.06);
}
.chip--faith {
  box-shadow: none;
}
.chip--stance {
  box-shadow: none;
}

/* Editorial underlines on body links */
.prose a, .guide-body a, .alt-list a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* whofor: hanging open-quote flourish in Fraunces */
.whofor { position: relative; }
.whofor-text { position: relative; }

/* 404 */
.notfound {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 0 48px;
}
.notfound-code {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 84px;
  line-height: 1;
  color: var(--sage);
}
.notfound-title {
  font-size: 32px;
  margin: 10px 0 12px;
}
.notfound-text {
  font-size: 17px;
  color: var(--text-soft);
  margin-bottom: 26px;
}
.notfound .home-cta {
  justify-content: center;
}

/* ============================================================
   v1.2 - buy box (multi-retailer), entry image, footer links
   ============================================================ */

/* Where-to-buy: stack the buttons, first primary, rest outline */
.buy-box { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.buy-box .affiliate-btn { margin-top: 0; }
.affiliate-btn--alt {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
}
.affiliate-btn--alt:hover { background: var(--sage-tint); }
.affiliate-btn--alt .affiliate-btn-retailer { color: var(--teal); }
.buy-box .affiliate-note { margin-top: 4px; }

/* Optional product / materials image on an entry */
.entry-figure {
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.entry-figure img { display: block; width: 100%; height: auto; }

/* Footer utility links */
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.footer-links a { color: var(--text-soft); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--teal); text-decoration: underline; }

/* ============================================================
   v1.3 - hero intro copy + responsive logo (mobile header fix)
   ============================================================ */

/* Hero: warm intro paragraphs replacing the single tagline */
.home-cta-note { font-size: 15px; color: var(--text-soft); margin-top: 16px; max-width: 600px; }
.home-cta-note a { color: var(--teal); font-weight: 600; text-underline-offset: 3px; }
/* The hero buttons carry the weight, so give them a little more presence than the
   404 page's pair, which reuses the same .home-cta class. */
.home-hero .home-cta .btn-primary, .home-hero .home-cta .btn-secondary { font-size: 16px; padding: 13px 24px; }
@media (max-width: 560px) {
  .home-hero .home-cta { flex-direction: column; align-items: stretch; }
  .home-hero .home-cta a { text-align: center; }
}

.home-intro { max-width: 600px; }
.home-intro p { font-size: 18px; line-height: 1.6; color: var(--text-soft); margin-bottom: 14px; }
.home-intro p:last-child { margin-bottom: 0; }
.home-intro a { color: var(--teal); font-weight: 600; text-underline-offset: 3px; }

/* Responsive logo: full wordmark on desktop, HQ monogram on phones.
   The lockup is ~11:1, too wide to sit beside the hamburger on a phone,
   which is what pushed the toggle to a second line. */
.site-logo .logo-mark { display: none; }
@media (max-width: 560px) {
  .site-logo .logo-full { display: none; }
  .site-logo .logo-mark { display: block; height: 36px; width: 36px; }
  .site-header .container { flex-wrap: nowrap; }
}

/* ============================================================
   v1.4 - scale strip (used in the "How Our Scoring Works" guide)
   ============================================================ */
.scale-strip { display: flex; gap: 10px; margin: 16px 0 10px; }
.scale-step { flex: 1; text-align: center; }
.scale-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; margin-bottom: 8px;
}
.scale-word { display: block; font-size: 12.5px; color: var(--text-soft); line-height: 1.35; }
@media (max-width: 560px) {
  .scale-strip { flex-direction: column; gap: 6px; margin: 12px 0; }
  .scale-step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .scale-num { margin-bottom: 0; flex-shrink: 0; }
  .scale-word { font-size: 15px; }
}

/* ---- "Where programs land on this scale" ({{< programs >}} on the attribute guides) ----
   Deliberately borrows .scale-num's teal circle so the block reads as the same system as
   the {{< scale >}} strip above it rather than a second component. One row per occupied
   level: number and anchor word on the left, linked program names on the right. Levels
   with nothing in them are not rendered at all (see the shortcode), so the row count
   varies by attribute. */
.at-level { margin: 22px 0 8px; }
.at-level-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft); margin: 0 0 4px;
}
.guide-body .at-level-title { margin-top: 0; }
.at-level-list { margin: 0; }
.at-level-row {
  display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 4px 16px;
  align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border);
}
.at-level-key { display: flex; align-items: center; gap: 9px; margin: 0; }
.at-level-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
}
.at-level-word { font-size: 14px; color: var(--text-soft); line-height: 1.35; }
.at-level-names { margin: 0; font-size: 15.5px; line-height: 1.6; }
.guide-body .at-level-names a { text-decoration: none; }
.guide-body .at-level-names a:hover { text-decoration: underline; }
.at-level-more { color: var(--text-soft); }
.at-level-none { color: var(--text-soft); font-style: italic; }
.at-level-sep { color: var(--border); }
@media (max-width: 560px) {
  .at-level-row { grid-template-columns: 1fr; gap: 5px; padding: 12px 0; }
  .at-level-names { font-size: 16px; }
}