/* Editorial layer — shared by /compare and /guides.
 *
 * WHY this exists: both surfaces were rendering every section at one density,
 * one surface value, and one type size. DESIGN.md names that failure directly
 * ("black-on-black mush ... every panel at near-identical luminance"). The fix
 * inside Quiet Black is not decoration, which is banned, but the three levers
 * that are free: value separation, spacing rhythm, and typographic scale.
 *
 * Scoped to body[data-page] so nothing here leaks into the shared site.css
 * surfaces, which are frozen.
 */

body[data-page="compare"],
body[data-page="guides"] {
  /* One spacing scale, so section rhythm is a decision rather than a default. */
  --e-1: 8px;
  --e-2: 14px;
  --e-3: 22px;
  --e-4: 34px;
  --e-5: 56px;
  --e-6: 88px;
}

/* ── Section rhythm ──
   The stock 120px block padding left a dead band between every section at
   desktop width. Tightened, and made asymmetric: more air above a heading than
   below it, so a section reads as one group instead of a floating slab. */
body[data-page="compare"] section > .inner,
body[data-page="guides"] section > .inner {
  padding-top: clamp(48px, 6.5vw, 82px);
  padding-bottom: clamp(48px, 6.5vw, 82px);
}
body[data-page="compare"] section#hero > .inner,
body[data-page="guides"] section#hero > .inner {
  padding-top: clamp(84px, 12vh, 128px);
  padding-bottom: clamp(36px, 5vw, 58px);
}

/* Alternating band. A single hairline between identical-value sections is not
   enough separation over a 4,000px page; a barely-lifted band every other
   section gives the eye somewhere to rest. Two values only, no gradient. */
body[data-page="compare"] section:nth-of-type(even),
body[data-page="guides"] section:nth-of-type(even) {
  background: #08090C;
}

/* ── Section header ──
   Was: a 10px mono string and a hairline. Now: a display ordinal that sets the
   scale, and a heading with actual presence. The ordinal is dim on purpose —
   it is structure, not content, so it reads as an index mark. */
.sec-big {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num title" "num rule";
  align-items: baseline;
  column-gap: clamp(14px, 2vw, 22px);
  row-gap: 12px;
  margin-bottom: clamp(26px, 3.6vw, 44px);
}
.sec-big .sec-n {
  grid-area: num;
  align-self: start;
  font-family: var(--f-mono);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: .82;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--fg4);
  font-variant-numeric: tabular-nums;
  /* Optically align the numeral's cap height with the title's. */
  position: relative;
  top: .06em;
}
.sec-big .sec-t {
  grid-area: title;
  margin: 0;
  font-family: var(--f-disp);
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.14;
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--fg);
  max-width: 26ch;
}
.sec-big .rule {
  grid-area: rule;
  align-self: center;
  height: 1px;
  background: var(--hair2);
}
@media (max-width: 620px) {
  .sec-big { grid-template-columns: 1fr; grid-template-areas: "num" "title" "rule"; row-gap: 8px; }
  .sec-big .sec-n { font-size: 24px; }
}

/* ── Elevation ──
   No glass, no glow, no shadow. A 1px top highlight is how a raised surface
   actually behaves under a light source, and it is the cheapest way to stop
   twenty stacked cards reading as one flat sheet. */
body[data-page="compare"] .vs-card,
body[data-page="compare"] .vs-snap,
body[data-page="compare"] .vs-hp,
body[data-page="compare"] .vs-decide-col,
body[data-page="compare"] .vs-price-cell,
body[data-page="compare"] .vs-mech,
body[data-page="compare"] .vs-scene,
body[data-page="guides"] .g-card,
body[data-page="guides"] .g-fig,
body[data-page="guides"] .g-takeaways,
body[data-page="guides"] .g-relcard,
body[data-page="guides"] .g-note,
body[data-page="guides"] .g-product,
body[data-page="guides"] .g-code,
body[data-page="guides"] .g-sidecta {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* Interactive cards get a real lift, not just a border swap. */
body[data-page="compare"] a.vs-card,
body[data-page="guides"] a.g-card,
body[data-page="guides"] a.g-relcard,
body[data-page="compare"] a.vs-trow {
  transition: border-color .16s var(--settle), background .16s var(--settle),
              transform .16s var(--settle), box-shadow .16s var(--settle);
}
body[data-page="compare"] a.vs-card:hover,
body[data-page="guides"] a.g-card:hover,
body[data-page="guides"] a.g-relcard:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="compare"] a.vs-card:hover,
  body[data-page="guides"] a.g-card:hover,
  body[data-page="guides"] a.g-relcard:hover { transform: none; }
}

/* ── Numerals ──
   Every figure on these pages is a price, a percentage, or a date. Lining
   tabular numerals stop columns of numbers from wobbling. */
body[data-page="compare"] .num,
body[data-page="compare"] .g-table td,
body[data-page="guides"] .num,
body[data-page="guides"] .g-table td {
  font-variant-numeric: tabular-nums;
}

/* ── Focus ──
   Keyboard focus was inheriting a faint default. On a near-black page that is
   effectively invisible. */
body[data-page="compare"] a:focus-visible,
body[data-page="guides"] a:focus-visible,
body[data-page="compare"] button:focus-visible,
body[data-page="guides"] button:focus-visible {
  outline: 2px solid var(--claude);
  outline-offset: 3px;
  border-radius: 3px;
}