/* ==========================================================================
   The calm pass, 2026-10-29: the services section. Edgar on x3web.co.za:
   "Choose where you want to start" as a grid, neat and professional, but
   "we don't have to have so much boxes". So: six services in ONE white
   surface, divided by hairlines (the grid's 1px gap shows the line colour
   through), the website cell lifted as the recommended one. The tab spine
   and its seven panels are gone from new-home.html. Folded into
   new-styles.css on promote.
   ========================================================================== */

/* Edgar 2026-10-29: "add spacing between blocks". The one hairline-divided
   surface is now six cells with air between them: each cell its own white
   card with a hairline and the card radius, 24px apart, on the alt ground. */
.svc {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: none;
}
@media (min-width: 601px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1081px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-cell {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;              /* clips the recommended bar to the radius */
}
@media (min-width: 601px) { .svc-cell { padding: 32px; } }

/* Top row: the line icon, and the pill on the recommended cell only */
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.svc-icon { width: 24px; height: 24px; flex: none; color: var(--coral); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.svc-cell h3 { font-size: var(--fs-h3); margin: 0 0 var(--s2); }
.svc-cell > p { color: var(--text-muted); margin: 0 0 var(--s4); }

/* The tick lines reuse .facts from new-styles.css; only the type is tuned.
   The lists align from the bottom, so their hairlines sit at one height
   across a row (look loop after the Apple pass). */
.svc-cell .facts { font-size: var(--fs-small); margin-top: auto; }
.svc-cell .facts li { padding: 0.65rem 0; }
.svc-cell .facts svg { width: 18px; height: 18px; margin-top: 3px; }

/* Foot: the price on the left, the arrow link on the right, wraps on a phone */
.svc-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-top: auto; padding-top: var(--s4);
}
.svc-price { font-weight: 600; font-size: var(--fs-small); color: var(--text); }
.svc-foot .ulink { font-size: var(--fs-small); white-space: nowrap; margin-left: auto; }

/* The recommended cell: a coral bar on its top edge, inside the cell */
.svc-cell--rec::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--coral);
}
.svc-pill {
  display: inline-flex; align-items: center;
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-family: var(--font); font-size: 0.8rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}

/* The two services that left the grid, and the assistant, under it */
.svc + .services-note { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.svc + .services-note p { max-width: 62ch; }
@media (max-width: 600px) { .services-note { display: none; } }   /* Edgar 2026-10-30: off on a phone */

/* Motion: the cells rise with the section's own reveal; no extra animation */
@media (prefers-reduced-motion: reduce) {
  .svc-foot .ulink::after { transition: none; }
}