/* /for-venues/how-it-runs/ - page-specific styles.
   House rules: brand tokens only (var(--green/--cream/--paper/--ink/
   --highlight/--dark), see base.css); prefix every new class in this file
   with `hir-`; shared components (.sect, .pill, .vchapter, .icard, .ph ...)
   live in base.css/page.css and are reused, never edited. Any animation is
   wrapped so prefers-reduced-motion gets a static end state.

   2026-09-11 frames: the staircase became three .icard steps, and the hub's
   whole product chapter moved here - the two routes, the two dashboard
   walkthroughs and the four feature cards, all .icard. The green "managed
   service" band and the dark incident ledger went with it. The card is
   page.css's component and is never restyled here; this file only places
   the grids, sets a per-row --icard-ratio, and makes the walkthrough sit in
   one column inside a card. What is left of the page's own shapes:
     training       one sheet torn in two by a perforation (pick a side)
     the walk card  the walkthrough, stacked, at every width */

/* ---------- getting live: three steps ----------

   The grid is .icards (3-up, 2-up at 900, 1-up at 640) and the card is
   .icard, both page.css. The only thing this page adds is the list reset:
   an <ol> is still the right element for a numbered sequence, and clearing
   its markers is exactly why role="list" has to stay on it (Safari drops
   list semantics under list-style: none). --icard-ratio is left at the
   card's own 1.52, which is the steps' crop. */

.hir-steps { list-style: none; }

/* ---------- how orders reach the stand ----------

   Three .icards grids and one joining line. The routes' art is a wide crop,
   so the row takes --icard-ratio: 2.1 - and it has to be set ON the card,
   not on the grid: .icard declares its own 1.52, which beats any value
   inherited from an ancestor. */

.hir-routes .icard { --icard-ratio: 2.1; }

/* the join between the routes and the two dashboards. Not a third route
   panel and it must not read as one, so it gets no border and no surface -
   centred type at sub-heading scale in the air the routes leave behind.
   The .icards below owns the gap underneath it (margin-top: 6svh), so only
   the top gap is set here. */

.hir-both {
  margin-top: clamp(28px, 5svh, 64px);
  text-align: center;
}

.hir-both__title {
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 31px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* the join sits in the green chapter now (2026-09-11): cream like the
   chapter's own title; its copy is already cream via .vchapter--green */
.vchapter--green .hir-both__title { color: var(--cream); }

.hir-both .sect__copy { margin-left: auto; margin-right: auto; }

/* ---------- the walkthrough, inside a card ----------

   .walk is a two-column component above 901px (step list beside the
   dashboard). Half a content column is too narrow for that, so inside a
   card it takes the ONE-COLUMN layout page.css already gives it below
   901px - dashboard on top, steps underneath - at every width. The rules
   are restated here rather than changed in page.css, which the hub still
   needs in its wide form.

   Two things this keeps: the dashboard stays WHOLE (never zoomed, never
   panned - the founder's spec), and the copy slab sits directly under the
   list, so a tapped step always answers on screen. The pins are
   percentages of the screenshot, so a narrower dash moves them with it. */

.hir-walk .walk {
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(16px, 2vw, 26px);
}

.hir-walk .walk__view { order: -1; }

/* the walk's own margin-top is the gap under the card's line; the list
   below the dash doesn't need a second one */
.hir-walk .walk__list { margin-top: clamp(14px, 1.6vw, 20px); }

/* the frame's desktop shadow is sized for a full-width dash; in a card on
   white it reads as a smudge under the bezel */
.hir-walk .walk__frame { box-shadow: 0 12px 30px rgba(38, 37, 31, 0.14); }

/* ---------- closer ---------- */

.hir-close { padding-bottom: 14svh; }

.hir-close__cta { margin-top: 5svh; }