/* ==========================================================================
   web/src/styles/pages/how-it-works.css

   This page's own slot, and since 2026-09-09 it holds ONE rule: the page's own scale break. The
   opening block, the three levels a group is composed of, the lists, the quiet close and the one
   rest all moved into web/src/styles/page.css, because Pin asked whether that composition could be
   a system for every page rather than this page's special arrangement (thread 1788968944.470079 at
   ts 1788970647.303479). So this page now wears exactly what About, Safety, Support and the policy
   pages wear, and nothing below is a second copy of a shell rule.


   THE ONE BREAK, ON SCALE ALONE (visual-rhythm rule 2). Four of the five steps are a bare H2
   followed by its own paragraphs: the regular field, established across two steps before it
   departs. The line carrying the product's whole inversion, that a photo arrives only once the
   voice has been heard, is set at the H2 role's size in the reading face: bigger, and told apart
   from the H2s beside it by face alone (Literata, never Bricolage), so no sixth size is spent and
   the H1/H2 role stays closed to headings. Everything else about it, its alignment, its ink, its
   family, matches the paragraphs around it. One property changes.

   Loaded by: web/scripts/build-site.mjs, into src/pages/how-it-works.html alone.

   Connected files:
     - web/src/pages/how-it-works.html   (the markup these rules style)
     - web/src/styles/page.css           (the frame, the masthead, the column, the ladder)
     - web/src/styles/tokens.css         (every value spent below)
     - web/src/styles/base.css           (the bare h2 and p this file does not restate)
   ========================================================================== */

.hiw-pull {
  font-family: var(--font-text);
  font-size: var(--size-h2);
  line-height: var(--line-h2);
  font-weight: var(--weight-h3);
}