/* ==========================================================================
   services.html — page-specific rules (tokens only, no new colours)
   ========================================================================== */

/* Service rows: outlined number in column 1, wide body in columns 2–4
   (long display titles need the width; same idea as .row--sm but full size) */
.services-rows .row__num { grid-column: 1; }
.services-rows .row__body { grid-column: 2 / -1; }
.services-rows .row__text { max-width: 670px; }

/* Plan comparison table: four equal columns sit on the four grid columns */
.compare { min-width: 640px; }
.compare th, .compare td { width: 25%; }
.compare .icon--check { vertical-align: -1px; }
.compare td .small { display: block; margin-top: 6px; color: var(--ink-75); }
.compare .on-request { font-size: 14px; color: var(--ink); }

/* Phone-only hint that the table scrolls sideways */
.services-scroll-note { display: none; }

/* Tablet and phone: style.css collapses .row to one column (number above body) — fall back to auto placement
   so the desktop 1 / 2–4 overrides above do not create an implicit second column */
@media (max-width: 1023px) {
  .services-rows .row__num, .services-rows .row__body { grid-column: auto; }
}

@media (max-width: 639px) {
  .compare { min-width: 560px; }
  .compare .num { font-size: 14px; }
  .services-scroll-note { display: block; margin-bottom: 16px; }
}