/* Section 6: comparison (agent C, v14).
   A framed three-column table whose column lines sit on the same thirds as the fact strip and the how-it-works grid.
   The Rivius column gets a faint gold tint and a 2px gold hairline on its header; the other column stays neutral.
   Phones (<810): each row stacks as label → two labelled values; nothing scrolls sideways. */

.compare .compare-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 96px 32px 64px;
  border-top: 1px solid var(--token-line);
  text-align: center;
}
.compare .compare-head .h2 { max-width: 740px; }

.compare .compare-body { border-top: 1px solid var(--token-line); }
.compare .compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare .compare-table col { width: 33.3333%; }
.compare .compare-table th,
.compare .compare-table td {
  padding: 28px 32px;
  text-align: left; vertical-align: top;
  font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -0.03em;
  text-wrap: pretty;
}
.compare .compare-table tr > * + * { border-left: 1px solid var(--token-line); }
.compare .compare-table tbody tr > * { border-top: 1px solid var(--token-line); }

/* column header row */
.compare .compare-table thead th { padding: 22px 32px; vertical-align: middle; }
.compare .compare-table thead .compare-us { box-shadow: inset 0 2px 0 var(--brand-accent); }
.compare .compare-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: -0.045em;
  color: var(--token-black);
}
.compare .compare-brand .logo-mark { width: 18px; height: 18px; }
.compare .compare-table thead .compare-them {
  font-size: 15px; font-weight: 600; letter-spacing: -0.035em;
  color: var(--token-ink-2);
}
.compare .compare-table thead .compare-them span { font-weight: 500; color: var(--token-grey-7a); }

/* body rows: the row names set in the serif, like Sola's plan names */
.compare .compare-table tbody th {
  padding-top: 25px;
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--token-ink);
}
.compare .compare-us { background: rgba(242, 201, 121, .1); }
/* wide desktop cells: balance the two-line values; narrower widths keep the default (pretty) wrap */
@media (min-width: 1200px) { .compare .compare-table td { text-wrap: balance; } }
.compare .compare-table td.compare-us { color: var(--token-ink); }
.compare .compare-table td.compare-them { color: var(--token-grey-54); }
.compare .compare-tag { display: none; } /* shown on phones, where the stacked cells lose their column headers */
.compare .nb { white-space: nowrap; }

.compare .compare-note {
  padding: 20px 32px 22px;
  border-top: 1px solid var(--token-line);
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--token-grey-7a);
}

/* ---------------- Breakpoints ---------------- */
@media (max-width: 1199px) {
  .compare .compare-table .compare-col-label { width: 24%; }
  .compare .compare-table .compare-col-us,
  .compare .compare-table .compare-col-them { width: 38%; }
  .compare .compare-table th,
  .compare .compare-table td { padding: 24px; }
  .compare .compare-table thead th { padding: 20px 24px; }
  .compare .compare-table tbody th { padding-top: 21px; font-size: 20px; }
  .compare .compare-note { padding: 18px 24px 20px; }
}

@media (max-width: 809px) {
  .compare .compare-head { padding: 64px 24px 40px; }

  .compare .compare-table,
  .compare .compare-table tbody,
  .compare .compare-table tr,
  .compare .compare-table th,
  .compare .compare-table td { display: block; width: auto; }
  .compare .compare-table colgroup { display: none; }
  .compare .compare-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .compare .compare-table tbody tr { padding: 24px 16px; }
  .compare .compare-table tbody tr + tr { border-top: 1px solid var(--token-line); }
  .compare .compare-table tbody tr > * { border: 0; }
  .compare .compare-table tr > * + * { border-left: 0; }

  .compare .compare-table tbody th {
    padding: 0 0 12px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--token-grey-61);
  }
  .compare .compare-table td {
    padding: 12px 14px 13px;
    text-wrap: pretty;
    border-radius: 10px;
    font-size: 15px;
  }
  .compare .compare-table td.compare-us { box-shadow: inset 2px 0 0 var(--brand-accent); border-radius: 2px 10px 10px 2px; }
  .compare .compare-table td.compare-them { margin-top: 8px; box-shadow: inset 0 0 0 1px var(--token-line); }
  .compare .compare-tag {
    display: block; margin-bottom: 4px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--token-grey-7a);
  }
  .compare .compare-us .compare-tag { color: #8A5310; }
  .compare .compare-note { padding: 18px 16px 20px; }
}