/* ═══════════════════════════════════════════════════════
   MYINSURANCEBRO — Content page layer (Astro)
   ═══════════════════════════════════════════════════════

   Styles for the statically generated long-form pages in site/ — plan reviews today,
   the methodology page and category hubs next. The legacy one-pager does not link this
   file; style.css and components.css stay the shared design system and are not forked.

   SEO_ASTRO_PLAN.md §2.1 lesson 4: Perfecplan shipped 4,000 pages against a template
   whose 21 classes had no rules. Every class the plan template emits has a rule here.

   Everything below resolves through the tokens in style.css, so light/dark follows
   [data-theme] with no second palette to maintain.
   ═══════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────── */

/* .navbar is `position: fixed` with height var(--navbar-height), so it is out of flow. The
   legacy one-pager compensates inside the hero section; a content page has no hero, so
   without this the breadcrumb renders underneath the navbar. */
main {
  padding-top: var(--navbar-height);
}

.plan-page {
  --measure: 72ch;

  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-24);
  font-size: var(--text-lg);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .plan-page {
    padding-inline: var(--space-8);
  }
}

.plan-page > section {
  margin-block: var(--space-12);
}

.plan-page h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.plan-page h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: var(--space-10) 0 var(--space-4);
}

.plan-page h3 {
  font-size: var(--text-lg);
  margin: 0;
}

.plan-page p {
  margin: 0 0 var(--space-4);
}

.plan-page ul {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
}

.plan-page li {
  margin-bottom: var(--space-2);
}

.plan-page a {
  color: var(--color-text);
  text-decoration-color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.plan-page a:hover {
  color: var(--color-primary-dark);
}

/* ── 1. Breadcrumbs ──────────────────────────────────── */

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--color-border);
}

.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.plan-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* ── 3. Answer block ─────────────────────────────────── */
/* The featured-snippet target (§8 block 3). Pulled out visually because it is also the
   first thing a human reads. */

.answer-block {
  font-size: var(--text-xl);
  line-height: 1.55;
  font-weight: 500;
  margin: 0 0 var(--space-10);
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
}

.policy-doc-link {
  margin: 0 0 var(--space-8);
}

/* The compare engine's plan cards gain a third action in the Astro build — a real link to
   the plan page (see Compare.astro / compare.js). components.css lays .plan-actions out as a
   single flex row of two, which three buttons overflow, so the link takes its own row.
   These live here rather than in components.css because that file is shared with the legacy
   one-pager, where this link does not exist (CLAUDE.md). */
.plan-actions {
  flex-wrap: wrap;
}

.plan-card-link {
  flex-basis: 100%;
}

/* ── 4. Key facts ────────────────────────────────────── */

.key-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0 0 var(--space-12);
  padding: 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .key-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.key-facts > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-card-bg);
}

.key-facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.key-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
}

/* ── 6. Premium table ────────────────────────────────── */
/* A real <table> is a §8 requirement — it is what gets extracted. It therefore has to
   survive a 360 px viewport, hence the scroll wrapper rather than a responsive card
   collapse that would destroy the row structure. */

.table-assumption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.plan-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.plan-page caption {
  caption-side: bottom;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: left;
}

.plan-page th,
.plan-page td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* A qualifier inside a column heading — "Complaints per 10,000 claims" needs the unit, but
   the unit should not compete with the label. */
.plan-page .th-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.plan-page thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.plan-page tbody tr:last-child th,
.plan-page tbody tr:last-child td {
  border-bottom: 0;
}

.plan-page td {
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}

/* A cell holding a sentence rather than a figure — opt out of the numeric treatment above,
   which is tuned for short values that must not wrap mid-number. */
.plan-page td.cell-prose {
  font-family: inherit;
  font-weight: 400;
  white-space: normal;
  color: var(--color-text-secondary);
  min-width: 18rem;
}

/* ── 7. Pros and cons ────────────────────────────────── */

.pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .pros-cons {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pros-cons > div {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
}

.pros-cons h2 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.pros-cons > div:first-child h2 {
  border-bottom-color: var(--color-accent-success);
}

.pros-cons > div:last-child h2 {
  border-bottom-color: var(--color-accent-warning);
}

.pros-cons ul {
  margin: 0;
}

.methodology-link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ── 8. FAQ ──────────────────────────────────────────── */
/* <details> collapses the answers, but FAQPage JSON-LD carries the same text, so nothing
   depends on the open state being crawled. */

.plan-page details {
  border-bottom: 1px solid var(--color-border);
}

.plan-page summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.plan-page summary::-webkit-details-marker {
  display: none;
}

.plan-page summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
}

.plan-page details[open] summary::after {
  transform: rotate(45deg);
}

.plan-page details > p {
  padding-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

/* ── 9. Sources and verification ─────────────────────── */

.sources {
  font-size: var(--text-base);
}

.sources .clause,
.last-verified {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* The PUBLISH_UNVERIFIED preview banner. Loud on purpose — §16.8: an unverified figure
   must never be mistaken for a published one. */
/* ── Insurer branding on plan pages ───────────────────────
   Every accented element reads from --plan-accent, set inline on .plan-page from the record's
   `accent` (the insurer's real brand colour, sampled from their own logo).

   The hard constraint: these run from Care Health's #FFE000 yellow to Axis Max's #143A72 navy,
   so the accent can be near-white or near-black. Nothing here puts text IN the accent or text
   ON the accent — it is used for rules, borders and tints only, which stay legible at any
   luminance and in both themes. Resist "just colour the heading with it": it breaks on yellow.
   ──────────────────────────────────────────────────────── */

.plan-page.is-branded {
  --plan-accent: var(--color-primary);
  position: relative;
}

/* A brand bar across the top of the article. */
.plan-page.is-branded::before {
  content: "";
  display: block;
  height: 4px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--plan-accent);
}

.plan-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.plan-header > div {
  flex: 1;
  min-width: 0;
}

.plan-header h1 {
  margin: 0;
}

.plan-header-insurer {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The logo sits on a light tile regardless of theme — these are full-colour marks drawn for
   white stationery, and several disappear against a dark background. */
.plan-header-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-bottom: 3px solid var(--plan-accent);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.plan-header-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.plan-header-score {
  display: grid;
  flex: none;
  place-items: center;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--plan-accent);
  border-radius: var(--radius-md);
  line-height: 1.1;
}

.plan-header-score strong {
  font-size: var(--text-xl);
}

.plan-header-score span {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

/* Tie the existing blocks into the brand rather than restyling them. */
.plan-page.is-branded .answer-block {
  border-left-color: var(--plan-accent);
}

.plan-page.is-branded .key-facts dt {
  color: var(--color-text-secondary);
}

.plan-page.is-branded h2 {
  padding-left: var(--space-4);
  border-left: 3px solid var(--plan-accent);
}

@media (max-width: 560px) {
  .plan-header {
    flex-wrap: wrap;
  }

  .plan-header-score {
    order: -1;
    margin-left: auto;
  }
}

/* "TBD" — a figure we publish but have not yet sourced. Deliberately quiet: an amber chip,
   not the red alarm the old verification block used. It should read as a footnote beside the
   number, not as a warning about the page. */
.tbd {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1em 0.45em;
  border: 1px solid var(--color-accent-warning, #D97706);
  border-radius: var(--radius-sm);
  background: rgba(217, 119, 6, 0.1);
  color: var(--color-accent-warning, #D97706);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  cursor: help;
}

.tbd-legend {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.verification-warning {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent-danger);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-text);
  font-size: var(--text-base);
}

/* ── 10. Disclaimer (components/seo/Disclaimer.astro) ─── */
/* CLAUDE.md invariant 4: premiums are indicative illustrations, never quotes. This has to
   read as a standing notice, not decoration. */

.policy-disclaimer {
  margin-block: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── 11. Internal link mesh ──────────────────────────── */

.internal-links {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.internal-links h2 {
  margin-top: 0;
  font-size: var(--text-xl);
}

.internal-links ul {
  margin-bottom: var(--space-4);
}

.internal-links > p {
  margin: 0;
  font-size: var(--text-base);
}

/* ── 12. CTA ─────────────────────────────────────────── */

.plan-cta {
  margin-block: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-on-ink);
  text-align: center;
}

.plan-cta h2 {
  margin-top: 0;
  color: var(--color-on-ink);
}

.plan-cta p {
  color: var(--color-on-ink-muted);
}

.plan-cta a {
  color: var(--color-ink);
  text-decoration: none;
}

/* The booking form. Field names are frozen (CLAUDE.md invariant 1) — this styles them,
   it does not rename them. */
.plan-cta form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 32rem;
  margin: var(--space-6) auto 0;
  text-align: left;
}

@media (min-width: 640px) {
  .plan-cta form {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan-cta label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-ink-muted);
}

.plan-cta input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  background: var(--color-ink-soft);
  color: var(--color-on-ink);
  font-family: inherit;
  font-size: var(--text-base);
}

.plan-cta input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.plan-cta button {
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.plan-cta button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.policy-disclaimer p {
  margin: 0;
}

/* ── Phase 1a page families ──────────────────────────── */
/* best-plans, insurer reviews and persona hubs. Added with the templates, not after —
   §2.1 lesson 4 is Perfecplan shipping 4,000 pages with 21 classes that had no rules. */

/* The named picks on /[category]/best-plans/. Each award commits to one plan, so it reads
   as a card with a label rather than as another list item. */
.award-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .award-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.award {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
}

.award-title {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.award h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.award p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* One plan's verdict on the best-plans page. The "against it" line is the point of the
   block — a ranking that never says what is wrong with a plan is an advert. */
.verdict-block {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.verdict-block:last-child {
  border-bottom: 0;
}

.verdict-block h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.verdict-against {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent-warning);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* A pain point on /for/[persona]/. Same content as the home page panels, but stacked as
   prose rather than in the two-column panel layout. */
.risk-block {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.risk-block:last-child {
  border-bottom: 0;
}

.risk-block h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* The figure under a pain point. components.css styles .pain-stat inside the home page's
   panel; this is the same idea in the article column, so it is scoped to .plan-page to
   avoid touching that rule. */
.plan-page .pain-stat {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* The internal-links block lists routes as inline links; give them room to breathe when
   several sit on one line. */
.internal-links > p a + a {
  margin-left: var(--space-2);
}

/* ── Glossary (Phase 2) ──────────────────────────────── */

/* The quoted legal definition. It has to *look* like a quotation: §1027 publishes someone
   else's regulated text, and the honest presentation is visibly attributed, not blended
   into our own prose. */
.legal-definition {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-2);
}

.legal-definition p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: 1.65;
}

.legal-definition footer {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.glossary-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.glossary-jump a {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.glossary-jump a:hover {
  background: var(--color-primary);
  color: var(--color-ink);
}

.glossary-list {
  margin: 0;
  padding: 0;
}

.glossary-list > div {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.glossary-list > div:last-child {
  border-bottom: 0;
}

.glossary-list dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.glossary-list dd {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* ── Guides (Phase 2) ────────────────────────────────── */
/* Rules written with the templates, not after — §2.1 lesson 4. */

.guide-meta {
  margin: calc(var(--space-3) * -1) 0 var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* The MDX body. Long-form prose wants a narrower measure and more air between headings than
   the data-dense plan pages do, so it tightens the column rather than inheriting it. */
.guide-body {
  --measure: 68ch;
}

.guide-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  margin: var(--space-12) 0 var(--space-4);
}

.guide-body h3 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.guide-body p {
  margin: 0 0 var(--space-5);
}

.guide-body ul,
.guide-body ol {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}

.guide-body li {
  margin-bottom: var(--space-3);
}

.guide-body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* A closing pointer at the end of a guide — a nudge to the relevant hub, not a hard sell. */
.guide-cta-note {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  font-size: var(--text-base);
}

/* One guide on the index. The answer does the selling, so it gets the room. */
.guide-card {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.guide-card:last-child {
  border-bottom: 0;
}

.guide-card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  line-height: 1.3;
}

.guide-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* A markdown table in MDX arrives without the .table-scroll wrapper the Astro templates use,
   so it has to carry its own overflow. `display: block` + `width: max-content` is the standard
   way to make a table scroll inside its column: the table keeps its natural width and the
   scrolling happens on the table itself, so a wide comparison table cannot push the whole page
   sideways on a phone. Verified at 375 px. */
.guide-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: collapse;
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
}

.guide-body th,
.guide-body td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.guide-body thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.guide-body tbody tr:last-child th,
.guide-body tbody tr:last-child td {
  border-bottom: 0;
}

/* Numeric columns read better right-aligned against each other. */
.guide-body td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* ── Comparison matrix (Phase 3) ─────────────────────── */

.compare-matrix .row-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* The better value on a row. Colour alone would not carry this for a colour-blind reader, so
   the weight change does the work and the tint reinforces it. */
.compare-matrix td.is-better {
  position: relative;
  background: var(--color-accent-2-soft);
  font-weight: 700;
}

.compare-matrix td.is-better::after {
  content: '✓';
  margin-left: var(--space-2);
  color: var(--color-accent-2);
  font-weight: 700;
}

:root[data-theme='dark'] .compare-matrix td.is-better,
:root:not([data-theme='light']) .compare-matrix td.is-better {
  background: rgba(18, 181, 165, 0.16);
}

.compare-matrix thead th a {
  text-decoration: none;
}