/* ==========================================================================
   PULSE V2 — compare.css · "ION ATMOSPHERE"
   /compare — PULSE vs the alternatives. Spec-sheet instrument language:
   one full-bleed matrix band (chips carry state, prose cells carry facts,
   PULSE column gets the accent tint), differentiator cards, closing CTA.
   Requires tokens.css + base.css first; viz.js drives the hero trace.
   Tokens only — zero hardcoded colors. No inline styles — CSP style-src
   'self'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — calm TRACE echo (§6.3) under a drifting top aurora
   -------------------------------------------------------------------------- */
.cmp-hero h1 { max-width: 16ch; }
.cmp-hero .section-sub { max-width: 58ch; }
.cmp-hero .trust-strip { margin-top: var(--sp-5); }

.hero-trace { margin-top: var(--sp-8); }
.hero-trace .motif-svg { width: min(100%, 40rem); }
.cmp-hero .trace-caption { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   01 · Comparison matrix — the page's one full-bleed telemetry band
   -------------------------------------------------------------------------- */
.cmp-band {
  background-color: var(--surface-1);
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}

.cmp-panel {
  background-color: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-2) ease;
}
.cmp-panel:hover { border-color: var(--line-2); }

.cmp-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}

/* The matrix — instrument table; the unwrappable five-column grid scrolls
   inside .table-scroll on small screens, never widens the page.
   position: relative makes the scroller the containing block for the
   absolutely-positioned .visually-hidden chip labels inside the cells, so
   they stay inside the clipped scroll area instead of widening the page. */
.table-scroll {
  position: relative;
  overflow-x: auto;
  margin-top: var(--sp-2);
}
.cmp-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.cmp-table th,
.cmp-table td {
  padding: 0.9rem 0.9rem;
  border-bottom: 1px solid var(--line-0);
  text-align: start;
  vertical-align: top;
}
/* caps diet (§13): sentence case — mono micro carries the label feel */
.cmp-table thead th {
  font: 700 var(--fs-micro) / 1.3 var(--font-mono);
  letter-spacing: var(--track-micro);
  color: var(--text-3);
  border-bottom: 1px solid var(--line-2);
  vertical-align: bottom;
}
.cmp-table thead th.col-pulse { color: var(--accent-bright); }
.cmp-table tbody th {
  font-weight: 500;
  color: var(--text-2);
  min-width: 9.5rem;
}
.cmp-table tbody tr { transition: background-color var(--dur-1) ease; }
.cmp-table tbody tr:hover { background: var(--wash-1); }
/* Row glow — an accent register tick lights the hovered row's edge */
.cmp-table tbody th { transition: box-shadow var(--dur-1) ease; }
.cmp-table tbody tr:hover th { box-shadow: inset 2px 0 0 var(--accent-line); }

/* The PULSE column — quiet accent tint, slightly brighter on row hover */
.cmp-table td.col-pulse {
  background: var(--accent-tint-2);
  transition: background-color var(--dur-1) ease;
}
.cmp-table tbody tr:hover td.col-pulse { background: var(--accent-tint-1); }

/* Cell anatomy: optional state chip on top, conservative fact text below */
.cell-chip { padding: 3px 10px; }
.cell-detail {
  margin: 0;
  color: var(--text-2);
  max-width: 24ch;
}
.cmp-table td .cell-chip + .cell-detail { margin-top: var(--sp-2); }
.cmp-table td.col-pulse .cell-detail { color: var(--text-1); }
.cell-no .cell-detail { color: var(--text-3); }

/* Dated note + trademark line under the matrix */
.cmp-foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
}
.chip-dated {
  border-style: dashed;
  white-space: normal;
  line-height: 1.5;
  text-align: start;
}
.cmp-disclaimer {
  margin-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   02 · Differentiators — four honest design-decision cards
   -------------------------------------------------------------------------- */
.diff-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 56em) {
  .diff-grid { grid-template-columns: 1fr 1fr; }
}
.diff-card { background: var(--surface-1); }
.diff-card:hover { border-color: var(--line-2); }
.diff-title {
  font-size: var(--fs-h4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-1);
}
.diff-body {
  color: var(--text-2);
  font-size: var(--fs-body-sm);
  max-width: 52ch;
}

.diff-note {
  margin-top: var(--sp-6);
  font: 400 var(--fs-body-sm) / 1.8 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.diff-note a { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Closing — quiet resolution + CTA on the page's one aurora band
   -------------------------------------------------------------------------- */
.closing .container { padding-top: var(--sp-8); }
.closing-line {
  margin-top: var(--sp-4);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  max-width: 30ch;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.closing-meta {
  display: block;
  margin-top: var(--sp-5);
}
.closing-links {
  margin-top: var(--sp-4);
  font: 400 var(--fs-body-sm) / 1.8 var(--font-mono);
  letter-spacing: 0.02em;
}
.closing-links a {
  color: var(--text-3);
  text-decoration-color: var(--line-2);
}
.closing-links a:hover { color: var(--text-1); }