/* finish-b1.css — SiteSmith batch-1 on Claude Design export GL3 (2026-09-01 19:48).
   Loaded last. Two rules Claude Design kept breaking, made explicit (Jack Roberts 28 Aug, Deth 09-01):
   1. ONE VIEWPORT, ONE POINT — a section is sized to the screen (100svh) and its content is composed to fill it;
      no px-padded half screens, no dead band pinned between two content blocks.
   2. PHOTOS ON THE GRID — a photo takes a full column, edge to edge, dissolving into the ground on its inner side;
      never a floating rounded panel. The S3 scene is a DIFFERENT scene from the hero.
   Everything else here is the standing batch (one CTA, flat buttons, founder print sized to the screen). */

/* ---------- S3 · Who we're for: one screen, left column composed as one block, photo full height on the right ---------- */
#fit .promise-inner {
  grid-template-rows: auto auto auto auto;      /* was auto auto 1fr auto — the 1fr row was the hole between quote and fit pair */
  align-content: center;                         /* the left block sits as one composed unit, centred in the screen */
  row-gap: 0;
}
#fit .promise-label { margin-bottom: 30px; }
#fit .promise-copy { font-size: clamp(42px, 4.7vw, 70px); line-height: 1.04; max-width: 10.5em; }
#fit .promise-quote { margin-top: 34px; font-size: clamp(20px, 1.6vw, 24px); max-width: 23em; }
#fit .fit-list { margin-top: clamp(48px, 6svh, 72px); }
#fit .promise .fit-row p, #fit .fit-row p { max-width: 24em; }
#fit .promise-photo {
  grid-row: 1 / 5;
  align-self: stretch;
  min-height: 100%;
}
#fit .promise-photo img {
  width: 100%; height: 100%;
  aspect-ratio: auto; max-height: none; min-height: 100%;
  object-fit: cover; object-position: 62% 50%;
  filter: saturate(.86) contrast(1.06) brightness(.9);
  box-shadow: none; border: 0; border-radius: 0;
}

/* ---------- S5 · How an upgrade runs: de-boxed columns already (section-04 + control); keep it one screen ---------- */
.method-inner { padding-top: 88px; padding-bottom: 88px; }
.method-head { margin-bottom: 64px; }

/* ---------- S6 · Founder: the print is sized to the screen, not to the file (the height="800" attribute was winning) ---------- */
.founder-photo { max-width: min(470px, calc((100svh - 192px - 18px) * .8)); }
.founder-photo img { height: auto; }
.founder-inner { align-items: center; }

/* ---------- One button language page-wide: flat amber, no offset shadows (control already strips them; belt and braces) ---------- */
.btn-dark, .btn-big { box-shadow: none; }
.btn-dark:hover, .btn-big:hover { transform: translateY(-2px); box-shadow: none; }

/* ---------- Mobile (true 390): stacked, photo full-bleed between the quote and the fit pair ---------- */
@media (max-width: 940px) {
  #fit .promise-inner { grid-template-rows: auto; align-content: start; }
  #fit .promise-photo { grid-row: auto; order: 3; margin: 44px calc(-1 * var(--pad)) 0; height: clamp(320px, 110vw, 460px); min-height: 0; }
  #fit .promise-photo img { object-position: 50% 35%; }
  #fit .fit-list { order: 4; margin-top: 44px; }
}
@media (max-width: 700px) {
  #fit .promise-copy { font-size: clamp(36px, 10.4vw, 46px); max-width: none; }
  #fit .promise-quote { font-size: 19px; margin-top: 26px; }
  .founder-photo { max-width: none; }
}

/* ---- one-viewport fill, round 2 (after first batch-1 render) ---- */
/* S4: the four columns sat in the middle 550px of a 900px screen with 175px bands top and bottom.
   Bigger diagrams and 18px step copy fill the screen without adding padding. */
@media (min-width: 941px) {
  .method-inner { padding-top: 72px; padding-bottom: 72px; }
  .method-head { margin-bottom: 56px; }
  .step-diagram { height: 150px; margin-bottom: 36px; }
  .step-diagram svg { max-width: 218px; }
  .method-step { min-height: 400px; padding-top: 44px; padding-bottom: 44px; }
  .method-step h3 { margin: 18px 0 16px; }
  .method-step p { font-size: 18px; line-height: 1.55; max-width: 22em; }
}
/* S5: 470px cap left 157px bands; let the print grow to the screen (kept 4:5, amber block offset). */
@media (min-width: 941px) {
  .founder-photo { max-width: min(540px, calc((100svh - 150px - 18px) * .8)); }
}

/* ---- QC Sentinel calibration round 1 (grok-4.6, 21:5x) — change batch ---- */
/* 390 hero: the judge saw a near-black dead band with underexposed hands under the CTA, and the rail
   heading entering the first screen. Hero owns the whole first screen on the phone; the slice shows the
   hands, pen and paper in lamp light; the scrim only darkens where the copy sits. Desktop untouched (ruled). */
@media (max-width: 700px) {
  .hero { min-height: 100svh; }
  .hero-inner { min-height: calc(100svh - 62px); padding-top: 64px; padding-bottom: 300px; justify-content: flex-start; }
  .hero-media,
  .hero-video { background-position: 78% 50%; object-position: 78% 50%; }
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(15, 13, 9, .78) 0%, rgba(15, 13, 9, .42) 100%),
      linear-gradient(0deg, rgba(15, 13, 9, .22) 0%, rgba(15, 13, 9, .28) 30%, rgba(15, 13, 9, .78) 46%, rgba(15, 13, 9, .86) 100%);
  }
}
/* Fold ruling stands on the phone too (Deth 2026-09-01 18:06: "make sure the rail is visible from the start";
   Jack 08-28 "before I scroll down any further"): hero = screen minus the rail, the rail peeks in at the bottom.
   Only the crop is id-qualified here because the export's inline <style> (after this sheet) sets its own. */
@media (max-width: 700px) {
  section#top.hero .hero-still, section#top.hero .hero-video { object-position: 50% 50%; } /* 09-02: 50% puts the pen tip + page in the phone frame (78% showed only the resting hand and watch — the writing was off-screen) */
}

/* ---- Round 4 (2026-09-01 22:5x, Deth's overturn): S3 = informative explainer, not a second cinematic shot ---- */
#fit .promise-photo.promise-explainer { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 26px; margin: 0; padding: 0; height: auto; min-height: 0; align-self: stretch; justify-self: stretch; width: auto; max-width: 520px; color: var(--cream); background: none; transform: none; box-shadow: none; }
#fit .promise-photo.promise-explainer::after { display: none; }
@media (min-width: 1400px) { #fit .promise-photo.promise-explainer { margin-right: 0; } }
.explainer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 239, 229, .82); }
.explainer-head .explainer-note { color: rgba(244, 239, 229, .5); text-align: right; }
.explainer-chart { display: block; width: 100%; height: auto; overflow: visible; }
.explainer-chart .row-label { font: 500 14px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--cream); }
.explainer-chart .row-sub { font: italic 400 13px var(--serif); fill: rgba(244, 239, 229, .62); }
.explainer-chart .people { color: rgba(244, 239, 229, .78); }
.explainer-chart .seg-rep { color: rgba(244, 239, 229, .85); }
.explainer-chart .seg-jud { fill: var(--amber); }
.explainer-chart .seg-imp { color: rgba(244, 239, 229, .85); }
.explainer-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 400 15px/1.45 var(--sans); color: rgba(244, 239, 229, .78); }
.explainer-key li { display: flex; align-items: baseline; gap: 12px; }
.explainer-key .key-swatch { flex: 0 0 auto; width: 22px; height: 12px; transform: translateY(1px); border: 1px solid rgba(244, 239, 229, .6); box-sizing: border-box; }
.explainer-key .key-rep { background: repeating-linear-gradient(45deg, rgba(244, 239, 229, .55) 0 1px, transparent 1px 5px); }
.explainer-key .key-jud { background: var(--amber); border-color: var(--amber); }
.explainer-key .key-imp { background: none; }
/* arrival: bars grow from the left, people fade in, head + key settle (end state under reduced motion) */
/* Arrival (QC round-7, 2026-09-02): the chart finishes inside ~1.2 s of arrival so a landing visitor sees it complete — BEFORE grows .05–.76 s, THEN AFTER .5–1.2 s (the rows still read in order), each row's people with its bars, the key with the bars (.85 s), not seconds later. Round 6 took 3.5 s and the judge left before it finished. */
/* QC round 10→11 (2026-09-02): the chart argues in ~2.2 s and starts as it enters — BEFORE people 0–.35, bars .25–1.15; beat; AFTER people 1.15–1.5, bars 1.3–2.2; key 1.9–2.4. People and bars per row, no inline delays. */
.promise-explainer .seg { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform .6s cubic-bezier(.3, .1, .2, 1); }
.promise-explainer .row-before .seg.s1 { transition-delay: .25s; } .promise-explainer .row-before .seg.s2 { transition-delay: .4s; } .promise-explainer .row-before .seg.s3 { transition-delay: .55s; }
.promise-explainer .row-after .seg.s1 { transition-delay: 1.3s; } .promise-explainer .row-after .seg.s2 { transition-delay: 1.45s; } .promise-explainer .row-after .seg.s3 { transition-delay: 1.6s; }
.promise-explainer .person { opacity: 0; transition: opacity .4s ease; }
.promise-explainer .row-before .person:nth-child(1) { transition-delay: 0.0s; } .promise-explainer .row-after .person:nth-child(1) { transition-delay: 1.15s; }
.promise-explainer .row-before .person:nth-child(2) { transition-delay: 0.05s; } .promise-explainer .row-after .person:nth-child(2) { transition-delay: 1.2s; }
.promise-explainer .row-before .person:nth-child(3) { transition-delay: 0.1s; } .promise-explainer .row-after .person:nth-child(3) { transition-delay: 1.25s; }
.promise-explainer .row-before .person:nth-child(4) { transition-delay: 0.15s; } .promise-explainer .row-after .person:nth-child(4) { transition-delay: 1.3s; }
.promise-explainer .row-before .person:nth-child(5) { transition-delay: 0.2s; } .promise-explainer .row-after .person:nth-child(5) { transition-delay: 1.35s; }
.promise-explainer .row-before .person:nth-child(6) { transition-delay: 0.25s; } .promise-explainer .row-after .person:nth-child(6) { transition-delay: 1.4s; }
.promise-explainer .row-before .person:nth-child(7) { transition-delay: 0.3s; } .promise-explainer .row-after .person:nth-child(7) { transition-delay: 1.45s; }
.promise-explainer .row-before .person:nth-child(8) { transition-delay: 0.35s; } .promise-explainer .row-after .person:nth-child(8) { transition-delay: 1.5s; }
.promise-explainer .explainer-head, .promise-explainer .explainer-key { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.promise-explainer .explainer-key { transition-delay: 1.9s; }
.promise-explainer.is-in .seg { transform: scaleX(1); }
.promise-explainer.is-in .person { opacity: 1; }
.promise-explainer.is-in .explainer-head, .promise-explainer.is-in .explainer-key { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .promise-explainer .seg, .promise-explainer .person, .promise-explainer .explainer-head, .promise-explainer .explainer-key { transition: none !important; transform: none !important; opacity: 1 !important; }
  .promise-explainer .seg { transform: scaleX(1) !important; }
}
@media (max-width: 940px) {
  #fit .promise-photo.promise-explainer { grid-row: auto; order: 3; margin: 44px 0 0; max-width: none; gap: 20px; min-height: calc(100svh - 24px); justify-content: center; } /* QC round-10: on a phone the chart owns one full screen — the next section starts below the fold */
  .explainer-key { font-size: 14px; }
  .explainer-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .explainer-head .explainer-note { text-align: left; }
}
/* hero: the still crossfades into the first rendered video frame (was a .35s swap gated on scroll) */
.hero-media .hero-still { transition: opacity .8s ease; } /* hand-over: a settle, and the pen is moving inside the first two seconds (QC round-5) */

/* ---- ROUND 14 (2026-09-02 15:5x) — Deth overturned the round-12 PASS from one still of S3 at 1440: "wouldn't pass Power Design"
   (spacing, graphics). Rubric +graphics-finished-not-wireframe +space-earned-by-content. Three moves, desktop and phone:
   1. GRAPHIC FINISH — the chart is a designed artefact of the page's material: filled people marks, three TONAL fills
      (dull grey-cream .34 for repeated work / amber for judgement / light open cream .58 for room to improve — every fill ≥3:1 on the ink) instead of hatch + outlined boxes; taller bars; type in the chart on the page's scale.
   2. SPACE EARNED — S3, S4 and S5 are sized by their content with one section cadence (128px top/bottom at desktop, on the
      8-point scale) instead of forced 100svh screens that left ~200px of vacant ink above and below a small island.
   3. LEGIBLE MARKS — rail icons lifted from .58 to .84 opacity (Power Design #11: UI marks ≥3:1). ---- */
@media (min-width: 941px) {
  .promise, .method, .founder { min-height: 0; }
  #fit.promise { min-height: 0; }
  #fit .promise-inner { min-height: 0; padding-top: 128px; padding-bottom: 128px; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(64px, 7vw, 112px); align-items: center; }
  .method-inner { padding-top: 128px; padding-bottom: 128px; }
  .founder-inner { padding-top: 128px; padding-bottom: 128px; }
  .method-step { min-height: 0; }
  #fit .promise-copy { font-size: clamp(44px, 4.6vw, 66px); max-width: 10em; }
  #fit .promise-quote { margin-top: 32px; font-size: clamp(20px, 1.5vw, 23px); max-width: 24em; }
}
#fit .promise-photo.promise-explainer { gap: 32px; }
.explainer-head { font-size: 13px; letter-spacing: .16em; color: rgba(244, 239, 229, .86); }
.explainer-chart .row-label { font-size: 15px; letter-spacing: .14em; }
.explainer-chart .row-sub { font-size: 14px; fill: rgba(244, 239, 229, .66); }
.explainer-chart .people { color: rgba(244, 239, 229, .84); }
.explainer-chart .seg-rep { fill: rgba(244, 239, 229, .34); color: rgba(244, 239, 229, .34); }
.explainer-chart .seg-jud { fill: var(--amber); }
.explainer-chart .seg-imp { fill: rgba(244, 239, 229, .58); color: rgba(244, 239, 229, .58); }
.explainer-key { gap: 12px; font-size: 16px; color: rgba(244, 239, 229, .82); }
.explainer-key .key-swatch { width: 24px; height: 14px; border: 0; }
.explainer-key .key-rep { background: rgba(244, 239, 229, .34); }
.explainer-key .key-jud { background: var(--amber); }
.explainer-key .key-imp { background: rgba(244, 239, 229, .58); }
.tool-list img { opacity: .84; }
@media (max-width: 940px) {
  #fit .promise-photo.promise-explainer { min-height: 0; margin-top: 56px; gap: 28px; } /* round 14: the chart is composed with the copy, not parked on its own forced screen */
  .explainer-key { font-size: 15px; }
}

/* ---- ROUND 14b — the rest of the round-13 change batch (panel: design director, CRO, motion/a11y) ----
   S4: pictograms at TYPE weight as finished brand marks (root 2.6, accents 3.2; no dashed strokes), 01–04 numbers and column
   dividers dropped (anti-slop numbered-section-markers / icon-topped-feature-card), head→row 56px, marks 150px, one focal row.
   S6: the cream field sized to its content (112/120). HERO: Deth's locked kicker line keeps its words, loses its box
   (anti-slop hero-kicker-eyebrow). MOTION: S3 chart argues in ~1.2 s (each element ≤ .4 s), S4 icons .45 s, .2 s apart. */
.step-diagram svg { stroke-width: 2.6; }
.step-diagram svg [stroke-width="1"], .step-diagram svg [stroke-width="1.1"] { stroke-width: 2.4; }
.step-diagram svg [stroke-width="1.2"] { stroke-width: 2.6; }
.step-diagram svg [stroke-width="1.5"] { stroke-width: 3.2; }
.step-diagram svg { max-width: 150px; }
.method-step { border-right: 0; }
.step-label { font-size: 12px; letter-spacing: .14em; }
@media (min-width: 701px) {
  .method-head { margin-bottom: 56px; }
  .step-diagram { height: 96px; margin-bottom: 24px; }
  .step-diagram svg { max-width: 150px; }
  .method-step { padding: 16px 32px 24px; }
  .method-step h3 { margin: 12px 0 12px; }
}
@media (min-width: 941px) {
  .final-inner { padding-top: 112px; padding-bottom: 120px; }
}
.hero-meta { border: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.explainer-note { margin: -12px 0 0; font: italic 400 14px/1.4 var(--serif); color: rgba(244, 239, 229, .55); }
.promise-explainer .seg { transition-duration: .4s; }
.promise-explainer .row-before .seg.s1 { transition-delay: .1s; } .promise-explainer .row-before .seg.s2 { transition-delay: .2s; } .promise-explainer .row-before .seg.s3 { transition-delay: .3s; }
.promise-explainer .row-after .seg.s1 { transition-delay: .6s; } .promise-explainer .row-after .seg.s2 { transition-delay: .7s; } .promise-explainer .row-after .seg.s3 { transition-delay: .8s; }
.promise-explainer .person { transition-duration: .3s; }
.promise-explainer .row-before .person:nth-child(1) { transition-delay: 0.00s; } .promise-explainer .row-after .person:nth-child(1) { transition-delay: 0.50s; }
.promise-explainer .row-before .person:nth-child(2) { transition-delay: 0.03s; } .promise-explainer .row-after .person:nth-child(2) { transition-delay: 0.53s; }
.promise-explainer .row-before .person:nth-child(3) { transition-delay: 0.06s; } .promise-explainer .row-after .person:nth-child(3) { transition-delay: 0.56s; }
.promise-explainer .row-before .person:nth-child(4) { transition-delay: 0.09s; } .promise-explainer .row-after .person:nth-child(4) { transition-delay: 0.59s; }
.promise-explainer .row-before .person:nth-child(5) { transition-delay: 0.12s; } .promise-explainer .row-after .person:nth-child(5) { transition-delay: 0.62s; }
.promise-explainer .row-before .person:nth-child(6) { transition-delay: 0.15s; } .promise-explainer .row-after .person:nth-child(6) { transition-delay: 0.65s; }
.promise-explainer .row-before .person:nth-child(7) { transition-delay: 0.18s; } .promise-explainer .row-after .person:nth-child(7) { transition-delay: 0.68s; }
.promise-explainer .row-before .person:nth-child(8) { transition-delay: 0.21s; } .promise-explainer .row-after .person:nth-child(8) { transition-delay: 0.71s; }
.promise-explainer .explainer-key { transition-delay: .9s; }
.promise-explainer .explainer-note { opacity: 0; transition: opacity .5s ease 1.1s; }
.promise-explainer.is-in .explainer-note, .promise-explainer.in-view .explainer-note { opacity: 1; }
.step-diagram { transition-duration: .45s, .45s, .4s; }
@media (prefers-reduced-motion: reduce) { .promise-explainer .explainer-note { opacity: 1; transition: none; } }
@media (max-width: 960px) { /* round 14: phone S4 steps sized by their content — the 280px floor left voids under short blurbs */
  .method-step { min-height: 0; padding: 40px 0 40px; }
  .step-diagram { height: auto; margin-bottom: 20px; }
  .step-diagram svg { max-width: 128px; }
}

/* ---- ROUND 15 (2026-09-02 16:3x) — panel round 14: S4 was still "icon-heading-blurb ×4 on a notebook grid", S4–S6 read as a second
   cream world after the ink hero, S6 vacant, phone S4 a slide deck, S4 fades over 300 ms. Moves:
   S4 = ONE drawn artefact: four SOLID ink marks at type weight (no outlines, no empty boxes) joined by a run line that enters the
   compounding curve — the line encodes the sequence and the outcome (structure is information). No kickers, no dividers, no grid.
   MATERIAL: S4 and S6 grounds are flat paper — the sheet under the hero's pen — no 64px notebook grid, no radial wash.
   S6 content-sized (96/104), ornament rule removed. PHONE S4: compact mark+text list, no rules. S4 motion .3 s, marks .12 s apart. */
.method, .final { background-image: none; }
.method::before { display: none; }
.final-route { display: none; }
.method-path { position: relative; }
.method-step { position: relative; }
.step-diagram { position: relative; z-index: 1; display: block; width: 120px; height: 120px; margin: 0 0 28px; color: var(--ink); }
.step-diagram svg { display: block; width: 120px; height: 120px; max-width: none; stroke-width: 0; }
.step-diagram svg .dia-amber-stroke { stroke: var(--amber-deep); }
.step-diagram { transition-duration: .3s, .3s, .3s; }
@media (min-width: 701px) {
  .method-step { padding: 0 32px 24px; min-height: 0; }
  .method-step:first-child { padding-left: 0; }
  .method-step::before { content: ""; display: block; position: absolute; top: 59px; left: 0; width: 18px; height: 2px; background: rgba(25, 22, 16, .26); }
  .method-step:first-child::before { display: none; }
  .method-step::after { content: ""; display: block; position: absolute; top: 59px; left: 166px; right: 0; height: 2px; background: rgba(25, 22, 16, .26); }
  .method-step:first-child::after { left: 134px; }
  .method-step:last-child::after { display: none; }
  .method-step h3 { margin: 0 0 12px; min-height: 2.2em; }
  .method-head { margin-bottom: 64px; }
}
@media (min-width: 941px) {
  .final-inner { padding-top: 96px; padding-bottom: 104px; }
}
@media (max-width: 960px) {
  .method-step { border-bottom: 0; }
}
@media (max-width: 700px) {
  .method-path { display: block; }
  .method-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 0; min-height: 0; border-bottom: 0; }
  .step-diagram { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 2; }
  .step-diagram svg { width: 56px; height: 56px; }
  .method-step h3 { grid-column: 2; margin: 2px 0 6px; font-size: 24px; min-height: 0; }
  .method-step p { grid-column: 2; margin: 0; }
  .method-step::before, .method-step::after { display: none; }
  .method-head { margin-bottom: 32px; }
}
@media (max-width: 960px) { .method-step, .method-step:first-child, .method-step:nth-child(2), .method-step:nth-child(3), .method-step:nth-child(4) { border: 0; } } /* round 15: no rules between the phone steps (anti-slop decorative-divider) */