/* Gamutlock public site — page sections.
 *
 * Source of record: the bundled design renders "Gamutlock Marketing Site.html" (2026-09-24 11:50)
 * and "Gamutlock Marketing Privacy Page.html" (11:52). Those are NEWER than the mockup handoff zip
 * (10:56) and differ from it materially, so where the two disagree these classes follow the bundles.
 *
 * The bundles carry geometry as inline styles because a design tool has nowhere else to put it.
 * Here it is classes, so a change lands once.
 */

/* ── page-scale values the DS type ramp does not carry ─────────────────────────
 * The design ramp steps 34 · 44 · 58 · 76. The marketing page uses 68, 40, 28, 24, 19 — sizes
 * between those steps, chosen for this page's rhythm. Rounding them to the nearest ramp step
 * changes the render, so they are named here rather than inlined or silently snapped. Same for the
 * handful of off-grid spacings. If the DS ever grows these steps, delete this block and use them. */
:root {
  --site-hero-size:     68px;  /* hero h1 */
  --site-pull-size:     40px;  /* the teaching pull-quote */
  --site-claim-size:    28px;  /* §D closing claim */
  --site-teach-size:    24px;  /* §B teaching paragraphs, §C answer */
  --site-gap-body-size: 19px;  /* §D body */
  --site-brand-size:    22px;  /* footer wordmark */
  --site-note-size:     12px;  /* mono notes under a control */

  --site-hero-tail:  72px;  /* hero's shortened bottom padding */
  --site-band-pad:   88px;  /* §D breathes wider than a plain section */
  --site-sticky-top: 84px;  /* header height + a hair, for the sticky answer card */
  --site-card-pad:   28px;
  --site-col-gap:    56px;
  --site-row-pad:    14px;  /* §C question rows */
  --site-rule-gap:   18px;

  --site-how-hero:   60px;  /* how-it-works h1 — the depth page sits a step under the landing hero */
  --site-card-h:     19px;  /* card headings, and the how-it-works lede */
  --site-detail:     14px;  /* the depth page's body — denser than the landing page's 17px */

  --measure-narrow: 760px;  /* the single-column reading measure (§B, §D, privacy) */
}

/* ── shared section furniture ──────────────────────────────────────────────── */

.section { padding: var(--space-20) var(--gutter); }
.section--sunken { background: var(--surface-sunken); }
.section--ruled { border-top: 1px solid var(--border-subtle); }

/* [data-band] is a DS contract: it REMAPS the token set to the inverted field rather than painting
 * a background. Set the attribute on the section and everything inside inverts with it. */
.section--band { padding: var(--site-band-pad) var(--gutter); background: var(--surface-page); color: var(--text-primary); }

.section__inner { max-width: var(--page-max); margin: 0 auto; }
.section__inner--narrow { max-width: var(--measure-narrow); margin: 0 auto; display: flex; flex-direction: column; }

.section__h {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.section__h--display { font-size: var(--text-4xl); line-height: 1.1; }

.section__lede { margin: var(--space-2) 0 var(--space-8); font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.45; }
.section__lede--wide { max-width: 56ch; }

/* The condensed uppercase eyebrow. Its role tokens already exist; this is the one place they are
 * applied to plain markup rather than through a DS component. */
.eyebrow {
  font-family: var(--role-label-face);
  font-size: var(--role-label-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--role-label-track);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── A · hero ──────────────────────────────────────────────────────────────── */

.hero { padding: var(--space-20) var(--gutter) var(--site-hero-tail); }

.hero__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-16);
  align-items: center;
}

.hero__h1 {
  margin: 0;
  font-size: var(--site-hero-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  line-height: 1.08;
  text-wrap: balance;
}

.hero__sub {
  margin: var(--space-6) 0 0;
  max-width: 46ch;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }

/* The specimen sits on its own white field whatever the page theme is doing — a JAB Code's colours
 * are the payload, so the quiet zone can never take on a tint. */
.specimen-block {
  justify-self: center;
  margin: 0;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-block);
}
.specimen-block__field { background: #FFFFFF; padding: var(--space-6); display: inline-block; line-height: 0; }
.specimen-block__field img { display: block; image-rendering: pixelated; }

.specimen-block__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.specimen-block__meta dt { color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--track-label); }
.specimen-block__meta dd { margin: 0; word-break: break-all; }

/* ── in-page section nav ───────────────────────────────────────────────────── */

.page-nav {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.page-nav a { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.page-nav a:hover { color: var(--text-primary); }

/* ── B · teaching ──────────────────────────────────────────────────────────── */

.onramp { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.onramp__tab {
  padding: var(--space-1) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--role-label-face);
  font-size: var(--role-label-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--role-label-track);
  text-transform: uppercase;
  cursor: pointer;
}
.onramp__tab[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-page); border-color: var(--text-primary); }

.teach { display: flex; flex-direction: column; gap: var(--space-5); }
.teach p { margin: 0; font-size: var(--site-teach-size); line-height: 1.4; text-wrap: pretty; }

.teach__close { margin: 0; font-size: var(--text-lg); line-height: var(--leading-body); color: var(--text-secondary); text-wrap: pretty; }

.pull-block { border-top: 1px solid var(--border-strong); padding-top: var(--site-card-pad); display: flex; flex-direction: column; gap: var(--space-3); }
.pull-block p { margin: 0; }
.pull { font-size: var(--site-pull-size); font-weight: var(--weight-bold); letter-spacing: var(--track-display); line-height: 1.12; }
.pull--quiet { font-size: var(--site-teach-size); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); color: var(--text-secondary); }

/* The limit rides with the teaching, never in a footer. Teaching the idea without its boundary
 * produces a buyer who feels deceived the first time someone photographs a label. */
.limit { background: var(--surface-card); border: 1px solid var(--border-default); padding: var(--space-5) var(--space-6); }
.limit p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-body); }

/* ── B+ · the triad ────────────────────────────────────────────────────────── */

.triad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.triad__item { border-top: 1.5px solid var(--border-strong); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.triad__item h3 {
  margin: 0;
  font-family: var(--role-label-face);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.triad__item p { margin: 0; font-size: var(--text-lg); line-height: 1.5; text-wrap: pretty; }
.triad__item p + p { color: var(--text-secondary); }

.after-link { display: inline-block; margin-top: var(--space-8); font-size: var(--text-md); }

/* ── C · does this fit ─────────────────────────────────────────────────────── */

.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-10);
  align-items: start;
}

.fit__list { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }

.fit__q {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--site-row-pad) var(--space-1);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}
.fit__q:hover { background: var(--surface-sunken); }
.fit__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); width: 22px; flex: none; }
.fit__label { flex: 1; }
.fit__arrow { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); flex: none; visibility: hidden; }
.fit__q[aria-pressed="true"] .fit__arrow { visibility: visible; }

.fit__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-block);
  padding: var(--site-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--site-sticky-top);
}
.fit__a { margin: 0; font-size: var(--text-xl); line-height: 1.4; text-wrap: pretty; }
.fit__aside { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fit__aside p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-secondary); }

/* ── D · the gap ───────────────────────────────────────────────────────────── */

.gap { gap: var(--space-6); }
.gap p { margin: 0; font-size: var(--site-gap-body-size); line-height: 1.5; text-wrap: pretty; }
.gap__body { color: var(--text-secondary); }
.gap__claim { font-size: var(--site-claim-size); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); line-height: 1.25; }

/* ── E · claims ────────────────────────────────────────────────────────────── */

.claims {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 var(--space-10);
}
.claims li { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.claims__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); width: 22px; flex: none; padding-top: 3px; }
.claims__s { font-size: var(--text-lg); line-height: 1.45; }

/* ── F · limits ────────────────────────────────────────────────────────────── */

.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.limits > div { padding-top: var(--space-4); border-top: 1.5px solid var(--border-strong); display: flex; flex-direction: column; gap: var(--space-2); }
.limits p { margin: 0; font-size: var(--text-lg); line-height: 1.5; text-wrap: pretty; }
.limits__lead { font-weight: var(--weight-semibold); }
.limits__body { color: var(--text-secondary); }

/* ── G · contact ───────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--site-col-gap); align-items: start; }
.contact__intro { display: flex; flex-direction: column; gap: var(--space-6); }
.contact__intro > p { margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--text-secondary); max-width: 44ch; text-wrap: pretty; }
.contact__routes { display: flex; flex-direction: column; gap: var(--site-rule-gap); }
.contact__route { border-top: 1.5px solid var(--border-strong); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.contact__route p { margin: 0; font-size: var(--text-md); line-height: 1.5; text-wrap: pretty; }

.contact__card { background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-block); padding: var(--site-card-pad); }
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__note { margin: 0; font-size: var(--site-note-size); color: var(--text-tertiary); line-height: var(--leading-body); }

.sent { display: flex; flex-direction: column; gap: var(--space-3); }
.sent p { margin: 0; }
.sent__lead { font-size: var(--text-xl); line-height: 1.4; }
.sent__note { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-body); }
.sent__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── privacy · the disclosure band ─────────────────────────────────────────── */

.never { margin-top: var(--space-12); background: var(--surface-page); color: var(--text-primary); padding: var(--space-8); }
.never__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px var(--space-8); margin-top: var(--space-4); }
.never__grid span { font-size: var(--text-md); line-height: 1.5; }
.never .eyebrow { color: var(--text-secondary); }
.never__note { margin: var(--space-5) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }

/* ── prose pages ───────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure-narrow); margin: 0 auto; padding: var(--space-16) var(--gutter) var(--space-24); display: flex; flex-direction: column; }
.prose__h1 { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--track-display); line-height: 1.14; }
.prose__lede { margin: var(--space-5) 0 0; font-size: var(--text-lg); line-height: 1.45; color: var(--text-secondary); max-width: 50ch; }
.prose section { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-2); }
.prose section:first-of-type { margin-top: var(--space-12); }
.prose h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); }
.prose p, .prose li { margin: 0; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--text-secondary); max-width: 62ch; text-wrap: pretty; }
.prose__colophon { margin: var(--space-12) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-loose); }

/* ── footer ────────────────────────────────────────────────────────────────── */

.site-footer { background: var(--surface-sunken); border-top: 1px solid var(--border-default); padding: var(--space-12) var(--gutter) var(--space-8); }
.site-footer__top { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--space-10); align-items: flex-start; flex-wrap: wrap; }
.site-footer__brand { font-weight: var(--weight-bold); font-size: var(--site-brand-size); letter-spacing: var(--track-display); }
.site-footer__mail { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__std { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); letter-spacing: var(--track-label); }
.site-footer__legal {
  max-width: var(--page-max);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ── responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .section, .section--band, .hero { padding-block: var(--space-12); }
  .hero__h1 { font-size: var(--text-4xl); }
  .hero__sub { font-size: var(--text-lg); }
  .section__h, .section__h--display { font-size: var(--text-2xl); }
  .pull { font-size: var(--text-2xl); }
  .teach p { font-size: var(--text-xl); }
  .fit__card { position: static; }
}

/* ── how it works ──────────────────────────────────────────────────────────────
 * Source of record: "Gamutlock How It Works.html" (2026-09-24 12:15). This is the DEPTH tier —
 * the handoff licenses mechanism vocabulary here that the landing page may not use, and the type
 * runs denser (14px body against the landing page's 17px) because the reader arrived on purpose.
 */

.hero--how { padding: var(--site-band-pad) var(--gutter) var(--site-hero-tail); }
.hero--how .hero__h1 { font-size: var(--site-how-hero); line-height: 1.1; }
.hero--how .hero__sub { font-size: var(--site-gap-body-size); line-height: 1.4; max-width: 50ch; }
.hero__sub--second { margin-top: var(--space-4); font-size: var(--text-md); line-height: 1.5; }

.section--tight { padding: var(--site-hero-tail) var(--gutter); }
.section__h--measured { line-height: var(--leading-tight); max-width: 24ch; }
.section__h--wide { line-height: var(--leading-tight); max-width: 26ch; }
.section__note { margin: var(--space-4) 0 0; font-size: var(--text-lg); color: var(--text-secondary); max-width: var(--measure-prose); line-height: 1.45; }

/* the specimen picker — a live Nc ladder rather than seven thumbnails in a row */
.picker { justify-self: center; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; max-width: 100%; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-block); padding: var(--space-6); }
.picker__field { background: #FFFFFF; padding: var(--space-5); line-height: 0; }
.picker__field img { display: block; image-rendering: pixelated; width: 200px; height: 200px; }
.picker__row { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: center; }
.picker__btn {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
}
.picker__btn[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-page); border-color: var(--text-primary); }
.picker__note { margin: 0; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); text-align: center; line-height: var(--leading-loose); max-width: 44ch; }

/* numbered fact cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.cards__item { background: var(--surface-card); border: 1px solid var(--border-subtle); padding: var(--space-6); }
.cards__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
.cards__item h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--site-card-h); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); }
.cards__item p { margin: 0; font-size: var(--site-detail); color: var(--text-secondary); line-height: var(--leading-body); }

/* the four longer notes under the cards */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6) var(--space-12); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.notes p { margin: 0; font-size: var(--site-detail); color: var(--text-secondary); line-height: 1.6; max-width: var(--measure-prose); }
.notes strong { color: var(--text-primary); }

/* origins — three labelled columns under a heavy rule */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.pillars__item { border-top: 2px solid var(--border-strong); padding-top: var(--space-4); }
.pillars__item p { margin: 10px 0 0; font-size: var(--site-detail); color: var(--text-secondary); line-height: 1.6; }

/* the ladder, at depth: a third paragraph carries the mechanism */
.ladder-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.ladder-cards__item { background: var(--surface-card); border: 1px solid var(--border-subtle); padding: var(--site-card-pad); display: flex; flex-direction: column; gap: var(--space-3); }
.ladder-cards__item h3 { margin: 0; font-family: var(--role-label-face); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--track-label); text-transform: uppercase; }
.ladder-cards__item p { margin: 0; font-size: var(--text-md); line-height: var(--leading-body); }
.ladder-cards__item p.ladder-cards__how { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* QR comparison — a real table, scrollable rather than reflowed, so rows stay comparable */
.compare-wrap { overflow-x: auto; margin-top: var(--space-10); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th { text-align: left; padding: 10px var(--space-4); border-bottom: 1.5px solid var(--border-strong); font-family: var(--role-label-face); font-size: var(--role-label-size); font-weight: var(--weight-bold); letter-spacing: var(--role-label-track); text-transform: uppercase; color: var(--text-secondary); }
.compare th:first-child { width: 22%; }
.compare th:nth-child(2), .compare th:nth-child(3) { width: 39%; }
.compare td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; font-size: var(--site-detail); line-height: var(--leading-body); }
.compare td:first-child { font-family: var(--role-label-face); font-size: var(--role-label-size); font-weight: var(--weight-bold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-tertiary); }
.compare td:nth-child(2) { color: var(--text-secondary); }
.compare__close { margin: var(--space-6) 0 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* the two surfaces */
.surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.surfaces__item { background: var(--surface-card); border: 1px solid var(--border-subtle); padding: var(--site-card-pad); display: flex; flex-direction: column; gap: var(--space-4); }
.surfaces__item h3 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); }
.surfaces__list { display: flex; flex-direction: column; gap: 10px; }
.surfaces__row { display: flex; gap: var(--space-3); }
.surfaces__row span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); min-width: 20px; }
.surfaces__row p { margin: 0; font-size: var(--site-detail); color: var(--text-secondary); line-height: var(--leading-body); }
.surfaces__row strong { color: var(--text-primary); }

/* the key loop — two columns with a literal gap between them. The dashed centre line IS the air
 * gap; steps alternate sides so the reader can see which party acts at each step. */
.loop { margin-top: var(--space-12); display: grid; grid-template-columns: minmax(0, 1fr) var(--site-col-gap) minmax(0, 1fr); }
.loop__head { border-bottom: 1.5px solid var(--border-strong); padding-bottom: 10px; display: flex; align-items: center; gap: var(--space-2); font-family: var(--role-label-face); font-size: var(--role-label-size); font-weight: var(--weight-bold); letter-spacing: var(--role-label-track); text-transform: uppercase; }
.loop__head--right { justify-content: flex-end; }
.loop__head--mid { justify-content: center; color: var(--text-tertiary); }
.loop__step { border-bottom: 1px solid var(--border-subtle); display: flex; gap: 14px; }
.loop__step--l { padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.loop__step--r { padding: var(--space-4) 0 var(--space-4) var(--space-4); }
.loop__step--quiet { color: var(--text-tertiary); }
.loop__n { font-family: var(--font-mono); font-size: var(--site-note-size); color: var(--text-faint); min-width: 22px; }
.loop__body { display: flex; flex-direction: column; gap: var(--space-1); }
.loop__title { font-size: var(--site-detail); font-weight: var(--weight-semibold); }
.loop__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-body); }
.loop__step--quiet .loop__text { color: inherit; }
.loop__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); }
.loop__step--quiet .loop__meta { color: inherit; }
.loop__rail { position: relative; border-bottom: 1px solid var(--border-subtle); display: grid; place-items: center; color: var(--text-accent); }
.loop__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--border-strong); }
.loop__arrow { position: relative; background: var(--surface-page); padding: var(--space-2) 2px; font-family: var(--font-mono); font-size: var(--text-md); line-height: 1; }
.loop__notes { display: flex; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; }
.loop__notes p { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

@media (max-width: 720px) {
  .hero--how .hero__h1 { font-size: var(--text-3xl); }
  /* the air gap collapses to a single column; the dashed rail would be meaningless stacked */
  .loop { grid-template-columns: 1fr; }
  .loop__head--mid, .loop__rail { display: none; }
  .loop__step--l, .loop__step--r { padding: var(--space-4) 0; }
}