/* 2026-08-03 REL_105 — /how-it-works page-unique layout glue ONLY.
   Tokens only: every colour is a var() from di-system's :root. No hex, no rgb()/rgba() literal, no new token.

   🔴 SLIMMED in the same release it was written (Naveen: "css ki comman cheeze ek jagah rakh do"). Everything
   this file shared with di-about.css — the heading scale, the section wash, the CTA band, the centred reading
   measure and the 3-up CTA grid — now lives in di-system as ADDITIVE, opt-in primitives (.di-static,
   .di-sec--alt, .di-sec--cta, .di-measure, .di-gs--3), written to both di-system.css AND di-system.scss.

   Structurally everything is SHARED and not redefined here: .di-sec/--top, .di-wrap, .di-pagehead, .di-tag,
   .di-lead, .di-prose, .di-steps/.di-step (including its numbered .n badge), .di-faq with its native
   <details>/<summary> styling, .di-gs/.di-gs__c, .di-btn. Every candidate was grepped in di-system FIRST —
   which is how .di-steps and .di-faq were found rather than hand-rolled.

   No dark block: marketme's di-system is intentionally light-only (zero prefers-color-scheme, zero data-theme). */

/* ---------- section heading block ---------- */
.hiw-head {
  max-width: 46rem;
  margin: 0 0 2rem;
}
.hiw-head h2 { margin: .5rem 0 .5rem; }
.hiw-head--center {
  max-width: none;
  text-align: center;
}

/* ---------- journeys ----------
   The cards are the shared .di-step. The only glue is making an <ol> safe to use as the shared grid: an ordered
   list is the honest markup for a sequence, but its markers must not paint on top of the cards. Learned on
   /about-us, where removing list-style:none put a disc outside all 8 cards — grid does NOT suppress the marker.
   Paired with role="list" in the markup: <ol>'s implicit ARIA role already IS `list`, so that attribute is a
   same-value safeguard against WebKit's marker-suppression heuristic, not an override. */
.hiw-steps { margin: 0; padding: 0; }
.hiw-steps li.di-step { list-style: none; }

/* ---------- narrow prose block (security section) ---------- */
.hiw-narrow { max-width: 52rem; }
.hiw-narrow h2 { margin: 0 0 1rem; }

/* ---------- CTA band heading rhythm (the band itself is the shared .di-sec--cta) ---------- */
.hiw-cta-h { margin: 0 0 1.75rem; }