/* Light-theme restyle (user-directed) — departs from the export's dark canvas */
/**
 * DocuPOW — How It Works page styles (page-templates/how-it-works.php only).
 *
 * Scope: everything lives under .page-how-it-works (BEM). Global chrome,
 * container, buttons, scroll-reveal and the gradient border come from
 * main.css — this file adds the light canvas, the tonal band rhythm, the
 * journey bar, the ONE obsidian band (The Control Model) and the
 * page-specific motion only.
 *
 * Light-canvas contrast contract (Home/Extraction precedent):
 *  - Canvas is var(--white); tonal bands (journey, final CTA) are var(--gray)
 *    with 1px var(--border) hairlines. Headings are var(--indigo) (11.5:1 on
 *    white, 10.7:1 on --gray); body copy is var(--text-muted) (9.34:1 on
 *    white, 8.70:1 on --gray — AA).
 *  - Mono eyebrows/step labels are 13px/600 var(--techblue) and sit on WHITE
 *    only — 4.54:1, passes AA. None lands on a --gray band in this layout;
 *    if one ever moves onto gray, use the documented darkened techblue
 *    #276CC1 (4.89:1 on --gray — raw --techblue is 4.23:1 there and fails
 *    4.5:1 at small sizes; same derivation as the .dp-btn primary hover).
 *  - Active journey pill: var(--white) label on var(--techblue) fill —
 *    4.54:1, AA at 14px/500; the pill icon flips to white (icon-only >= 3:1).
 *  - Confidence chips keep #0A7B56 (darkened --ok, 4.92:1 on --gray — raw
 *    --ok is 2.4:1 and fails). The step-2 callout icon uses #946300
 *    (darkened --warn, 5.20:1 on white — raw --warn is ~2.2:1 and fails the
 *    3:1 non-text minimum).
 *  - THE ONE DARK BAND — The Control Model (S4) keeps the obsidian contract
 *    verbatim: var(--obsidian) canvas, white headings, var(--text-muted-dark)
 *    body (7.58:1 AA), var(--border-dark) hairlines, techblue icons
 *    (icon-only 3.71:1 >= 3:1) and the light-halo focus treatment. Every
 *    dark token in this sheet lives inside that band's scope.
 *
 * Motion contract (transform/opacity/filter only):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if how-it-works.js never runs under that preference) everything is
 *    visible.
 *  - how-it-works.js hooks: .is-ready on .page-how-it-works__hero (hero
 *    entrance + visual scale-in/float); .is-active/aria-current="step" on
 *    [data-hiw-pill]; .is-pulsing on [data-hiw-chip] (one-shot pulse);
 *    .is-active shows the [data-hiw-*-pulse] dot rows; .is-visible fades
 *    [data-hiw-conf] / [data-hiw-chat-q] / [data-hiw-chat-a] in.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — white canvas, section rhythm
   ========================================================================= */
.page-how-it-works {
  background-color: var(--white);
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* Focus on light surfaces uses the standard global techblue ring from
   main.css; the light-halo treatment now lives ONLY inside the Control
   Model band (see S4). ::selection is the global default (main.css). */

/* 96px section padding on desktop, 64px under 768. */
.page-how-it-works__hero,
.page-how-it-works__journey,
.page-how-it-works__steps,
.page-how-it-works__control,
.page-how-it-works__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-how-it-works__hero,
  .page-how-it-works__journey,
  .page-how-it-works__steps,
  .page-how-it-works__control,
  .page-how-it-works__cta {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero (centered, white band)
   ========================================================================= */
.page-how-it-works__hero {
  text-align: center;
}

/* Eyebrow — mono technical label; techblue semibold on white is 4.54:1
   (passes AA at 13px/600 — Extraction hero-eyebrow precedent). */
.page-how-it-works__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700), Royal Indigo on white. */
.page-how-it-works__hero h1 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  max-width: 896px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

/* body-lg subhead (class hook + structural fallback so either markup works). */
.page-how-it-works__subhead,
.page-how-it-works__hero h1 + p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* Hero visual — tonal gray panel on the white band (Home diagram pattern). */
.page-how-it-works__hero-visual,
.page-how-it-works [data-hiw-hero-visual] {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 16px; /* outranks .dp-gradient-border-active (later sheet) */
  height: 384px;
  padding: var(--space-4);
  margin-top: var(--space-6); /* 8px rhythm (~60px spec) */
  display: flex;
  text-align: center;
}

/* Placeholder slot — white inner surface on the gray panels, awaiting the
   real product visuals. */
.page-how-it-works__visual-slot {
  width: 100%;
  height: 100%;
  background-color: var(--white);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 639.98px) {
  .page-how-it-works__hero-visual,
  .page-how-it-works [data-hiw-hero-visual] {
    height: 288px; /* keep the empty slot proportionate on small screens */
    padding: var(--space-3);
  }
}

/* =========================================================================
   S2 — Journey bar (One journey, two layers) — gray band
   ========================================================================= */
.page-how-it-works__journey {
  background-color: var(--gray);
  border-block: 1px solid var(--border); /* band y-hairlines */
  text-align: center;
}

/* Section h2s on light surfaces — headline-lg, Royal Indigo. */
.page-how-it-works__journey h2,
.page-how-it-works__cta h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

/* Subline under the journey heading — 8.70:1 on the gray band. */
.page-how-it-works__journey h2 + p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* The bar — white workspace card on the gray band (Home/Extraction
   white-card-on-gray-band pattern). */
.page-how-it-works__bar,
.page-how-it-works [data-hiw-bar] {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
}

/* Floating chip — centered on the bar's top edge. Its fill/border/indigo
   tokens were already light-surface tokens on the dark build — unchanged. */
.page-how-it-works__chip,
.page-how-it-works [data-hiw-chip] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px; /* pill — chips/tags only, never buttons */
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--indigo);
  white-space: nowrap;
}

.page-how-it-works__chip svg,
.page-how-it-works [data-hiw-chip] svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Pill row — five equal columns over a connecting hairline. */
.page-how-it-works__pills {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Connecting hairline behind the pills (shows through the column gaps).
   The template renders it as a real span — absolutely positioned so it never
   participates in the 5-column pill grid. */
.page-how-it-works__bar-line {
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  height: 1px;
  background-color: var(--border);
}

/* Pill buttons — white cards, 1px hairline, ink labels. ~200ms transitions.
   The icon is locked to techblue at rest (4.54:1 on white, icon-only >= 3:1)
   and flips to white in the active state below. */
.page-how-it-works__pill,
.page-how-it-works [data-hiw-pill] {
  position: relative; /* sits above the hairline */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.page-how-it-works__pill svg,
.page-how-it-works [data-hiw-pill] svg {
  width: 24px;
  height: 24px;
  color: var(--techblue); /* icon-only accent — 4.54:1 >= 3:1 on white */
  flex: none;
}

.page-how-it-works__pill:hover,
.page-how-it-works [data-hiw-pill]:hover {
  border-color: var(--techblue);
}

/* Active pill — techblue fill, white label (4.54:1, AA at 14px/500).
   JS keeps .is-active + aria-current="step" in sync. */
.page-how-it-works__pill.is-active,
.page-how-it-works [data-hiw-pill].is-active,
.page-how-it-works [data-hiw-pill][aria-current="step"] {
  background-color: var(--techblue);
  border-color: var(--techblue);
  color: var(--white);
}

/* Active icon — white on the techblue fill (icon-only 4.54:1 >= 3:1). */
.page-how-it-works__pill.is-active svg,
.page-how-it-works [data-hiw-pill].is-active svg,
.page-how-it-works [data-hiw-pill][aria-current="step"] svg {
  color: var(--white);
}

/* Layer labels — Document Intelligence spans pills 1-3, DocuPOW Flow spans
   4-5 (same 5-col grid so the spans align). Both labels are indigo (11.5:1
   on the white bar); the dashed rules keep the techblue/indigo layer
   colour-coding (decorative, non-text).
   :first/:last-child mirror the modifier classes so either markup works. */
.page-how-it-works__layers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.page-how-it-works__layers > * {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--indigo);
  text-align: center;
  padding-top: var(--space-1);
}

.page-how-it-works__layer--di,
.page-how-it-works__layers > :first-child {
  grid-column: 1 / span 3;
  border-top: 2px dashed var(--techblue);
}

.page-how-it-works__layer--flow,
.page-how-it-works__layers > :last-child {
  grid-column: 4 / span 2;
  border-top: 2px dashed var(--indigo);
}

/* <768 — pill row becomes a scroll-snap strip (internal scroll only; the
   page itself never scrolls horizontally), layer labels condense to two
   stacked 12px lines above the pills, the chip stays put. */
@media (max-width: 767.98px) {
  .page-how-it-works__bar,
  .page-how-it-works [data-hiw-bar] {
    display: flex;
    flex-direction: column;
  }

  .page-how-it-works__pills {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-1); /* breathing room for the scrollbar */
  }

  /* The hairline cannot span a scroll strip — drop it. */
  .page-how-it-works__bar-line {
    display: none;
  }

  .page-how-it-works__pill,
  .page-how-it-works [data-hiw-pill] {
    min-width: 140px;
    scroll-snap-align: start;
  }

  /* Labels stack above the pill strip (order swap inside the flex bar). */
  .page-how-it-works__layers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-2);
  }

  .page-how-it-works__layers > * {
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    padding-top: 4px;
  }
}

@media (max-width: 639.98px) {
  .page-how-it-works__bar,
  .page-how-it-works [data-hiw-bar] {
    padding: var(--space-3);
  }
}

/* =========================================================================
   S3 — Steps (ol of six full step rows, white canvas)
   ========================================================================= */
.page-how-it-works__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.page-how-it-works__steps > li {
  min-width: 0;
}

/* Pill clicks scroll here — clear the 72px sticky header. */
.page-how-it-works__step {
  scroll-margin-top: var(--space-7);
}

/* Each step is a 2-col grid (gap 48, items center). The grid is the step's
   own .dp-container when the container nests inside the section; when the
   list already sits inside a container the section itself is the grid —
   either markup works. */
.page-how-it-works__step > .dp-container,
.dp-container .page-how-it-works__step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

.page-how-it-works__step > .dp-container > *,
.dp-container .page-how-it-works__step > * {
  min-width: 0;
}

/* Desktop sides per the export: steps 1/3/4/6 copy-left, steps 2/5
   visual-left. order:-1 places the visual first whatever the source order. */
@media (min-width: 1024px) {
  .page-how-it-works__step[data-hiw-step="2"] .page-how-it-works__visual,
  .page-how-it-works__step[data-hiw-step="2"] [data-hiw-invoice],
  .page-how-it-works__step[data-hiw-step="5"] .page-how-it-works__infinity-card,
  .page-how-it-works__step[data-hiw-step="5"] [data-hiw-chat] {
    order: -1;
  }
}

/* Step label — mono techblue on the white canvas: 4.54:1 at 13px/600
   (passes AA; same treatment as the hero eyebrow). */
.page-how-it-works__step-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-1);
}

/* Step headings — h2 for logical order, sized like the export h3s. */
.page-how-it-works__step h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

/* Step body copy (the paragraph straight after the heading only — bubble
   and callout copy have their own sizes). */
.page-how-it-works__step h2 + p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Checklist (step 1) — ink 16/500 rows with techblue check icons
   (icon-only, 4.54:1 >= 3:1 on white). */
.page-how-it-works__checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-how-it-works__checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

.page-how-it-works__checks svg {
  width: 24px;
  height: 24px;
  color: var(--techblue);
  flex: none;
}

/* Callout (step 2) — muted copy; the icon uses the documented darkened
   --warn #946300 (5.20:1 on white — raw --warn is ~2.2:1 and fails the 3:1
   non-text minimum on light surfaces). */
.page-how-it-works__callout {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.page-how-it-works__callout svg {
  width: 20px;
  height: 20px;
  color: #946300; /* darkened --warn — icon-only 5.20:1 on white */
  flex: none;
}

/* Callout panel (step 4) — tonal gray panel on the white band. */
.page-how-it-works__panel {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.page-how-it-works__panel,
.page-how-it-works__panel p {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Step visuals — tonal gray panels on the white canvas
   ------------------------------------------------------------------------- */
.page-how-it-works__visual {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 320px;
  padding: var(--space-4);
  display: flex;
}

/* Step-4 "--dark" visual variant — retired with the dark canvas: it now
   shares the base tonal-panel treatment above (the class stays in the
   markup; only the Control Model band remains dark). */
.page-how-it-works__visual--dark {
  /* no-op: inherits the base .page-how-it-works__visual panel */
}

@media (max-width: 639.98px) {
  .page-how-it-works__visual {
    height: 256px;
    padding: var(--space-3);
  }
}

/* -------------------------------------------------------------------------
   Step 2 — invoice extraction mock (product UI)
   ------------------------------------------------------------------------- */
.page-how-it-works [data-hiw-invoice] {
  background-color: var(--gray); /* tonal panel on the white band */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Inner field cards (every child except the pulse row) — white cards on the
   gray panel. */
.page-how-it-works [data-hiw-invoice] > :not([data-hiw-invoice-pulse]) {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow); /* soft shadow allowed — product UI */
}

/* Field header row — label left, confidence chip right, hairline below. */
.page-how-it-works [data-hiw-invoice] > :not([data-hiw-invoice-pulse]) > :first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

/* Extracted value — mono, per the data & metrics rule. */
.page-how-it-works [data-hiw-invoice] > :not([data-hiw-invoice-pulse]) > :last-child {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}

/* Confidence chip — mono on the light --gray chip surface (was already
   light-surface-tuned on the dark build — unchanged). */
.page-how-it-works__conf,
.page-how-it-works [data-hiw-conf] {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  background-color: var(--gray);
  color: #0A7B56; /* darkened --ok, 4.92:1 on --gray (raw --ok is 2.4:1) */
  padding: 2px var(--space-1);
  border-radius: 4px;
  flex: none;
}

/* -------------------------------------------------------------------------
   Step 5 — Infinity card + chat bubble
   ------------------------------------------------------------------------- */
.page-how-it-works__infinity-card,
.page-how-it-works [data-hiw-chat] {
  position: relative;
  background-color: var(--gray); /* tonal panel on the white band */
  border: 1px solid var(--border);
  border-radius: 12px; /* outranks .dp-gradient-border-active (later sheet) */
  height: 384px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mascot render — display height 192px (intrinsic 577x640 in the markup). */
.page-how-it-works__infinity {
  height: 192px;
  width: auto;
  margin-top: var(--space-1);
  /* Obsidian-tint drop shadow — floating imagery exception. */
  filter: drop-shadow(0 12px 24px rgba(28, 28, 40, .18));
}

/* Chat bubble — white card anchored to the panel's bottom edge. */
.page-how-it-works__bubble {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.page-how-it-works [data-hiw-chat-q] {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

.page-how-it-works [data-hiw-chat-a] {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-1);
  margin-top: var(--space-1);
}

/* Citation chip — a span for now (becomes a real link when the docs exist). */
.page-how-it-works__cite {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  background-color: var(--gray);
  color: var(--text-muted);
  padding: 2px var(--space-1);
  border-radius: 4px;
  margin-left: 4px;
}

/* -------------------------------------------------------------------------
   Step 6 — export destinations grid (already light-surface-tuned: gray
   panel + white cards — unchanged)
   ------------------------------------------------------------------------- */
.page-how-it-works__exports {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Destination cards — hover lifts via the standalone `translate` property so
   it never fights the reveal's `transform`; border + lift only, ~180ms, NO
   added shadow. */
.page-how-it-works__exports > * {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

.page-how-it-works__exports > *:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* ERP Direct Write spans both columns. */
.page-how-it-works__exports > :last-child {
  grid-column: 1 / -1;
}

.page-how-it-works__exports svg {
  width: 32px;
  height: 32px;
  color: var(--indigo);
  flex: none;
}

.page-how-it-works__exports > :last-child svg {
  color: var(--techblue);
}

/* <1024 — steps collapse to one column, copy always stacks first. */
@media (max-width: 1023.98px) {
  .page-how-it-works__steps {
    gap: var(--space-6);
  }

  .page-how-it-works__step > .dp-container,
  .dp-container .page-how-it-works__step {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Copy first whatever the source order: visuals go last. */
  .page-how-it-works__step .page-how-it-works__visual,
  .page-how-it-works__step .page-how-it-works__infinity-card,
  .page-how-it-works__step .page-how-it-works__exports,
  .page-how-it-works__step [data-hiw-invoice],
  .page-how-it-works__step [data-hiw-chat] {
    order: 2;
  }
}

/* =========================================================================
   S4 — The Control Model (THE ONE obsidian band — dark styling kept as-is)
   ========================================================================= */
.page-how-it-works__control {
  background-color: var(--obsidian);
  color: var(--white);
  border-top: 1px solid var(--border-dark);
  text-align: center;
}

/* Focus on obsidian (this band only): the global 2px techblue ring is only
   3.71:1 against the dark canvas — add a light halo so the ring reads. */
.page-how-it-works__control :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); /* light halo on obsidian */
}

/* headline-md per the export (24/1.3/500) — does not scale down. */
.page-how-it-works__control h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-5);
}

/* Four centered columns (class hook + the specced stagger attribute so
   either markup works). */
.page-how-it-works__control-grid,
.page-how-it-works__control [data-dp-reveal-stagger] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.page-how-it-works__control-grid > *,
.page-how-it-works__control [data-dp-reveal-stagger] > * {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-how-it-works__control-grid > * > svg,
.page-how-it-works__control [data-dp-reveal-stagger] > * > svg {
  width: 32px;
  height: 32px;
  color: var(--techblue); /* icon-only accent — 3.71:1 >= 3:1 on obsidian */
  margin-bottom: var(--space-2);
  flex: none;
}

.page-how-it-works__control h3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-1);
}

.page-how-it-works__control-grid p,
.page-how-it-works__control [data-dp-reveal-stagger] p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted-dark); /* 7.58:1 on obsidian (AA) */
}

@media (max-width: 1023.98px) {
  .page-how-it-works__control-grid,
  .page-how-it-works__control [data-dp-reveal-stagger] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .page-how-it-works__control-grid,
  .page-how-it-works__control [data-dp-reveal-stagger] {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   S5 — Final CTA (gray band)
   ========================================================================= */
.page-how-it-works__cta {
  background-color: var(--gray);
  border-top: 1px solid var(--border); /* band hairline (footer owns the bottom one) */
  text-align: center;
}

.page-how-it-works__cta h2 {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* =========================================================================
   Mobile type scale (<768) — 64->44 and 36->28 (control h2 stays 24)
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-how-it-works__hero h1 {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-how-it-works__journey h2,
  .page-how-it-works__step h2,
  .page-how-it-works__cta h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Pulse rows — hidden until JS shows them (decorative "thinking" dots)
   ========================================================================= */
.page-how-it-works [data-hiw-invoice-pulse],
.page-how-it-works [data-hiw-chat-pulse] {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.page-how-it-works [data-hiw-invoice-pulse].is-active,
.page-how-it-works [data-hiw-invoice-pulse].is-visible,
.page-how-it-works [data-hiw-chat-pulse].is-active,
.page-how-it-works [data-hiw-chat-pulse].is-visible {
  display: flex;
}

/* The invoice pulse sits between the two field cards — center it. */
.page-how-it-works [data-hiw-invoice-pulse].is-active,
.page-how-it-works [data-hiw-invoice-pulse].is-visible {
  justify-content: center;
}

.page-how-it-works [data-hiw-invoice-pulse] > *,
.page-how-it-works [data-hiw-chat-pulse] > * {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--indigo);
  flex: none;
}

.page-how-it-works [data-hiw-chat-pulse] {
  margin-top: var(--space-1);
}

/* =========================================================================
   Motion — entrance base states, loops (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — how-it-works.js adds .is-ready to the hero on init
     (double rAF); copy rises in with 0/80/160/240ms delays. */
  .page-how-it-works__hero .page-how-it-works__eyebrow,
  .page-how-it-works__hero h1,
  .page-how-it-works__hero .page-how-it-works__subhead,
  .page-how-it-works__hero h1 + p {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-how-it-works__hero h1 {
    transition-delay: 80ms;
  }

  .page-how-it-works__hero .page-how-it-works__subhead,
  .page-how-it-works__hero h1 + p {
    transition-delay: 160ms;
  }

  .page-how-it-works__hero.is-ready .page-how-it-works__eyebrow,
  .page-how-it-works__hero.is-ready h1,
  .page-how-it-works__hero.is-ready .page-how-it-works__subhead,
  .page-how-it-works__hero.is-ready h1 + p {
    opacity: 1;
    transform: none;
  }

  /* CTA button — animated with a keyframe (backwards fill covers the 240ms
     stagger) instead of a transition so a lingering transition-delay never
     postpones the button's own hover/active transitions afterwards. */
  .page-how-it-works__hero .dp-btn {
    opacity: 0;
  }

  .page-how-it-works__hero.is-ready .dp-btn {
    opacity: 1;
    animation: dp-hiw-rise .5s cubic-bezier(0.16, 1, 0.3, 1) 240ms backwards;
  }

  /* Hero visual — scale-in on .is-ready, then a slow float loop (the .8s
     animation-delay lets the 600ms entrance transition finish first). */
  .page-how-it-works__hero-visual,
  .page-how-it-works [data-hiw-hero-visual] {
    opacity: 0;
    transform: scale(.96);
    transition:
      opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
      transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-how-it-works__hero.is-ready .page-how-it-works__hero-visual,
  .page-how-it-works__hero.is-ready [data-hiw-hero-visual] {
    opacity: 1;
    transform: none;
    animation: dp-hiw-float 7s ease-in-out .8s infinite;
  }

  /* Journey chip — one soft pulse when scroll-spy reaches step 5
     (.is-pulsing is added once by JS; 2 x .6s ~= 1.2s total). */
  .page-how-it-works__chip.is-pulsing,
  .page-how-it-works [data-hiw-chip].is-pulsing {
    animation: dp-hiw-chip-pulse .6s ease-in-out 2;
  }

  /* Confidence chips — fade in after the invoice pulse (visible from the
     start under reduced motion because this base state only exists here). */
  .page-how-it-works__conf,
  .page-how-it-works [data-hiw-conf] {
    opacity: 0;
    transition: opacity .6s ease;
  }

  /* Chat sequence — question slides in, answer fades in (JS, once). */
  .page-how-it-works [data-hiw-chat-q] {
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-how-it-works [data-hiw-chat-a] {
    opacity: 0;
    transition: opacity .6s ease;
  }

  /* Pulse dots — staggered opacity loop while a row is shown. */
  .page-how-it-works [data-hiw-invoice-pulse] > *,
  .page-how-it-works [data-hiw-chat-pulse] > * {
    animation: dp-hiw-dot 1.2s ease-in-out infinite;
  }

  .page-how-it-works [data-hiw-invoice-pulse] > :nth-child(2),
  .page-how-it-works [data-hiw-chat-pulse] > :nth-child(2) {
    animation-delay: .2s;
  }

  .page-how-it-works [data-hiw-invoice-pulse] > :nth-child(3),
  .page-how-it-works [data-hiw-chat-pulse] > :nth-child(3) {
    animation-delay: .4s;
  }

  /* Infinity idle bob. */
  .page-how-it-works__infinity {
    animation: dp-hiw-bob 5s ease-in-out infinite;
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-how-it-works__conf.is-visible,
.page-how-it-works [data-hiw-conf].is-visible,
.page-how-it-works [data-hiw-chat-q].is-visible,
.page-how-it-works [data-hiw-chat-a].is-visible {
  opacity: 1;
  transform: none;
}

/* Keyframes (only ever attached inside the no-preference block above). */
@keyframes dp-hiw-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dp-hiw-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes dp-hiw-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes dp-hiw-dot {
  0%,
  100% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }
}

/* The chip is centered with translate(-50%, -50%) — the keyframes keep it. */
@keyframes dp-hiw-chip-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: .8;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-how-it-works__hero .page-how-it-works__eyebrow,
  .page-how-it-works__hero h1,
  .page-how-it-works__hero .page-how-it-works__subhead,
  .page-how-it-works__hero h1 + p,
  .page-how-it-works__hero .dp-btn,
  .page-how-it-works__hero-visual,
  .page-how-it-works [data-hiw-hero-visual],
  .page-how-it-works__conf,
  .page-how-it-works [data-hiw-conf],
  .page-how-it-works [data-hiw-chat-q],
  .page-how-it-works [data-hiw-chat-a] {
    opacity: 1;
    transform: none;
  }

  /* The chip keeps its centering transform, just never pulses. */
  .page-how-it-works__hero-visual,
  .page-how-it-works [data-hiw-hero-visual],
  .page-how-it-works__infinity,
  .page-how-it-works__chip,
  .page-how-it-works [data-hiw-chip],
  .page-how-it-works [data-hiw-invoice-pulse] > *,
  .page-how-it-works [data-hiw-chat-pulse] > * {
    animation: none;
  }

  /* The "thinking" pulse rows are purely decorative — never shown. */
  .page-how-it-works [data-hiw-invoice-pulse],
  .page-how-it-works [data-hiw-chat-pulse] {
    display: none !important;
  }

  /* No hover lift — :hover included so this outweighs the hover rule. */
  .page-how-it-works__exports > *,
  .page-how-it-works__exports > *:hover {
    translate: none;
  }
}