/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT / TRAINING / REQUIREMENTS / FAQ PAGES — page-group rules
   2026 design system — Geomage Website (www.geomage.com)

   Loaded ALONGSIDE main.css by the four pages of the support group:
     /seismic-software/technical-support/     frontend/support.html
     /seismic-software/requirements-support/  frontend/requirements-support.html
     /seismic-software/training/              frontend/training.html
     /q-a/                                    frontend/qa.html

   Only what the design-system components do NOT already provide lives here:

     · .hero margin-top reset — these four pages carry no .subnav, so the
       component's 116px header+subnav offset has to come back to 70px
       (the same override pages/home.css and pages/services.css write).
     · .sup-list  — the plain-sentence lists (support channels, training
       formats) outside a card; components/mod-cards .mod__features is
       card-scoped (12.5px, margin-top:auto).
     · .sup-band  — white section background for the second band on a page.
     · .req__grid / .req-list — the six system-requirement panels.
       components/specs .split is a two-up; these are six, and their rows are
       bullets with an inline <strong> label rather than key/value pairs, so
       .spec__k's fixed 140px column does not fit them. Their icon tiles are the
       component's own .diff__icon, not a page-local copy.
     · .qa-about  — the three product paragraphs inside one FAQ answer, which
       the legacy page wrote as three <span class="about"> runs.

   Everything else on these pages is a component: .hero (+ .hero__inner--narrow),
   .section-head / .eyebrow, .diff / .diff__grid--3, .panel, .faq, .cta, .btn,
   and the header/footer includes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO OFFSET (no subnav on these pages) ──────────────────────────────── */
.hero { margin-top: 70px; }
/* Anchor targets clear the fixed header only (header-2026.css assumes +subnav). */
section[id],
article[id] { scroll-margin-top: 86px; }
@media (max-width: 720px) {
  section[id],
  article[id] { scroll-margin-top: 76px; }
}

/* ── WHITE BAND ──────────────────────────────────────────────────────────── */
.sup-band { background: var(--bg-white); }

/* ── PLAIN-SENTENCE LISTS ────────────────────────────────────────────────── */
/* Two columns so no line runs the full container measure. Multi-column, not a
   2-col grid: a grid flows row-wise, `columns` flows in written order. */
.sup-list { list-style: none; max-width: 880px; margin: 0 auto; columns: 2; column-gap: 44px; }
.sup-list li {
  display: flex; align-items: flex-start; gap: 11px; break-inside: avoid;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.sup-list li + li { margin-top: 13px; }
.sup-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0; margin-top: 8px;
}

/* ── SYSTEM-REQUIREMENT PANELS ───────────────────────────────────────────── */
.req__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* The panel icons are components/mod-cards .diff__icon — same 40px orange tile,
   same 19px stroked glyph — so the markup uses that class and none of it is
   redeclared here. Only the two stroke-end properties the component does NOT
   set are added, scoped to this grid: these six glyphs draw the drive bays as
   dot commands (`M7 7h.01`), which a butt cap renders as nothing at all. */
.req__grid .diff__icon svg { stroke-linecap: round; stroke-linejoin: round; }
.req-list { list-style: none; margin-top: 16px; }
/* Not a flex row: these items open with an inline <strong> label ("Windows:",
   "SSD storage"), and a flex li would make that label its own column. */
.req-list li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.req-list li + li { margin-top: 10px; }
.req-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.req-list strong { color: var(--text-dark); font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* components/faq.css styles the accordion; the answers on this page carry
   paragraphs, links and the three-product formats run. */
.faq__a p + p { margin-top: 12px; }
.faq__a a { color: var(--orange); font-weight: 600; text-decoration: none; }
.faq__a a:hover { text-decoration: underline; }
.qa-about { display: block; }
.qa-about + .qa-about { margin-top: 10px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .req__grid { grid-template-columns: repeat(2, 1fr); }
  .sup-list { columns: 1; }
}

@media (max-width: 720px) {
  .hero { margin-top: 60px; }
  .req__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* These pages' CTA labels are longer than the concept's and components/
     cta.css puts two of them side by side; stack them at phone width. */
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; justify-content: center; }
}