/* ============================================================
   Aventurine — comparison matrix (comparison.html only)

   The matrix is ONE real <table> at every width — no duplicated
   card deck for mobile — so a crawler, a screen reader and an LLM
   all read the same markup a sighted visitor does. Every cell
   carries its answer as text; the ✓/✕ glyphs are decorative and
   aria-hidden, so nothing is lost when the icons don't render.

   Two sticky behaviours, deliberately split by width:
     wide  — no scroll container, so the header row sticks to the
             viewport under the 68px nav.
     ≤1100 — the wrap becomes a scroll container, which traps the
             header row; instead the criterion column sticks left,
             which is the one that matters while scrolling sideways.
   Load order: base.css → components.css → sections.css → compare.css
   ============================================================ */

/* ---------- hero ---------- */
.cmp-hero { padding: 4.5rem 0 0 }
.cmp-hero h1 { font-size: clamp(2.1rem,4.6vw,3.4rem); max-width: 20ch }
.cmp-hero .lead {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 64ch;
  margin: 1.3rem 0 0;
}
/* the global <em> treatment paints its text with a clipped gradient, which
   forced-colors mode strips — hand the fill back or the headline vanishes */
@media (forced-colors: active) {
  .cmp-hero h1 em, .foot-cta h2 em {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    background-image: none;
  }
}

.cmp-stamp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-top: 1.2rem;
}

/* ---------- the short answer ----------
   The direct-answer block: the one paragraph worth quoting, kept
   near the top where both a skimming reader and a summarizer find
   it first. Honest about who should NOT pick us — that sentence is
   what makes the rest of the page believable. */
.cmp-answer {
  margin-top: 2.6rem;
  max-width: 76ch;
  background: rgba(73,126,116,.07);      /* accent-600 @ 7% */
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.7rem;
}
.cmp-answer h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .7rem;
}
.cmp-answer p { color: var(--text); font-size: 1.02rem; margin: 0 0 .8rem }
.cmp-answer p:last-child { margin-bottom: 0 }
.cmp-answer strong { font-weight: 700 }

/* ---------- matrix section ---------- */
.cmp-section { padding: 4.5rem 0 5rem }
.cmp-section .sec-head { max-width: 66ch }

.cmp-scroll { margin-top: 2.2rem }

.cmp {
  width: 100%;
  min-width: 1000px;
  /* separate (not collapse) so the sticky cells keep their borders —
     collapsed borders belong to the table, and sticky cells leave them behind */
  border-collapse: separate;
  border-spacing: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.cmp caption {
  caption-side: top;
  text-align: left;
  font-size: .88rem;
  color: var(--text-muted);
  padding-bottom: 1rem;
  max-width: 74ch;
}

/* ---------- column heads ---------- */
.cmp thead th {
  position: sticky;
  top: 68px;                              /* clears the sticky nav */
  z-index: 3;
  background: var(--surface);
  text-align: left;
  vertical-align: bottom;
  padding: .9rem .85rem;
  border-bottom: 1.5px solid var(--text);
  font-weight: 400;
}
.cmp thead th:first-child { z-index: 4 }

.cmp-app {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.cmp-kind {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .2rem;
}
.cmp-flag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--accent);
  border-radius: 999px;
  padding: .2rem .55rem;
  margin-bottom: .45rem;
}

/* ---------- the Aventurine column ----------
   Tinted with color-mix rather than a translucent overlay: sticky
   cells must be opaque or the rows scroll through them. */
.cmp thead th.us {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  border-bottom-color: var(--accent);
}
.cmp td.us {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
}
.cmp thead th.us .cmp-app { color: var(--accent-strong) }
.cmp thead th.us .cmp-kind { color: var(--color-accent-700) }

/* ---------- criterion column ---------- */
.cmp tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  padding: .85rem .9rem .85rem 0;
  border-bottom: 1px solid var(--border);
  width: 210px;
  min-width: 210px;
  vertical-align: top;
}

/* ---------- group rows ---------- */
.cmp tbody tr.grp th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  width: auto;
  min-width: 0;
  position: static;                        /* spans the table; nothing to stick to */
}

/* ---------- body cells ---------- */
.cmp td {
  padding: .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  min-width: 132px;
  color: var(--text-muted);
}
/* opaque, not translucent: the criterion column is sticky at narrow widths,
   and a see-through hover would let the rows scroll through it */
.cmp tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, var(--surface)) }
.cmp tbody tr:hover td.us { background: color-mix(in srgb, var(--accent) 11%, var(--surface)) }
.cmp tbody tr:hover th { background: color-mix(in srgb, var(--text) 4%, var(--surface)) }
.cmp tbody tr.grp:hover th { background: var(--surface-2) }

/* ---------- a value ----------
   The glyph is decoration. The text is the answer. */
.v { display: flex; gap: .45rem; align-items: flex-start }
.v svg { width: 14px; height: 14px; flex: none; margin-top: .22em }
.v-yes svg { color: var(--accent) }
.v-no  svg { color: var(--danger) }
.v-mid svg { color: var(--color-aventurine-500) }
.v-no  { color: var(--color-aventurine-600) }
td.us .v-yes { color: var(--accent-strong); font-weight: 600 }

.cmp .num { font-family: 'IBM Plex Mono', monospace; font-size: .95em }

/* footnote markers */
.cmp sup a {
  font-size: .7em;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding-left: .1em;
}
.cmp sup a:hover { text-decoration: underline }

/* ---------- narrow: the wrap scrolls, criterion column pins ---------- */
@media (max-width: 1100px) {
  .cmp-scroll {
    overflow-x: auto;
    /* a keyboard-reachable scroll region — see tabindex/role on the element */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .cmp-scroll:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px }
  .cmp { font-size: .82rem }
  /* the caption sizes to the 1000px table, so on a phone it would be a single
     line you had to scroll sideways to read. It goes to assistive tech and
     crawlers only here — the section heading carries the same thing visually. */
  .cmp caption {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
  }
  /* the header row can't stick to the viewport from inside a scroll
     container, so it stops trying and the criterion column pins instead */
  .cmp thead th { position: static }
  .cmp tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    padding-left: .9rem;
    box-shadow: 1px 0 0 var(--border);
  }
  .cmp tbody tr.grp th { box-shadow: none }
  .cmp thead th:first-child { position: sticky; left: 0; z-index: 4; padding-left: .9rem }
}

/* ---------- scroll hint ---------- */
.cmp-hint {
  display: none;
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .8rem;
}
@media (max-width: 1100px) { .cmp-hint { display: block } }

/* ---------- footnotes ---------- */
.cmp-notes {
  margin: 2rem 0 0 1.1rem;
  font-size: .84rem;
  color: var(--text-muted);
  max-width: 76ch;
}
.cmp-notes li { margin: .5rem 0; padding-left: .25rem; scroll-margin-top: 96px }
.cmp-notes a { color: var(--accent); font-weight: 600 }

/* ---------- honest tradeoffs (dark band) ---------- */
.cmp-fair { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem 2rem; margin-top: 2.8rem }
@media (max-width: 900px) { .cmp-fair { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px) { .cmp-fair { grid-template-columns: 1fr } }
.cmp-fair-item { border-top: 2px solid var(--accent-soft); padding-top: 1.1rem }
.cmp-fair-item h3 { font-size: 1.08rem; margin-bottom: .5rem; color: var(--accent-soft-2) }
.cmp-fair-item p { color: var(--color-aventurine-300); font-size: .93rem }

/* ---------- head-to-head ---------- */
.cmp-h2h { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; margin-top: 2.6rem }
@media (max-width: 820px) { .cmp-h2h { grid-template-columns: 1fr } }
.cmp-card {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
}
.cmp-card h3 { font-size: 1.15rem; margin-bottom: .3rem; scroll-margin-top: 96px }
.cmp-card .cmp-card-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: .9rem;
}
.cmp-card p { color: var(--text-muted); font-size: .95rem; margin: 0 0 .8rem }
.cmp-card p:last-child { margin-bottom: 0 }
.cmp-card strong { color: var(--text); font-weight: 600 }
.cmp-card .verdict {
  display: block;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text);
}
.cmp-card .verdict b { color: var(--accent-strong); font-weight: 700 }

/* ---------- switching steps ---------- */
.cmp-steps { counter-reset: s; list-style: none; margin-top: 2.4rem; display: grid; gap: 1.1rem; max-width: 74ch }
.cmp-steps li { position: relative; padding-left: 3rem; color: var(--text-muted); font-size: .98rem }
.cmp-steps li::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  left: 0;
  top: -.1em;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--accent);
  border: 1.5px solid var(--border);
}
.cmp-steps b { color: var(--text) }