/* ============================================================
   03 - FEATURES (pass 3: off the centre line)

   Pass 2 cut this from 1,292px of explainer blocks down to the
   page's standard stamp: centred eyebrow, centred title, one line
   of sub, three cards. That was shorter but it was also the same
   announcement seven other sections were making, and the sameness
   is what made the page feel like a filled-in template.

   So the composition changes rather than the content. Two columns:
   the head holds the left edge, the three points run beside it as
   rows on hairlines. Nothing new is introduced. The head is the
   shared .section-head.left, the icon tile is the same 36px glyph
   this file already had, the type sizes are unchanged. Tokens only,
   no new hues, no motion beyond the shared .reveal.
   ============================================================ */

/* the second clause takes the accent, inline with the first */
.features-acc { color: var(--accent); }

/* ---------- the two columns ----------
   The head column is capped rather than fractional so the title breaks into a
   calm two or three line stack at every desktop width instead of stretching
   wider as the window grows. */
.features-layout {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* .section-head is a centred banner by default: 720px wide, auto side margins
   and a bottom gap sized to push content away underneath it. As a column it
   wants none of those. Its text alignment and eyebrow still come from the
   shared .left modifier, so this only undoes the banner geometry. */
.features-head {
  max-width: none;
  margin: 0;
}

/* ---------- the three points ---------- */
.features-list { list-style: none; }

/* icon in its own track, so the copy stays on one left edge down the column */
.features-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 0;
}
.features-row:first-child { padding-top: 0; }
.features-row:last-child { padding-bottom: 0; }
/* one hairline between rows, none at the ends: a list, not a boxed table */
.features-row + .features-row { border-top: 1px solid var(--hairline); }

/* small accent glyph in a hairline tile: enough to make the points scannable
   at a glance without becoming decoration */
.features-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--accent);
}
.features-ic svg { width: 19px; height: 19px; }

/* 2px of optical nudge, so the cap height of the title lines up with the centre
   of the glyph tile beside it rather than its top edge */
.features-body { padding-top: 2px; }
.features-h {
  font-size: clamp(16.5px, 1.4vw, 18px);
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.2;
  color: var(--text);
}
.features-p {
  margin-top: 7px;
  font-size: clamp(13.5px, 1.1vw, 14.5px); line-height: 1.6;
  color: var(--text-dim);
  max-width: 62ch;
}

/* ---------- responsive ----------
   Below the breakpoint the head returns to sitting above its content, still
   left aligned. The grid gap becomes the head gap, so the vertical rhythm
   matches the rest of the page without a second margin to keep in sync. */
@media (max-width: 900px) {
  .features-layout {
    grid-template-columns: minmax(0, 1fr);
    /* exactly the shared .section-head gap from site.css: once the head sits
       ABOVE its content it should measure like every other head on the page */
    gap: clamp(28px, 3.2vw, 40px);
  }
}
@media (max-width: 620px) {
  .features-row { padding: 18px 0; gap: 14px; }
}

/* ---------- reduced motion ----------
   Nothing in this section animates or transitions: the hover-lifting cards are
   gone and rows on hairlines do not move. The only motion is the shared
   .reveal, which site.css already flattens under prefers-reduced-motion. */