/* Competitor comparison page. Theme-aware; the whole matrix scrolls horizontally
   on small screens while the Feature column and HwyHero column stay pinned. */
.compare-body { margin: 0; background: var(--hwy-sand, #f6f3ec); color: var(--hwy-ink, #1b2430); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }

.compare-header {
   display: flex; align-items: center; justify-content: space-between;
   padding: 14px 22px; background: var(--hwy-header-bg, #0d3b2e); color: #fff; position: sticky; top: 0; z-index: 30;
}
.compare-brand { font-size: 18px; font-weight: 800; color: #fff; text-decoration: none; }
.compare-nav { display: flex; align-items: center; gap: 16px; }
.compare-nav a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px; font-weight: 600; }
.compare-cta { background: var(--hwy-green, #1f8a5b); color: #fff !important; padding: 8px 14px; border-radius: 9px; }
.compare-cta.big { display: inline-block; margin-top: 14px; padding: 13px 22px; font-size: 16px; font-weight: 800; }

.compare-main { max-width: 1180px; margin: 0 auto; padding: 24px 18px 60px; }
.compare-hero { text-align: center; margin-bottom: 22px; }
.compare-hero h1 { font-size: clamp(22px, 3.5vw, 34px); margin: 8px 0 10px; }
.compare-hero p { color: var(--hwy-muted, #55606e); max-width: 720px; margin: 0 auto; font-size: 15px; }

/* Reserve the scoreboard's real height so it doesn't grow-and-shove the table
   down once the JS-built cards land. One row on desktop (~92px); it wraps to
   three rows on phones, so reserve the taller height there (measured ~276px)
   to keep cumulative layout shift at zero on Lighthouse's mobile emulation. */
.scoreboard { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0 12px; min-height: 92px; }
@media (max-width: 900px) { .scoreboard { min-height: 288px; } }
.score { min-width: 74px; padding: 10px 8px; border-radius: 12px; background: var(--hwy-card, #fff); border: 1px solid var(--hwy-line, #e0dccf); }
.score-num { font-size: 22px; font-weight: 800; }
.score-name { font-size: 11.5px; color: var(--hwy-muted, #55606e); margin-top: 2px; }
.score-us { background: var(--hwy-green, #1f8a5b); border-color: var(--hwy-green, #1f8a5b); color: #fff; transform: scale(1.08); box-shadow: 0 8px 20px rgba(31, 138, 91, 0.35); }
.score-us .score-name { color: rgba(255, 255, 255, 0.9); }
.score-runner { outline: 2px dashed var(--hwy-line, #cfc9ba); }
.score { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.score:hover, .score:focus-visible, .score-lit { transform: scale(1.09); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); outline: 2px solid var(--hwy-green, #1f8a5b); }
.score-us.score-lit { transform: scale(1.14); }

/* Column highlight from hovering a cell (light) or a scoreboard card (big). */
.matrix th.app.col-lit { color: var(--hwy-accent, #1f8a5b); box-shadow: inset 0 -3px 0 var(--hwy-green, #1f8a5b); }
.matrix td.col-lit { background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 10%, var(--hwy-card, #fff)); }
.matrix .cell-us.col-lit { background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 20%, var(--hwy-card, #fff)); }
/* Ink is --hwy-accent (readable on dark cards); --hwy-green stays for fills. */
.matrix th.app.col-big { color: var(--hwy-accent, #1f8a5b); background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 16%, var(--hwy-card, #fff)); }
/* Enlarge on hover WITHOUT changing layout: the cell already reserves room for
   the biggest state (see fixed cell size below) and clips, so the table's scroll
   width never changes on hover — no scrollbar can appear, no shift. */
.matrix td.col-big { background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 12%, var(--hwy-card, #fff)); }
.matrix td.col-big span { display: inline-block; transform: scale(2.1); font-weight: 900; transition: transform 0.1s; }

.compare-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 13px; color: var(--hwy-muted, #55606e); margin-top: 14px; }
.compare-legend .lg { font-weight: 800; margin-right: 4px; }

.compare-sorthint { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: var(--hwy-muted, #55606e); margin: 4px 0 12px; }
.compare-reset { background: var(--hwy-green, #1f8a5b); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.compare-reset:hover { filter: brightness(1.08); }

/* Reserve the full rendered height of the ~52-row matrix so the JS-built table
   doesn't shove the legend/footer down when it lands (zero CLS). Desktop renders
   ~2548px, phones ~2612px; keep these in sync if rows are added/removed. */
.compare-tablewrap { min-height: 2560px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hwy-line, #e0dccf); border-radius: 14px; background: var(--hwy-card, #fff); }
@media (max-width: 900px) { .compare-tablewrap { min-height: 2640px; } }

/* Sortable headers */
.matrix thead th.app, .matrix .feature { cursor: pointer; user-select: none; }
.matrix thead th.app:hover span, .matrix .feature:hover { color: var(--hwy-green, #1f8a5b); }
.matrix thead th.app:focus-visible, .matrix .feature:focus-visible { outline: 2px solid var(--hwy-green, #1f8a5b); outline-offset: -2px; }
.matrix thead th.app.is-sorted { color: var(--hwy-green, #1f8a5b); box-shadow: inset 0 -3px 0 var(--hwy-green, #1f8a5b); }
.matrix tr.is-rowsorted .feature { box-shadow: inset 3px 0 0 var(--hwy-green, #1f8a5b); }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.matrix th, .matrix td { padding: 10px 8px; text-align: center; }
/* Data cells reserve room for the 2.1× hover checkmark and CLIP, so the scaled
   glyph can never grow the table's scroll width → no scrollbar appears, no shift
   on hover. Headers keep their natural width (company names mustn't clip); the
   column width is the max of header + cells automatically. */
.matrix td.cell { min-width: 48px; height: 44px; padding: 4px 6px; box-sizing: border-box; overflow: hidden; }

/* Header row */
.matrix thead th { position: sticky; top: 0; background: var(--hwy-card, #fff); z-index: 3; border-bottom: 2px solid var(--hwy-line, #e0dccf); font-size: 12.5px; }
.matrix thead th.app span { display: inline-block; }
.matrix thead th.app-us { color: var(--hwy-accent, #1f8a5b); font-weight: 800; }
.matrix th.corner { z-index: 4; }

/* Pinned Feature column */
.matrix .feature, .matrix th.corner {
   position: sticky; left: 0; z-index: 2; text-align: left;
   background: var(--hwy-card, #fff); font-weight: 600; min-width: 210px; max-width: 260px;
   border-right: 1px solid var(--hwy-line, #e0dccf);
}
.matrix .corner { z-index: 5; }

/* Pinned HwyHero column (first data column) */
.matrix .app-us, .matrix .cell-us { position: sticky; left: 210px; z-index: 2; background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 10%, var(--hwy-card, #fff)); }
.matrix thead th.app-us { z-index: 4; }
.matrix .cell-us { font-weight: 800; }

.group-row td { text-align: left; background: var(--hwy-subtle, #eef1f4); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-muted, #55606e); position: sticky; left: 0; }
.matrix tbody tr:not(.group-row):hover td, .matrix tbody tr:not(.group-row):hover .feature { background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 6%, var(--hwy-card, #fff)); }

.cell span { font-weight: 800; font-size: 15px; }
.cell.yes span { color: var(--hwy-green, #1f8a5b); }
.cell.partial span { color: #c98a19; }
.cell.paid span { color: #7a8aa0; }
.cell.paid { position: relative; }
.cell.paid span::after { content: "$"; font-size: 9px; vertical-align: super; opacity: 0.7; }
.cell.roadmap span { color: #b06fd0; font-size: 13px; }
.cell.no span { color: var(--hwy-line, #c7c0af); }

.compare-foot { text-align: center; margin-top: 22px; color: var(--hwy-muted, #55606e); font-size: 13px; }

@media (prefers-color-scheme: dark) {
   .compare-body { background: #0b1017; color: #e6ecf3; }
   .score, .matrix, .compare-tablewrap { background: #121a26; border-color: #223047; }
   .matrix thead th, .matrix .feature, .matrix th.corner { background: #121a26; border-color: #223047; }
   .group-row td { background: #0e1622; color: #93a3ba; }
   .matrix .app-us, .matrix .cell-us { background: color-mix(in srgb, #1f8a5b 26%, #121a26); }
   .cell.no span { color: #38465c; }
}
:root[data-theme="dark"] .compare-body { background: #0b1017; color: #e6ecf3; }
:root[data-theme="dark"] .matrix, :root[data-theme="dark"] .score, :root[data-theme="dark"] .compare-tablewrap { background: #121a26; border-color: #223047; }
:root[data-theme="dark"] .matrix thead th, :root[data-theme="dark"] .matrix .feature, :root[data-theme="dark"] .matrix th.corner { background: #121a26; border-color: #223047; }
:root[data-theme="dark"] .group-row td { background: #0e1622; color: #93a3ba; }
:root[data-theme="dark"] .matrix .app-us, :root[data-theme="dark"] .matrix .cell-us { background: color-mix(in srgb, #1f8a5b 26%, #121a26); }
:root[data-theme="light"] .compare-body { background: var(--hwy-sand, #f6f3ec); color: #1b2430; }

/* ── Scoreboard: HwyHero's tile is the winning highway guide sign; its count
   glows amber. Competitors stay quiet white cards. (frontend-design pass, in the
   cockpit/badges/herolog language.) ── */
.score-us {
   /* Fixed guide-sign green — theme token goes light-mint in dark mode and would
      fail the amber count + white name contrast. */
   background: linear-gradient(178deg, #12694f, #0b3d2e);
   border: none;
   color: #fff;
   transform: scale(1.12);
   box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
      0 12px 28px -10px rgba(11, 61, 46, 0.65);
}
.score-us .score-num { color: #f4b740; font-size: 24px; }
.score-us .score-name { color: rgba(255, 255, 255, 0.92); }
.score-us.score-lit { transform: scale(1.16); }