/**
 * repair-guide.css — the long-form reading skin for the repair.tomasetti.shop
 * guide family (the 26 guide-* / guides-* / fix-or-replace-* pages).
 *
 * WHY THIS FILE EXISTS
 * Every one of those pages used to carry its own ~8-12 KB inline copy of a
 * retired design system ("[phase-b] ported verbatim from the retired legacy
 * sheet"). Twenty-six copies, drift between them, and — the visible symptom —
 * it named fonts the pages never load:
 *
 *     --display: "Bricolage Grotesque", "Inter", ...
 *
 * The pages load Outfit + Share Tech Mono. Bricolage and Inter are never
 * requested, so every heading fell back to Trebuchet MS/Segoe UI at a type
 * scale meant for a different font (an <h1> rendered at 100.8px, against the
 * family's 51.2px). The pages also redefined body background and every text
 * token, so they read as a different site next to the homepage.
 *
 * This sheet replaces all of it. It is loaded AFTER tomasetti-tokens.css and
 * tomasetti-site.css and complements them: those two own the atmosphere
 * (.t-pride, .t-orb-bg, .t-grid-bg), the nav, and the .t-* component library.
 * This one owns the reading furniture — hero, article, prose, tables, callouts,
 * verdict boxes, stats, CTA, guide index — using the same tokens and the same
 * type scale as the rest of the family.
 *
 * Load order on every guide page:
 *   tomasetti-tokens.css -> tomasetti-site.css -> repair-nav.css -> repair-guide.css
 *
 * TO CHANGE THE GUIDE LOOK: edit this file once. There is no per-page copy.
 * Canon: docs/DESIGN-SYSTEM.md, ~/.agents/skills/tomasetti-design/SKILL.md
 */

/* ========================================================================
   1. LEGACY TOKEN ALIASES
   The guide markup was written against these names. Rather than rewrite 26
   pages of HTML, they are aliased onto the family tokens so every existing
   rule keeps resolving — to family values instead of the retired palette.

   Note the font stacks: they point at the two fonts the pages actually load.
   ======================================================================== */
:root {
  /* Type — the family pair, not the banned Inter/Bricolage pair. */
  --display: "Outfit", system-ui, sans-serif;
  --sans: "Outfit", system-ui, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;

  /* Text */
  --ink: var(--t-ink, #e2d9ee);
  --ink-2: var(--t-ink-mid, #bca8d0);
  --ink-soft: var(--t-ink-mid, #bca8d0);
  --muted: var(--t-ink-mute, #9a88b0);
  --quiet: var(--t-ink-mute, #9a88b0);
  --on-accent: #0a0514;

  /* The one accent. It means something, so it is not sprayed around. */
  --purple: var(--t-accent, #d896ff);
  --purple-dark: var(--t-accent-bright, #c084fc);
  --purple-mid: var(--t-accent-bright, #c084fc);
  --purple-deep: var(--t-accent-muted, #7c3aed);
  --purple-soft: rgba(216, 150, 255, 0.12);
  --purple-softer: rgba(216, 150, 255, 0.08);

  /* Lines */
  --line: var(--t-border, rgba(216, 150, 255, 0.12));
  --line-strong: var(--t-line, rgba(168, 85, 247, 0.30));
  --card-border: var(--t-border, rgba(216, 150, 255, 0.12));
  --card-hover-border: var(--t-border-hover, rgba(216, 150, 255, 0.30));

  /* Surfaces — glass, always. */
  --paper: var(--t-bg, #0f0a1a);
  --paper-2: var(--t-surface, #1e1530);
  --white: var(--t-surface, #1e1530);
  --off-white: var(--t-surface, #1e1530);
  --soft: var(--t-surface, #1e1530);
  --card-bg: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  --card-bg-2: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  --card-bg-3: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  --card-bg-4: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  --card-shadow: var(--t-shadow-sm, 0 8px 24px rgba(76, 29, 149, 0.25));
  --card-shadow-sm: var(--t-shadow-sm, 0 8px 24px rgba(76, 29, 149, 0.25));

  /* Radii + rhythm */
  --radius: var(--t-radius, 16px);
  --radius-sm: var(--t-radius-sm, 12px);
  --max: 1180px;

  /* Status (unchanged from the family) */
  --blue: var(--t-sky, #7dd3fc);
  --green: var(--t-green, #34d399);
  --orange: var(--t-amber, #fbbf24);

  /* The one "do not repair this" ink. Two pages carry it inline on cost-table
     rows, so it is a token rather than a literal: the dark value is invisible
     on a light cell and flips in section 14. */
  --red-ink: #f87171;

  /* Hero, flattened onto the family's values */
  --hero-ink: var(--t-ink-bright, #ffffff);
  --hero-muted: var(--t-ink-mid, #bca8d0);
  --hero-eyebrow: var(--t-accent-text, #d896ff);
  --hero-strong: var(--t-ink-bright, #ffffff);
  --heading-ink: var(--t-ink-bright, #ffffff);
}

/* The retired body background (a radial gradient into #24184a) is deliberately
   NOT redefined. tomasetti-site.css already paints the family canvas. */

/* ========================================================================
   2. CONTAINERS
   ======================================================================== */
.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* The guide family's own container is narrower and left-aligned reading width */
.article-wrap {
  width: min(720px, calc(100% - 48px));
  margin-inline: auto;
  padding-bottom: 84px;
}

.article {
  max-width: 100%;
}

@media (max-width: 620px) {
  .wrap,
  .article-wrap {
    width: min(var(--max), calc(100% - 34px));
  }
}

/* ========================================================================
   3. HERO — left-aligned, family type scale.
   Was clamp(3.1rem, 7vw, 6.8rem)/.9 in the retired sheet; the family's own
   .t-hero h1 is clamp(2.2rem, 5vw, 3.4rem). This matches the family.
   ======================================================================== */
.hero {
  overflow-x: clip;              /* also set by repair-nav.css — harmless dup */
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 56px;
  color: var(--t-ink, #e2d9ee);
}

.hero h1 {
  max-width: 20ch;
  margin: 14px 0 18px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--t-ink-bright, #ffffff);
}

.hero h1 em {
  color: var(--purple);
  font-style: normal;
}

/* A hero paragraph reads as the family's .t-lede */
.hero-lede,
.hero .lede {
  max-width: 620px;
  margin: 0;
  color: var(--t-ink-mid, #bca8d0);
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-lede strong {
  color: var(--t-ink, #e2d9ee);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Mono overline label. Two spellings in the markup; same look. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 0.78rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-eyebrow);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--purple);
  flex: none;
}

/* ========================================================================
   4. SECTIONS
   ======================================================================== */
.section { padding: 72px 0; }

.section h2 {
  max-width: 24ch;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--heading-ink);
}

.section.alt {
  background: rgba(21, 16, 34, 0.55);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section.dark {
  background: linear-gradient(180deg, #0f0a1a 0%, #181026 100%);
  color: var(--ink);
}

/* ========================================================================
   5. ARTICLE PROSE — the reading core of every guide page.
   ======================================================================== */
.article-wrap h1 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--t-ink-bright, #ffffff);
}

.article-wrap h2,
.article h2 {
  margin: 3rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--t-ink-bright, #ffffff);
}

.article-wrap h3,
.article h3 {
  margin: 2.1rem 0 0.7rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--t-ink-bright, #ffffff);
}

.article-wrap p,
.article p,
.article-wrap .lede,
.article .lede {
  margin: 0 0 1.15rem;
  color: var(--t-ink, #e2d9ee);
  font-size: 1.02rem;
  line-height: 1.7;
}

.article-wrap .lede,
.article .lede {
  color: var(--t-ink-mid, #bca8d0);
  font-size: 1.12rem;
  line-height: 1.62;
}

.article-wrap p strong,
.article li strong,
.article p strong {
  color: var(--t-ink-bright, #ffffff);
  font-weight: 600;
}

.article-wrap ul,
.article-wrap ol,
.article ul,
.article ol {
  margin: 0 0 1.3rem;
  padding-left: 1.35rem;
}

.article-wrap li,
.article li {
  margin-bottom: 0.6rem;
  color: var(--t-ink, #e2d9ee);
  font-size: 1.02rem;
  line-height: 1.65;
}

.article-wrap li::marker,
.article li::marker {
  color: var(--t-accent-muted, #7c3aed);
}

.article-wrap a,
.article a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.article-wrap a:hover,
.article a:hover {
  color: var(--t-accent-bright, #c084fc);
}

/* Bare .lede outside an article wrapper (25 pages use this spelling) */
.lede {
  color: var(--t-ink-mid, #bca8d0);
  font-size: 1.12rem;
  line-height: 1.62;
}

/* Bare .kicker — the mono overline. Inside .callout it gets the accent. */
.kicker {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.callout .kicker,
.dark .kicker { color: var(--purple); }

.muted { color: var(--muted); }

/* Centred section intro block (one page uses it) */
.section-head {
  max-width: 640px;
  margin: 0 0 2rem;
}

.section-head > p:last-child {
  margin: 0;
  color: var(--t-ink-mute, #9a88b0);
  font-size: 1.05rem;
  line-height: 1.6;
}

.cta h2 { color: var(--t-ink-bright, #ffffff); }

/* ========================================================================
   6. CALLOUT — the aside box the guides lean on hard.
   ======================================================================== */
.callout {
  margin: 1.8rem 0 2.1rem;
  padding: 1.35rem 1.5rem;
  background: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.callout .kicker {
  margin: 0 0 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
}

.callout p {
  margin: 0 0 0.85rem;
  color: var(--ink);
  line-height: 1.65;
}

.callout p:last-child,
.callout ul:last-child {
  margin-bottom: 0;
}

.callout ul {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.callout li { color: var(--ink); }
.callout strong { color: var(--t-ink-bright, #ffffff); }

/* ========================================================================
   7. TABLES — the cost tables. Scrollable rather than overflowing.
   ======================================================================== */
.article-wrap .table-scroll {
  overflow-x: auto;
  margin: 16px 0 24px;
  -webkit-overflow-scrolling: touch;
}

.article-wrap .cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.92rem;
}

.article-wrap .table-scroll .cost-table { margin: 0; }

.article-wrap .cost-table th {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--purple);
  font: 600 0.82rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
  white-space: nowrap;
}

.article-wrap .cost-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}

.article-wrap .cost-table td.us {
  color: var(--t-ink-bright, #ffffff);
  font-weight: 600;
}

.article-wrap .cost-table tr:last-child td { border-bottom: none; }

/* ========================================================================
   8. VERDICT + SYMPTOM BLOCKS (fix-or-replace pages)
   ======================================================================== */
.verdict-box {
  margin: 1.9rem 0 2.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.verdict-box .label {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.verdict-box .verdict {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--purple);
}

.verdict-box p {
  margin: 0 0 0.7rem;
  color: var(--ink);
  line-height: 1.65;
}

.verdict-box p:last-child { margin-bottom: 0; }

.verdict-legend {
  display: grid;
  gap: 10px;
  margin: 1.6rem 0 2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.verdict-legend div { color: var(--ink); line-height: 1.55; }
.verdict-legend strong { color: var(--t-ink-bright, #ffffff); }
.verdict-legend div:last-child { margin-bottom: 0; }

.symptom-list { margin: 1.6rem 0 2rem; }

.symptom-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  text-decoration: none;
  transition: background var(--t-t-fast, 0.15s ease), border-color var(--t-t-fast, 0.15s ease);
}

.symptom-list a:hover {
  background: var(--purple-softer);
  border-color: var(--card-hover-border);
}

.symptom-list .t {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--t-ink-bright, #ffffff);
}

.symptom-list .d {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.symptom-list .v {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  white-space: nowrap;
}

/* ========================================================================
   9. STATS
   ======================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 2rem 0;
}

.stat-cell {
  padding: 22px 20px;
  background: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.stat-cell .num {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--purple);
}

.stat-cell .label {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ========================================================================
   10. CTA
   ======================================================================== */
.cta { padding: 72px 0 88px; }

.cta-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 38px 40px;
  background: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  border: 1px solid var(--card-border);
  border-radius: var(--t-radius-lg, 24px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--t-shadow, 0 12px 32px rgba(5, 3, 10, 0.45));
}

.cta-box h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--t-ink-bright, #ffffff);
}

.cta-copy p {
  margin: 0;
  color: var(--t-ink-mid, #bca8d0);
  font-size: 1rem;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 760px) {
  .cta-box { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ========================================================================
   11. BUTTONS — the retired names, mapped onto the family's button look
   (.t-btn / .t-btn-primary / .t-btn-ghost in tomasetti-site.css).
   ======================================================================== */
.button,
.button-primary,
.button-dark-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  font: 600 1rem var(--sans);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease, box-shadow var(--t-t, 0.25s ease), background var(--t-t, 0.25s ease);
}

.button-primary {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  color: #ffffff;
}

.button-primary:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45);
}

.button-dark-ghost {
  background: transparent;
  color: var(--t-accent-text, #d896ff);
  border: 1px solid var(--t-line-hard, rgba(216, 150, 255, 0.35));
}

.button-dark-ghost:hover {
  background: var(--purple-softer);
  border-color: var(--t-accent-text, #d896ff);
}

.form-actions .button { margin-right: 10px; }

/* ========================================================================
   12. GUIDE INDEX (guides.html + the index-style pages)
   ======================================================================== */
.guide-list {
  display: grid;
  gap: 16px;
  margin: 2.4rem 0 0;
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
  background: var(--t-card-bg, rgba(30, 21, 48, 0.75));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform var(--t-t, 0.25s ease), box-shadow var(--t-t, 0.25s ease), border-color var(--t-t, 0.25s ease);
}

.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-hover-border);
  box-shadow: var(--t-shadow-sm, 0 8px 24px rgba(76, 29, 149, 0.25));
}

.guide-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--t-ink-bright, #ffffff);
}

.guide-card h3 a { color: inherit; text-decoration: none; }
.guide-card h3 a:hover { color: var(--purple); }

.guide-cat {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
}

.guide-excerpt {
  margin: 0;
  color: var(--t-ink-mid, #bca8d0);
  font-size: 0.96rem;
  line-height: 1.6;
}

.guide-meta,
.guide-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.guide-status {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-status.is-new {
  border-color: var(--t-line-hard, rgba(216, 150, 255, 0.35));
  color: var(--purple);
}

.guide-read,
.guide-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.guide-link:hover,
.guide-read:hover { text-decoration: underline; }

.guide-note {
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.guide-note a { color: var(--purple); }

.guide-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.6rem;
  font: 0.78rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-accent-text, #d896ff);
  text-decoration: none;
}

.guide-back:hover { text-decoration: underline; }

/* Older spelling of the same control, still in the markup of some pages */
.article-wrap .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.6rem;
  font: 0.78rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-accent-text, #d896ff);
  text-decoration: none;
}

.article-wrap .back-link:hover { text-decoration: underline; }

/* ========================================================================
   13. FOOTER ALIAS
   The guide pages share the shop footer markup but do not load the shop
   sheet, so the bare class is defined here.
   ======================================================================== */
.site-footer {
  padding: 40px 28px 52px;
  margin-top: 0;
  border-top: 1px solid var(--line);
  text-align: center;
  background: rgba(21, 16, 34, 0.55);
}

.site-footer p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.site-footer .footer-address {
  margin-bottom: 14px;
  font-size: 0.88rem;
}

.site-footer .footer-address span {
  margin: 0 8px;
  color: var(--quiet);
}

.site-footer a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

/* The other footer spelling in the family: <footer class="footer"> wrapping
   <div class="wrap footer-row"> with links + the Tomasetti Tech credit. */
.footer {
  padding: 34px 0 44px;
  border-top: 1px solid var(--line);
  background: rgba(21, 16, 34, 0.55);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--t-t-fast, 0.15s ease);
}

.footer-links a:hover { color: var(--purple); }

.footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.footer p a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.footer p a:hover { text-decoration: underline; }

.footer .muted,
.article-wrap .credibility-strip,
.credibility-strip {
  color: var(--muted);
}

/* Proof strip: "17,000+ repair records behind every guide". Numbers in the
   display face, labels in the muted body face — same pattern as .stat-cell. */
.credibility-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 2.2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.credibility-strip span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.5;
}

.credibility-strip b {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--purple);
}

/* The family's standing inclusion line. Quiet on purpose: it is a statement
   of who is welcome, not a call to action. */
.inclusion {
  margin: 0;
  padding: 22px 28px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* ========================================================================
   14. LIGHT THEME
   The family is dark-first (tomasetti-design: "Dark first") and the token
   sheet's :root is unconditionally dark, so a first visit lands dark unless
   the visitor's OS preference is light. These rules cover the Light side —
   both the OS-light first visit and the visitor who deliberately picks
   Light: the family token sheet has no light flip of its own, so the
   surfaces this sheet owns are flipped here rather than left as dark glass
   on a light page.
   ======================================================================== */

/* The legibility aliases, first. Everything below inherits from them, and the
   dark-surface values (near-white ink, 12% lilac lines) are illegible on a
   light page. The hero band keeps its own dark ground and its own ink, so it
   is unaffected — these aliases are not what it reads. */
/* The family tokens are overridden directly, not just the local aliases: many
   rules in this sheet reach past the aliases to var(--t-ink-bright) and friends
   (headings especially), and they all have to move together. */
[data-theme="light"] {
  --t-ink: #2f2740;
  --t-ink-mid: #4a4258;
  --t-ink-mute: #5f5470;
  --t-ink-bright: #20172c;
  --t-accent-text: #5b21b6;

  --ink: #2f2740;
  --ink-2: #4a4258;
  --ink-soft: #4a4258;
  --muted: #5f5470;
  --quiet: #5f5470;
  --heading-ink: #20172c;

  --purple: #5b21b6;
  --purple-dark: #6d28d9;
  --purple-mid: #6d28d9;
  --red-ink: #b91c1c;
}

/* Dark bands re-declare the dark-surface values for their own subtree: the
   hero is the brand face and stays dark in both themes, and .section.dark is
   painted by --band-bg regardless of theme. */
[data-theme="light"] .hero,
[data-theme="light"] .section.dark {
  --t-ink: #e2d9ee;
  --t-ink-mid: #bca8d0;
  --t-ink-mute: #9a88b0;
  --t-ink-bright: #ffffff;
  --t-accent-text: #d896ff;

  --ink: #e2d9ee;
  --ink-2: #bca8d0;
  --muted: #9a88b0;
  --heading-ink: #ffffff;

  --purple: #d896ff;
  --purple-dark: #c084fc;
  --purple-mid: #c084fc;

  /* --hero-eyebrow is declared on :root as var(--t-accent-text), and a custom
     property substitutes where it is DECLARED — so re-declaring --t-accent-text
     alone leaves this one holding the light value. It has to be reset by name. */
  --hero-eyebrow: #d896ff;
}

/* The canvas next: tomasetti-site.css paints body from --t-bg, which has no
   light value, so without this the page stayed dark under light-mode text. */
[data-theme="light"] body {
  background: #faf9fc;
  color: #3b3348;
}

[data-theme="light"] body::after { opacity: 0.25; }

/* The hero band keeps its own dark ground: it is the brand face, and a dark
   hero over a light body is the family's pattern. Without this the band would
   turn light and the white h1 would vanish into it. */
[data-theme="light"] .hero {
  background: radial-gradient(circle at 85% 0%, rgba(157, 80, 229, 0.28), transparent 40%),
              linear-gradient(180deg, #0a0514 0%, #17102a 100%);
}

[data-theme="light"] .callout,
[data-theme="light"] .verdict-box,
[data-theme="light"] .stat-cell,
[data-theme="light"] .guide-card,
[data-theme="light"] .cta-box,
[data-theme="light"] .symptom-list a {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-theme="light"] .section.alt,
[data-theme="light"] .site-footer {
  background: #f0edf6;
}

/* Accent ink on white: the lilac is a dark-surface colour and drops to 1.9:1
   here, so the deeper purple carries the numbers and the table headers. */
[data-theme="light"] .stat-cell .num,
[data-theme="light"] .cost-table th { color: #5b21b6; }
[data-theme="light"] .stat-cell .label { color: #5f5470; }

[data-theme="light"] .article-wrap h1,
[data-theme="light"] .article-wrap h2,
[data-theme="light"] .article-wrap h3,
[data-theme="light"] .article h2,
[data-theme="light"] .article h3,
[data-theme="light"] .guide-card h3,
[data-theme="light"] .cta-box h2,
[data-theme="light"] .symptom-list .t,
[data-theme="light"] .callout strong,
[data-theme="light"] .verdict-legend strong {
  color: #20172c;
}

/* The hero band stays dark in light mode: it is the brand face, and the
   family's own pattern is a dark hero over a light body. That means its ink
   must stay light too — inverting the h1 here would print dark-on-dark. */

[data-theme="light"] .article-wrap p,
[data-theme="light"] .article-wrap li,
[data-theme="light"] .article p,
[data-theme="light"] .article li,
[data-theme="light"] .callout p,
[data-theme="light"] .callout li,
[data-theme="light"] .verdict-box p,
[data-theme="light"] .verdict-legend div,
[data-theme="light"] .article-wrap .cost-table td {
  color: #3b3348;
}

/* Article ledes only. A hero lede is deliberately NOT in this group: the hero
   stays dark (see above), so its lede keeps the light ink it inherits. */
[data-theme="light"] .article-wrap .lede,
[data-theme="light"] .article .lede,
[data-theme="light"] .guide-excerpt,
[data-theme="light"] .cta-copy p {
  color: #524861;
}

/* The accent is spent on the primary button — keep its ink readable in light */
[data-theme="light"] .button-primary { color: #ffffff; }

/* ========================================================================
   15. PRINT — guides are the one family members people actually print.
   ======================================================================== */
@media print {
  .hero,
  .cta,
  .site-footer { display: none; }

  body { background: #ffffff; color: #000000; }

  .article-wrap h1,
  .article-wrap h2,
  .article-wrap h3,
  .article-wrap p,
  .article-wrap li,
  .article-wrap .cost-table td { color: #000000; }

  .callout,
  .verdict-box,
  .stat-cell {
    background: #ffffff;
    border: 1px solid #cccccc;
  }
}