/* ============================================================================
   HOW IT WORKS PAGE — extends the shared landing.css component system.
   Only page-specific helpers live here; everything else (sections, type,
   buttons, splits, steps, checklist, bento, CTA and the lp-bars / lp-pipe /
   lp-kv mini-visuals) is reused from landing.css and feature-grid.css so the
   page stays fully consistent with the homepage, about page and dashboard in
   every theme. Token references only — light and dark resolve automatically.
   ========================================================================= */

/* ── Hero — centered, mirrors the about-hero rhythm ─────────────────────── */
.hiw-hero {
  padding-top: clamp(56px, 8vw, 104px);
  text-align: center;
}

.hiw-hero .lp-display {
  margin-top: var(--space-5);
}

.hiw-hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ── Step sequence — four ordered stages (order is meaningful) ───────────
   lp-steps fans out to three tracks at 720px; this page has four steps, so a
   compound selector lifts it to a 2-up / 4-up cadence that divides evenly. */
@media (min-width: 720px) {
  .lp-steps.hiw-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .lp-steps.hiw-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Under-the-hood: alternating split rows ─────────────────────────────── */
.hiw-split + .hiw-split {
  margin-top: var(--lp-block-gap);
}

/* Flip the media to the opposite side on the second row (desktop only) so the
   section reads as an editorial alternation rather than a repeated column. */
@media (min-width: 980px) {
  .hiw-split--reverse .hiw-panel {
    order: -1;
  }
}

/* ── Visual panel — a token-built surface that frames a mini-visual ──────── */
.hiw-panel {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* The lp-bars / lp-pipe fill and pop animations key off `.wyg__item.in-view`
   in landing.css. Reusing `wyg__item` here brings those hooks, but also its
   two-column rail grid — which we don't want outside the showcase. Reset it to
   a plain block so the panel lays out normally while the reveal hooks stay
   live (initMotion adds `.in-view` because the panel also carries data-motion). */
.hiw-panel.wyg__item {
  display: block;
}

/* The first mini-visual in a panel has no heading above it, so drop the
   leading margin the shared visuals reserve for that case. */
.hiw-panel > .lp-bars:first-child,
.hiw-panel > .lp-pipe:first-child,
.hiw-panel > .lp-kv:first-child {
  margin-top: 0;
}

.hiw-panel__label {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hiw-panel__label + .lp-bars,
.hiw-panel__label + .lp-pipe,
.hiw-panel__label + .lp-kv {
  margin-top: 0;
}