/* Online Schools Compared: design B, the consumer data report (design/home-v1-prompts.md, picked 2 Nov 2026).
   White page, black text, thin black rules, one signal orange for the costs schools add on. Archivo heavy for headlines,
   Hanken Grotesk for text. The same palette in light and dark mode, like a printed report. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root, :root:is(*) {
  --bg: #ffffff;
  --text: #111111;
  --muted: #595959;
  --line: #d9d9d9;
  --rule: #111111;
  --card: #f4f4f2;
  --link: #111111;
  --orange: #ff5a1f;      /* bars, keys, the signal colour (never text on white) */
  --orange-text: #b3360c; /* orange for text on white: 5.6:1 */
  --yes: #111111;
  --head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #ffffff; --text: #111111; --muted: #595959; --line: #d9d9d9; --card: #f4f4f2; --link: #111111;
    color-scheme: light;
  }
}

body { font-family: var(--body); font-size: 17px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--head); font-weight: 850; letter-spacing: -0.035em; line-height: 1.02; }
h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--orange-text); }

/* ---------- header ---------- */
.site-header { border-bottom: 3px solid var(--rule); }
.brand { gap: 10px; font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; }
.brand svg { height: 34px; }
.logo-mark .lm-frame { fill: none; stroke: currentColor; stroke-width: 3; }
.logo-mark .lm-bar { fill: currentColor; }
.logo-mark .lm-dot { fill: var(--orange); }
.wordmark { display: inline-flex; flex-direction: column; line-height: 1.02; font-size: 1.02rem; }
.main-nav a { font-weight: 600; }
.main-nav a[aria-current="page"], .main-nav a:hover { color: var(--text); text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
@media (max-width: 760px) {
  .menu-btn { border: 0; padding: 6px 0 6px 28px; font-weight: 700; position: relative; }
  .menu-btn::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 14px; margin-top: -7px;
    border-top: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; box-sizing: border-box; }
  .menu-btn::after { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 2.5px; margin-top: -1.25px; background: currentColor; }
}

/* ---------- article pages ---------- */
.crumbs a { color: var(--muted); }
.page-head .lede, .lede { font-size: 1.15rem; }
.byline { color: var(--muted); }
th { background: transparent; }
table { font-size: 0.95rem; }
th, td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.5rem; }
thead th { border-bottom: 2px solid var(--rule); font-size: 0.8rem; color: var(--muted); font-weight: 700; }
td.num strong { font-family: var(--head); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border-top: 3px solid var(--rule); }
table caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding: 0.6rem 0; caption-side: bottom; }
.row-label, .vat, .added, td .small, th .small { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.added { color: var(--orange-text); font-weight: 600; }
p.small, .small { font-size: 0.85rem; color: var(--muted); }
.quote { font-size: 0.85rem; }
.acc { white-space: nowrap; font-size: 0.85rem; font-weight: 700; }
.acc.yes { color: var(--text); }
.acc.no { color: var(--muted); font-weight: 500; }
.checked-line { color: var(--muted); font-size: 0.9rem; }
.faqs details { border-bottom: 1px solid var(--line); }
.faqs summary { font-family: var(--head); font-weight: 750; letter-spacing: -0.01em; }

dl.facts { border-top: 3px solid var(--rule); margin: 1rem 0; }
dl.facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
dl.facts dt { font-weight: 700; }
dl.facts dd { margin: 0; }
@media (max-width: 560px) { dl.facts > div { grid-template-columns: 1fr; gap: 0.2rem; } }

.verdicts { padding-left: 1.1em; }
.verdicts li { margin-bottom: 0.4rem; }
.verdicts li::marker { color: var(--orange); }
.sources { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.3rem; }
.sources ol { font-size: 0.85rem; color: var(--muted); padding-left: 1.2em; }
.related ul, .guide-list, .pair-list { list-style: none; padding: 0; border-top: 3px solid var(--rule); }
.related li, .guide-list li, .pair-list li { border-bottom: 1px solid var(--line); }
.related a, .guide-list a, .pair-list a { display: block; padding: 0.7rem 0; font-weight: 650; text-decoration: none; }
.related a:hover, .guide-list a:hover, .pair-list a:hover { text-decoration: underline; text-decoration-color: var(--orange); }

/* ---------- the stage switch ---------- */
.stage-switch { display: grid; grid-template-columns: repeat(4, auto); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); margin: 1.5rem 0 1.25rem; }
.stage-switch a, .stage-switch span { padding: 0.85rem 0.6rem; text-align: center; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--text); border-left: 1px solid var(--line); }
.stage-switch > :first-child { border-left: 0; }
.stage-switch [aria-current] { box-shadow: inset 0 -4px 0 var(--orange); font-weight: 800; }
.stage-switch a:hover { background: var(--card); }

/* ---------- the cost bars ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.85rem; font-weight: 700; margin: 0.8rem 0; }
.legend .key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.35rem; vertical-align: -0.05rem; }
.legend .key.fee { background: var(--text); }
.legend .key.added { background: var(--orange); margin-left: 0; }
ol.bars { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--rule); }
ol.bars li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.7rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.mark { width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--text); display: grid; place-items: center; font-size: 0.8rem; line-height: 1; margin-top: 0.3rem; font-weight: 800; }
.mark.no { border-color: #8a8a8a; color: #6b6b6b; font-size: 0.7rem; }
.bar-name { font-family: var(--head); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.025em; text-decoration: none; color: var(--text); }
.bar-name:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.bar-meta { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.15rem 0 0.6rem; }
.bar-meta b { color: var(--text); font-weight: 700; }
.bar-line { display: flex; align-items: center; gap: 0.5rem; }
.bar-track { display: flex; flex: 0 1 68%; height: 1.75rem; border-bottom: 1px solid #999; }
.bar-fee { background: var(--text); color: #ffffff; display: flex; align-items: center; min-width: 4.4rem; }
.bar-fee span { padding: 0 0.45rem; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-added { background: var(--orange); min-width: 4px; }
.bar-total { font-family: var(--head); font-weight: 850; font-size: 1.45rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-note { display: block; margin-top: 0.45rem; font-size: 0.85rem; font-weight: 700; color: var(--orange-text); }

/* ---------- home ---------- */
.home section { padding-top: 0.5rem; }
.home .hero h1 { margin: 2.2rem 0 1.2rem; }
.home .hero .lede { font-size: 1.1rem; max-width: 36rem; }
.home .kicker { font-size: 0.85rem; font-weight: 700; color: var(--muted); margin: 0; }
.home .chart h2 { margin-top: 0.2rem; }
.chart-intro { color: var(--muted); font-size: 0.95rem; max-width: 34rem; }
.more { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 1.1rem 0; font-weight: 800; }
.more a { text-decoration-thickness: 2px; }
.more span { color: var(--orange); font-size: 1.4rem; line-height: 1; }
.home .exams, .home .versus, .home .accred, .home .guides { border-top: 4px solid var(--rule); margin-top: 1rem; padding-bottom: 1rem; }
.home .exams h2 em { display: block; font-style: normal; color: var(--orange-text); }
.big-figure { font-family: var(--head); font-weight: 850; font-size: 2.2rem; letter-spacing: -0.03em; margin: 0.6rem 0 0; }
.big-figure a { color: var(--orange-text); text-decoration: none; }
.big-figure span { font-family: var(--body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.face-off { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); margin: 1rem 0 0; }
.face-off > div { padding: 1rem 0.9rem 1.1rem 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }
.face-off > div + div { border-left: 1px solid var(--line); padding-left: 0.9rem; }
.face-off .who { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.face-off strong { font-family: var(--head); font-weight: 900; font-size: clamp(2.1rem, 9vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ratio { font-family: var(--head); font-weight: 900; font-size: 4rem; letter-spacing: -0.05em; line-height: 1; margin: 1rem 0 0.3rem; }
.ratio i { font-style: normal; color: var(--orange); margin: 0 0.1em; }
.ratio b + i + b { color: var(--orange); }
.ratio-caption { font-size: 0.85rem; font-weight: 700; margin: 0; }
.home .guides ol { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--line); }
.home .guides li a { display: grid; grid-template-columns: 2.4rem 1fr 1.4rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 700; }
.home .guides .n { color: var(--orange-text); font-size: 0.85rem; font-weight: 800; padding-top: 0.1rem; }
.home .guides .arrow { color: #777; text-align: right; }
.home .guides li a:hover .t { text-decoration: underline; text-decoration-color: var(--orange); }
.home-signup { background: #111111; color: #ffffff; margin-top: 2rem; border-bottom: 6px solid var(--orange); }
.home-signup .signup-block { background: transparent; border: 0; padding: 2rem 0 2.2rem; margin: 0; }
.home-signup h2 { color: #ffffff; margin-top: 0; }
.home-signup p, .home-signup label, .home-signup .signup-note { color: #ffffff; }
.home-signup a { color: #ffffff; }

/* ---------- sign-up anywhere ---------- */
.signup-block { border-top: 4px solid var(--rule); padding: 1.2rem 0 0.5rem; margin: 2.5rem 0 1rem; }
.signup-block h2 { margin-top: 0.3rem; }
.signup input[type="email"] { border-radius: 0; border: 2px solid var(--text); background: #ffffff; color: #111111; font: inherit; }
.home-signup .signup input[type="email"] { border-color: #ffffff; }
.signup button { border-radius: 0; background: var(--orange); color: #111111; font-family: var(--head); font-weight: 800; font-size: 1.05rem; border: 0; }
.signup button:hover { background: #ff7a4a; color: #111111; }

/* ---------- calculator ---------- */
.calc { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.calc fieldset { border: 0; border-top: 3px solid var(--rule); padding: 0.8rem 0 0; margin: 0; }
.calc legend { font-family: var(--head); font-weight: 800; font-size: 1.15rem; padding: 0 0.4rem 0 0; }
.field { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 600; }
.field input, .field select { font: inherit; font-weight: 400; padding: 0.55rem; border: 1.5px solid var(--text); border-radius: 0; background: #ffffff; color: #111111; width: 100%; }
.calc-result { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--rule); border-bottom: 3px solid var(--rule); margin: 1.5rem 0; }
.calc-result .side { padding: 1rem 0.9rem 1rem 0; display: grid; gap: 0.3rem; align-content: start; }
.calc-result .side + .side { border-left: 1px solid var(--line); padding-left: 0.9rem; }
.calc-result strong { font-family: var(--head); font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-result .label { font-weight: 700; font-size: 0.9rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 0; }

/* ---------- contents box and odds and ends ---------- */
.toc { border: 0; border-top: 3px solid var(--rule); border-radius: 0; padding: 0.8rem 0 0.4rem; }
.toc-title { font-family: var(--head); font-weight: 800; }
.unpriced { font-size: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0.8rem 0; margin: 0; }
td.quoted { font-size: 0.88rem; color: var(--muted); }
.home .wrap { max-width: 720px; }