:root {
  --navy: #13233f;
  --navy-2: #1d3257;
  --ink: #1b2330;
  --muted: #5b6676;
  --line: #e3e7ee;
  --bg: #f7f8fb;
  --card: #ffffff;
  --surface: #ffffff;
  --accent: #f28c28;
  --accent-dark: #d9731a;
  --ok: #1f8a4c;
  --ok-bg: #e8f6ee;
  --bad: #c0392b;
  --bad-bg: #fcebea;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(19, 35, 63, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--navy-2); }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

/* Header */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.logo {
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo span { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a { color: #d8e0ee; text-decoration: none; font-size: 15px; }
.nav a:hover { color: #fff; }
.lang {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 14px;
}
.nav .btn.small { white-space: nowrap; }
.nav a.btn { color: var(--navy); }   /* .nav a would otherwise repaint the CTA */
/* 820, not 760: the full Spanish menu needs 798px of window and used to come
   back at 761, so an iPad held upright scrolled sideways on every Spanish page.
   The breakpoint is set by the wider language, not by the tidier number. */
@media (max-width: 820px) {
  .nav { gap: 10px; }
  .nav .nav-link { display: none; }
}
/* Below this the brand, the language pill and the call to action cannot share a
   line, and the page scrolled sideways instead - on a 360px Android in English
   as well as Spanish, where "Prueba gratis" is half again as wide as "Free
   test". The pill is what gives way: the banner offers the other language to
   anyone whose browser asks for it, and every footer carries the link, while
   the button is the only thing in the header that earns anything. */
@media (max-width: 430px) {
  .site-header .wrap { gap: 12px; }
  /* Only where the header also carries a button. The free test, the sign-in and
     the restore pages put nothing beside the pill, so they have room for it -
     and no footer to fall back on, which a blanket rule took away from exactly
     the Spanish speaker it was meant to serve. A browser too old for :has()
     drops this rule and keeps the pill, which is the safe way to be wrong. */
  .nav:has(.btn) .lang { display: none; }
}
@media (max-width: 400px) {
  .logo { font-size: 15px; }
  .nav .btn.small { padding: 7px 11px; font-size: 14px; }
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--accent);
  /* Navy, not white: white on this orange is 2.45:1, well under the 4.5:1 a
     phone screen in California sunlight needs. Navy gives 6.39:1, and 4.79:1
     on the darker hover shade. */
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--accent-dark); }
.btn.small { padding: 8px 16px; font-size: 15px; }
.btn.ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--line);
}
.btn.ghost:hover { border-color: var(--navy-2); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding-block: 56px 72px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  background: rgba(242, 140, 40, 0.15);
  color: #ffc58f;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero p.lead { font-size: 19px; color: #d8e0ee; margin: 0 0 28px; }
.hero .note { font-size: 14px; color: #aebbd2; margin-top: 12px; }
.mock {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  padding: 22px;
}
.mock .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.mock .q { font-weight: 700; margin-bottom: 14px; }
.mock .opt {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 8px;
  font-size: 15px;
}
.mock .opt.right { border-color: var(--ok); background: var(--ok-bg); }
.mock .why { font-size: 14px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; margin-top: 12px; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/* Sections */
section { padding-block: 64px; }
section h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
section .sub { color: var(--muted); margin: 0 0 36px; max-width: 680px; }
.alt { background: var(--surface); border-block: 1px solid var(--line); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) {
  .grid3, .grid2 { grid-template-columns: 1fr; }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); }
.card .big { font-size: 34px; font-weight: 800; color: var(--accent-dark); line-height: 1; margin-bottom: 10px; }

/* Exam sections */
.weights { display: grid; gap: 12px; }
.weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 4px 12px;
  align-items: center;
}
.weight .name { font-weight: 600; }
.weight .pct { text-align: right; font-weight: 700; color: var(--navy-2); }
.weight .bar { grid-column: 1 / -1; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.weight .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.src { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* Steps */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 60px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}

/* Pricing */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--accent); }
.badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--accent);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
/* .card p mutes its text; the price is the one line in the card that must not be. */
.price, .card p.price { font-size: 44px; font-weight: 800; margin: 8px 0 0; color: var(--ink); }
.price small { font-size: 16px; color: var(--muted); font-weight: 500; }
.price-card ul { padding-left: 20px; margin: 16px 0 24px; color: var(--ink); }
.price-card li { margin-bottom: 6px; }
.price-card .btn { margin-top: auto; text-align: center; }
.guarantee {
  margin-top: 24px;
  background: var(--ok-bg);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: #145c33;
}

/* The box sets its own text color in both themes; the link follows it rather
   than the page's link color, which is tuned for a different background. */
.guarantee a { color: inherit; }

/* FAQ */
details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
summary { font-weight: 700; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--muted); }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; text-align: center; }
.cta-band p { color: #d8e0ee; }

/* Footer */
footer {
  padding-block: 40px 28px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
footer .wrap { display: grid; gap: 26px; }
/* The one-line footer of pages that carry no columns (the free test). */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: -10px; }
.foot-links a { color: inherit; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.foot-cols h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink); margin: 0 0 10px;
}
.foot-cols a { display: block; margin-bottom: 7px; text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-base { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
/* Two columns on a phone keeps the guide list scannable without a long scroll. */
@media (max-width: 700px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .foot-cols { grid-template-columns: 1fr; } }

/* Quiz */
.quiz-page { padding-block: 32px 64px; }
.quiz {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
@media (max-width: 520px) {
  .quiz { padding: 20px 16px; }
}
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.qmeta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
/* Spelled out for .app-main too: ".app-main h1" outranks a bare ".qtext", so in
   the paid app every question came out at 26px with a 42px line, and on a phone
   a long one pushed all four answers off the screen. The free test was fine. */
.qtext, .app-main h1.qtext { font-size: 20px; line-height: 1.4; font-weight: 700; margin: 0 0 18px; }
.choices { display: grid; gap: 10px; }
.choice {
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 12px;
}
.choice:hover:not([disabled]) { border-color: var(--navy-2); }
.choice .letter { font-weight: 800; color: var(--navy-2); min-width: 18px; }
.choice.selected { border-color: var(--navy-2); background: #eef2f9; }
.choice.correct { border-color: var(--ok); background: var(--ok-bg); }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.choice[disabled] { cursor: default; }
.feedback { margin-top: 18px; border-radius: 12px; padding: 14px 16px; }
.feedback.ok { background: var(--ok-bg); }
.feedback.no { background: var(--bad-bg); }
.feedback strong { display: block; margin-bottom: 4px; }
.feedback .cite { font-size: 13px; color: var(--muted); margin-top: 8px; }
.quiz-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* The toggle sits at the far left of the action row, away from "Check answer",
   so a thumb heading for the main button never opens the calculator instead. */
.calc-toggle { margin-right: auto; }
.calc-holder:empty { display: none; }
.calc {
  margin: 18px 0 0 auto;
  max-width: 280px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.calc-screen {
  display: block;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  overflow: hidden;
}
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-key {
  min-height: 46px;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.calc-key:hover { border-color: var(--navy-2); }
.calc-key.fn { color: var(--muted); }
.calc-key.eq { grid-column: span 2; background: var(--accent); border-color: var(--accent); color: var(--navy); }
@media (max-width: 520px) { .calc { max-width: none; } }
/* The mock exam row holds four buttons; on a narrow phone in Spanish they
   squeezed "Entregar examen" onto two lines. The toggle takes its own line. */
@media (max-width: 400px) {
  .quiz-actions { flex-wrap: wrap; }
  .calc-toggle { flex-basis: 100%; margin-right: 0; }
}
.score-big { font-size: 64px; font-weight: 800; line-height: 1; margin: 8px 0; }
.verdict { font-size: 18px; margin-bottom: 24px; }
.result-row { margin-bottom: 14px; }
.result-row .top { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.result-row .bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.result-row .bar i { display: block; height: 100%; border-radius: 999px; }
.upsell { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* App dashboard */
.app-main { padding-block: 32px 64px; }
.app-main h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; }
.app-main h2 { font-size: 22px; margin: 32px 0 12px; }
/* The pass guarantee, on the dashboard in the last month of a pass and on the
   screen an ended pass lands on. */
.guarantee-card { margin-top: 24px; border-left: 4px solid var(--accent); }
.guarantee-card p + p { margin-top: 8px; }
.guarantee-card .quiz-actions { justify-content: flex-start; margin-top: 14px; }
.modes { margin-top: 24px; }
.modes + .grid3 { margin-top: 24px; }
.card.mode { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 14px; transition: border-color .15s, transform .15s; }
.card.mode:hover { border-color: var(--navy-2); transform: translateY(-1px); }
.card.mode { align-items: flex-start; }
.card.mode h3 { margin: 0; }
.card.mode p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.mode-icon { color: var(--accent); line-height: 0; flex: 0 0 auto; }
.mode-icon svg { width: 26px; height: 26px; display: block; }

/* How many questions a practice round serves. */
.round-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.round-sizes { display: flex; gap: 8px; }
.round-sizes .btn { min-width: 52px; }
.btn.ghost.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Study plan */
.plan-count { font-weight: 700; font-size: 19px; margin: 22px 0 0; }
.plan-block { margin-top: 26px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-head h2 { margin: 0; font-size: 21px; }
.plan-block > p { margin: 4px 0 12px; }
.plan-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: inherit; text-decoration: none;
}
a.plan-item:hover { border-color: var(--navy-2); }
.plan-item.done { opacity: .6; }
.plan-item.done .plan-label { text-decoration: line-through; }
/* A darker green than --ok: that one is 4.38:1 on a white card, just under
   the 4.5 a small glyph needs. Dark mode keeps --ok, which is fine there. */
.plan-tick { flex: 0 0 18px; color: #16703c; font-weight: 700; }
.plan-label { flex: 1 1 auto; }
.plan-note { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) {
  .plan-item { flex-wrap: wrap; }
  .plan-note { flex-basis: 100%; padding-left: 28px; }
}
.link-row { display: block; text-decoration: none; color: inherit; padding: 10px 12px; border-radius: 10px; }
.link-row:hover { background: var(--surface); }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-2); }
.quiz-actions.center { justify-content: center; }
.legal { padding-block: 40px 64px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 6px; }
.legal h2 { font-size: 20px; margin: 32px 0 8px; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 20px; }
footer .wrap a { color: var(--navy-2); }
.clock.low { color: var(--bad); }

/* Forms */
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.field input {
  width: 100%; padding: 14px 16px; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 12px;
}
.field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
#code { letter-spacing: 6px; font-size: 22px; text-align: center; }

/* Language suggestion bar */
.lang-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: #fff5ea; border-bottom: 1px solid #f3d9bb; color: var(--ink);
  padding: 10px 16px; font-size: 15px;
}
.lang-bar-close { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; }

.btn.is-busy { opacity: .6; pointer-events: none; }

.mock .src-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); justify-content: flex-start; font-size: 12px; }

/* Guide articles */
.crumbs { font-size: 14px; color: var(--muted); padding-block: 20px 0; }
.crumbs a { color: var(--muted); }
.crumbs span { margin-inline: 6px; }

.article { padding-block: 24px 64px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.article h1 { font-size: 38px; line-height: 1.15; letter-spacing: -0.5px; margin: 0 0 14px; }
.article details p { margin: 12px 0 0; }
.article details { margin-bottom: 12px; }

.article .standfirst { font-size: 20px; color: var(--muted); margin: 0 0 8px; }
.article .byline { font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; }
.article h2 { font-size: 27px; letter-spacing: -0.3px; margin: 44px 0 12px; scroll-margin-top: 80px; }
.article h3 { font-size: 20px; margin: 28px 0 8px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.article th { background: var(--surface); font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.article td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.article tr.total td { font-weight: 800; border-top: 2px solid var(--line); }

.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin: 0 0 22px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy); }

.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: sticky; top: 20px; }
.toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 15px; }
.toc li { margin-bottom: 7px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.aside-cta { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px; margin-top: 20px; }
.aside-cta h2 { color: #fff; font-size: 18px; text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.aside-cta p { font-size: 15px; color: #d8e0ee; margin: 0 0 14px; }
.aside-cta .btn { display: block; text-align: center; }

.next-reads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.next-reads a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; }
.next-reads a:hover { border-color: var(--accent); }
.next-reads strong { display: block; color: var(--navy); margin-bottom: 4px; }
.next-reads span { font-size: 15px; color: var(--muted); }

.updated { font-size: 13px; color: var(--muted); margin-top: 36px; border-top: 1px solid var(--line); padding-top: 16px; }

@media (max-width: 900px) {
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* A grid track will not shrink below its content unless told it may. Without
     this, one wide child drags the whole page sideways instead of overflowing
     inside its own box, and the reader gets a horizontal scrollbar on an
     article. Found on the Spanish-exam guide, whose comparison table is 412px. */
  .article .wrap > * { min-width: 0; }
  .toc { position: static; }
  .article h1 { font-size: 30px; }
  .next-reads { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* .num is for figures - $450, 21 days - where holding the line together is
     right. Two of the guide tables put whole sentences in that column, and
     nowrap then makes a 326px cell that cannot fit a phone. Numbers have no
     spaces to break at, so letting these wrap costs nothing and rescues prose. */
  .article td.num { white-space: normal; }
}


/* Results-screen offer */
.upsell .quiz-actions { justify-content: flex-start; margin-top: 18px; }
.upsell .quiz-actions.secondary { margin-top: 14px; }
.upsell .quiz-actions.secondary .btn { padding: 10px 18px; font-size: 15px; }
.upsell-note { font-size: 14px; margin: 10px 0 0; }

/* Fact cards that lead somewhere, and the guide list on the home page */
.card.fact { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card.fact:hover { border-color: var(--accent); transform: translateY(-1px); }
.card.fact .more { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--navy-2); }

.guide-list { display: grid; gap: 12px; }
.guide-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.guide-list a:hover { border-color: var(--accent); }
.guide-list strong { font-size: 18px; color: var(--navy); }
.guide-list span { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
@media (max-width: 560px) {
  .guide-list a { padding: 16px 18px; }
  .guide-list strong { font-size: 17px; }
}

/* ------------------------------------------------------------------ *
 * Dark theme
 * The site runs on tokens, so most of this is a second set of values.
 * It follows the operating system: no switch to find, nothing to remember.
 * The navy header, hero and CTA band were already dark and stay as they are.
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Tells the browser to draw its own controls dark too, so a text field or a
       scrollbar does not turn up as a white slab in the middle of a dark page. */
    color-scheme: dark;
    --ink: #e7ecf5;
    --muted: #9fabc0;
    --line: #2b3548;
    --bg: #0e1420;
    --card: #161e2d;
    --surface: #161e2d;
    --ok: #3ea96a;
    --ok-bg: #16301f;
    --bad: #e0685a;
    --bad-bg: #331a18;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  }

  /* Links: navy is unreadable on a dark page, but the token also paints the
     hero gradient, so recolour the text instead of the token. */
  a,
  footer .wrap a,
  .weight .pct,
  .clock,
  .choice .letter { color: #8fb6ef; }
  .crumbs a { color: var(--muted); }

  .btn.ghost { color: var(--ink); border-color: var(--line); }
  .btn.ghost:hover { border-color: #8fb6ef; }
  .choice:hover:not([disabled]),
  .card.mode:hover { border-color: #8fb6ef; }
  .choice.selected { border-color: #8fb6ef; background: #1c2739; }

  /* Navy on a dark card disappears; these need their own values. */
  .step::before { background: var(--accent); color: #13233f; }
  .guarantee { color: #b7e6c9; }
  .aside-cta { border: 1px solid var(--line); }
  .mock { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
  .article th { color: var(--muted); }
  .card.fact .more { color: #8fb6ef; }
  .card .big { color: var(--accent); }
  .plan-tick { color: var(--ok); }
  .guide-list strong { color: var(--ink); }
  .next-reads strong { color: var(--ink); }
  .callout strong { color: var(--ink); }

  .lang-bar { background: #26211a; border-bottom-color: #43382a; }

  /* Screenshots and diagrams, if any are ever added, should not glare. */
  img { opacity: 0.94; }
}