/* ─────────────────────────────────────────────────────────────
   Cotrugli — Marketing layer: the Synthetic translation
   synthetic.ai's page physics rebuilt in Cotrugli's tokens:
   a giant, calm hero on the gate's live ledger field; enormous
   air between bands; the inversion band as a sticky four-step
   theatre; ruled-paper surfaces that own whole bands, masked
   clear behind text the way the gate masks its centre.
   Line work only: hairlines, tokens, type. No new hues.
   ───────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

/* Ledger-paper ruling inks (--field-v / --field-h / --field-rule-solid) live
   in tokens.css, the one token sheet; this layer only references them. */

/* A 6px signal square — the live-system tick (hero eyebrow). */
.signal-tick { width: 6px; height: 6px; background: var(--signal); display: inline-block; flex-shrink: 0; }

/* The payoff dim (DESIGN.md): text-muted at the same size and weight. */
.display-quiet { font-style: normal; color: var(--text-muted); }

/* ── One-shot arrival — elements are visible by default; the keyframe's
   `from` supplies the hidden state, so no-JS users see settled content
   and reduced-motion collapses to the final frame instantly. ── */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes settle { from { opacity: 0; } }

/* ── One-shot scroll reveals — the doctrine's arrival figure for the
   bands below the fold. Base state is REST: the sheet holds nothing
   back. With motion allowed, ds/marketing.js arms .reveal-hold on the
   [data-reveal] elements still below the fold and releases each as it
   crosses the reveal line; the release rides this settled-state
   transition (fade linear, movement expo-out — the hero's own 26px
   rise), staggered by each element's --rd beat. It fires once, never
   again. No-JS, reduced motion, restored mid-page arrivals, and print
   all ship the settled band. ── */
[data-reveal] {
  transition:
    opacity 600ms var(--easing) var(--rd, 0ms),
    transform 700ms var(--ease-out) var(--rd, 0ms);
}
[data-reveal].reveal-hold { opacity: 0; transform: translateY(26px); transition: none; }
/* The team portrait forgoes the stock rise for an engraving wipe: the
   plate pressed onto the page left to right, once, on the same
   hold/release mechanics. Held it is whole and unmoved, just clipped;
   released it wipes open over 800ms. */
.team__figure[data-reveal] { transition: clip-path 2200ms var(--ease-out) var(--rd, 0ms); }
.team__figure[data-reveal].reveal-hold {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: none;
}
.team__figure[data-reveal]:not(.reveal-hold) { clip-path: inset(0 0 0 0); }
@media print {
  [data-reveal], [data-scene], [data-msg] { opacity: 1 !important; transform: none !important; }
}

/* ── The ruled band — full-bleed ledger paper across the whole surface.
   Two hairline families on a 56px cell (the gate's density), masked
   clear where text lives. Each band declares its own mask shape. ── */
.field-band { position: relative; }
.field-band > * { position: relative; }
.field-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--field-v) 1px, transparent 1px),
    linear-gradient(to bottom, var(--field-h) 1px, transparent 1px);
  background-size: 56px 56px; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 27%, transparent 73%, #000);
  mask-image: linear-gradient(to right, #000, transparent 27%, transparent 73%, #000);
}
/* The closing band is one viewport of centred copy: the gate's
   elliptical clearing, edges kept. */
.cta.field-band::before {
  -webkit-mask-image: radial-gradient(100% 90% at 50% 50%, transparent 34%, #000 82%);
  mask-image: radial-gradient(100% 90% at 50% 50%, transparent 34%, #000 82%);
}
/* The name band (#name): one quiet assertion of the system in the long
   neutral stretch. Ruling lives only in the outer 200px gutters, fading
   to nothing well before the 920px column; below 1240px the gutters are
   too thin to hold it clear of text, so the band stays silent. */
.field-band--edges::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 200px, transparent calc(100% - 200px), #000);
  mask-image: linear-gradient(to right, #000, transparent 200px, transparent calc(100% - 200px), #000);
}
@media (max-width: 1239px) { .field-band--edges::before { content: none; } }
/* The theatre band keys its mask to the CONTENT column, not the viewport:
   the 1200px container + 40px padding puts text at calc(50% - 560px), so the
   ruling clears exactly at the content edge and holds only the true gutters.
   Below ~1120px wide the stops collapse and the band goes silent, matching
   the #name band's behaviour when the gutters get too thin. */
#product.field-band::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent max(0px, calc(50% - 560px)), transparent min(100%, calc(50% + 560px)), #000);
  mask-image: linear-gradient(to right, #000, transparent max(0px, calc(50% - 560px)), transparent min(100%, calc(50% + 560px)), #000);
}

/* ── Nav — the floating pill (design 3B): the header row retires and the
   nav detaches into floating chrome, centred 18px under the top edge.
   Floating-chrome physics: the elevated surface behind a strong hairline
   with the one sanctioned shadow. The links speak the proportional face
   at 13px (a pill is a place, not a column-head row); the CTA keeps the
   one primary phrase, tightened to the pill's height. Drops in once on
   load; the keyframe's from supplies the hidden state, so no-JS ships
   the pill in place and reduced motion collapses to rest. ── */
.nav-pill {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex; align-items: center; gap: 28px;
  padding: 10px 12px 10px 16px; white-space: nowrap;
  background: var(--surface-elev);
  border: 1px solid var(--line-strong); border-radius: var(--r-4);
  box-shadow: var(--shadow-overlay);
  animation: nav-drop 560ms var(--ease-out) 80ms both;
}
@keyframes nav-drop { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
.nav-pill .lockup { text-decoration: none; }
.nav-pill__links { display: flex; align-items: center; gap: 24px; }
.nav-pill__links a {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--t-quick) var(--easing);
}
.nav-pill__links a:hover { color: var(--text); }
.nav-pill .btn { padding-top: 7px; padding-bottom: 7px; }
/* The small-screen disclosure: hidden on desktop, the pill's menu below the
   tablet break. Summary wears the bounded icon-square vocabulary; the list
   is floating chrome (overlay step, strong hairline, the one shadow). */
.nav-pill__menu { display: none; position: relative; }
.nav-pill__menu-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-2); color: var(--text-muted);
  cursor: pointer; list-style: none; transition: color var(--t-quick) var(--easing), border-color var(--t-quick) var(--easing);
}
.nav-pill__menu-btn::-webkit-details-marker { display: none; }
.nav-pill__menu-btn:hover { color: var(--text); border-color: var(--surface-rule); }
.nav-pill__menu[open] .nav-pill__menu-btn { color: var(--text); border-color: var(--line-strong); }
.nav-pill__menu-list {
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface-overlay); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-overlay);
}
.nav-pill__menu-list a {
  padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--text-muted);
  text-decoration: none; border-radius: var(--r-2);
  transition: color var(--t-quick) var(--easing), background-color var(--t-quick) var(--easing);
}
.nav-pill__menu-list a:hover { color: var(--text); background: var(--surface-hover); }
/* Below the tablet break the pill keeps only the lockup and the CTA. */
@media (max-width: 820px) {
  .nav-pill { gap: 16px; padding-left: 12px; }
  .nav-pill__links { display: none; }
  .nav-pill__menu { display: block; }
}
/* Floating chrome has no meaning on paper (fixed elements repeat over
   every printed sheet); the wordmark closes the printed page instead. */
@media print {
  .nav-pill { display: none; }
}

/* ── Hero — the composed fold: one ruled sheet between the nav's
   header rule and a full-width ground rule at the band's exact bottom
   edge. The left column flows top-down in one designed rhythm: eyebrow,
   headline, an 80px step to the lead, then the CTA. The ledger plate is
   a natural-height document in the upper-right register, its top 72px
   below the headline's ink, optically balanced against the lead + CTA
   cluster; the ground rule closes the fold beneath it. ── */
.hero-band { position: relative; border-bottom: 1px solid var(--line-strong); }
/* Static substrate: the same 56px ruling in CSS, elliptically masked like
   the canvas, so the hero keeps its grid with scripting off. The moment
   the canvas boots it paints the live field and JS adds .hero-band--live,
   which retires this layer (otherwise the two grids would double up). */
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--field-v) 1px, transparent 1px),
    linear-gradient(to bottom, var(--field-h) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(92% 110% at 34% 52%, transparent 18%, rgba(0, 0, 0, 0.5) 52%, #000 100%);
  mask-image: radial-gradient(92% 110% at 34% 52%, transparent 18%, rgba(0, 0, 0, 0.5) 52%, #000 100%);
}
.hero-band--live::before { content: none; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The nav floats out of flow (design 3B), so the band owns the whole
   first viewport: its 1px ground rule closes exactly ON the fold; 760px
   is the floor so short windows scroll rather than crush the
   composition. */
.hero__inner {
  position: relative; max-width: 1360px; margin: 0 auto;
  min-height: max(calc(100svh - 1px), 760px);
  padding: 88px 48px 0;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  column-gap: 80px;
}
/* 150px of air past the inner's own 88px: the fold opens under the
   floating pill with the calm the 3B composition is built on. */
.hero__top { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding-top: 150px; }
.hero__content { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; padding: 64px 0 88px; }
.hero__eyebrow {
  /* 10px: ALL CAPS is lawful only on 10px mono labels at 0.12em. */
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  color: var(--text-subtle); text-transform: uppercase; margin-bottom: 40px;
  display: flex; align-items: center; gap: 12px;
  animation: settle 600ms var(--easing) 120ms both;
}
/* The live-system tick is a single static signal dot. The page's one standing
   infinite pulse is the closing wordmark's cursor (doctrine 6, "one infinite
   pulse besides the hero loop"); a third perpetual chartreuse animation here
   would spend the signal's rarity, so the eyebrow states "live" by presence. */
/* Sentence-per-line: one sentence = one line = one thought; the payoff
   dim now coincides with the sentence boundary. */
.hero__title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(54px, 6.6vw, 96px); letter-spacing: -0.035em; line-height: 1.03;
  color: var(--text); margin: 0;
  /* Optical left rail: the display glyph's side bearing indents its ink
     ~4-5px right of the eyebrow tick / lead / input edge at 96px. Pull the
     box back so the INK sits on the rail (scales with the clamp). */
  margin-left: -0.045em;
}
/* Design 3B: each line is a mask. The line block hides its overflow with
   0.13em of descender clearance (padding down, margin back), and the
   inner span rises through it. The hidden state lives in the keyframe's
   from, so the base state is settled: no-JS and print show the headline,
   reduced motion collapses to the final frame (base.css). */
.hero__line {
  display: block; width: fit-content; max-width: 100%; white-space: nowrap;
  overflow: hidden; padding-bottom: 0.13em; margin-bottom: -0.13em;
}
.hero__line-in { display: block; animation: rev-up 760ms var(--ease-out) 240ms both; }
@keyframes rev-up { from { transform: translateY(110%); } }
.hero__title .display-quiet { display: block; }
.hero__title .display-quiet .hero__line-in { animation-delay: 420ms; }
/* Below ~1000px each sentence wraps naturally inside its own block. */
@media (max-width: 1000px) {
  .hero__line { white-space: normal; }
}
.hero__lead { font-size: 19px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 560px; animation: rise 640ms var(--ease-out) 640ms both; }
/* The plate is the fold's document, not its wall: it keeps its NATURAL
   height — rows on a fixed document rhythm, never stretched into an
   empty card (a document is dense by character; air never lives inside
   it) — and holds the upper-right register against the lead + CTA
   cluster. Design 3B narrows it to 460px and opens 64px under the
   headline's ink; the 10px bottom margin keeps its hairline off the
   strong rule (touching would read as a misprint). The frame rises with
   the fold's mount choreography; the rows inside post one by one
   (ds/marketing.js). */
.hero__inner > .ledger-demo {
  grid-column: 2; grid-row: 2; align-self: start; justify-self: end;
  width: min(100%, 460px); margin: 64px 0 10px;
  animation: rise 760ms var(--ease-out) 300ms both;
}
/* The document scale — on tall desktop viewports the fold plate's rhythm
   steps up one notch and STOPS: 14px row padding, 16px human text over
   14px tabular amounts; head labels stay 10px tracked. These metrics are
   the ceiling — rows never grow past them, however tall the window. The
   gate sits at 981px of viewport height: the scaled plate (~454px) must
   fit between the headline's 72px clearance and the ground rule, with
   light to spare, inside the one-viewport band; shorter windows
   (1440x900 included) keep the compact base, and below 961px wide the
   stacked fold keeps the compact plate. */
@media (min-width: 961px) and (min-height: 981px) {
  .hero__inner > .ledger-demo .ledger-demo__head { padding: 16px 20px; }
  .hero__inner > .ledger-demo .ledger-demo__cols,
  .hero__inner > .ledger-demo .ledger-demo__row {
    grid-template-columns: 16px 54px minmax(0, 1fr) 40px 96px;
    gap: 14px; padding-left: 20px; padding-right: 20px;
  }
  .hero__inner > .ledger-demo .ledger-demo__cols { padding-top: 11px; padding-bottom: 11px; }
  .hero__inner > .ledger-demo .ledger-demo__row { padding-top: 14px; padding-bottom: 14px; }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__who { font-size: 16px; line-height: 1.45; }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__date { font-size: 12px; }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__code { font-size: 12px; }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__amt { font-size: 14px; }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__tick .icon { width: 14px; height: 14px; }
  .hero__inner > .ledger-demo .ledger-demo__foot { padding: 16px 20px; font-size: 12px; }
  .hero__inner > .ledger-demo .ledger-demo__sum { font-size: 13px; }
}
/* Narrow-desktop easing: the 1.1fr/0.9fr band squeezes the plate to
   ~380-450px, where 16px descriptions would ellipsize; one step down
   keeps every row printing whole. */
@media (min-width: 961px) and (max-width: 1160px) and (min-height: 981px) {
  .hero__inner > .ledger-demo .ledger-demo__cols,
  .hero__inner > .ledger-demo .ledger-demo__row {
    grid-template-columns: 14px 50px minmax(0, 1fr) 38px 90px; gap: 12px;
  }
  .hero__inner > .ledger-demo .ledger-demo__row .ledger-demo__who { font-size: 15px; }
}
/* The fold's one affordance: a hairline square anchoring to the product
   band. The rail is a zero-height sticky line pinned 36px above the
   viewport's bottom edge while the fold still runs past it, so the
   square stays in reach at every viewport size; when the fold's end
   arrives the rail lands at the band's bottom and the square settles
   astride the ground rule, exactly where it always stood. Pure CSS:
   no-JS, reduced motion, and print all keep the settled square. */
.hero__scroll-rail {
  position: sticky; bottom: 36px; z-index: var(--z-sticky);
  height: 0; max-width: 1360px; margin: 0 auto; padding: 0 48px;
  pointer-events: none;
  /* Flex, and the square centres on the rail's zero-height line: it
     straddles the rule by exactly half its height. A negative margin
     would COLLAPSE into this box instead and drop the square almost
     wholly below the rule. */
  display: flex; align-items: center;
}
.hero__scroll {
  pointer-events: auto; flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text-subtle); text-decoration: none;
  transition: color var(--t-base) var(--easing), border-color var(--t-base) var(--easing);
}
.hero__scroll:hover { color: var(--text); }

/* ── The balanced ledger — the hero's imagery is the product's own
   artifact: card vocabulary, a real column head, mono figures. Server
   state is settled; marketing.js runs ONE mount-only reconcile pass. ── */
.ledger-demo { border: 1px solid var(--surface-rule); border-radius: var(--r-3); background: var(--surface-elev); overflow: hidden; font-variant-numeric: tabular-nums; }
.ledger-demo__head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.ledger-demo__cols, .ledger-demo__row { display: grid; grid-template-columns: 14px 48px minmax(0, 1fr) 36px 84px; gap: 12px; align-items: center; padding: 0 18px; }
.ledger-demo__cols { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-faint); }
.ledger-demo__cols .ledger-demo__date, .ledger-demo__cols .ledger-demo__who,
.ledger-demo__cols .ledger-demo__code, .ledger-demo__cols .ledger-demo__amt { font-size: 10px; color: var(--text-faint); }
.ledger-demo__row { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--surface-rule); }
.ledger-demo__rows .ledger-demo__row:last-child { border-bottom: none; }
.ledger-demo__tick { display: inline-flex; color: var(--text-subtle); transition: color var(--t-slow) var(--easing); }
.ledger-demo.is-live .ledger-demo__row.is-matched .ledger-demo__tick { color: var(--signal-text); }
.ledger-demo__date { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
.ledger-demo__who { font-size: 14px; color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-base) var(--easing); }
.ledger-demo__row.is-matched .ledger-demo__who { color: var(--text); }
.ledger-demo__code { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.ledger-demo__amt { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); text-align: right; transition: color var(--t-base) var(--easing); }
.ledger-demo__row.is-matched .ledger-demo__amt { color: var(--text); }
.ledger-demo__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-subtle); }
.ledger-demo__state { transition: color var(--t-slow) var(--easing); }
.ledger-demo.is-balanced .ledger-demo__state { color: var(--signal-text); }
.ledger-demo__sumwrap { display: inline-flex; align-items: baseline; gap: 10px; }
.ledger-demo__sum-k { color: var(--text-faint); }
.ledger-demo__sum { font-size: 12px; color: var(--text); }

/* ── Section scaffold — full-bleed bands with synthetic-scale air. ── */
.section { position: relative; scroll-margin-top: 96px; }
.section--elev { background: var(--surface-elev); border-top: 1px solid var(--surface-rule); border-bottom: 1px solid var(--surface-rule); }
.section__inner { max-width: 1200px; margin: 0 auto; padding: 160px 40px; }
.sec-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(36px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1.06; color: var(--text); margin: 0 0 24px; max-width: 900px; text-wrap: balance; }
.sec-title--display { font-size: clamp(40px, 4.6vw, 66px); letter-spacing: -0.035em; }
.sec-title--sm { font-size: clamp(28px, 2.6vw, 36px); }
/* Same optical correction for the left-aligned band displays, scoped so the
   centred CTA title stays untouched (.cta .sec-title re-centers with auto
   margins later in the sheet and wins). */
.section__inner > .sec-title { margin-left: -0.02em; }
.sec-title__line { display: block; width: fit-content; }
.sec-lead { font-size: 19px; color: var(--text-muted); max-width: 640px; line-height: 1.6; margin: 0 0 64px; }
/* The centred band (the Company section): title and lead re-center with
   auto margins, same treatment as the hiw display pair. Placed after the
   optical-correction rule above so the auto margin wins. */
.section__inner--center > .sec-title,
.section__inner--center > .sec-lead { margin-left: auto; margin-right: auto; text-align: center; }
/* A touch wider than the stock 640px lead so the vision lead holds two
   lines instead of stranding its last word. */
.section__inner--center > .sec-lead { max-width: 730px; text-wrap: balance; }
.section__inner--center .pillar { text-align: center; }
.section__inner--center .pillar__title,
.section__inner--center .pillar__body { margin-left: auto; margin-right: auto; }
/* The Company band hands over to the team row below with a short breath,
   not a full section gap. */
.section__inner--center { padding-bottom: 96px; }

/* ── The mock — a hand-authored still of the desk (unchanged physics:
   borders, not boxes; chartreuse only where an agent ACTS). Lives in
   how-it-works step 02 since v6 (the console band retired); inside the
   inversion band the tokens hand it the dark register for free. ── */
.mock { border: 1px solid var(--surface-rule); border-radius: var(--r-3); background: var(--surface); overflow: hidden; }
.mock__bar { padding: 11px 18px; border-bottom: 1px solid var(--surface-rule); background: var(--surface-elev); }
.mock__addr { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.mock__body { display: grid; grid-template-columns: 1.55fr 1fr; }

.mock__chat { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--surface-rule); min-width: 0; }
.mock__chat-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--surface-rule); }
.mock__title { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 10px; }
.mock__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.mock__status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.mock__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }

.mock-msg--owner { align-self: flex-end; max-width: 80%; text-align: right; }
.mock-msg__bubble { display: inline-block; background: var(--surface-elev); border: 1px solid var(--surface-rule); border-radius: var(--r-3); padding: 8px 12px; font-size: 13px; color: var(--text); text-align: left; }
.mock-msg__who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); margin-top: 5px; }
.mock-msg__who b { color: var(--text-subtle); font-weight: 500; }
.mock-msg--agent { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; }
.mock-msg--agent .mock-msg__who { margin: 1px 0 3px; }
.mock-msg__glyph { flex: none; width: 24px; height: 24px; border-radius: var(--r-2); border: 1px solid var(--surface-rule); background: var(--surface-elev); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--signal-text); }
.mock-msg__text { font-size: 13px; line-height: 1.5; color: var(--text); }

.mock-eq { width: 12px; height: 12px; flex: none; position: relative; }
.mock-eq i, .mock-eq::before, .mock-eq::after { content: ""; position: absolute; bottom: 0; width: 3px; background: var(--signal); transform-origin: bottom; }
.mock-eq::before { left: 0; height: 6px; animation: mock-eq 820ms var(--easing) infinite alternate; }
.mock-eq i { left: 4.5px; height: 11px; animation: mock-eq 820ms var(--easing) 140ms infinite alternate; }
.mock-eq::after { left: 9px; height: 8px; animation: mock-eq 820ms var(--easing) 280ms infinite alternate; }
/* The equalizer moves because it moves in the product (.chat-eq, same
   keyframe values): chartreuse in motion IS the agent acting, and the
   still depicts the agent mid-act. Reduced motion stills the bars. */
@keyframes mock-eq { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .mock-eq i, .mock-eq::before, .mock-eq::after { animation: none; }
}

/* ── The desk scene — the still replays itself once. With motion allowed
   (and only when the plate arrives from below the fold), ds/marketing.js
   holds the session's objects ([data-scene]) and stages their arrival on
   the product's own ramp: message, reply, run chip, status bar in the
   chat; task, transaction, meter, drafted pay run in the workspace; the
   reconcile meter counting up as it lands. One shot, then REST — the
   settled still is the no-JS, reduced-motion, and print truth. ── */
[data-scene] { transition: opacity 240ms var(--easing), transform 280ms var(--ease-out); }
[data-scene].scene-hold { opacity: 0; transform: translateY(8px); transition: none; }

.mock-runchip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--surface-rule); border-radius: var(--r-3); background: var(--surface-elev); }
.mock-runchip__ic { width: 22px; height: 22px; flex: none; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--surface-rule); display: grid; place-items: center; }
.mock-runchip__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mock-runchip__name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); }
.mock-runchip__line { font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-runchip__sub { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint); white-space: nowrap; }

.mock-statusbar { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--surface-rule); border-radius: var(--r-2); background: var(--surface-elev); font-size: 11px; color: var(--text-muted); }
.mock-statusbar__l { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; white-space: nowrap; }
.mock-statusbar__task { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-statusbar__check { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.mock__composer { margin-top: 2px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--surface-rule); border-radius: var(--r-2); background: var(--surface-elev); padding: 9px 12px; }
.mock__composer-ph { flex: 1; font-size: 13px; color: var(--text-subtle); }
.mock__composer-send { color: var(--text-muted); display: inline-flex; }

.mock__ws { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-elev); min-width: 0; }
.mock__ws-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); padding-bottom: 12px; border-bottom: 1px solid var(--surface-rule); }
.mock__ws-task { display: flex; flex-direction: column; gap: 3px; }
.mock__ws-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.mock__ws-title { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.mock-tx { border: 1px solid var(--surface-rule); border-radius: var(--r-2); background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mock-tx__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mock-tx__desc { font-size: 13px; color: var(--text); min-width: 0; }
.mock-tx__amt { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.mock-tx__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--surface-rule); border-radius: var(--r-1); padding: 2px 6px; }
.mock-meter { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); border: 1px solid var(--surface-rule); border-radius: var(--r-2); background: var(--surface); padding: 11px 12px; }
.mock-meter__k { font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.mock-meter__v { font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.mock-meter__sub { font-size: 10px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.mock-pay { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: auto; }
.mock-pay__tick { width: 5px; height: 5px; background: var(--text-subtle); flex-shrink: 0; }
.mock-pay .mock-pay__tick { margin-top: 6px; }

/* ── The step plates — 1px rule border, no shadow, no browser chrome. ── */
.hiw-plate { border: 1px solid var(--surface-rule); border-radius: var(--r-3); background: var(--surface-elev); overflow: hidden; }

/* Step 1 — the intake register (generic labels, never a brand).
   The take-on surface is the product's own table at marketing volume,
   not a tile grid: a mono head with the running count, column heads,
   nine ruled source rows, and a foot where the register foots itself at
   meter scale (the sum of the TODAY column, kept honest at every
   animation frame by the scene in ds/marketing.js). Each live row
   carries its event trail, a tape of hairline ticks whose density
   renders the day's volume (a data rendering; the newest tick stands at
   full ink), and the TODAY column is ruled like ledger paper, a solid
   1px line drawn as a background so it runs unbroken through the rows.
   Live rows carry a 5px square success tick; success is state, never
   chartreuse (the Signal Rule). Rules and ink only: no boxes inside
   the plate. */
.hiw-reg__head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.hiw-reg__cols, .hiw-reg__row, .hiw-reg__foot {
  display: grid; grid-template-columns: 12px 118px minmax(40px, 1fr) 78px 88px;
  gap: 12px; align-items: center; padding: 0 18px;
  background: linear-gradient(var(--surface-rule), var(--surface-rule)) no-repeat right 112px top / 1px 100%;
}
.hiw-reg__cols-last, .hiw-reg__cols-val, .hiw-reg__foot-k { white-space: nowrap; }
.hiw-reg__cols { padding-top: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-faint); }
.hiw-reg__cols-src { grid-column: 1 / 4; }
.hiw-reg__cols-last, .hiw-reg__cols-val { text-align: right; }
.hiw-reg__row { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--surface-rule); }
.hiw-reg__row:last-of-type { border-bottom: none; }
.hiw-reg__tick { width: 5px; height: 5px; justify-self: start; background: transparent; border: 1px solid var(--line-strong); transition: background-color 240ms linear, border-color 240ms linear; }
.hiw-reg__name { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 240ms linear; }
/* The event trail: today's events on a tape. Uniform height (density is
   the signal; varying heights would speak the equalizer's language, and
   the equalizer means an agent acting), newest tick at full ink. */
.hiw-reg__trail { position: relative; height: 14px; align-self: center; }
.hiw-reg__trail i { position: absolute; top: 3px; bottom: 3px; width: 1px; background: color-mix(in srgb, var(--text) 26%, transparent); transition: opacity 180ms linear; transition-delay: calc(var(--i, 0) * 26ms); }
.hiw-reg__trail i:last-child { background: color-mix(in srgb, var(--text) 80%, transparent); }
.hiw-reg__last { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; transition: opacity 240ms linear; }
.hiw-reg__val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; transition: opacity 240ms linear; }
.hiw-reg__val--cta { font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-faint); }
.hiw-reg__val--zero { color: var(--text-faint); font-weight: 400; }
.hiw-reg__row.is-on .hiw-reg__tick { background: var(--success); border-color: var(--success); }
.hiw-reg__row.is-on .hiw-reg__name { color: var(--text); }
.hiw-reg__foot { padding-top: 13px; padding-bottom: 15px; border-top: 1px solid var(--line-strong); align-items: baseline; }
.hiw-reg__foot-k { grid-column: 1 / 4; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.hiw-reg__foot-v { grid-column: -2; font-family: var(--font-mono); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
/* The joining rows, held: the scene's before-state is the waiting look,
   applied without transition so the release is the movement. On
   release the trail's ticks cascade in left to right (the per-tick
   --i delay above), the backfill landing as the figure counts. */
.hiw-reg__row.reg-hold .hiw-reg__tick { background: transparent; border-color: var(--line-strong); transition: none; }
.hiw-reg__row.reg-hold .hiw-reg__name { color: var(--text-subtle); transition: none; }
.hiw-reg__row.reg-hold .hiw-reg__trail i { opacity: 0; transition: none; }
.hiw-reg__row.reg-hold .hiw-reg__last,
.hiw-reg__row.reg-hold .hiw-reg__val { opacity: 0; transition: none; }

/* Step 2 — the desk itself (the mock, moved in from the retired console
   band). Its own rules live with the how-it-works row it sits in, below,
   so the base .hiw-row grid does not outrank them. */

/* Step 3 — the conversation. No plate chrome and no header: the artifact
   IS the chat. Cotrugli asks on the left, the owner answers on the
   right in a filled bubble (the one place a fill reads as "you"), each
   turn under a mono name label. Neutral ink throughout: asking is the
   agent speaking, not acting. */
.hiw-chat {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 22px;
  border: 1px solid var(--surface-rule); border-radius: var(--r-3);
  background: var(--surface-elev);
}
.hiw-chat__turn { display: flex; flex-direction: column; max-width: 88%; }
.hiw-chat__turn--you { align-self: flex-end; align-items: flex-end; }
.hiw-chat__who { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.hiw-chat__bubble {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text);
  padding: 10px 13px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--surface-rule);
}
.hiw-chat__turn--you .hiw-chat__bubble {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
  border-color: transparent;
}

/* The thread plays once (ds/marketing.js): each turn is held, then
   released on the system's own arrival figure. Base state is REST, so
   no-JS, reduced motion and print all ship the settled thread. */
[data-msg] { transition: opacity 260ms var(--easing), transform 300ms var(--ease-out); }
[data-msg].chat-hold { opacity: 0; transform: translateY(8px); transition: none; }
/* The typing beat: hidden at rest, shown only while the pass runs, so
   the settled page keeps its one standing pulse (the closing wordmark).
   Reduced motion never starts the pass, so this never appears. */
.hiw-chat__typing { display: none; align-items: center; gap: 5px; width: fit-content; padding: 13px; border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--surface-rule); }
.hiw-chat.is-typing .hiw-chat__typing { display: flex; }
.hiw-chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-subtle); animation: chat-dot 1200ms var(--easing) infinite; }
.hiw-chat__typing i:nth-child(2) { animation-delay: 160ms; }
.hiw-chat__typing i:nth-child(3) { animation-delay: 320ms; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.34; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Step 4 — the drafted statement: strong rule and double underline.
   Its tick is NEUTRAL (drafted = proposed, not acted). */
.hiw-statement__head { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); padding: 13px 18px; border-bottom: 1px solid var(--surface-rule); }
.hiw-statement__cols { display: flex; justify-content: space-between; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--surface-rule); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-faint); }
/* The statement reads like a statement: accounts indented under their
   group heads, each group footing to a subtotal whose figure carries the
   accountant's rule above it, and the net standing clear at the bottom.
   The rule belongs to the AMOUNT column (a fixed 92px measure), the way
   it is ruled on paper, not to the whole row. */
.hiw-statement__body { padding: 12px 18px 18px; }
.hiw-st__group { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text); margin: 12px 0 4px; }
.hiw-st__group:first-child { margin-top: 0; }
.hiw-st__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 13px; }
.hiw-st__row span { color: var(--text-muted); }
.hiw-st__row b {
  display: inline-block; min-width: 92px; text-align: right;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.hiw-st__row--item span { padding-left: 14px; color: var(--text-subtle); }
.hiw-st__row--item b { color: var(--text-subtle); }
.hiw-st__row--total { padding-top: 7px; }
.hiw-st__row--total span { color: var(--text); }
.hiw-st__row--total b { color: var(--text); border-top: 1px solid var(--surface-rule); padding-top: 7px; }
.hiw-st__row--net { padding-top: 13px; }
.hiw-st__row--net span { color: var(--text); font-weight: 500; }
/* Being in profit is a state, so the figure takes the state colour the
   sources board already speaks. Chartreuse would claim an agent acted. */
.hiw-st__row--net b { font-size: 14px; color: var(--success); border-top: 1px solid var(--line-strong); padding-top: 9px; }
/* No approval foot: the statement closes on its own net line, and the
   never-acts-alone promise is carried by the step's body copy and the
   desk's drafted pay run rather than repeated on every artifact. */

/* ── Pillars — hairline-ruled columns off one top rule. ── */
.pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--surface-rule); }
.pillar { padding: 40px 40px 8px 0; }
.pillar + .pillar { border-left: 1px solid var(--surface-rule); padding-left: 40px; }
.pillar:last-child { padding-right: 0; }
.pillar__title { font-family: var(--font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); margin: 0 0 16px; min-height: 56px; text-wrap: balance; }
.pillar__body { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; max-width: 40ch; }

/* ── How it works — the ONE inversion band, and the page's theatre.
   Static truth (no JS, reduced motion, small screens): four indexed
   rows at monumental spacing, hairline-separated. With JS, motion and
   room, marketing.js adds .hiw--pin: the rows pin to the viewport and
   the four steps swap in place as the visitor scrolls, numeral, text
   and plate advancing together. Content is never gated on JS. ── */
.mkt-invert { background: var(--surface); color: var(--text); color-scheme: light; }
.light .mkt-invert { color-scheme: dark; }
.mkt-invert ::selection { background: rgba(10, 10, 10, 0.12); color: var(--text); }
.light .mkt-invert ::selection { background: rgba(250, 250, 250, 0.16); color: var(--text); }

/* The Product band is the fold's landing, so it comes to rest on its OWN
   top edge rather than the sections' 96px offset: the dark sheet fills
   the viewport with none of the fold left showing above it. The margin
   goes NEGATIVE by the scroll square's overhang: the square sits astride
   the ground rule, so 16px of it reaches into the band's first pixels
   and would still show at the top of an otherwise flush landing. Four
   more pixels clear its border. The band opens on 160px of air, which is
   the floating pill's clear ground. */
#product { scroll-margin-top: -20px; }
.hiw__inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 160px 40px 144px; }
.hiw__inner .sec-lead { margin-bottom: 96px; }
/* v6: the Product band opens on a centred display pair (the closing CTA
   is the page's other centred band); the optical left-rail correction
   stands down here. */
.hiw__inner > .sec-title,
.hiw__inner > .sec-lead { margin-left: auto; margin-right: auto; text-align: center; }
.hiw__rows { position: relative; }
.hiw__pin { position: relative; border-top: 1px solid var(--surface-rule); }
.hiw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; padding: 88px 0; border-bottom: 1px solid var(--surface-rule); }
.hiw-row__n {
  font-family: var(--font-mono); font-weight: 500; font-size: clamp(64px, 8.2vw, 118px);
  line-height: 1; color: var(--text-faint); font-variant-numeric: tabular-nums;
  margin-bottom: 36px;
}
@supports (-webkit-text-stroke: 1px black) {
  .hiw-row__n { color: transparent; -webkit-text-stroke: 1.2px var(--text-subtle); }
}
.hiw-row__title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 2.5vw, 36px); letter-spacing: -0.028em; line-height: 1.08; color: var(--text); margin: 0 0 18px; }
.hiw-row__body { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0; max-width: 46ch; }
.hiw-row__art { margin: 0; min-width: 0; }

/* Step 2's row — the desk is the page's one TWO-panel document, so it
   needs more width than the other artifacts to keep its workspace
   column readable. The row keeps the band's text-left / art-right
   pattern and rebalances inside it: the text column narrows to what its
   own measure wants and the art takes the rest, holding the mock near
   740px (half again its old column). The mock's panels shift with it so
   the workspace keeps its lines whole. */
.hiw-row--wide { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 48px; }
.hiw-row--wide .mock__body { grid-template-columns: 1.4fr 1fr; }

/* The progress rail — four neutral marks, position only (chartreuse
   never marks position; the Signal Rule). Visible in pinned mode. */
.hiw__rail { display: none; }

/* Pinned mode: the stage grows, the pin holds one viewport, the four
   rows stack in one cell and trade places on scroll. Transform and
   opacity only; movement rides expo-out, fades stay linear.
   The negative top margin folds the sticky box's upper centering
   headroom — (100vh − row)/2 of dead air on approach — back under the
   lead: the first step then stands a constant ~150px below the lead at
   every viewport height (64px lead margin + 240px − half the ~310px
   row), and the pin simply engages while the heading is still making
   its exit. Geometry stays continuous: no jump on entry. */
.hiw--pin .hiw__rows { height: 360vh; height: 360svh; margin-top: calc(240px - 50vh); margin-top: calc(240px - 50svh); }
/* pointer-events: none — the folded-up runway and its sticky box now
   overlap the lead's last lines and must not swallow their selection;
   the active row re-enables its own events (explicit auto beats the
   ancestor's none). */
.hiw--pin .hiw__rows { pointer-events: none; }
.hiw--pin .hiw__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; border-top: none; }
.hiw--pin .hiw-row { grid-area: 1 / 1; border-bottom: none; padding: 0; opacity: 0; pointer-events: none; transition: opacity 320ms var(--easing); }
.hiw--pin .hiw-row__text { transform: translateY(36px); transition: transform 620ms var(--ease-out); }
.hiw--pin .hiw-row__art { transform: translateY(56px); transition: transform 720ms var(--ease-out); }
.hiw--pin .hiw-row.is-active { opacity: 1; pointer-events: auto; }
.hiw--pin .hiw-row.is-active .hiw-row__text,
.hiw--pin .hiw-row.is-active .hiw-row__art { transform: none; }
.hiw--pin .hiw-row.is-passed .hiw-row__text { transform: translateY(-36px); }
.hiw--pin .hiw-row.is-passed .hiw-row__art { transform: translateY(-56px); }
.hiw--pin .hiw__rail {
  display: flex; flex-direction: column; gap: 12px;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-raised);
  /* The rail belongs to the CONTENT column, not the viewport edge. At
     container-flush widths (<= ~1200px) -21px centers the 2px ticks in the
     40px gutter; up to 1359px they hang a constant 21px off the content
     column; from 1360 the design position -56px has >= 64px edge clearance. */
  left: -21px;
}
@media (min-width: 1360px) {
  .hiw--pin .hiw__rail { left: -56px; }
}
.hiw__rail i { width: 2px; height: 34px; background: var(--line-strong); transition: background-color var(--t-base) var(--easing); }
.hiw__rail i.is-on { background: var(--text); }
/* The pinned band keeps its inner exit tight: the pin IS the closing wall. */
.hiw--pin .hiw__inner { padding-bottom: 0; }
.hiw--pin .hiw__inner .sec-lead { margin-bottom: 64px; }
/* Print: the pin is scroll theatre; on paper the static stacked rows are
   the truth. Without this, the 360svh runway prints as blank ruled pages. */
@media print {
  .hiw--pin .hiw__rows { height: auto; margin-top: 0; }
  .hiw--pin .hiw__pin { position: static; height: auto; display: block; border-top: 1px solid var(--surface-rule); }
  .hiw--pin .hiw-row {
    grid-area: auto; opacity: 1; pointer-events: auto;
    padding: 88px 0; border-bottom: 1px solid var(--surface-rule);
  }
  .hiw--pin .hiw-row__text, .hiw--pin .hiw-row__art { transform: none; }
  /* No mid-flight snapshots: the unpin override lands instantly in any
     print pipeline, never 320ms into the crossfade. */
  .hiw--pin .hiw-row, .hiw--pin .hiw-row__text, .hiw--pin .hiw-row__art { transition: none; }
  .hiw--pin .hiw__rail { display: none; }
  .hiw--pin .hiw__inner { padding-bottom: 144px; }
}

/* ── The team — the founder portrait against the prose column, seated
   tight under the pillars (the Company section keeps one surface). The
   --rev variant mirrors it for The Company: text left, image right, and
   it closes the stretch with the full 160 bottom. ── */
.team__inner { max-width: 1200px; margin: 0 auto; padding: 48px 40px 96px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: center; }
.team__inner--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.team__figure { margin: 0; }
.team__img { display: block; width: 100%; height: auto; border: 1px solid var(--surface-rule); border-radius: var(--r-3); }
.team__p { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 58ch; margin: 0 0 28px; }
.team__p:last-child { margin-bottom: 0; }

/* ── Who we are — colophon scale. ── */

/* ── Quote / principle — human voices take neutral rules. ── */
.quote__inner { max-width: 920px; margin: 0 auto; padding: 48px 40px 160px; }
.quote__block { font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.025em; line-height: 1.28; color: var(--text); margin: 0 0 28px; padding: 0 0 0 20px; border-left: 2px solid var(--line-strong); }
.quote__block--band { border-left: none; padding-left: 0; margin-bottom: 0; font-style: italic; text-align: center; }
.quote__attrib { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-subtle); font-variant-numeric: tabular-nums; margin: 28px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.quote__attrib::before { content: ""; width: 20px; height: 1px; background: var(--line-strong); }
.quote__block--inner { font-size: 22px; letter-spacing: -0.02em; line-height: 1.4; margin: 0 0 28px; font-style: italic; }

/* ── The fold's CTA — the hand-off to the waitlist page. It keeps the
   mount rhythm the form's row used to hold (760ms), so the fold still
   settles in the same order: eyebrow, headline, lead, then the ask. ── */
.hero__cta { margin-top: 40px; animation: rise 640ms var(--ease-out) 760ms both; }
/* The honeypot, wherever a form carries one. */
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Closing CTA — one centered band on ruled paper. ── */
.cta .section__inner { padding-top: 184px; padding-bottom: 192px; text-align: center; }
.cta .sec-title { margin: 0 auto 56px; }
.cta .sec-title__line { margin-inline: auto; }

/* ── The waitlist page — the capture, on its own page. One centred
   column on the marketing sheet's own paper: the ask stated once, then
   the questions in a plain stack, then one primary submit. The page is
   a form, so it is quieter than the site: no ruled field, no theatre,
   nothing moving while someone is typing. ── */
.wl { position: relative; }
.wl__inner { max-width: 640px; margin: 0 auto; padding: 152px 40px 120px; }
.wl__head { margin-bottom: 56px; }
.wl__title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -0.035em; line-height: 1.04;
  color: var(--text); margin: 0 0 20px; margin-left: -0.03em;
}
.wl__lead { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 56ch; }

.wl__form { display: flex; flex-direction: column; gap: 34px; }
.wl-q { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.wl-q__label { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text); padding: 0; display: flex; align-items: baseline; gap: 10px; }
/* 10px mono is the one lawful ALL CAPS. */
.wl-q__req { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-subtle); }
.wl-q__hint { font-size: 13px; color: var(--text-subtle); margin: -2px 0 2px; }
.wl-q__error { font-size: 13px; color: var(--danger); margin: 0; }

.wl-input {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--text);
  background: var(--surface-elev); border: 1px solid var(--surface-rule);
  border-radius: var(--r-2); padding: 11px 14px; width: 100%;
  transition: border-color var(--t-base) var(--easing);
}
.wl-input::placeholder { color: var(--text-subtle); }
.wl-input:hover { border-color: var(--line-strong); }
/* The sanctioned signal border: the system is listening. The neutral ring
   rides on top for keyboard users, where the signal alone is too quiet. */
.wl-input:focus { outline: none; border-color: var(--signal); }
.wl-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wl-input--area { resize: vertical; min-height: 84px; }

/* The chips are real radios and checkboxes wearing the sheet's hairline:
   native semantics, native keyboard, native form state. The input itself
   is hidden from paint but not from the a11y tree or focus order. */
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip { position: relative; display: inline-flex; }
.wl-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wl-chip span {
  display: inline-block; padding: 8px 14px;
  font-size: 14px; color: var(--text-muted);
  background: var(--surface-elev);
  border: 1px solid var(--surface-rule); border-radius: var(--r-2);
  transition: border-color var(--t-base) var(--easing), color var(--t-base) var(--easing),
    background-color var(--t-base) var(--easing);
}
.wl-chip:hover span { border-color: var(--line-strong); color: var(--text); }
.wl-chip input:checked + span {
  color: var(--text); border-color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, var(--surface-elev));
}
.wl-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.wl__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; }
.wl__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-subtle); margin: 0; }

/* The confirmation (and the offline fallback) replace the form outright:
   nothing left to ask, so nothing stands there inviting a second pass. */
.wl__done { border: 1px solid var(--surface-rule); border-radius: var(--r-3); background: var(--surface-elev); padding: 40px 36px; }
.wl__done-title { font-family: var(--font-sans); font-weight: 500; font-size: 28px; letter-spacing: -0.025em; color: var(--text); margin: 0 0 12px; }
.wl__done-body { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 28px; max-width: 52ch; }

/* The page's own footer is the baseline strip alone: the giant drawn
   wordmark belongs to the site, not to a form. */
.site-footer--plain { border-top: 1px solid var(--surface-rule); }
.site-footer--plain .site-footer__base { border-top: none; }

@media (max-width: 640px) {
  .wl__inner { padding: 118px 24px 88px; }
  .wl__head { margin-bottom: 40px; }
  .wl__form { gap: 28px; }
  .wl__done { padding: 28px 24px; }
  .wl-input { font-size: 16px; }
}

/* ── Footer — the closing entry (design 3B): the quiet close on paper.
   One hairline rule at the top edge, the link columns on equal thirds
   of the measure (the sheet's column heads over the wordmark's span),
   then the giant outlined wordmark, the footer's ONE piece of branding,
   resting whole above the baseline strip with the g's descender just
   clear of the final rule. Only the dot is chartreuse (the Signal
   Rule); the stroke is the faint ink, deepening one step on hover.
   marketing.js arms the rise with motion allowed; the base state is
   rest, so no-JS, reduced motion, and print all ship the settled
   footer. ── */
.site-footer { position: relative; border-top: 1px solid var(--line-strong); background: var(--surface-elev); overflow: hidden; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 88px 40px 0; }
/* Columns on equal thirds of the measure, fully centered in their
   thirds — heads and rows share the 1/6, 1/2, and 5/6 axes over the
   span the wordmark fills below, the same symmetric system as the
   centered close. minmax(0, 1fr) lets the email column shrink
   honestly. */
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; justify-items: center; text-align: center; }
.footer-col__head { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.footer__link {
  display: block; width: fit-content; font-family: var(--font-sans); font-size: 14px;
  color: var(--text-muted); margin: 0 auto 10px; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-quick) var(--easing), border-color var(--t-quick) var(--easing);
}
.footer__link:hover { color: var(--text); border-color: var(--line-strong); }
.footer__soon { display: block; font-family: var(--font-sans); font-size: 14px; color: var(--text-subtle); margin-bottom: 10px; }
/* The wordmark as drawn line-work: the inlined glyph outlines of the
   brand face (the heex carries the SVG), stroked at the faint ink and
   deepening one step on hover, sized by the viewBox to 90% of the
   measure and centered. The descender lives inside the box, so the
   16px seat is the tail's clearance off the final rule at every width.
   Base state: fully drawn, dot lit — what no-JS, reduced motion, and
   print ship. */
.site-footer__word { position: relative; max-width: 1200px; margin: 96px auto 0; padding: 0 40px 16px; user-select: none; -webkit-user-select: none; }
.site-footer__word svg { display: block; width: 90%; height: auto; margin: 0 auto; overflow: visible; color: var(--text-faint); transition: color var(--t-base) var(--easing); }
.site-footer__word:hover svg { color: var(--text-subtle); }
.word-glyph { fill: none; stroke: currentColor; stroke-width: 1.2px; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.word-dot { fill: var(--signal); }
/* Scrubbed by marketing.js (motion only): scroll progress sets the
   pen's target, mapped so the word completes exactly at the page's
   bottom — the entry writes in as the reader closes the page and
   unwrites, last letter first, as they leave. The pen chases the
   target at a capped pace (a fling to the bottom still shows the word
   finish writing); CSS transitions stand down so the inline offsets
   rule. When the word completes (is-signed) the dot arrives and blinks
   like a cursor: the entry signed, the agent on — a step-end pulse
   under one flash per second (marketing motion doctrine). */
.site-footer--scrub .word-glyph { transition: none; }
.site-footer--scrub .word-dot { opacity: 0; transition: opacity var(--t-base) var(--easing); }
.site-footer--scrub.is-signed .word-dot {
  opacity: 1;
  animation: word-dot-blink 1120ms step-end 600ms infinite;
}
@keyframes word-dot-blink { 50% { opacity: 0; } }
.site-footer__base { position: relative; border-top: 1px solid var(--surface-rule); background: var(--surface-elev); }
.site-footer__base-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--text-subtle);
}
@media (max-width: 820px) {
  .site-footer__inner { padding: 64px 24px 0; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  /* Three groups in two columns: the odd one out spans the row and
     stays on the centre axis rather than orphaning bottom-left. */
  .footer-col:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .site-footer__word { margin-top: 64px; padding: 0 24px 12px; }
  .site-footer__base-inner { padding-left: 24px; padding-right: 24px; }
}
@media print {
  .site-footer--scrub .word-glyph { stroke-dashoffset: 0 !important; transition: none !important; }
  .site-footer--scrub .word-dot { opacity: 1 !important; animation: none !important; }
}

/* Touch devices get real targets under the quiet chrome. The pill CTA
   keeps its drawn size and grows an invisible hit area instead. */
@media (hover: none) and (pointer: coarse) {
  .nav-pill__links a { padding: 12px 0; margin: -12px 0; }
  .nav-pill .btn { position: relative; }
  .nav-pill .btn::after { content: ""; position: absolute; inset: -8px -6px; }
  .footer__link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 2px; }
  /* 16px stops iOS zooming the field on focus; 44px is the tap target. */
  .wl-input { font-size: 16px; min-height: 44px; }
  .wl-chip span { padding-top: 11px; padding-bottom: 11px; }
  .wl__form .btn, .hero__cta .btn { min-height: 44px; }
}

/* ── Responsive — recomposed, never shrunk. ── */
@media (max-width: 1160px) {
  .hero__inner { column-gap: 56px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
@media (max-width: 960px) {
  /* minmax(0, 1fr), not bare 1fr: the explicit 0 floor keeps any item's
     intrinsic minimum (the plate, the waitlist row) from widening the
     single column past a narrow viewport, matching the desktop grid's
     own minmax(0, *fr) tracks. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; min-height: 0; padding: 48px 32px 0; }
  .hero__top, .hero__content, .hero__inner > .ledger-demo { grid-column: 1; grid-row: auto; }
  .hero__top { padding-top: 110px; }
  .hero__content { align-self: auto; padding: 40px 0 48px; }
  .hero__inner > .ledger-demo { justify-self: start; width: min(100%, 460px); margin: 0 0 48px; }
  /* Single column keeps the affordance (v6): the sticky rail holds it at
     the viewport bottom, clear of the plate, at every height. */
  .hero__scroll-rail { padding: 0 32px; }
  .hero__eyebrow { margin-bottom: 32px; }
  .section__inner { padding: 112px 32px; }
  .sec-lead { margin-bottom: 48px; }
  .pillars { grid-template-columns: 1fr; border-top: none; }
  .pillar { padding: 28px 0 24px; border-top: 1px solid var(--surface-rule); }
  .pillar + .pillar { border-left: none; padding-left: 0; }
  .pillar__title { min-height: 0; }
  .team__inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px 64px; }
  .quote__inner { padding: 40px 32px 112px; }
  .hiw__inner { padding: 112px 32px 96px; }
  .hiw__inner .sec-lead { margin-bottom: 64px; }
  .hiw-row, .hiw-row--wide { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 72px 0; align-items: start; }
  .hiw-row__art { max-width: 460px; }
  /* Stacked, the desk keeps the full measure: its panels have already
     collapsed to one column here, and 460px would crush them again. */
  .hiw-row--wide .hiw-row__art { max-width: none; }
  .hiw-row__n { font-size: 56px; margin-bottom: 24px; }
  .mock__body, .hiw-row__art .mock__body { grid-template-columns: 1fr; }
  .mock__chat { border-right: none; border-bottom: 1px solid var(--surface-rule); }
  .cta .section__inner { padding-top: 128px; padding-bottom: 136px; }
}
@media (max-width: 640px) {
  .hero__inner { padding: 40px 24px 0; }
  .hero__content { padding: 32px 0 48px; }
  .hero__title { font-size: clamp(40px, 11.6vw, 54px); }
  .hero__lead { font-size: 17px; }
  .hero__cta { margin-top: 32px; }
  .sec-title { font-size: 30px; }
  .sec-title--display { font-size: 34px; }
  .sec-title--sm { font-size: 25px; }
  .sec-lead { font-size: 17px; }
  .hiw-row__title { font-size: 25px; }
  .hiw-row__n { font-size: 48px; }
  .team__p { font-size: 16px; }
  .quote__block { font-size: 24px; }
  .quote__block--inner { font-size: 20px; }
  .section__inner, .hiw__inner, .team__inner,
  .quote__inner { padding-left: 24px; padding-right: 24px; }
  .hero__scroll-rail { padding: 0 24px; }
  .hiw-reg__cols, .hiw-reg__row, .hiw-reg__foot { grid-template-columns: 12px 104px minmax(24px, 1fr) 52px 72px; gap: 10px; padding-left: 14px; padding-right: 14px; background-position: right 91px top; }
  .ledger-demo__cols, .ledger-demo__row { grid-template-columns: 14px 48px minmax(0, 1fr) 84px; }
  .ledger-demo__code { display: none; }
}
@media (max-width: 430px) {
  /* The register folds its LAST EVENT column: name, trail, and figure
     are the row's essentials; 320px viewports have no air for a fourth. */
  .hiw-reg__cols-last, .hiw-reg__last { display: none; }
  .hiw-reg__cols, .hiw-reg__row, .hiw-reg__foot { grid-template-columns: 12px 104px minmax(24px, 1fr) 72px; background-position: right 91px top; }
}