/* ─────────────────────────────────────────────────────────────────────────
   Ostler comparison-page design system
   ────────────────────────────────────
   Shared across compare.html (the hub) and every vs-*.html page so the
   visual language is identical. Page-level `<style>` blocks should now
   be empty (or contain only page-specific overrides). Tokens come from
   assets/ostler.css; this file layers comparison-page styles on top.

   What's in here
     · Page hero (.cmp-hero)
     · Verdict / callout / quote-box restyles
     · The comparison table (.cmp-tbl) with cross-hair hover, sticky
       header row, sticky first column, row grouping, restrained
       Yes/No/Partial markers
     · Detail-page (.vs-*) pull-quotes, exec-summary, prev/next nav
     · Hub-page (compare.html) feature grid + intro strap
     · Mobile breakpoints (cards-on-narrow, scroll-on-medium)
   ───────────────────────────────────────────────────────────────────── */

/* ─── Page hero ─────────────────────────────────────────────────────── */
.cmp-hero { padding: 120px 0 56px; }
.cmp-hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: inline-block;
}
.cmp-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 920px;
  text-wrap: balance;
}
.cmp-hero h1 strong { color: var(--accent); font-weight: 700; }
.cmp-hero-deck {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: rgba(20,18,14,0.72);
  max-width: 760px;
  line-height: 1.6;
}
.cmp-hero-deck strong { color: var(--ink); font-weight: 600; }
.cmp-hero-deck em { font-style: italic; color: var(--ink); }
.cmp-hero-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(20,18,14,0.5);
  margin: 22px 0 0;
}
.cmp-hero-strap {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(20,18,14,0.45);
  margin-top: 40px;
}
.cmp-hero-strap em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

/* ─── Callouts (verdict / price check / closing) ────────────────────── */
/* Uniform 12px radius + 1px hairline border on every edge — matches the
   dominant card pattern in ostler.css (.article-cta, .article-tag).
   Accent is carried by the eyebrow heading colour, not a left-edge stripe. */
.cmp-callout {
  background: var(--panel);
  border: 1px solid var(--hairline-faint);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 36px;
  box-shadow: var(--shadow-card-soft);
}
/* Variants: heading colour shifts; perimeter unchanged so all callouts
   share the same card silhouette. */
.cmp-callout h3 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.cmp-callout--green h3 { color: var(--accent-3); }
.cmp-callout--ink   h3 { color: var(--ink); opacity: 0.6; }
.cmp-callout p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(20,18,14,0.78);
  margin: 0 0 8px;
}
.cmp-callout p:last-child { margin: 0; }
.cmp-callout p strong { color: var(--ink); font-weight: 600; }
.cmp-price {
  font-family: var(--font-display);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ─── Pull quote (block quotation, subtle oxblood wash) ─────────────── */
/* Uniform 12px radius + 1px hairline — same card vocabulary as
   .cmp-callout. Subtle oxblood-tinted background carries the brand cue
   instead of a left-edge stripe. */
.cmp-quote {
  background: rgba(122,31,31,0.04);
  border: 1px solid rgba(122,31,31,0.14);
  padding: 18px 24px;
  margin: 28px 0;
  border-radius: 12px;
}
.cmp-quote p {
  margin: 0 0 6px;
  font-style: italic;
  color: rgba(20,18,14,0.82);
  font-size: 15.5px;
  line-height: 1.55;
}
.cmp-quote .cmp-quote-attr {
  font-style: normal;
  font-size: 12px;
  color: rgba(20,18,14,0.55);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ─── Pull-out feature line (Apple HIG-style large callout) ─────────── */
.cmp-pullout {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 760px;
  margin: 48px 0;
  text-wrap: balance;
}
.cmp-pullout strong { color: var(--accent); font-weight: 700; }

/* ─── Prose body (vs-* pages) ───────────────────────────────────────── */
.cmp-prose {
  max-width: 760px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(20,18,14,0.8);
}
.cmp-prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 64px 0 18px;
  text-wrap: pretty;
}
.cmp-prose h2:first-child { margin-top: 0; }
.cmp-prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0 10px;
}
.cmp-prose p { margin-bottom: 16px; }
.cmp-prose p strong, .cmp-prose li strong {
  color: var(--ink);
  font-weight: 600;
}
.cmp-prose em { font-style: italic; }
.cmp-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(122,31,31,0.30);
  text-underline-offset: 3px;
}
.cmp-prose a:hover { text-decoration-color: var(--accent); }
.cmp-prose ul, .cmp-prose ol { margin: 12px 0 22px 22px; }
.cmp-prose li { margin-bottom: 8px; }

/* ═════════════════════════════════════════════════════════════════════
   Comparison table  ──  the main visual artefact
   ═════════════════════════════════════════════════════════════════════ */

.cmp-tbl-wrap {
  position: relative;
  margin: 24px 0 36px;
  border: 1px solid var(--hairline-faint);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-card-soft);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Scroll-right hint, only visible on narrow viewports where the table
   does not fit. Hidden on desktop and when there are only a handful
   of columns (vs-* pages set --cmp-min so the cue gates correctly). */
.cmp-tbl-wrap::before {
  content: "Scroll right ›";
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  background: var(--chassis);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
}
@media (min-width: 1240px) {
  .cmp-tbl-wrap.cmp-tbl-wrap--wide::before { display: none; }
}
@media (min-width: 760px) {
  .cmp-tbl-wrap.cmp-tbl-wrap--narrow::before { display: none; }
}

.cmp-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  table-layout: auto;
}
.cmp-tbl-wrap--wide   .cmp-tbl { min-width: 1340px; }
.cmp-tbl-wrap--narrow .cmp-tbl { min-width: 720px; }

/* Header row */
.cmp-tbl thead th {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(20,18,14,0.55);
  text-align: left;
  padding: 14px;
  background: var(--chassis);
  border-bottom: 1.5px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: bottom;
  line-height: 1.3;
  min-width: 110px;
}
.cmp-tbl thead th.cmp-c-ostler {
  color: var(--accent);
  background: rgba(122,31,31,0.06);
  border-left: 1px solid rgba(122,31,31,0.18);
  border-right: 1px solid rgba(122,31,31,0.18);
}

/* First column (row labels) – sticky on horizontal scroll */
.cmp-tbl th:first-child,
.cmp-tbl td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 3;
  min-width: 200px;
  box-shadow: 1px 0 0 var(--hairline-faint);
}
.cmp-tbl thead th:first-child {
  background: var(--chassis);
  z-index: 4;
}
.cmp-tbl tbody td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

/* Body cells */
.cmp-tbl tbody td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--hairline-faint);
  vertical-align: top;
  line-height: 1.5;
}
.cmp-tbl tbody tr:last-child td { border-bottom: none; }

/* Row group headers (e.g. "Data", "Privacy", "Features") */
.cmp-tbl tbody tr.cmp-group td {
  background: var(--chassis);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--hairline-faint);
  padding: 18px 14px 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmp-tbl tbody tr.cmp-group:first-child td { border-top: none; }
.cmp-tbl tbody tr.cmp-group td:first-child { box-shadow: 1px 0 0 var(--hairline-faint); }

/* Ostler column – tinted left/right rules + slight tint */
.cmp-tbl thead th.cmp-c-ostler,
.cmp-tbl tbody td.cmp-c-ostler {
  background: rgba(122,31,31,0.04);
  border-left: 1px solid rgba(122,31,31,0.14);
  border-right: 1px solid rgba(122,31,31,0.14);
}
.cmp-tbl tbody td.cmp-c-ostler {
  font-weight: 500;
  color: var(--ink);
}

/* Marker glyphs – restrained, no green ticks / red crosses */
.cmp-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -1px;
  flex-shrink: 0;
}
.cmp-mark--yes      { background: var(--accent-3); }              /* hunting green – on-brand */
.cmp-mark--no       { background: transparent; border: 1px solid rgba(20,18,14,0.30); }
.cmp-mark--partial  { background: linear-gradient(to right, rgba(20,18,14,0.45) 50%, transparent 50%); border: 1px solid rgba(20,18,14,0.30); }
.cmp-mark--ostler   { background: var(--accent); }

.cmp-tbl .cmp-yes     { color: var(--accent-3); }
.cmp-tbl .cmp-no      { color: rgba(20,18,14,0.5); }
.cmp-tbl .cmp-partial { color: rgba(20,18,14,0.7); }

/* Yes/No rows that are load-bearing differentiators – heavier weight */
.cmp-tbl tbody td.cmp-c-ostler.cmp-yes { color: var(--accent-3); font-weight: 600; }

/* ═══════════ Cross-hair hover (row + column highlight) ═══════════════
   Modern browsers (Chromium 105+, Safari 15.4+, Firefox 121+) all
   support :has(), which lets us paint the column the hovered cell
   belongs to. Row hover is trivial. We keep the highlight subtle:
   an extra layer of chassis tint, no transform, no border colour
   shift, no transition delay (instant feedback feels less laggy).

   Cascade contract (highest specificity wins, so order = visual stack):
     1. Resting cell                                 (no tint / brand tint)
     2. Row-hover     → 0.035 wash on whole row
     3. Column-hover  → 0.035 wash on whole column   (incl. thead th)
     4. Intersection  → 0.075 wash on the hovered cell only
   The intersection rule below uses :nth-child(n+2) inside both :has()
   and the trailing selector so it carries higher specificity than the
   per-column rules and is guaranteed to win at the cross-hair cell.
   ═════════════════════════════════════════════════════════════════ */
.cmp-tbl tbody tr:not(.cmp-group):hover > td {
  background-color: rgba(20,18,14,0.035);
}
/* Re-tint Ostler column slightly stronger so it remains visible inside
   the row-hover wash */
.cmp-tbl tbody tr:not(.cmp-group):hover > td.cmp-c-ostler {
  background-color: rgba(122,31,31,0.07);
}

/* Column hover via :has() – paint every cell in column N when any
   cell in that column is hovered. We enumerate columns 1..14 to cover
   the widest table (compare.html with 13 competitors + label = 14).
   Both tbody td AND thead th are painted so the column reads as a
   single continuous stripe from header to last row (the previous rule
   left the header un-tinted, which Andy spotted as a "semi-transparent"
   header on the otherwise-highlighted column). */
@supports selector(:has(*)) {
  .cmp-tbl:has(tbody td:nth-child(2):hover)  tbody tr:not(.cmp-group) td:nth-child(2),
  .cmp-tbl:has(tbody td:nth-child(2):hover)  thead th:nth-child(2),
  .cmp-tbl:has(thead th:nth-child(2):hover)  tbody tr:not(.cmp-group) td:nth-child(2),
  .cmp-tbl:has(thead th:nth-child(2):hover)  thead th:nth-child(2)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(3):hover)  tbody tr:not(.cmp-group) td:nth-child(3),
  .cmp-tbl:has(tbody td:nth-child(3):hover)  thead th:nth-child(3),
  .cmp-tbl:has(thead th:nth-child(3):hover)  tbody tr:not(.cmp-group) td:nth-child(3),
  .cmp-tbl:has(thead th:nth-child(3):hover)  thead th:nth-child(3)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(4):hover)  tbody tr:not(.cmp-group) td:nth-child(4),
  .cmp-tbl:has(tbody td:nth-child(4):hover)  thead th:nth-child(4),
  .cmp-tbl:has(thead th:nth-child(4):hover)  tbody tr:not(.cmp-group) td:nth-child(4),
  .cmp-tbl:has(thead th:nth-child(4):hover)  thead th:nth-child(4)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(5):hover)  tbody tr:not(.cmp-group) td:nth-child(5),
  .cmp-tbl:has(tbody td:nth-child(5):hover)  thead th:nth-child(5),
  .cmp-tbl:has(thead th:nth-child(5):hover)  tbody tr:not(.cmp-group) td:nth-child(5),
  .cmp-tbl:has(thead th:nth-child(5):hover)  thead th:nth-child(5)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(6):hover)  tbody tr:not(.cmp-group) td:nth-child(6),
  .cmp-tbl:has(tbody td:nth-child(6):hover)  thead th:nth-child(6),
  .cmp-tbl:has(thead th:nth-child(6):hover)  tbody tr:not(.cmp-group) td:nth-child(6),
  .cmp-tbl:has(thead th:nth-child(6):hover)  thead th:nth-child(6)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(7):hover)  tbody tr:not(.cmp-group) td:nth-child(7),
  .cmp-tbl:has(tbody td:nth-child(7):hover)  thead th:nth-child(7),
  .cmp-tbl:has(thead th:nth-child(7):hover)  tbody tr:not(.cmp-group) td:nth-child(7),
  .cmp-tbl:has(thead th:nth-child(7):hover)  thead th:nth-child(7)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(8):hover)  tbody tr:not(.cmp-group) td:nth-child(8),
  .cmp-tbl:has(tbody td:nth-child(8):hover)  thead th:nth-child(8),
  .cmp-tbl:has(thead th:nth-child(8):hover)  tbody tr:not(.cmp-group) td:nth-child(8),
  .cmp-tbl:has(thead th:nth-child(8):hover)  thead th:nth-child(8)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(9):hover)  tbody tr:not(.cmp-group) td:nth-child(9),
  .cmp-tbl:has(tbody td:nth-child(9):hover)  thead th:nth-child(9),
  .cmp-tbl:has(thead th:nth-child(9):hover)  tbody tr:not(.cmp-group) td:nth-child(9),
  .cmp-tbl:has(thead th:nth-child(9):hover)  thead th:nth-child(9)  { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(10):hover) tbody tr:not(.cmp-group) td:nth-child(10),
  .cmp-tbl:has(tbody td:nth-child(10):hover) thead th:nth-child(10),
  .cmp-tbl:has(thead th:nth-child(10):hover) tbody tr:not(.cmp-group) td:nth-child(10),
  .cmp-tbl:has(thead th:nth-child(10):hover) thead th:nth-child(10) { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(11):hover) tbody tr:not(.cmp-group) td:nth-child(11),
  .cmp-tbl:has(tbody td:nth-child(11):hover) thead th:nth-child(11),
  .cmp-tbl:has(thead th:nth-child(11):hover) tbody tr:not(.cmp-group) td:nth-child(11),
  .cmp-tbl:has(thead th:nth-child(11):hover) thead th:nth-child(11) { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(12):hover) tbody tr:not(.cmp-group) td:nth-child(12),
  .cmp-tbl:has(tbody td:nth-child(12):hover) thead th:nth-child(12),
  .cmp-tbl:has(thead th:nth-child(12):hover) tbody tr:not(.cmp-group) td:nth-child(12),
  .cmp-tbl:has(thead th:nth-child(12):hover) thead th:nth-child(12) { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(13):hover) tbody tr:not(.cmp-group) td:nth-child(13),
  .cmp-tbl:has(tbody td:nth-child(13):hover) thead th:nth-child(13),
  .cmp-tbl:has(thead th:nth-child(13):hover) tbody tr:not(.cmp-group) td:nth-child(13),
  .cmp-tbl:has(thead th:nth-child(13):hover) thead th:nth-child(13) { background-color: rgba(20,18,14,0.035); }
  .cmp-tbl:has(tbody td:nth-child(14):hover) tbody tr:not(.cmp-group) td:nth-child(14),
  .cmp-tbl:has(tbody td:nth-child(14):hover) thead th:nth-child(14),
  .cmp-tbl:has(thead th:nth-child(14):hover) tbody tr:not(.cmp-group) td:nth-child(14),
  .cmp-tbl:has(thead th:nth-child(14):hover) thead th:nth-child(14) { background-color: rgba(20,18,14,0.035); }

  /* When the hovered column is the Ostler column, use the warm-tint
     over-paint so the brand cue stays present. Header included. */
  .cmp-tbl:has(thead th.cmp-c-ostler:hover) tbody tr:not(.cmp-group) td.cmp-c-ostler,
  .cmp-tbl:has(thead th.cmp-c-ostler:hover) thead th.cmp-c-ostler,
  .cmp-tbl:has(tbody td.cmp-c-ostler:hover) tbody tr:not(.cmp-group) td.cmp-c-ostler,
  .cmp-tbl:has(tbody td.cmp-c-ostler:hover) thead th.cmp-c-ostler {
    background-color: rgba(122,31,31,0.08);
  }

  /* Intersection cell (row + column).
     Higher specificity than the per-column rules above (the trailing
     selector chains :nth-child(n+2) AND :hover, matching only the one
     cell under the cursor), so the cross-hair always paints visibly
     darker than the wash that runs through it. */
  .cmp-tbl:has(tbody td:nth-child(n+2):hover) tbody tr:not(.cmp-group):hover > td:nth-child(n+2):hover {
    background-color: rgba(20,18,14,0.075);
  }
  .cmp-tbl:has(tbody td.cmp-c-ostler:nth-child(n+2):hover) tbody tr:not(.cmp-group):hover > td.cmp-c-ostler:nth-child(n+2):hover {
    background-color: rgba(122,31,31,0.13);
  }
}

/* JS fallback applied via [data-col-hover-fallback] attribute on the
   table when :has() is absent. The script in assets/compare.js paints
   .cmp-col-hover on every cell of the active column (tbody + thead). */
.cmp-tbl[data-col-hover-fallback] tbody td.cmp-col-hover,
.cmp-tbl[data-col-hover-fallback] thead th.cmp-col-hover {
  background-color: rgba(20,18,14,0.035);
}
.cmp-tbl[data-col-hover-fallback] tbody td.cmp-c-ostler.cmp-col-hover,
.cmp-tbl[data-col-hover-fallback] thead th.cmp-c-ostler.cmp-col-hover {
  background-color: rgba(122,31,31,0.08);
}
/* Intersection cell in JS fallback path */
.cmp-tbl[data-col-hover-fallback] tbody tr:not(.cmp-group):hover > td.cmp-col-hover {
  background-color: rgba(20,18,14,0.075);
}
.cmp-tbl[data-col-hover-fallback] tbody tr:not(.cmp-group):hover > td.cmp-c-ostler.cmp-col-hover {
  background-color: rgba(122,31,31,0.13);
}

/* ═════════════════════════════════════════════════════════════════════
   Hub-page artefacts (compare.html)
   ═════════════════════════════════════════════════════════════════════ */

/* Detail-page link grid – three columns on desktop, one on phone */
.cmp-vslinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.cmp-vslink {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--hairline-faint);
  border-radius: 10px;
  box-shadow: var(--shadow-card-soft);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
  position: relative;
}
.cmp-vslink:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.cmp-vslink::after {
  content: "›";
  position: absolute;
  right: 22px;
  top: 22px;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0.7;
  transition: transform 140ms ease, opacity 140ms ease;
}
.cmp-vslink:hover::after {
  transform: translateX(3px);
  opacity: 1;
}
.cmp-vslink-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-right: 24px;
}
.cmp-vslink-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(20,18,14,0.62);
  line-height: 1.45;
}
/* Featured detail-link card — stronger oxblood-tinted perimeter on every
   edge instead of a left-only stripe. Matches the .article-tag accent
   pattern from ostler.css. */
.cmp-vslink--accent {
  border-color: rgba(122,31,31,0.28);
  background: rgba(122,31,31,0.025);
}

/* ═════════════════════════════════════════════════════════════════════
   Detail-page artefacts (vs-*.html)
   ═════════════════════════════════════════════════════════════════════ */

/* Executive summary band – a compact "what this comes down to" sentence
   that sits above the table on each detail page */
.cmp-exec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px 28px;
  background: var(--panel);
  border: 1px solid var(--hairline-faint);
  border-radius: 12px;
  box-shadow: var(--shadow-card-soft);
  margin: 0 0 36px;
}
.cmp-exec-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
}
.cmp-exec p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.cmp-exec p strong { font-weight: 600; }
.cmp-exec p + p { margin-top: 8px; color: rgba(20,18,14,0.7); font-size: 14.5px; }

/* Prev / next page navigation at the bottom of every vs-* page */
.cmp-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 64px 0 24px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline-faint);
}
.cmp-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--hairline-faint);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease;
  min-width: 0;
}
.cmp-nav-link:hover { border-color: var(--accent); }
.cmp-nav-link--prev { text-align: left; }
.cmp-nav-link--next { text-align: right; }
.cmp-nav-link--prev::before,
.cmp-nav-link--next::after {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.cmp-nav-link--prev::before { content: "‹  Previous"; }
.cmp-nav-link--next::after  { content: "Next  ›"; }
.cmp-nav-link-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cmp-nav-link-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(20,18,14,0.6);
  line-height: 1.4;
}
.cmp-nav-hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: var(--chassis);
  border: 1px solid var(--hairline-faint);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease;
}
.cmp-nav-hub:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════════
   Mobile  –  narrow viewports
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cmp-vslinks { grid-template-columns: repeat(2, 1fr); }
  .cmp-exec { grid-template-columns: 1fr; gap: 8px; }
  .cmp-tbl thead th { font-size: 10px; padding: 12px 10px; }
  .cmp-tbl tbody td { padding: 12px 10px; }
  .cmp-tbl th:first-child, .cmp-tbl td:first-child { min-width: 170px; }
}

@media (max-width: 720px) {
  .cmp-hero { padding: 80px 0 32px; }
  .cmp-vslinks { grid-template-columns: 1fr; }
  .cmp-callout { padding: 20px 22px; }
  .cmp-tbl-wrap::before { font-size: 9px; top: 10px; right: 10px; padding: 3px 8px; }
  .cmp-tbl { font-size: 12.5px; }
  .cmp-tbl tbody td:first-child { font-size: 12.5px; }
  .cmp-nav { grid-template-columns: 1fr; gap: 12px; }
  .cmp-nav-link--next { text-align: left; }
  .cmp-nav-link--next::after { content: "Next  ›"; }
}

/* ─── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cmp-vslink, .cmp-nav-link, .cmp-vslink::after { transition: none; }
  .cmp-vslink:hover { transform: none; }
}