/* ============================================================================
   Big Dog Mining v2: home-only layer, loaded after site.css on / only.
   ----------------------------------------------------------------------------
   Overrides and additions for the home page: one UI sans (Geist, with Geist
   Mono for numbers and labels), Archivo Black kept for the H1 and for "Typed
   zero more times." only, the traveling field-book page, the strata it drops
   through, the control-room beats, the proof lead and the night close.
   Motion is transform and opacity; the report card's height and the typed
   fields are the two small exceptions, both inside one card.
   ========================================================================== */

body.home {
  --geist: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --archivo: "Archivo Black", "Arial Black", Arial, sans-serif;
  --sc-font-text: var(--geist);
  --sc-font-display: var(--geist);
  --sc-font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sc-t-2xl: clamp(1.7rem, 1.25rem + 1.9vw, 2.8rem);
  --sc-t-3xl: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  font-feature-settings: "ss01";
}

/* -------------------------------------------------------------- type ---- */
.home :is(h1, h2, h3) { text-wrap: balance; }
.home .sc-display,
.home .stamp__t, .home .trade h3, .home .steps h3, .home .counts b,
.home .beat__call h3, .home .hero__strip span {
  font-family: var(--geist); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04;
}
/* The two places Archivo Black stays. */
.home .hero h1, .home .descent__resolve h2 span {
  font-family: var(--archivo); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02;
}
.home .lbl, .home .qa-all h3 {
  font-family: var(--sc-font-mono); font-weight: 500; letter-spacing: .14em;
}
.home .lbl { font-size: .76rem; }
.home .stamp__n, .home .hero__strip b { font-family: var(--sc-font-mono); }

/* The bar and footer lockup is the shared one: Archivo Black, as on every
   other page, even though the home's display face is Geist. */
.home .lockup { font-family: var(--archivo); }

/* ------------------------------------------------------------ hero ------ */
.home .hero__strip span { line-height: 1.02; }
.home .hero__strip .hero__strip-2 {
  margin-top: .9rem; font-family: var(--sc-font-mono); font-size: .95rem; font-weight: 500;
  letter-spacing: .02em; color: var(--gold); max-width: none;
}

/* Phones: the copy column covers the bright sky band, so the lead scrim
   runs top to bottom there, and the eyebrow gets its own line height. */
@media (max-width: 860px) {
  .home .hero .sc-scrim--lead {
    background: linear-gradient(to bottom, rgba(10,10,10,.5) 0%, rgba(10,10,10,.78) 18%, rgba(10,10,10,.84) 62%, rgba(10,10,10,.6) 100%);
  }
  .home .hero__copy .lbl { line-height: 1.45; }
  /* The close copy sits over the lit haul road on a phone. */
  .home .close__scrim {
    background: linear-gradient(to bottom, rgba(10,10,10,.2) 0%, rgba(10,10,10,.72) 24%, rgba(10,10,10,.82) 70%, rgba(10,10,10,.6) 100%);
  }
}

/* Small mono labels on the dark UI cards: one step lighter than --dim, so they clear 4.5:1. */
.home .ui__avatar, .home .q span { color: #94918C; }

/* ------------------------------------------------------------ CTAs ------ */
/* Buttons and sub-labels come from site.css (.ctas / .cta / .cta__sub). */
.home .hero__ctas { margin-top: 2rem; }
.home .btn:focus-visible, .home .more:focus-visible, .home .trade__a:focus-visible, .home a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px;
}

/* ----------------------------------------------------- face + lift ------ */
/* Square box, square image, no parallax: the notebook sits at a known
   rectangle, so the traveling page can start pixel-aligned on top of it. */
.home .face__photo-in { aspect-ratio: 1 / 1; }
.home .face__photo img { height: 100%; margin-top: 0; }
@media (max-width: 860px) {
  .home .face__photo { max-width: 34rem; }
  .home .face__photo-in { aspect-ratio: 1 / 1; }
}
/* Where the same numbers get typed again: a chain under the photo, clear of
   the notebook, so the lifting page never covers a label. */
.home .face__depth { margin-bottom: 1rem; }
.home .retype {
  position: static; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .4rem;
  margin: 1rem 0 0;
}
.home .retype li { margin: 0 !important; padding: .45rem .75rem; font-size: .8rem; box-shadow: none; }
.home .retype li::before { display: none; }
.home .retype li:not(:last-child)::after {
  content: "\2192"; color: var(--gold); margin-left: .65rem; margin-right: -.25rem;
}

/* What the page leaves behind on the tailgate: a wet, darker imprint. */
.face__imprint {
  position: absolute; left: 14%; top: 19.8%; width: 63%; height: 56.2%;
  border-radius: 4px; pointer-events: none; opacity: var(--lift, 0);
  background: radial-gradient(120% 120% at 50% 45%, rgba(8,8,8,.86) 30%, rgba(8,8,8,.62) 70%, rgba(8,8,8,.2) 100%);
  box-shadow: 0 0 24px 10px rgba(8,8,8,.35);
}

/* The traveler. Fixed, transform only; home.js sizes it once per layout and
   then only ever writes transform and opacity. */
.trav {
  position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none;
  transform-origin: 0 0; opacity: 0; visibility: hidden; will-change: transform, opacity;
}
.trav__in {
  position: relative; width: 100%; aspect-ratio: 860 / 769; border-radius: 3px;
}
.trav__in img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Lift shadow, as its own layer so only its opacity animates. */
.trav__in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 28px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.45);
  opacity: var(--shadow, 0);
}
.trav[data-on="true"] { visibility: visible; }

/* ---------------------------------------------------------- descent ----- */
.home .descent .sc-stage { display: block; }
/* The strata. Four bands stacked down a column four screens tall; the column
   rises through the pin, so the card drops through them. */
.dz { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dz__col {
  position: absolute; inset: 0 0 auto 0; height: 400%;
  transform: translate3d(0, calc(var(--sc-p, 0) * -75%), 0); will-change: transform;
}
.dz__band { position: relative; height: 25%; overflow: hidden; background: #0f0d0b; }
.dz__band img {
  width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0;
  transition: opacity 600ms var(--sc-ease-out);
}
.dz__band img.is-in { opacity: .5; }
.dz__band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, rgba(232,168,68,.55), rgba(232,168,68,.12) 60%, transparent);
}
.dz__band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,14,12,.92) 0%, rgba(15,14,12,.55) 40%, rgba(15,14,12,.25) 70%, rgba(15,14,12,.5) 100%);
}
.dz__band::before { transition: opacity 240ms var(--sc-ease-out); }
.dz__band.is-under::before { opacity: 0; }
.dz__band:first-child::before { display: none; }
.dz__tag {
  position: absolute; z-index: 2; left: var(--sc-gutter); top: 1rem;
  font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,168,68,.85);
}
.dz__tag { transition: opacity 240ms var(--sc-ease-out); }
.dz__tag.is-under { opacity: 0; }
.dz__tag i { font-style: normal; color: rgba(255,255,255,.4); margin-left: .8rem; letter-spacing: .06em; text-transform: none; }

.home .descent__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
.home .stamp__n span { color: rgba(255,255,255,.45); margin-left: .7rem; }
.home .stamp__t { font-size: var(--sc-t-3xl); }
.home .descent__resolve { max-width: none; color: var(--white); }
.home .descent__resolve h2 { margin: 0; font-size: var(--sc-t-3xl); max-width: 13ch; }
/* The reporting door: under the resolve, the one primary on this screen.
   The gold on the resolve's span is for the heading only. */
.home .descent__cta { margin-top: 2rem; }
.home .descent__resolve .btn > span { color: inherit; }
.home .descent__resolve .cta__sub { color: var(--dim); }
@media (max-width: 860px) {
  .home .descent__resolve h2 { font-size: 2rem; }
  .home .descent__cta { margin-top: 1.1rem; }
}

/* The card sizes to the state it is showing. States share one grid cell and
   keep their own height; home.js writes that height to --fb-h. */
.home .fb__states {
  display: grid; height: var(--fb-h, auto); overflow: hidden;
  transition: height 420ms var(--sc-ease-out);
}
.home .fb__state { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; }
.home .fb__state[data-s="3"] .fb__acts { margin-top: .15rem; }

/* State 1: the bubble the page lands in. Its photo slot has the page's own
   aspect, so the landing is a uniform scale. */
.home .msg--photo { max-width: 64%; padding: .35rem .35rem .45rem; }
.home .msg__photo { aspect-ratio: 860 / 769; margin-bottom: .4rem; background: #241f18; }
.home .msg__photo img { object-fit: cover; }
.msg__cap { display: block; padding-inline: .3rem; }
.home .msg--photo time { padding-inline: .3rem; }
/* While the page is in the air, its slot reads as a photo arriving: a dashed
   frame and an upload bar that fills as the page closes in. The chat around
   it is already there, so the card is never an empty box. */
.home .msg__photo { position: relative; }
/* Like a chat app's incoming photo: a blurred preview, a label, a bar. */
.fb[data-trav="fly"] .msg__photo { overflow: hidden; }
.fb[data-trav="fly"] .msg__photo img { opacity: .38; filter: blur(7px) saturate(.6); transform: scale(1.08); }
.fb[data-trav="fly"] .msg__photo::after {
  content: "Photo arriving"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .45rem .7rem; border-radius: 999px; background: rgba(10,10,10,.78); border: 1px solid rgba(245,165,36,.35);
  font: 500 .68rem/1 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.msg__up { display: none; }

/* State 1 is the crew's own phone: the shared WhatsApp component
   (whatsapp.css), the page landing in its photo bubble, a short note beside
   it. The slot keeps the page's aspect so the landing is a uniform scale. */
.home .fb__state--wa { display: flex; flex-direction: row; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); padding: 1rem 1.25rem; }
.home .fb__phone { flex: none; width: min(17rem, 50%, calc((100svh - 18rem) * 9 / 19.3)); }
.home .fb__phone .msg__photo { width: 100%; aspect-ratio: 860 / 769; margin: 0; border-radius: .45em; background: #1a2229; }
.home .fb__phone .waph__m--img img { height: 100%; aspect-ratio: auto; border-radius: 0; }
.home .fb[data-trav="fly"] .fb__phone .msg__photo::after { font-size: .62em; padding: .5em .7em; }
.fb__wa-note { min-width: 0; }
.fb__wa-k { margin: 0; font: 500 .7rem/1.3 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.fb__wa-t { margin: .6rem 0 0; color: var(--white); font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.fb__wa-s { margin: .55rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 860px) {
  .home .fb__phone { width: min(11.5rem, 50%); }
  .fb__wa-t { font-size: 1rem; }
  .fb__wa-s { font-size: .82rem; }
}
.fb[data-trav="fly"] .msg__up {
  display: block; height: 2px; margin: 0 .3rem .45rem; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden;
}
.msg__up i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--up, 0)); }

/* State 2: the ink becomes typed fields. */
.read { display: flex; align-items: center; gap: .7rem; }
.read__thumb { width: 52px; aspect-ratio: 860 / 769; border-radius: 4px; overflow: hidden; flex: none; border: 1px solid var(--line-strong); }
.read__thumb img { width: 100%; height: 100%; object-fit: cover; }
.read__t b { display: block; color: var(--white); font-weight: 600; }
.read__t span { color: var(--dim); font-size: .78rem; }
.fields { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.fields > div {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; align-items: baseline;
  padding: .55rem .8rem; border-top: 1px solid var(--line);
}
.fields > div:first-child { border-top: 0; }
.fields dt { color: var(--dim); font-size: .76rem; }
.fields dd {
  margin: 0; color: var(--white); font-family: var(--sc-font-mono); font-size: .86rem; letter-spacing: -0.01em;
  clip-path: inset(0 0 0 0);
  transition: clip-path 420ms var(--sc-ease-out) calc(160ms + var(--k) * 110ms);
}
/* The fields type in once, on a timer, when the card reaches "Checked", so
   they always land on their real values; scroll position never leaves one
   half-written. Before that step they wait, hidden, with no transition. */
.fb[data-step="1"] .fields dd { clip-path: inset(0 100% 0 0); transition: none; }
.fields dd small { display: block; font-family: var(--sc-font-text); font-size: .7rem; color: var(--gold); letter-spacing: 0; margin-top: .1rem; }
.fields__ask { background: rgba(245,165,36,.05); }
.msg--ask { max-width: 88%; }

/* State 3: one entry, three sheets, all hitting 12. */
.hits { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); overflow: hidden; }
.hits__r {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center;
  padding: .5rem .8rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--dim);
}
.hits__r:first-child { border-top: 0; }
.hits__sum { font-family: var(--sc-font-mono); color: var(--white); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hits__sum b { color: var(--ok); font-weight: 500; }
.inv__row--src em { display: block; font-style: normal; font-size: .7rem; color: var(--gold); margin-top: .1rem; }

/* State 3: approve, then the approval. */
.fb__acts .uibtn--gold { transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
.fb[data-pressed="true"] .fb__acts .uibtn--gold { transform: scale(.94); }
.home .fb__approved {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  color: var(--muted); font-size: .82rem; transform: translateY(4px);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.home .fb[data-pressed="true"] .fb__approved { transform: none; }

/* State 5: the morning number, and yesterday against plan. */
.morning__t {
  display: block !important; font-family: var(--sc-font-mono); font-size: 2.1rem !important; font-weight: 500 !important;
  color: var(--gold) !important; letter-spacing: -0.04em; line-height: 1; margin: 0 0 .45rem !important;
}
.home .tile b { font-family: var(--sc-font-mono); font-weight: 500; }
.vplan { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem .7rem; background: var(--panel-2); display: grid; gap: .45rem; }
.vplan__h { display: flex; justify-content: space-between; color: var(--dim); font-size: .72rem; }
.vplan__h span:last-child { font-family: var(--sc-font-mono); color: var(--ok); }
.vplan__r { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 3rem; gap: .6rem; align-items: center; font-size: .74rem; color: var(--muted); }
.vplan__r > span:last-child { font-family: var(--sc-font-mono); text-align: right; color: var(--white); }
.vplan__r i { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); }
.vplan__r b {
  position: absolute; inset: 0; border-radius: 6px; background: var(--ok); transform-origin: left;
  transform: scaleX(var(--v));
  transition: transform 560ms var(--sc-ease-out) calc(180ms + var(--k) * 90ms);
}
/* Same for the bars: they grow once when the morning view arrives. */
.fb:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .vplan__r b { transform: scaleX(0); transition: none; }
/* The contract-cap bar fills once on "Billed", to its real value. */
.home .cap__bar i { transform: scaleX(.62); transition: transform 600ms var(--sc-ease-out) 200ms; }
.home .fb:is([data-step="1"], [data-step="2"], [data-step="3"]) .cap__bar i { transform: scaleX(.15); transition: none; }
.vplan__r.is-low b { background: var(--gold); }
.vplan__r em { position: absolute; top: -3px; bottom: -3px; width: 2px; left: calc(var(--pl) * 100%); background: rgba(255,255,255,.75); border-radius: 1px; }

@media (max-width: 860px) {
  .hits__r { grid-template-columns: 4.6rem minmax(0, 1fr) auto; padding: .4rem .65rem; }
  .hits__sum { white-space: normal; font-size: .76rem; }
  .home .descent__grid { grid-template-columns: 1fr; }
  .home .msg--photo { max-width: 50%; }
  .home .msg__photo { aspect-ratio: 860 / 769; }
  .morning__t { font-size: 1.6rem !important; }
  .fields > div { padding: .4rem .65rem; grid-template-columns: 4.6rem minmax(0, 1fr); }
  .vplan { gap: .3rem; padding: .5rem .65rem; }
  .dz__tag { top: .6rem; left: 1rem; }
}

/* ------------------------------------------------------- control room -- */
.home .room .sc-stage { display: block; }
.room__in {
  position: relative; z-index: 1; height: 100%; max-width: 112rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center; padding: calc(var(--bar-h) + 1.25rem) clamp(1.25rem, 3vw, 3rem) 1.5rem;
}
.home .room__lead { width: auto; }
.home .room__lead h2 { font-size: var(--sc-t-2xl); max-width: 12ch; }
.home .room__lead p { font-size: 1.02rem; max-width: 24ch; }
.room__idx { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .1rem; }
.room__idx li {
  display: flex; gap: .8rem; align-items: baseline; padding: .45rem 0 .45rem .9rem;
  border-left: 1px solid var(--line-strong); color: var(--dim); font-size: .95rem;
  transition: color 200ms, border-color 200ms;
}
.room__idx span { font-family: var(--sc-font-mono); font-size: .72rem; }
.room__idx li.is-on { color: var(--white); border-left-color: var(--gold); }
.room__idx li.is-on span { color: var(--gold); }
.beats { position: relative; height: 100%; display: grid; place-items: center; }
/* Frame, then its caption under it: the caption never sits on the data. */
.beat {
  grid-area: 1 / 1; margin: 0; position: relative;
  width: min(100%, calc((100svh - var(--bar-h) - 3.5rem - 6.5rem) * 1.494));
}
.beat__frame {
  position: relative; aspect-ratio: 1.494; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-strong); background: #0a0a0a;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.beat__frame > img, .beat__frame > noscript > img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* The screens load with the section (home.js); until then the alt text
   stays in the tree but out of sight. The noscript copy covers no-JS. */
.beat__frame > img:not([src]) { color: transparent; }
.beat__frame > noscript > img { position: absolute; top: 0; left: 0; }
/* One highlight per beat: a gold ring on the panel. The screen stays at
   full brightness. */
.beat__hl {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px #F5A524, 0 0 36px 4px rgba(245,165,36,.3);
}
.beat__call {
  display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: .3rem 1.5rem; align-items: baseline;
  margin-top: 1.1rem; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid var(--gold);
}
.beat__call h3 { margin: 0; color: var(--white); font-size: 1.3rem; }
.beat__call p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.45; max-width: 46ch; }

/* Phones and reduced motion: a plain stack, frame then caption. No pin. */
@media (max-width: 860px) {
  .home .room { height: auto !important; }
  /* contain: paint keeps an engine re-measure from reading as a full-screen layout shift (Lighthouse CLS 1). */
  .home .room > .sc-stage { position: relative !important; height: auto !important; overflow: visible; contain: paint; }
  .room__in { grid-template-columns: 1fr; padding: 4.5rem 1.25rem 4rem; gap: 2.25rem; }
  .room__idx { display: none; }
  .beats { display: grid; gap: 2.75rem; height: auto; }
  .beat { grid-area: auto; width: 100%; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  /* One readable panel per beat: the frame takes the panel's shape and the
     screen is scaled up behind it so the panel fills the width. */
  .beat__frame { aspect-ratio: auto; height: 0; padding-top: calc(100% * var(--mh) / var(--mw) / 1.494); border-radius: 10px; border-color: rgba(245,165,36,.5); }
  .beat__frame > img, .beat__frame > noscript > img {
    position: absolute; left: 0; top: 0; width: calc(100% / var(--mw)); height: auto; aspect-ratio: 1.494;
    transform: translate(calc(var(--mx) * -100%), calc(var(--my) * -100%));
  }
  .beat__hl { display: none; }
  .beat__call { display: block; margin-top: 1rem; padding: 0 0 0 .9rem; }
  .beat__call p { margin-top: .4rem; }
}

/* ------------------------------------------------------- two weeks ---- */
/* The same daily, without and with. The two columns share their rows
   (subgrid), so each step reads straight across to its pair; a dot and a
   rule run down each side like a timeline. */
.pair { position: relative; padding-block: clamp(5.5rem, 11vw, 9.5rem); border-top: 1px solid var(--line); }
.pair__head .lbl { margin-bottom: 1.25rem; }
.home .pair h2 { font-size: var(--sc-t-3xl); max-width: 18ch; }
.pair__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(5, auto) auto;
  column-gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pair__col {
  display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line-strong); border-radius: 16px;
  background: rgba(255, 255, 255, .02);
}
.pair__col--with { border-color: rgba(232, 168, 68, .45); background: rgba(232, 168, 68, .05); }
.pair__t { margin: 0 0 1.5rem; font: 500 .8125rem/1.2 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pair__col--with .pair__t { color: var(--gold); }
.pair__list { grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.pair__list li { position: relative; padding: 0 0 1.4rem 1.75rem; }
.pair__list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dim);
}
.pair__list li:not(:last-child)::after {
  content: ""; position: absolute; left: 4px; top: 1rem; bottom: .15rem; width: 1px; background: var(--line-strong);
}
.pair__col--with li::before { background: var(--gold); }
.pair__col--with li:not(:last-child)::after { background: rgba(232, 168, 68, .4); }
.pair__col--without li:last-child::before { background: #F0524B; }
.pair__when { display: block; margin-bottom: .35rem; font: 500 .8125rem/1.3 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pair__list li > span:last-child { display: block; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.45; }
.pair__col--with li > span:last-child, .pair__list li:last-child > span:last-child { color: var(--white); }
.pair__q { grid-row: 7; margin: .25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pair__q blockquote { font-size: 1.05rem; }
.pair__q figcaption { margin-top: .6rem; }

/* ----------------------------------------------------------- money ------ */
/* The deck's spine, set as type on the rock: the bid rule large on the left,
   the three unbilled leaks as a numbered ledger on the right. */
.money { position: relative; padding-block: clamp(5.5rem, 11vw, 9.5rem); border-top: 1px solid var(--line); }
.money__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.money__lead .lbl { margin-bottom: 1.25rem; }
.home .money h2 { font-size: var(--sc-t-3xl); max-width: 17ch; }
.money__lead p:not(.lbl) { margin: 1.5rem 0 0; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 34ch; }
.money__h { margin: 0 0 1rem; font: 500 .76rem/1.2 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.unbilled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.unbilled li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem;
  padding: 1.35rem 0 1.4rem; border-bottom: 1px solid var(--line-strong);
}
.unbilled__n { grid-row: 1 / span 2; font: 500 .9rem/1.6 var(--sc-font-mono); color: var(--gold); }
.unbilled b { color: var(--white); font-weight: 500; font-size: var(--sc-t-lg); letter-spacing: -0.02em; line-height: 1.25; }
.unbilled li > span:last-child { color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.5; max-width: 44ch; }
.money__fix { margin: 1.5rem 0 0; color: var(--white); font-size: 1.02rem; line-height: 1.5; max-width: 44ch; padding-left: 3.6rem; }
@media (max-width: 860px) {
  .money__grid { grid-template-columns: 1fr; }
  .money__fix { padding-left: 0; }
}

/* What the retyping costs: three figures, each with the hairline note of
   where it came from, then one primary and the two office tools. */
.roi { margin-top: clamp(3.5rem, 6vw, 5rem); }
.roi__lead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.roi__lead .money__h { margin: 0; color: var(--gold); }
.roi__h { margin: 0; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.3; }
.roi__list {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.roi__list li { padding: 1.75rem clamp(1rem, 2.5vw, 2rem) 1.6rem 0; }
.roi__list li + li { padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--line-strong); }
.roi__list b {
  display: block; font: 500 clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem)/1 var(--geist);
  letter-spacing: -0.045em; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.roi__list b small { font: 500 .4em/1 var(--sc-font-mono); margin-left: .2em; color: var(--gold); letter-spacing: 0; }
.roi__list b small.pre { margin: 0 .3em 0 0; font-size: .26em; letter-spacing: .08em; text-transform: uppercase; vertical-align: .9em; }
.roi__list li > span { display: block; margin-top: .9rem; color: var(--white); font-size: 1.02rem; line-height: 1.4; max-width: 26ch; }
.roi__list li > small { display: block; margin-top: .55rem; color: var(--dim); font: 400 .74rem/1.45 var(--sc-font-mono); max-width: 34ch; }
.roi__ctas { margin-top: 2.25rem; align-items: center; gap: 1.25rem 2.25rem; }
@media (max-width: 860px) {
  .roi__list { grid-template-columns: 1fr; }
  .roi__list li, .roi__list li + li { padding: 1.4rem 0; border-left: 0; }
  .roi__list li + li { border-top: 1px solid var(--line); }
  .roi__ctas { align-items: flex-start; flex-direction: column; }
}

/* The opening screens sit close: no tall bands between the hero, the face
   and the descent. */
.home .face { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .home .hero { height: 170vh !important; }
  /* On a phone the strip anchored to the stage bottom left most of a
     screen of dark descent above it. It sits at the middle of the frame
     instead, and the face comes up under the stage's dark bottom edge, so
     its heading follows the strip as the pin releases. */
  .home .hero .sc-copy--trail { bottom: auto; top: 40%; }
  .home .face { margin-top: -34svh; position: relative; z-index: 4; }
}

/* Home insights: three posts, three columns, no orphan. */
.home .latest ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .home .latest ul { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- who ------ */
.home .who h2 { max-width: none; margin-bottom: 0; }
.who__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.who__head p { margin: 0; font: 500 .82rem/1 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.who__grid--8 { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 1.8vw, 1.5rem); }
.who__grid--8 .trade:nth-child(even) { margin-top: 0; }
.who__grid--8 .trade:nth-child(n+5) { margin-top: 0; }
.trade__a {
  position: relative; display: block; height: 100%; color: inherit; text-decoration: none;
  border-radius: 12px; padding-bottom: .25rem;
}
.who__grid--8 .trade__img { aspect-ratio: 16 / 10; border-radius: 10px; border: 1px solid var(--line); }
.who__grid--8 .trade__img img { transition: transform 500ms var(--sc-ease-out); }
a.trade__a:hover .trade__img img { transform: scale(1.04); }
.who__grid--8 .trade h3 { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.2; margin-top: 1rem; }
.who__grid--8 .trade p { margin-top: .5rem; font-size: .9rem; line-height: 1.45; color: var(--muted); }
a.trade__a h3::after { content: "\2192"; display: inline-block; margin-left: .45em; color: var(--gold); transition: transform 160ms var(--sc-ease-out); }
a.trade__a:hover h3::after { transform: translateX(3px); }
a.trade__a:hover h3 { color: #FFB847; }
/* The trade art sits right of frame; keep it in the 16:10 crop. */
.who__grid--8 .trade__img img { object-position: right center; }
.who__more { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
@media (max-width: 1100px) { .who__grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: eight full-width tiles ran three and a half screens, so each one
   becomes a row, square thumb left and words right. */
@media (max-width: 560px) {
  .who__grid--8 { grid-template-columns: 1fr; gap: 0; }
  .who__grid--8 .trade { border-top: 1px solid var(--line); }
  .who__grid--8 .trade:last-child { border-bottom: 1px solid var(--line); }
  .who__grid--8 .trade__a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; padding: 1rem 0; }
  .who__grid--8 .trade__img { grid-row: 1 / span 2; aspect-ratio: 1 / 1; border-radius: 8px; }
  .who__grid--8 .trade__img img { object-position: center; }
  .who__grid--8 .trade h3 { margin-top: .1rem; font-size: 1.05rem; }
  .who__grid--8 .trade p { margin-top: .35rem; font-size: .88rem; }
}

/* ------------------------------------------------------------- how ------ */
.home .how h2 { max-width: none; }
.home .how h2 span { display: block; }
.home .how h2 span + span { color: var(--sc-ink-soft); }
.home .steps__n { font-family: var(--sc-font-mono); font-weight: 500; font-size: 1rem; letter-spacing: .06em; }
.home .steps h3 { font-size: var(--sc-t-xl); margin-top: .7rem; }
.home .how .descent__ground img { opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.home .how .descent__ground img.is-in { opacity: .45; }

/* ------------------------------------------------------------- ask ------ */
.home .ask h2 { max-width: 12ch; }
/* The console is as tall as the answer it shows, no reserved empty floor. */
.home .console__body { min-height: 0; }
.home .console__a { min-height: 0; }
.home .console__src a { color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }
.home .console__src { display: block; font-family: var(--sc-font-mono); line-height: 1.5; }
.qa-cite { display: inline-block; margin-left: .3rem; color: var(--gold); font-size: .85em; }

/* ------------------------------------------------------------ proof ----- */
.home .proof__h { font-size: var(--sc-t-2xl); max-width: 22ch; margin: 0 0 clamp(2.5rem, 5vw, 4rem); color: var(--muted); }
/* Seven stats: four across, then three sharing the same width, no empty cell. */
.home .counts--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 3vw, 2.5rem); }
.home .counts--7 li { grid-column: span 3; }
.home .counts--7 li:nth-child(n+5) { grid-column: span 4; }
.home .counts--7 li > span a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
@media (max-width: 760px) {
  .home .counts--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .counts--7 li, .home .counts--7 li:nth-child(n+5) { grid-column: auto; }
  .home .counts--7 li:last-child { grid-column: 1 / -1; }
}
.pq { margin: 0 0 clamp(4rem, 8vw, 6.5rem); max-width: 68rem; }
.pq__role {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: baseline;
  font-family: var(--sc-font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.pq__role span + span { color: var(--sc-ink-soft); }
.pq__q { margin: 1.6rem 0 0; }
.pq__q p {
  margin: 0; color: var(--white); font-family: var(--geist); font-weight: 500;
  font-size: clamp(2.1rem, 1rem + 3.9vw, 4.9rem); line-height: 1.03; letter-spacing: -0.042em; text-wrap: balance;
}
.pq__q p::before { content: "\201C"; color: var(--gold); margin-left: -.45em; padding-right: .04em; }
.pq__q p::after { content: "\201D"; color: var(--gold); }
.pq__name { margin: 1.6rem 0 0; color: var(--muted); font-weight: 600; font-size: 1.05rem; }
.home .counts b { font-size: var(--sc-t-2xl); font-variant-numeric: tabular-nums; }
.home .counts b small { font-family: var(--geist); }
.home .counts li > span { max-width: 20ch; }
.home .counts__how { display: none; }
.counts li > small {
  display: block; margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--line);
  color: rgba(255,255,255,.5); font-size: .74rem; line-height: 1.45; max-width: 26ch;
}
.home .quotes__side { margin-top: clamp(3.5rem, 7vw, 5.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); }
@media (max-width: 960px) { .home .quotes__side { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .pq__q p::before { margin-left: 0; }
  /* Phones: the console and the proof lead read as one run, no dead band. */
  .home .ask { padding-bottom: 3rem; }
  .home .proof { padding-top: 2.5rem; }
}

/* ------------------------------------------------------------- close ---- */
/* The first frame again, at night: same pit, same rim, the copy where the H1
   sat, the heading at the H1's size and measure. */
.home .close__photo { position: absolute; inset: 0; z-index: 0; }
.home .close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 1; max-width: none; }
.home .close__photo::after { display: none; }
.close__scrim { z-index: 1; }
.home .close__in {
  position: absolute; z-index: var(--sc-z-copy); width: auto; margin: 0; padding: 0;
  max-width: min(52rem, 84vw);
}
.home .close__in .lbl { margin-bottom: 1.25rem; }
.home .close h2 { font-size: var(--sc-t-4xl); max-width: 15ch; }
.home .close__sub { margin: 1.4rem 0 0; max-width: 40rem; }
.home .close__row { margin-top: 2rem; }
.close__alt { margin: 2.6rem 0 0; color: var(--muted); }
.close__alt a { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .22em; }
.close__alt a:hover { color: #FFB847; }
.close__nda { margin: .6rem 0 0; font: 400 .78rem/1.4 var(--sc-font-mono); color: var(--dim); }
@media (max-width: 860px) {
  .home .close .sc-stage { align-items: initial; }
  .home .close__in { padding-bottom: 0; }
}

/* ---------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  /* Every state is shown at once here, so nothing waits on its step. */
  .home .fb[data-step] .fields dd { clip-path: none; }
  .home .fb[data-step] .vplan__r b { transform: scaleX(var(--v)); }
  .home .fb[data-step] .cap__bar i { transform: scaleX(.62); }
  .trav { display: none !important; }
  .face__imprint { display: none; }
  .home .fb__states, .vplan__r b, .fb__acts .uibtn--gold, .home .fb__approved, .dz__band img { transition: none; }
}
/* Above phone width, reduced motion keeps the long reads as static stacks.
   At 760px and under the phone layout below already has no pins. */
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  /* No clip plays here, so the hero's long scrub would be still sky between
     the thesis and the strip. A shorter pin keeps the same cues, closer. */
  .home .hero { height: 160vh !important; }

  /* The descent becomes the five states as a static sequence: each stamp
     beside the one state it names, then the resolve. */
  .home .descent { height: auto !important; }
  .home .descent > .sc-stage { position: relative !important; height: auto !important; overflow: visible; }
  .home .dz__col { height: 100%; transform: none !important; }
  .home .dz__band:not(:first-child) { display: none; }
  .home .dz__band { height: 100%; }
  .home .descent__grid {
    height: auto; align-items: center; row-gap: 3rem;
    padding-block: calc(var(--bar-h) + 3rem) 5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  }
  .home .descent__copy, .home .descent__card, .home .fb, .home .fb__states { display: contents; }
  .home .fb > .ui__head, .home .fb > .track, .home .fb > .ui__foot { display: none; }
  .home .stamp, .home .descent__resolve {
    position: static; translate: none; grid-column: 1;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
  .home .stamp[data-k="1"] { grid-row: 1; } .home .stamp[data-k="2"] { grid-row: 2; }
  .home .stamp[data-k="3"] { grid-row: 3; } .home .stamp[data-k="4"] { grid-row: 4; }
  .home .stamp[data-k="5"] { grid-row: 5; }
  .home .descent__resolve { grid-row: 6; grid-column: 1 / -1; max-width: none; }
  .home .fb__state {
    grid-column: 2; opacity: 1 !important; visibility: visible !important; transform: none !important;
    background: #0E0E0E; border: 1px solid #2A2A2A; border-radius: 14px; padding: 1rem;
  }
  .home .fb__state[data-s="1"] { grid-row: 1; } .home .fb__state[data-s="2"] { grid-row: 2; }
  .home .fb__state[data-s="3"] { grid-row: 3; } .home .fb__state[data-s="4"] { grid-row: 4; }
  .home .fb__state[data-s="5"] { grid-row: 5; }
  .home .fb__acts .uibtn { opacity: 0; }
  .home .fb__approved { opacity: 1; transform: none; }

  /* Control room: the same plain stack as phones. */
  .home .room { height: auto !important; }
  .home .room > .sc-stage { position: relative !important; height: auto !important; overflow: visible; contain: paint; }
  .room__in { grid-template-columns: 1fr; padding-block: 5rem; gap: 2.5rem; }
  .room__idx { display: none; }
  .beats { display: grid; gap: 3rem; height: auto; }
  .beat { grid-area: auto; width: 100%; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .beat__call { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) and (max-width: 860px) {
  .home .descent__grid { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .home .stamp, .home .fb__state { grid-column: 1; }
  .home .stamp[data-k="1"] { grid-row: 1; } .home .fb__state[data-s="1"] { grid-row: 2; }
  .home .stamp[data-k="2"] { grid-row: 3; } .home .fb__state[data-s="2"] { grid-row: 4; }
  .home .stamp[data-k="3"] { grid-row: 5; } .home .fb__state[data-s="3"] { grid-row: 6; }
  .home .stamp[data-k="4"] { grid-row: 7; } .home .fb__state[data-s="4"] { grid-row: 8; }
  .home .stamp[data-k="5"] { grid-row: 9; } .home .fb__state[data-s="5"] { grid-row: 10; }
  .home .descent__resolve { grid-row: 11; }
  .home .stamp { margin-top: 1.5rem; }
}

/* ============================================================ phones ==== */
/* At 760px and under nothing pins. Each act sits in normal flow at the
   height of its content, so the page is a thumb's length, nothing slides
   under the bar, and the resolve shows once. The hero is one screen, the
   report card steps by tap (home.js), and the control room and the trades
   swipe sideways. Small type steps up to 13px. */
@media (max-width: 760px) {
  /* Hero: the copy in flow below the bar, the poster behind it, no scrub. */
  .home .hero { height: auto !important; }
  .home .hero > [data-sc-stage] {
    position: relative !important; height: auto !important; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .home .hero .hero__copy {
    position: relative; inset: auto; max-width: none;
    padding: calc(var(--bar-h) + 1.75rem) var(--sc-gutter) 2.25rem;
    opacity: 1 !important; transform: none !important;
  }
  /* Before the engine mounts (or with no JS) the poster and clip would sit
     in flow above the copy; pin them now so the first paint is final. */
  .home .hero > [data-sc-stage] { overflow: clip; }
  .home .hero > [data-sc-stage] > :is(picture, video),
  .home .hero .sc-stage__poster {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .home .hero .sc-split__i { transform: none !important; opacity: 1 !important; }
  .home .hero .sc-copy--trail, .home .hero .hero__trail-scrim { display: none; }
  .home .hero__ctas { margin-top: 1.5rem; }

  /* Face: in flow after the hero, a shorter photo. */
  .home .face { margin-top: 0; z-index: auto; padding-block: 3rem 2.5rem; }
  .home .face__photo-in { aspect-ratio: 4 / 3; }
  .home .face__photo img { object-fit: cover; }

  /* Descent: tabs, the stamp for the step on screen, the card, the resolve. */
  .home .descent { height: auto !important; }
  .home .descent > [data-sc-stage] { position: relative !important; height: auto !important; overflow: visible; }
  .home .dz { display: none; }
  .home .descent__grid {
    display: flex; flex-direction: column; gap: 1rem; height: auto;
    padding: 3rem var(--sc-gutter) 3.5rem;
  }
  .home .descent__copy { display: contents; }
  .dtabs { order: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
  /* The card sits right under the tabs, so a tap shows it without a scroll. */
  .home .descent__card { order: 2; } .home .stamp { order: 3; } .home .descent__resolve { order: 4; }
  .dtabs__b {
    min-height: 48px; padding: .35rem .15rem; border: 1px solid var(--line-strong); border-radius: 10px;
    background: rgba(255,255,255,.03); color: var(--muted); font: 500 .8125rem/1.1 var(--geist);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .dtabs__b span { font: 500 .8125rem/1 var(--sc-font-mono); color: var(--dim); }
  .dtabs__b[aria-pressed="true"] { border-color: var(--gold); color: var(--white); background: rgba(245,165,36,.09); }
  .dtabs__b[aria-pressed="true"] span { color: var(--gold); }
  .dtabs__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .home .stamp, .home .descent__resolve {
    position: static; translate: none;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
  .home .stamp { display: none; }
  .home .stamp.is-on, .home .descent:not(:has(.dtabs)) .stamp[data-k="1"] { display: block; }
  .home .stamp__n { margin: .25rem 0 .4rem; font-size: .8125rem; }
  .home .stamp__t { font-size: 1.9rem; }
  .home .stamp__s { margin-top: .5rem; font-size: 1rem; min-height: 5.8em; max-width: none; }
  .home .fb .track { display: none; }
  .home .descent__resolve { margin-top: 1.5rem; }

  /* Control room: the five screens swipe sideways, each cropped to a panel
     that reads at phone size. */
  .room__in { padding: 3.5rem 0; gap: 1.75rem; }
  .home .room__lead { padding-inline: var(--sc-gutter); }
  .beats {
    display: flex; gap: .75rem; height: auto; align-items: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 0 var(--sc-gutter) .25rem; scroll-padding-inline: var(--sc-gutter);
    scrollbar-width: none; counter-reset: beat;
  }
  .beats::-webkit-scrollbar { display: none; }
  .beat { flex: 0 0 calc(100% - 2.75rem); scroll-snap-align: start; counter-increment: beat; }
  .beat__frame { padding-top: calc(100% * var(--ph) / var(--pw) / 1.494); }
  .beat__frame > img, .beat__frame > noscript > img {
    width: calc(100% / var(--pw));
    transform: translate(calc(var(--px) * -100%), calc(var(--py) * -100%));
  }
  .beat__call h3::before {
    content: "0" counter(beat) " / 05"; display: block; margin-bottom: .4rem;
    font: 500 .8125rem/1 var(--sc-font-mono); letter-spacing: .08em; color: var(--gold);
  }
  .beats:focus-visible, .who__grid--8:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* Money: the same ledger and figures, tighter. */
  .money { padding-block: 3.5rem; }
  .money__lead p:not(.lbl) { margin-top: 1rem; }
  .unbilled li { padding: 1rem 0; }
  .money__fix { margin-top: 1rem; }
  .roi { margin-top: 2.5rem; }
  .roi__list { margin-top: 1rem; }
  .roi__list li, .roi__list li + li { padding: 1.1rem 0; }
  .roi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .roi__list li:last-child { grid-column: 1 / -1; }
  .roi__list li + li { border-top: 0; }
  .roi__list li:last-child { border-top: 1px solid var(--line); }
  .roi__list b { font-size: 2.6rem; }
  .roi__list li > span { margin-top: .5rem; }
  .roi__list li > small { font-size: .8125rem; }
  .roi__ctas { margin-top: 1.5rem; gap: 1.1rem; }

  /* Trades: a sideways row, the next card peeking. */
  .who__grid--8 {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) .25rem;
    scroll-padding-inline: var(--sc-gutter);
  }
  .who__grid--8::-webkit-scrollbar { display: none; }
  .who__grid--8 .trade, .who__grid--8 .trade:last-child { flex: 0 0 72%; scroll-snap-align: start; border: 0; margin: 0; }
  .who__grid--8 .trade__a { display: block; padding: 0; }
  .who__grid--8 .trade__img { aspect-ratio: 16 / 10; border-radius: 10px; }
  .who__grid--8 .trade h3 { margin-top: .8rem; }
  .who__grid--8 .trade p { font-size: .9rem; }
  .who__head { margin-bottom: 1.5rem; }
  .who__more { margin-top: 1.75rem; }

  /* How we work: in flow. */
  .home .how { height: auto !important; }
  .home .how > [data-sc-stage] { position: relative !important; height: auto !important; overflow: hidden; }
  .home .how [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .home .how__in { padding: 3.5rem var(--sc-gutter); }

  /* Close: in flow over the night pit. */
  .home .close { height: auto !important; }
  .home .close > [data-sc-stage] { position: relative !important; height: auto !important; display: block; }
  .home .close__in {
    position: relative; inset: auto; max-width: none;
    padding: 4.5rem var(--sc-gutter) 4rem;
    opacity: 1 !important; transform: none !important;
  }
  .home .close .sc-split__i { transform: none !important; opacity: 1 !important; }

  /* Tighter section padding: the content sets the length, not the air. */
  .home .ask { padding-block: 3.5rem 2.5rem; }
  .home .proof { padding-block: 2.5rem 3.5rem; }
  .home .who { padding-block: 3.5rem; }
  .home .pq { margin-bottom: 3rem; }
  .home .proof__h { margin-bottom: 2rem; }
  .home .quotes__side { margin-top: 2.5rem; }

  /* Tap targets: 44px. Inline links in a sentence keep their line and get
     the height from padding that does not move the text. */
  .home .more { min-height: 44px; padding-block: .6rem 4px; }
  .home .role { min-height: 44px; }
  .home .q { min-height: 44px; align-items: center; }
  .home .console__src a, .home .counts li > span a, .home .close__alt a {
    display: inline-block; padding-block: .75rem; margin-block: -.75rem;
  }
  .home .console { position: static; }

  /* Small type: 13px floor for labels, notes and sub-lines. */
  .home .lbl, .home .cta__sub, .home .counts li > small, .home .close__nda,
  .home .money__h, .home .ui__when, .home .ui__foot, .home .fields dt, .home .read__t span,
  .home .hits__r, .home .vplan__h, .home .vplan__r, .home .fb__app,
  .home .fields dd small, .home .inv__row--src em, .fb__wa-k,
  .home .retype li, .home .ui__co, .home .q span, .home .console__by, .home .console__src,
  .home .pq__role, .home .roi__list b small.pre { font-size: .8125rem; }

  /* Ask: the role chips swipe in one row. Three questions and two lines of
     the answer show until a toggle opens the rest (home.js adds them). */
  .home .ask__grid > * { min-width: 0; }
  .home .console__roles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .home .console__roles::-webkit-scrollbar { display: none; }
  .home .console__roles .role { flex: 0 0 auto; }
  .home .console__roles, .home .console__qs { gap: .5rem; }
  .home .console.is-phone .console__qs { border-bottom: 0; }
  .home .console.is-phone .console__ans { border-top: 1px solid var(--line); }
  .home .console.is-phone:not(.is-qs-open) .console__qs li:nth-child(n+4) { display: none; }
  .home .console.is-phone:not(.is-a-open) .console__a {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .home .console.is-phone:not(.is-a-open) .console__src { display: none; }
  /* Body copy in the control-room captions and the steps: 16px. */
  .home .beat__call p, .home .steps p { font-size: 1rem; }
  .home .console__more {
    justify-self: start; align-self: flex-start; min-height: 44px; margin: 0 0 .4rem 1.2rem; padding: 0;
    background: none; border: 0; color: var(--gold); font: 500 .8125rem/1 var(--sc-font-mono);
    letter-spacing: .04em; text-decoration: underline; text-underline-offset: .3em; cursor: pointer;
  }
  .home .console__ans .console__more { margin: -.4rem 0 0; }
  .home .console__more[hidden] { display: none; }

  /* Proof: the count notes sit behind one "How we count" toggle. */
  .home .counts__how { display: block; margin-top: 1.25rem; }
  .home .counts__how summary {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
    color: var(--gold); font: 500 .8125rem/1 var(--sc-font-mono);
    letter-spacing: .04em; cursor: pointer; list-style: none;
  }
  .home .counts__how summary::-webkit-details-marker { display: none; }
  .home .counts__how summary::after { content: "+"; font-size: 1rem; }
  .home .counts__how[open] summary::after { content: "\2212"; }
  .home .counts--7 li > small { display: none; }
  .home .proof:has(.counts__how[open]) .counts--7 li > small { display: block; }
}
@supports not selector(:has(a)) {
  @media (max-width: 760px) {
    .home .counts--7 li > small { display: block; }
    .home .counts__how { display: none; }
  }
}

/* Phones, round 2: four more lists swipe sideways like the trades row (a
   peek of the next card, snap), and the sections lose some air. */
@media (max-width: 760px) {
  .home :is(.quotes__side, .steps, .unbilled, .counts--7) {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) .25rem;
    scroll-padding-inline: var(--sc-gutter);
  }
  .home :is(.quotes__side, .steps, .unbilled, .counts--7)::-webkit-scrollbar { display: none; }
  .home :is(.quotes__side, .steps, .unbilled, .counts--7):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .home :is(.quotes__side > *, .steps > li, .unbilled > li) { flex: 0 0 82%; scroll-snap-align: start; margin: 0; }
  /* In a card the number sits above the title, not in its own column. */
  .home .unbilled { border-top: 0; }
  .home .unbilled > li { display: block; border-top: 1px solid var(--line-strong); border-bottom: 0; }
  .home .unbilled__n { display: block; margin-bottom: .4rem; }
  .home .unbilled li > :is(b, span:last-child) { display: block; }
  .home .unbilled li > span:last-child { margin-top: .4rem; }
  .home .steps > li { display: block; }
  .home .steps__n { display: block; margin-bottom: .5rem; }
  .home .counts--7 > li, .home .counts--7 > li:nth-child(n+5), .home .counts--7 > li:last-child { flex: 0 0 44%; scroll-snap-align: start; margin: 0; }

  .home .face { padding-block: 2.5rem 2rem; }
  .home .face__photo-in { aspect-ratio: 16 / 9; }
  .home .descent__grid { padding-block: 2.5rem; }
  .room__in { padding-block: 2.5rem; }
  .home .money { padding-block: 2.5rem; }
  .home .who { padding-block: 2.5rem; }
  .home .how__in { padding-block: 2.5rem; }
  .home .ask { padding-block: 2.5rem 2rem; }
  .home .proof { padding-block: 2rem 2.5rem; }
  .home .close__in { padding-block: 3rem 2.5rem; }
  /* Gaps inside the sections, trimmed to keep 360 under 10,000px. */
  .home .descent__resolve { margin-top: 1rem; }
  .room__in { gap: 1.25rem; }
  .home .unbilled > li { padding-block: .85rem; }
  .home .roi { margin-top: 2rem; }
  .home .roi__list li, .home .roi__list li + li { padding-block: .85rem; }
  .who__head { margin-bottom: 1.25rem; }
  .who__more { margin-top: 1.25rem; }
  .home .pq { margin-bottom: 2rem; }
  .home .proof__h { margin-bottom: 1.5rem; }
  .home .quotes__side { margin-top: 2rem; }
  .home .stamp__s { min-height: 4.4em; }
  .home .descent__grid { gap: .75rem; }
  .home .roi__ctas { gap: .85rem; }
}

/* Phones, step 01: the device frame drops away and the crop keeps the two
   messages the crew sends, the photo and the voice note, beside the note.
   The bubbles read at 13px; the phone chrome stays out of the crop. */
@media (max-width: 760px) {
  .home .fb__state--wa { gap: .9rem; align-items: center; }
  .home .fb__phone.waph { width: 54%; aspect-ratio: auto; padding: 0; border-radius: 12px; background: none; box-shadow: none; }
  .home .fb__phone.waph::before, .home .fb__phone.waph::after, .home .fb__phone .waph__screen::after { display: none; }
  .home .fb__phone .waph__body { height: auto; padding: 0; border-radius: 12px; background: none; box-shadow: none; }
  .home .fb__phone .waph__screen { height: auto; border-radius: 12px; font-size: 13px; }
  .home .fb__phone :is(.waph__status, .waph__head, .waph__day, .waph__m--in, .waph__bar) { display: none; }
  .home .fb__phone .waph__chat { flex: none; gap: .4em; padding: .6em .9em .6em .6em; }
  .home .fb__phone :is(.waph__m--img, .waph__voice) { width: 100%; max-width: none; }
  .home .fb__phone :is(.waph__meta, .waph__dur) { font-size: 12px; }
}

/* Phones, two weeks: the pair swipes sideways, Without first, With peeking.
   The face's paragraphs tell the same Without story, so on phones the face
   keeps its heading, the field book and the retype list, and the pair
   carries the words. */
@media (max-width: 760px) {
  .home .face__lines > p { display: none; }
  .home .pair { padding-block: 2.5rem; }
  .home .pair h2 { font-size: 1.9rem; }
  .pair__cols {
    display: flex; gap: .75rem; margin-top: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) .25rem;
    scroll-padding-inline: var(--sc-gutter);
  }
  .pair__cols::-webkit-scrollbar { display: none; }
  .pair__cols:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .pair__col { display: block; flex: 0 0 86%; scroll-snap-align: start; padding: 1.1rem 1rem 1.2rem; }
  .pair__t { margin-bottom: 1rem; }
  .pair__list li { padding-bottom: .9rem; padding-left: 1.4rem; }
  .pair__list li > span:last-child { font-size: 1rem; }
  .pair__q { margin-top: .1rem; padding-top: .9rem; }
  .pair__q blockquote { font-size: 1rem; }
}