/* ============================================================
   06 - TRUST  ·  #compare

   History: a 9-row, 3-column comparison matrix, then four compact
   cards, then four claims on bare hairlines, now four real panels
   inside a tinted band.

   Why the panels came back. Stripping the surfaces left four
   columns of text floating on the page background at 1.4% tint,
   which is below the point where anything reads as an object at
   all: the section looked unfinished rather than calm, and it was
   the one place on the page where a visitor could not tell where
   one claim stopped and the next began. The fix is contrast, not
   more text. Each claim is a panel with a real surface, and the
   section itself is a band with a hairline top and bottom, so the
   strip is unmistakably its own block between the games art above
   and the pricing decision below.

   Why still no header. Seven of the page's sections once opened
   with the identical eyebrow / centred title / one-line sub, and
   that uniformity is what made a designed page read as a filled-in
   template. Each of these four items is already a bold statement
   with a line of support under it, so a heading above them could
   only repeat them. The visually hidden h2 keeps the outline
   intact.

   Why it does not look like the pricing grid below. Different
   object: smaller radius, an accent icon tile at the top of each
   panel, four across rather than two, and no price face. The two
   sections share tokens, not a shape.

   Rules this section keeps:
   - It states only what Velocity does. No column of hedged guesses
     about tools we do not run: that is not ours to claim, and the
     positive version is the stronger argument.
   - Motion is limited to the shared .reveal plus a hover that
     changes colour only, never position, so a strip of four does
     not jitter under a travelling cursor.
   - Vertical padding stays on the shared --sec-pad rhythm.
   ============================================================ */

/* ---- the band ----
   Overrides the shared .section-tint (site.css loads before every section
   sheet, so an equal-specificity rule here wins). The gradient is roughly
   double the shared tint and the two hairlines close it off, which is what
   turns a short section into a deliberate strip rather than a gap with words
   in it. */
.compare {
  background: linear-gradient(180deg,
              rgba(255,255,255,.030) 0%,
              rgba(255,255,255,.014) 55%,
              rgba(255,255,255,.006) 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ---- four up ----
   A real gap now, because the divider is gone: the space between panels is
   the division. */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.compare-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 21px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: background var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
/* Colour only. A translate here would make four adjacent panels bob as the
   cursor crosses them, which is exactly the fidgety feel the pass removed. */
.compare-card:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}

/* ---- accent icon tile ----
   The one piece of colour in the strip. A wrapper span rather than padding on
   the svg itself, so the tile geometry does not depend on how a browser
   resolves box-sizing on a replaced element. */
.compare-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin-bottom: 13px;
  color: var(--accent);
  background: var(--accent-grad-soft);
  border: 1px solid rgba(122, 197, 240, .20);
  border-radius: 10px;
}
.compare-ico { width: 17px; height: 17px; }

.compare-h {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--text);
}
.compare-p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: break-word;
}

/* ============================================================
   Responsive. Same breakpoints as the shared .g-4 helper, so this
   steps down exactly when every other grid on the page does. The
   panels carry their own edges, so a step down is only a column
   count now, not a re-declaration of which item starts a row.
   No horizontal scroll at 380px.
   ============================================================ */
@media (max-width: 940px) {
  .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .compare-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .compare-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-card { transition: none; }
}