/* BizKit landing pages, v3 design system
   Direction: Apollo-style layout discipline (centered hero, pill actions, tinted stage,
   hairline cards, dark bands) rendered in the BizKit Identity Standards v1.0 palette.
   Fonts: Archivo (headings, controls), Source Serif 4 (body), IBM Plex Mono (figures). */

@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --graphite: #1F2933;
  --graphite-700: #38434F;
  --slate: #5A6873;
  --line: #D8DCDE;
  --paper: #F4F5F3;
  --white: #FFFFFF;
  --signal: #D9820B;
  --signal-deep: #9C5D06;
  --wash: #FDF3E2;
  --muted-on-dark: #98A4AE;
  --hair-on-dark: rgba(244, 245, 243, 0.16);
  --surface-on-dark: rgba(244, 245, 243, 0.06);

  --font-head: "Archivo", Arial, Helvetica, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --content: 1200px;
  --narrow: 760px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(80px, 10vw, 136px);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.05), 0 2px 10px rgba(31, 41, 51, 0.05);
  --shadow-md: 0 2px 4px rgba(31, 41, 51, 0.05), 0 14px 36px rgba(31, 41, 51, 0.10);
  --shadow-lg: 0 4px 10px rgba(31, 41, 51, 0.06), 0 32px 72px rgba(31, 41, 51, 0.16);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--graphite); }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .cta-copy :focus-visible { outline-color: var(--paper); }

.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; background: var(--graphite); color: var(--paper); border-radius: var(--pill); font-family: var(--font-head); font-size: 14px; transform: translateY(-200%); transition: transform 200ms var(--ease); }
.skip-link:focus { transform: translateY(0); }

/* Type scale */
.t-display { font-size: clamp(38px, 4.7vw, 64px); letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.t-section { font-size: clamp(32px, 3.9vw, 50px); letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.t-feature { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; }
.t-card { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: var(--graphite-700); }
.body { font-size: 18px; line-height: 1.62; color: var(--graphite-700); }
.small { font-size: 15px; line-height: 1.55; color: var(--slate); }
.lead strong, .body strong, .proof-caption strong, .compare-foot strong, .hero-support strong, .form-card .intro strong { font-weight: 600; color: var(--graphite); }
.band .lead strong, .cta .lead strong { color: var(--paper); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--pill); background: var(--white); color: var(--graphite); font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--graphite); box-shadow: 0 1px 0 rgba(31, 41, 51, 0.08), 0 8px 20px rgba(217, 130, 11, 0.22); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--graphite); border-color: var(--graphite); color: var(--paper); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 41, 51, 0.18); }
.btn--secondary { background: var(--white); border-color: var(--line); color: var(--graphite); }
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--graphite); transform: translateY(-1px); }
.btn--dark { background: var(--graphite); border-color: var(--graphite); color: var(--paper); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--graphite-700); border-color: var(--graphite-700); transform: translateY(-1px); }
.btn--on-dark { background: transparent; border-color: rgba(244, 245, 243, 0.4); color: var(--paper); }
.btn--on-dark:hover, .btn--on-dark:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--graphite); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 16px; }
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--graphite); text-decoration: none; border-bottom: 1px solid transparent; }
.link-arrow .arrow { transition: transform 200ms var(--ease); }
.link-arrow:hover, .link-arrow:focus-visible { border-bottom-color: currentColor; }
.link-arrow:hover .arrow { transform: translateX(4px); }
.link-arrow--on-dark { color: var(--paper); }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 245, 243, 0.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(31, 41, 51, 0.07); }
.nav-inner { width: min(100%, calc(var(--content) + 2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter); min-height: 76px; display: flex; align-items: center; gap: 32px; }
.nav-brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.nav-brand img { width: 150px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: var(--pill); font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--graphite-700); text-decoration: none; white-space: nowrap; transition: background 160ms var(--ease), color 160ms var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(31, 41, 51, 0.06); color: var(--graphite); }
.nav-links a[aria-current="page"] { background: rgba(31, 41, 51, 0.08); color: var(--graphite); font-weight: 600; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-actions .link-arrow { font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-bottom: 0; border-radius: var(--pill); white-space: nowrap; }
.nav-actions .link-arrow:hover { background: rgba(31, 41, 51, 0.06); }
.label-short { display: none; }

/* Shell */
.shell { width: min(100%, calc(var(--content) + 2 * var(--gutter))); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--white { background: var(--white); }
.section--tight { padding-top: calc(var(--section) * 0.7); padding-bottom: calc(var(--section) * 0.7); }
.section-head { max-width: var(--narrow); margin: 0 auto 56px; text-align: center; }
.section-head .body, .section-head .lead { margin-top: 20px; }
.section-head--left { margin-left: 0; text-align: left; }

/* Hero */
.hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: 0; }
.hero-inner { text-align: center; }
.hero-title { max-width: 1080px; margin: 0 auto; }
.hero-title .turn { display: block; }
.hero-title .turn--inline { display: inline; }
.hero-lead { max-width: 740px; margin: 28px auto 0; }
.hero-actions { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-support { margin: 16px auto 0; max-width: 640px; }

.hero-stage { position: relative; margin-top: clamp(48px, 6vw, 80px); padding: clamp(14px, 2.4vw, 28px); background: var(--wash); border-radius: var(--radius-xl); }
.hero-stage .asset { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-aside { position: absolute; left: clamp(28px, 4.5vw, 60px); bottom: clamp(28px, 4.5vw, 60px); width: min(400px, calc(100% - 2 * clamp(28px, 4.5vw, 60px))); padding: 26px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: left; }
.hero-aside p { font-size: 15.5px; line-height: 1.55; color: var(--graphite-700); }
.hero-aside .link-arrow { margin-top: 14px; font-size: 14.5px; }

/* Hero photo and its floating chip */
.asset--photo img { object-position: center; }
.hero-chip { position: absolute; top: clamp(28px, 4.5vw, 60px); right: clamp(28px, 4.5vw, 60px); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--shadow-md); font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--graphite); white-space: nowrap; }
.hero-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite); }

/* Asset placeholders. Drop the real file at the img src and the label disappears. */
.asset { position: relative; overflow: hidden; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.asset img { width: 100%; height: 100%; object-fit: cover; }
.asset .asset-label { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background-color: var(--white); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 18px 18px; }
.asset .asset-label svg { width: 34px; height: 34px; color: var(--slate); }
.asset .asset-label strong { font-family: var(--font-mono); font-weight: 400; font-size: 12.5px; letter-spacing: 0.02em; color: var(--graphite-700); }
.asset .asset-label span { font-family: var(--font-body); font-size: 15px; color: var(--slate); max-width: 34ch; line-height: 1.45; }
.js .asset:not(.is-loaded):not(.is-missing) img { visibility: hidden; }
.asset.is-missing .asset-label { display: flex; }
.asset.is-missing img { visibility: hidden; }
.asset--dark { background: var(--graphite-700); border-color: var(--hair-on-dark); }
.asset--dark .asset-label { background-color: var(--graphite-700); background-image: radial-gradient(rgba(244, 245, 243, 0.22) 1px, transparent 1.2px); }
.asset--dark .asset-label svg { color: var(--muted-on-dark); }
.asset--dark .asset-label strong, .asset--dark .asset-label span { color: rgba(244, 245, 243, 0.8); }
/* Video slot: a still standing in until founder footage replaces it.
   Swap the <img> for a <video poster> and the button becomes the player's own. */
.asset--video::after { content: ""; position: absolute; inset: 0; background: rgba(31, 41, 51, 0.42); }
.asset--video .play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 6.4vw, 96px); height: clamp(64px, 6.4vw, 96px); border-radius: 50%;
  background: var(--paper); box-shadow: 0 14px 38px rgba(31, 41, 51, 0.34); display: grid; place-items: center; }
.asset--video .play::after { content: ""; margin-left: 14%; width: 0; height: 0;
  border-left: clamp(19px, 1.9vw, 28px) solid var(--graphite);
  border-top: clamp(12px, 1.2vw, 17px) solid transparent;
  border-bottom: clamp(12px, 1.2vw, 17px) solid transparent; }
.asset.is-missing .play, .asset.is-missing.asset--video::after { display: none; }

.asset--4x3 { aspect-ratio: 4 / 3; }
.asset--16x10 { aspect-ratio: 16 / 10; }
.asset--21x9 { aspect-ratio: 21 / 9; }
.asset--square { aspect-ratio: 1 / 1; }

/* Proof strip */
.strip { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-inner { display: grid; grid-template-columns: 1fr 1fr; }
.strip-item { padding: 26px 40px 26px 0; font-size: 17px; line-height: 1.5; color: var(--graphite-700); display: flex; align-items: center; gap: 16px; }
.strip-item + .strip-item { padding: 26px 0 26px 40px; border-left: 1px solid var(--line); }
.strip-item .figure { flex: 0 0 auto; font-family: var(--font-mono); font-size: 30px; letter-spacing: -0.04em; color: var(--graphite); line-height: 1; }

/* Dark band */
.band { background: var(--graphite); color: var(--paper); }
.band h2, .band h3 { color: var(--paper); }
.band .body, .band .lead { color: var(--muted-on-dark); }
.band-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.band-head .lead { color: rgba(244, 245, 243, 0.82); padding-top: 10px; }
.band-visual { margin-top: clamp(40px, 5vw, 72px); }

/* Feature rows */
.features { display: grid; gap: clamp(64px, 8vw, 120px); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.feature--flip .feature-visual { order: -1; }
.feature-copy .body { margin-top: 20px; max-width: 520px; }
.feature-copy .list-check { margin-top: 22px; }
.feature-visual .asset { box-shadow: var(--shadow-md); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cards--joined { gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cards--joined .card { border: 0; border-radius: 0; }
.cards--joined .card + .card { border-left: 1px solid var(--line); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: clamp(28px, 3.4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; }
.card .body { font-size: 17px; }
.card--paper { background: var(--paper); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--graphite); }
.card--paper .chip { background: var(--white); }

/* Cards on dark, role cards */
.band .cards { margin-top: clamp(40px, 5vw, 64px); }
.card--on-dark { background: var(--surface-on-dark); border-color: var(--hair-on-dark); }
.card--on-dark h3 { color: var(--paper); }
.card--on-dark .body { color: var(--muted-on-dark); }
.card--on-dark .list-check li { color: var(--paper); }
.card--on-dark .list-check li::before { background: var(--paper); }
.card--on-dark .list-check li::after { border-color: var(--graphite); }

/* Method timeline (on dark) */
.timeline { list-style: none; padding: 0; margin: clamp(48px, 6vw, 80px) 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--hair-on-dark); }
.step { position: relative; padding: 30px 18px 0 0; }
.step-node { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px var(--graphite); }
.step--signal .step-node { background: var(--signal); }
.step-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.22; letter-spacing: -0.015em; color: var(--paper); }
.step-desc { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--muted-on-dark); }
.step-name .arrow { color: var(--signal); }

/* Check list */
.list-check { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.list-check li { position: relative; padding-left: 32px; font-family: var(--font-head); font-weight: 500; font-size: 16.5px; line-height: 1.45; color: var(--graphite); }
.list-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--graphite); }
.list-check li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); }

/* Comparison */
.compare { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.compare-copy .body { margin-top: 20px; }
.compare-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.compare-col { padding: 30px 30px 32px; }
.compare-col + .compare-col { border-left: 1px solid var(--line); }
.compare-col h3 { font-size: 16px; letter-spacing: 0; }
.compare-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.compare-col li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; color: var(--graphite-700); }
.compare-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--slate); }
.compare-col--bizkit li::before { border-color: var(--graphite); background: var(--graphite); }
.compare-col--muted li { color: var(--slate); }
.compare-foot { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border-top: 1px solid var(--line); background: var(--paper); }
.compare-foot div { padding: 22px 30px; font-size: 15px; line-height: 1.5; color: var(--graphite-700); }
.compare-foot div + div { border-left: 1px solid var(--line); }

/* Generic split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.split-copy { display: grid; grid-auto-rows: max-content; align-content: start; justify-items: start; align-self: start; height: auto; min-height: 0; }
.split-copy .body { margin-top: 20px; max-width: 540px; }
.split-copy .btn, .split-copy .link-arrow { margin-top: 28px; margin-bottom: 0; align-self: start; }

/* Proof */
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.proof-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-note { margin: 24px 0 0; max-width: 720px; }
.proof-card { position: relative; padding: 36px 32px 34px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 18px; }
.proof-card--lead { background: var(--wash); border-color: transparent; }
.proof-card--lead::before { background: var(--signal); }
.proof-card--lead .proof-figure { color: var(--graphite); }
.proof-figure { font-family: var(--font-mono); font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1.05; color: var(--graphite); font-variant-numeric: tabular-nums; }
.proof-figure small { display: block; margin-top: 8px; font-size: 13px; letter-spacing: 0; color: var(--slate); }
.proof-caption { font-size: 16px; line-height: 1.5; color: var(--graphite-700); }
.proof-card--statement { justify-content: center; }
.proof-card--statement .proof-caption { font-family: var(--font-head); font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; color: var(--graphite); }

/* Checklist */
.checklist { list-style: none; max-width: 860px; margin: 0 auto; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.checklist-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px 28px; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.checklist-row:first-child { border-top: 0; }
.checklist-row .index { font-family: var(--font-mono); font-weight: 400; font-size: 13.5px; color: var(--slate); }

/* Quote */
.quote { max-width: 900px; margin: 0 auto; }   /* a pull quote is large type on the page: no panel, no bar (design direction, 2026-09-30) */
.quote p { font-family: var(--font-body); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.28; letter-spacing: -0.012em; color: var(--graphite); text-wrap: balance; }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--graphite); transition: transform 240ms var(--ease), background 200ms var(--ease); }
.faq summary:hover .plus { background: var(--paper); }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.faq .answer { padding: 0 28px 28px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--graphite-700); }

/* Final CTA with form */
.cta { background: var(--graphite); color: var(--paper); }
.cta-inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cta-copy h2 { color: var(--paper); }
.cta-copy .lead { margin-top: 22px; color: rgba(244, 245, 243, 0.86); max-width: 520px; }
.cta-copy .btn { margin-top: 32px; }
.cta-secondary { margin-top: 36px; max-width: 520px; padding: 24px 26px; background: var(--surface-on-dark); border: 1px solid var(--hair-on-dark); border-radius: var(--radius); }
.cta-secondary p { font-size: 15.5px; line-height: 1.55; color: var(--muted-on-dark); }
.cta-secondary p strong { color: var(--paper); font-family: var(--font-head); font-weight: 600; }
.cta-secondary .btn { margin-top: 16px; }

.form-card { background: var(--white); color: var(--graphite); border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 44px); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: clamp(24px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; }
.form-card .intro { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--graphite-700); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--graphite); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-family: var(--font-body); font-size: 16px; color: var(--graphite); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235A6873' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 104px; resize: vertical; }
.pills { grid-column: 1 / -1; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.pills legend { padding: 0; margin-bottom: 10px; font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--graphite); }
.pills-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font-family: var(--font-head); font-weight: 500; font-size: 14px; color: var(--graphite); cursor: pointer; user-select: none; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pill:hover { border-color: var(--graphite-700); }
.pill:has(input:checked), .pill.is-on { background: var(--graphite); border-color: var(--graphite); color: var(--paper); }
.pill:has(input:focus-visible), .pill:focus-within { outline: 3px solid var(--signal-deep); outline-offset: 3px; }
.pill input:checked + span::before { content: "\2713\00a0"; }
.pills.is-invalid .pills-row { padding: 6px; margin: -6px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px #B3261E; }
.pills-error { display: none; margin-top: 8px; font-size: 13.5px; color: #B3261E; }
.pills.is-invalid .pills-error { display: block; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(31, 41, 51, 0.10); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #B3261E; }
.form-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.form-actions .btn { width: 100%; }
.form-consent { font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.form-alt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--graphite-700); }
.form-alt .link-arrow { margin-top: 8px; font-size: 14px; }
.form-confirm { padding: 12px 0 4px; }
.form-confirm h3 { font-size: 24px; }
.form-confirm p { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--graphite-700); }
.form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--paper); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--graphite-700); }
.form-status.is-visible { display: block; }
.hp { position: absolute; left: -9999px; }

/* Footer */
.footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.footer-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; line-height: 1.3; color: var(--graphite); text-decoration: none; transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.footer-link:hover, .footer-link:focus-visible { border-color: var(--graphite); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.footer-link .arrow { flex: 0 0 auto; color: var(--graphite); font-family: var(--font-mono); font-size: 20px; }
.footer-meta { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--slate); }
.footer-meta img { width: 150px; height: auto; }
.footer-meta nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-meta a { text-underline-offset: 4px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in, .js.static .reveal { opacity: 1; transform: none; }
@media print { .js .reveal, .js .reveal-stagger > *, .js .timeline .step-node { opacity: 1; transform: none; } .js .timeline::before { transform: none; } }

/* Responsive */
@media (max-width: 1240px) {
  .nav-actions .link-arrow { display: none; }
}
@media (max-width: 1000px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-brand { flex: 0 0 auto; }
  .nav-actions { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 1100px) {
  .step { padding-right: 12px; }
  .step-name { font-size: 15.5px; }
  .step-desc { font-size: 13px; }
}
@media (max-width: 900px) {
  .band-head, .feature, .compare, .split, .cta-inner { grid-template-columns: 1fr; }
  .feature { gap: 32px; }
  .feature--flip .feature-visual { order: 0; }
  .cards, .cards--3, .proof-grid, .footer-links { grid-template-columns: 1fr; }
  .cards--joined .card + .card { border-left: 0; border-top: 1px solid var(--line); }
  .compare-cols { grid-template-columns: 1fr; }
  .compare-col + .compare-col { border-left: 0; border-top: 1px solid var(--line); }
  .compare-foot { grid-template-columns: 1fr; }
  .compare-foot div + div { border-left: 0; border-top: 1px solid var(--line); }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 26px 36px; }
  .step-name { font-size: 17px; }
  .step-desc { font-size: 14px; }
  .step:last-child { padding-bottom: 0; }
  .step-node { top: 4px; }
  .strip-inner { grid-template-columns: 1fr; }
  .strip-item { padding-right: 0; }
  .strip-item + .strip-item { padding: 26px 0 26px 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav-inner { min-height: 64px; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .nav-brand img { width: 120px; }
  .nav-actions .link-arrow { display: none; }
  .label-full { display: none; }
  .label-short { display: inline; }
  .btn--sm { min-height: 40px; padding: 0 12px; font-size: 12.5px; }
  .hero { padding-top: 40px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; white-space: normal; }
  .hero-stage { padding: 10px; border-radius: var(--radius-lg); }
  .hero-stage .asset { border-radius: var(--radius); }
  .hero-alt { flex-direction: column; align-items: stretch; text-align: left; }
  .hero-alt .btn { width: 100%; }
  .section-head { margin-bottom: 36px; }
  .card { padding: 24px; }
  .compare-col { padding: 24px 22px; }
  .compare-foot div { padding: 18px 22px; }
  .proof-card { padding: 28px 24px; }
  .checklist-row { grid-template-columns: 40px 1fr; padding: 18px 20px; font-size: 17px; }
  .faq summary { padding: 20px; font-size: 17px; }
  .faq .answer { padding: 0 20px 22px; }
  .field-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .form-card { padding: 24px 20px; border-radius: var(--radius); }
  .footer-link { min-height: 0; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
  .strip-item .figure { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ---------------------------------------------------------------- v3.2: navigation */
.nav-inner { position: relative; }
.nav-menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--pill); background: transparent; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--graphite-700); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.nav-trigger .chev { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: rgba(31, 41, 51, 0.06); color: var(--graphite); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 300px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; z-index: 60; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-group.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .nav-group:hover .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
/* current page: a graphite rule under the name, not color alone */
.nav-panel a[aria-current="page"] strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nav-mobile a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-panel a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--graphite); transition: background 140ms var(--ease); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--paper); }
.nav-panel a[aria-current="page"] { background: var(--paper); }
.nav-panel a[aria-current="page"] strong { color: var(--graphite); }
.nav-panel strong { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.nav-panel span { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--slate); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: 4px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); cursor: pointer; }
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--graphite); transition: transform 220ms var(--ease), opacity 160ms var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-mobile { border-top: 1px solid var(--line); background: var(--paper); }
.nav-mobile[hidden] { display: none; }
.nav-mobile-inner { width: min(100%, calc(var(--content) + 2 * var(--gutter))); margin: 0 auto; padding: 8px var(--gutter) 18px; display: grid; }
.nav-mobile-head { margin: 14px 0 4px; font-family: var(--font-head); font-weight: 500; font-size: 13px; color: var(--slate); }
.nav-mobile a { padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--graphite); text-decoration: none; }
.nav-mobile .nav-mobile-ql { margin-top: 14px; border: 0; font-weight: 500; font-size: 15px; }
.nav-mobile .nav-mobile-inner > * { animation: rise 420ms var(--ease) both; }
.nav-mobile .nav-mobile-inner > *:nth-child(2) { animation-delay: 40ms; } .nav-mobile .nav-mobile-inner > *:nth-child(3) { animation-delay: 80ms; } .nav-mobile .nav-mobile-inner > *:nth-child(4) { animation-delay: 120ms; } .nav-mobile .nav-mobile-inner > *:nth-child(5) { animation-delay: 160ms; } .nav-mobile .nav-mobile-inner > *:nth-child(6) { animation-delay: 200ms; } .nav-mobile .nav-mobile-inner > *:nth-child(7) { animation-delay: 240ms; } .nav-mobile .nav-mobile-inner > *:nth-child(8) { animation-delay: 280ms; } .nav-mobile .nav-mobile-inner > *:nth-child(9) { animation-delay: 320ms; }

/* ---------------------------------------------------------------- v3.2: hero video slot */
.hero-stage { padding: clamp(10px, 1.6vw, 18px); }
.asset--video::after { background: linear-gradient(180deg, rgba(31, 41, 51, 0.08) 0%, rgba(31, 41, 51, 0.34) 100%); }
.asset--video .play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 8px 30px rgba(31, 41, 51, 0.3); cursor: pointer; transition: transform 240ms var(--ease), background 200ms var(--ease); }
.asset--video .play::after { content: none; }
.asset--video .play-icon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -15px 0 0 -10px; border-left: 26px solid var(--graphite); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.asset--video:hover .play, .asset--video .play:focus-visible { transform: scale(1.08); background: var(--white); }
.asset--video .play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(244, 245, 243, 0.55); animation: pulse 2.4s var(--ease) infinite; }
.asset--video video, .asset--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--graphite); }
.asset--video.is-playing::after, .asset--video.is-playing .play, .asset--video.is-playing img { display: none; }
.hero-alt { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.hero-alt p { max-width: 720px; font-size: 15.5px; line-height: 1.5; color: var(--graphite-700); }
.hero-alt .btn { flex: 0 0 auto; }
/* 2026-10-20: while a hero video has no link the build leaves its stage out, and the quiz strip
   follows the hero text directly; it takes the gap the homepage keeps between its hero and logo row.
   A hero with its video keeps the 18px under the stage. */
.hero-inner + .hero-alt { margin-top: clamp(40px, 5vw, 64px); }

/* ---------------------------------------------------------------- v3.2: results */
.results-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.results-head .lead { color: var(--graphite-700); font-size: 18px; max-width: 560px; }
.results { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.results[data-cols="4"] { --cols: 4; }
.results[data-cols="3"] { --cols: 3; }
.result { position: relative; padding: 36px 28px 8px 0; min-height: 250px; display: flex; flex-direction: column; gap: 18px; }
.result + .result { padding-left: 28px; border-left: 1px solid var(--line); }
.result--lead::before { content: ""; position: absolute; left: 0; right: 28px; top: -1px; height: 3px; background: var(--signal); }
.result-figure { font-family: var(--font-mono); font-size: clamp(36px, 4vw, 58px); letter-spacing: -0.03em; line-height: 1.05; color: var(--graphite); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.results[data-cols="4"] .result-figure { font-size: clamp(30px, 3vw, 44px); }
.result-statement { font-family: var(--font-head); font-weight: 600; font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -0.025em; line-height: 1.08; color: var(--graphite); text-wrap: balance; }
.result-statement.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: -0.03em; }
.result-sub { margin-top: 10px; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--graphite-700); }
.result-caption { margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--graphite-700); }
.result--lead .result-caption { margin-top: 18px; }
.result--lead { justify-content: flex-start; }
.result--statement .result-caption { margin-top: 0; font-family: var(--font-head); font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; color: var(--graphite); }
.result--statement .result-caption strong { font-weight: 600; }
.result--statement .result-caption + .result-caption { margin-top: auto; }

/* ---------------------------------------------------------------- v3.2: conversation */
.conversation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.conversation-photo { margin: 0; border: 0; border-radius: 0; min-height: 420px; }
.conversation-photo img { width: 100%; height: 100%; object-fit: cover; }
.conversation-quote { margin: 0; padding: clamp(36px, 5vw, 72px); display: flex; align-items: center; }
.conversation-quote p { font-family: var(--font-body); font-size: clamp(22px, 2.3vw, 31px); line-height: 1.38; letter-spacing: -0.005em; color: var(--graphite); text-wrap: pretty; }

/* ---------------------------------------------------------------- v3.2: card visuals and composed assets */
.card-visual { margin: -1px -1px 8px; border: 0; border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 4 / 3; }
.card--on-dark .card-visual { border-radius: var(--radius) var(--radius) 0 0; }
.card:has(.card-visual) { padding-top: 0; }
.cards--joined .card:has(.card-visual) { padding-top: 0; }
.cards--joined .card .card-visual { border-radius: 0; margin: 0 0 8px; }
.cards--joined .card:has(.card-visual) { padding-left: 0; padding-right: 0; }
.cards--joined .card:has(.card-visual) > :not(.card-visual) { margin-left: clamp(28px, 3.4vw, 44px); margin-right: clamp(28px, 3.4vw, 44px); }
.asset--composed { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.feature-visual .asset--composed { box-shadow: none; }

/* ---------------------------------------------------------------- v3.2: motion */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-blur { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pulse { 0% { transform: scale(0.85); opacity: 0.9; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.js .hero-title, .js .hero-lead, .js .hero-actions, .js .hero-support, .js .hero-stage, .js .hero-alt { animation: rise-blur 900ms var(--ease) both; }
.js .hero-lead { animation-delay: 90ms; } .js .hero-actions { animation-delay: 170ms; } .js .hero-support { animation-delay: 230ms; } .js .hero-stage { animation-delay: 300ms; animation-name: rise; } .js .hero-alt { animation-delay: 420ms; animation-name: rise; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal-stagger.is-in > *, .js.static .reveal-stagger > * { opacity: 1; transform: none; }
.js .timeline::before { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease) 120ms; }
.js .timeline.is-in::before, .js.static .timeline::before { transform: none; }
.js .timeline .step-node { transform: scale(0.4); opacity: 0; transition: transform 420ms var(--ease), opacity 300ms var(--ease); transition-delay: calc(140ms + var(--i, 0) * 130ms); }
.js .timeline.is-in .step-node, .js.static .timeline .step-node { transform: none; opacity: 1; }
.card, .compare-card, .conversation, .hero-alt { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(31, 41, 51, 0.16); }
.cards--joined .card:hover { transform: none; box-shadow: none; }
.btn:active { transform: translateY(0) scale(0.985); }
.faq .answer { overflow: hidden; }
.faq details.is-animating .answer { will-change: height; }
.faq summary .plus { transition: transform 280ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); }
.step-name { transition: color 200ms var(--ease); }
.list-check li { transition: transform 200ms var(--ease); }
@media (max-width: 900px) {
  .results-head { grid-template-columns: 1fr; align-items: start; }
  .results { grid-template-columns: 1fr; }
  .result { min-height: 0; padding: 28px 0 24px; }
  .result + .result { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .result--lead::before { right: 0; }
  .result-caption { margin-top: 0; }
  .conversation { grid-template-columns: 1fr; }
  .conversation-photo { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 1000px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-panel { position: static; }
}
.nav-mobile-cta { display: none; }
@media (max-width: 640px) {
  .nav-actions { display: none; }
  .nav-toggle { margin-left: auto; }
  .nav-mobile-cta { display: inline-flex; margin: 6px 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-title, .js .hero-lead, .js .hero-actions, .js .hero-support, .js .hero-stage, .js .hero-alt, .nav-mobile .nav-mobile-inner > * { animation: none; }
  .js .reveal-stagger > *, .js .timeline::before, .js .timeline .step-node { opacity: 1; transform: none; transition: none; }
  .asset--video .play::before { animation: none; }
}

/* ---------------------------------------------------------------- v3.2: case study */
/* Grouped results: one ruled table, the lead figure in its own column, the case study as a column group with its own head */
.results--grouped { grid-template-columns: minmax(0, 1.35fr) minmax(0, 4fr); }
.results--grouped .result--lead { padding-right: 32px; }
.result-group { display: flex; flex-direction: column; border-left: 1px solid var(--graphite); }
.result-group-head { display: flex; align-items: center; gap: 14px; padding: 20px 0 18px 28px; border-bottom: 1px solid var(--line); }
.result-group-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; }
.result-group-cols .result { padding-left: 28px; border-left: 1px solid var(--line); }
.result-group-cols .result:first-child { border-left: 0; }
.results--grouped-2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr); }
.result-group-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.casestudy-logo { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; object-fit: contain; background: var(--white); }
.casestudy-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--graphite); }
.results-notes { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.results-notes .body { font-size: 16px; }
@media (max-width: 1100px) { .results--grouped { grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr); } .result-group-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .result-group-cols .result:nth-child(n+3) { border-top: 1px solid var(--line); } .result-group-cols .result:nth-child(3) { border-left: 0; } }
@media (max-width: 900px) { .results-notes { grid-template-columns: 1fr; } .results--grouped { grid-template-columns: 1fr; } .results--grouped .result--lead { padding-right: 0; } .result-group { border-left: 0; border-top: 1px solid var(--graphite); } .result-group-head { padding-left: 0; } .result-group-cols { grid-template-columns: 1fr; } .result-group-cols .result { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .result-group-cols .result:first-child { border-top: 0; } }

/* video slot before footage exists: the play mark stays as a visual cue but is not an active control */
.asset--video.is-pending .play { cursor: default; }
.asset--video.is-pending .play::before { animation: none; }
.asset--video.is-pending:hover .play { transform: none; }


/* ================================================================ v3.3: round 2, the case studies */

/* Navigation: Case studies, a plain link beside the two groups */
.nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--pill); font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--graphite-700); text-decoration: none; white-space: nowrap; transition: background 160ms var(--ease), color 160ms var(--ease); }
.nav-link:hover, .nav-link:focus-visible { background: rgba(31, 41, 51, 0.06); color: var(--graphite); }
.nav-link[aria-current] { color: var(--graphite); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-mobile .nav-mobile-plain { margin-top: 14px; }

/* The process band with six steps (the three ERP pages; Payroll + HRIS keeps seven) */
.timeline--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .timeline--6 { grid-template-columns: 1fr; } }

/* Figures: a currency or a qualifier set at half size beside the number */
.unit { font-size: 0.5em; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- Results with named stories
   Each story is a column group under its own head, the client's name set in type; a figure
   with no story behind it is a solo column. Heads, bodies and story links sit on three shared
   rows (subgrid), so every figure starts on one line however long a client's name runs.
   Figures size to the column: 100cqi is the row, --cols-now the columns showing. The lead
   story's figure carries the section's one amber rule. */
.results--stories { --cols-now: var(--cols, 3); container-type: inline-size; }
.results[data-cols="1"] { --cols: 1; }
.results[data-cols="2"] { --cols: 2; }
.results--stories > .result-group, .results--stories > .result-solo { display: grid; grid-row: span 3; grid-template-rows: subgrid; position: relative; }
.results--stories > * { border-left: 1px solid var(--line); }
.results--stories > :first-child { border-left: 0; }
.results--stories .result-group-head { padding: 18px 28px 16px; border-bottom: 1px solid var(--line); }
.result-group-cols--1 { grid-template-columns: minmax(0, 1fr); }
.results--stories .result { min-height: 0; padding: 30px 28px 0; gap: 14px; }
.results--stories .result-solo > .result { grid-row: 2 / 4; padding-bottom: 34px; }
.results--stories .result-group-foot { padding: 22px 28px 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.results--stories .result-group-foot .body { font-size: 16px; max-width: 760px; }
.results--stories .result-group-cols:not(.result-group-cols--1) .result { padding-bottom: 30px; }
.results--stories .result-group-cols:not(.result-group-cols--1) + .result-group-foot { padding-top: 24px; border-top: 1px solid var(--line); }
.results--stories > :first-child .result-group-head,
.results--stories > :first-child .result-group-foot,
.results--stories > :first-child .result-group-cols .result:first-child,
.results--stories > .result-solo:first-child > .result { padding-left: 0; }
.results.results--stories .result-figure { font-size: clamp(28px, calc(100cqi / var(--cols-now) * 0.12), 56px); overflow-wrap: normal; }
.results--stories .result-caption { margin-top: 0; }
.results--stories .result-group--lead .result:first-child::before { content: ""; position: absolute; left: 0; right: 28px; top: -1px; height: 3px; background: var(--signal); }
.result-note { font-size: 16px; line-height: 1.5; color: var(--graphite-700); }
.results-more { margin-top: clamp(28px, 4vw, 40px); }
@media (max-width: 1100px) and (min-width: 901px) {
  .results--stories[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols-now: 2; }
  .results--stories[data-cols="4"] > :nth-child(3) { border-left: 0; }
  .results--stories[data-cols="4"] > :nth-child(n+3) { border-top: 1px solid var(--line); }
  .results--stories[data-cols="4"] > :nth-child(3) .result-group-head,
  .results--stories[data-cols="4"] > :nth-child(3) .result-group-foot,
  .results--stories[data-cols="4"] > :nth-child(3) .result { padding-left: 0; }
  .results--stories > :first-child .result-group-cols .result:nth-child(3) { padding-left: 0; }
}
@media (max-width: 900px) {
  .results--stories { grid-template-columns: minmax(0, 1fr); --cols-now: 1; }
  .results--stories > * { border-left: 0; border-top: 1px solid var(--line); }
  .results--stories > :first-child { border-top: 0; }
  .results--stories .result-group-head, .results--stories .result-group-foot, .results--stories .result { padding-left: 0; padding-right: 0; }
  .results--stories .result-group-cols .result { border-left: 0; }
  .results--stories .result-group--lead .result:first-child::before { right: 0; }
}

/* ---------------------------------------------------------------- Drawn work
   strategy/design-direction.md, Drawn work: line, stroke 2.0, round, minimal, ink and the
   accent once, flat ground. The rules of _os/templates/asset-kits/drawn.css, coloured from
   the identity tokens above; a drawing never carries a colour of its own. */
.drawn { --ink: var(--graphite); --ink-soft: var(--slate); --accent: var(--signal); --stroke: 2; display: block; width: 100%; color: var(--ink); }
.drawn svg { display: block; width: 100%; height: auto; stroke: var(--ink); stroke-width: var(--stroke); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.drawn svg * { vector-effect: non-scaling-stroke; }
.drawn .fill { fill: var(--accent); }
.drawn .paper { fill: var(--paper); }
.drawn .soft { stroke: var(--ink-soft); }

/* ---------------------------------------------------------------- Story hero */
.story-hero { padding-top: clamp(48px, 7vw, 96px); }
.story-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.story-label { font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.story-title { margin-top: 18px; font-size: clamp(34px, 4.1vw, 56px); max-width: 860px; }
.story-standfirst { margin-top: 24px; max-width: 720px; text-wrap: pretty; }
.story-drawing { margin: 0; width: 100%; max-width: 320px; justify-self: end; }
.story-hero--index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.story-hero--index .story-title { max-width: 620px; }
.story-hero--index .story-standfirst { margin-top: 0; max-width: 560px; }
.js .story-label, .js .story-title, .js .story-standfirst, .js .story-drawing { animation: rise-blur 900ms var(--ease) both; }
.js .story-title { animation-delay: 70ms; }
.js .story-standfirst { animation-delay: 150ms; }
.js .story-drawing { animation-delay: 240ms; animation-name: rise; }

/* ---------------------------------------------------------------- Results at a glance
   The Results sections' ruled columns on a story page: figure over caption, no fill, hairline
   rules. --fit is the width of the strip's longest figure in ems, set on each strip, so the
   four figures share one size and the longest still fits its column. */
.glance-wrap { margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(64px, 8vw, 104px); }
.glance-label { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--graphite); padding-bottom: 16px; }
.glance { margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); container-type: inline-size; }
.glance-item { padding: 28px 28px 8px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.glance-item:first-child { padding-left: 0; border-left: 0; }
.glance dt { font-family: var(--font-mono); font-weight: 400; font-size: min(40px, calc((100cqi / var(--n, 4) - 56px) / var(--fit, 6))); letter-spacing: -0.03em; line-height: 1.05; color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.glance dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--graphite-700); }
.glance-note { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--slate); }

/* ---------------------------------------------------------------- The story, in a reading column */
.story-col { max-width: 720px; margin-left: auto; margin-right: auto; }
.story-col--q { max-width: 860px; }
.story-section + .story-section, .story-cta + .story-section { margin-top: clamp(52px, 6vw, 76px); }
.story-section h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.14; text-wrap: balance; }
.story-section p { margin-top: 18px; font-size: 18px; line-height: 1.65; color: var(--graphite-700); }
.story-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.story-list li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.6; color: var(--graphite-700); }
.story-list li::before { content: ""; position: absolute; left: 3px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); }
.story-cta { margin-top: clamp(36px, 4vw, 48px); padding: clamp(24px, 2.6vw, 30px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }   /* plain type between hairlines, no tinted panel (design direction, 2026-09-30) */
.story-cta-text { font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.28; letter-spacing: -0.015em; color: var(--graphite); text-wrap: balance; }
.story-cta .btn { white-space: normal; }

/* ---------------------------------------------------------------- Questions, shown open */
.story-q-title { max-width: 760px; margin: 0 auto; text-align: center; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; }
.qa-list { margin-top: clamp(28px, 3.4vw, 40px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qa-item { padding: 26px 28px 28px; border-top: 1px solid var(--line); }
.qa-item:first-child { border-top: 0; }
.qa-item h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.qa-item p { margin-top: 10px; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--graphite-700); }

/* ---------------------------------------------------------------- The call-to-action band */
.cta-band { background: var(--graphite); color: var(--paper); }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cta-band-title, .cta-band-statement { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.028em; line-height: 1.1; color: var(--paper); text-wrap: balance; max-width: 760px; }
.cta-band-body { margin-top: 16px; max-width: 620px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: rgba(244, 245, 243, 0.86); }
.cta-band :focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------------- The case study list */
.cs-group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.cs-group + .cs-group { margin-top: clamp(56px, 7vw, 88px); }
.cs-group-title { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.cs-group-note { margin-top: 14px; max-width: 280px; font-size: 16px; line-height: 1.55; color: var(--slate); }
.cs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-card { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease); }
.cs-card:hover, .cs-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(31, 41, 51, 0.24); }
.cs-card-top { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
.cs-card-client { font-size: clamp(21px, 1.8vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.cs-card-product { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--paper); font-family: var(--font-head); font-weight: 500; font-size: 13px; color: var(--graphite); white-space: nowrap; }
.cs-card-what { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.cs-card-result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cs-card-figure { font-family: var(--font-mono); font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.03em; line-height: 1.05; color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-card-caption { font-size: 16px; line-height: 1.5; color: var(--graphite-700); }
.cs-card-change { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--graphite-700); }
.cs-card-link { margin-top: auto; padding-top: 24px; align-self: flex-start; }
.cs-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.cs-card-link:focus-visible { outline: none; }
.cs-card:has(.cs-card-link:focus-visible) { outline: 3px solid var(--signal-deep); outline-offset: 3px; }

/* ---------------------------------------------------------------- Footer with the meta line only */
.footer--slim { padding-top: 40px; padding-bottom: 40px; }
.footer-meta--solo { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
  .story-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .story-drawing { order: -1; justify-self: start; max-width: 168px; }
  .story-hero--index { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .glance { grid-template-columns: 1fr; }
  .glance dt { font-size: min(40px, calc(100cqi / var(--fit, 6))); }
  .glance-item { padding: 22px 0 20px; border-left: 0; border-top: 1px solid var(--line); }
  .glance-item:first-child { border-top: 0; }
  .cta-band-inner { grid-template-columns: 1fr; align-items: start; }
  .cs-group { grid-template-columns: 1fr; gap: 22px; }
  .cs-group-note { max-width: 560px; }
}
@media (max-width: 760px) {
  .cs-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .story-section p, .story-list li { font-size: 17px; }
  .qa-item { padding: 22px 20px 24px; }
  .story-cta .btn, .cta-band .btn { width: 100%; }
  .cs-card-figure { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .story-label, .js .story-title, .js .story-standfirst, .js .story-drawing { animation: none; }
  .cs-card { transition: none; }
}


/* ================================================================ v3.4: round 3, the customer story */

/* One client's story on each landing page, in place of the Results table: the label and the
   story's own heading, short paragraphs at reading width, and the one result that matters set
   large beside them: mono figure and plain caption on the page ground under a hairline, with no
   panel and no coloured bar (design direction, note "no left-bar layouts", 2026-09-30). Beside
   the text on a wide screen, above it on a phone; the DOM keeps reading order (label, heading,
   result, story, link). */
.story-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "label label" "title title" "stat text" "stat more"; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.story-feature > .story-label { grid-area: label; }
.js .story-feature .story-label { animation: none; }
.story-feature-title { grid-area: title; max-width: 940px; margin-top: 16px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.story-feature-text { grid-area: text; max-width: 640px; }
.story-feature-text p { margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--graphite-700); text-wrap: pretty; }
.story-feature-text p:first-child { margin-top: clamp(32px, 3.4vw, 44px); font-size: clamp(19px, 1.5vw, 21px); color: var(--graphite); }
.story-feature-more { grid-area: more; margin-top: 28px; }
.story-stat { grid-area: stat; align-self: start; position: sticky; top: 112px; margin-top: clamp(32px, 3.4vw, 44px); container-type: inline-size; padding-top: 24px; border-top: 1px solid var(--line); }
.story-stat-figure { font-family: var(--font-mono); font-size: min(84px, calc(100cqi / var(--fit, 6))); letter-spacing: -0.03em; line-height: 1.02; color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-stat-caption { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--graphite-700); max-width: 36ch; }
@media (max-width: 900px) {
  .story-feature { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "stat" "text" "more"; }
  .story-stat { position: static; margin-top: 28px; }
  .story-feature-text p:first-child { margin-top: 28px; }
}
@media (max-width: 640px) {
  .story-feature-text p { font-size: 17px; }
  .story-feature-text p:first-child { font-size: 18px; }
  .story-stat { padding-top: 20px; }
}

/* The story pages' calls to action are the copy's one line, linked (no button under it) */
.story-cta-link, .cta-band-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: rgba(31, 41, 51, 0.35); transition: text-decoration-color 200ms var(--ease); }
.story-cta-link:hover, .story-cta-link:focus-visible { text-decoration-color: currentColor; }
.cta-band-link { text-decoration-color: rgba(244, 245, 243, 0.45); }
.cta-band-link:hover, .cta-band-link:focus-visible { text-decoration-color: var(--paper); }
.story-cta-link .arrow, .cta-band-link .arrow { display: inline-block; margin-left: 4px; transition: transform 200ms var(--ease); }
.story-cta-link:hover .arrow, .cta-band-link:hover .arrow { transform: translateX(4px); }

/* The list page cards: the story's title as the card heading, the client as a small label above it */
.cs-card-top { flex-direction: column; gap: 0; }
.cs-card-client { margin-top: 18px; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); }
.cs-card-title { margin-top: 8px; font-size: clamp(20px, 1.7vw, 23px); letter-spacing: -0.02em; line-height: 1.22; text-wrap: pretty; }

/* The call-to-action line: its question on the first line, the invitation and arrow on the next */
.story-cta-link .cta-q, .cta-band-link .cta-q, .story-cta-link .cta-a, .cta-band-link .cta-a { display: block; }
.cta-band-statement { max-width: none; text-wrap: balance; }

/* v3.5, round 4: the quiz label is longer than the Quick-Look's, so its buttons wrap on a phone,
   in even lines rather than one word left on its own; the same for the quiz link under the
   form's Confirmation (round 4, row 6 pass) */
@media (max-width: 640px) {
  .hero-alt .btn, .cta-secondary .btn { white-space: normal; }
  .cta-secondary .btn { width: 100%; }
  .hero-actions .btn, .hero-alt .btn, .cta-secondary .btn, .form-confirm .link-arrow { text-wrap: balance; }
}

/* v3.6, 2026-10-07: the hero video's play button, clear of the speaker. The still has him dead
   centre, so the button moves to the clear wall on his right (the viewer's left), at face height,
   with its pulse ring clear of his head; the homepage's round 2 fix, now on the four pages. The
   sheet above offsets the button twice (a translate and a negative margin) and its hover scale
   drops the translate, so the button jumped on hover; here the margin alone centres it on its point */
.hero-stage .asset--video .play { left: 21%; top: 46%; transform: none; }
.hero-stage .asset--video:hover .play, .hero-stage .asset--video .play:focus-visible { transform: scale(1.08); }
.hero-stage .asset--video.is-pending:hover .play { transform: none; }
@media (max-width: 640px) {
  .hero-stage .asset--video .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .hero-stage .asset--video .play::before { inset: -10px; }
  .hero-stage .asset--video .play-icon { margin: -11px 0 0 -7px; border-left-width: 19px; border-top-width: 11px; border-bottom-width: 11px; }
}

/* v3.7, 2026-10-07: the site footer, one on every page (Clarry: "Use the usual layout for footers").
   Paper ground under a hairline, the lockup and its line, four columns of plain links, the identity's
   hairline rule above the bottom line. Column heads are the label component; links are graphite and
   underlined, as the identity sets links. No cards, no coloured edges, no grid lines. On a phone the
   logo block comes first, then the columns two by two, then the bottom line. The old footer classes
   above stay for the archived pages that still load this sheet */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 clamp(28px, 3.4vw, 40px); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; }
.site-footer-logo { display: inline-block; }
.site-footer-logo img { width: 150px; height: auto; }
.site-footer-line { margin-top: 18px; max-width: 280px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--graphite-700); }
.site-footer-head { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.site-footer-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.site-footer-col li { font-family: var(--font-head); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--graphite-700); }
.site-footer-col a { overflow-wrap: anywhere; color: var(--graphite); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(31, 41, 51, 0.35); transition: text-decoration-color 160ms var(--ease); }
.site-footer-col a:hover, .site-footer-col a:focus-visible { text-decoration-color: currentColor; }
.site-footer-bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--slate); }
@media (max-width: 1000px) {
  .site-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

/* Product screens (2026-10-21): BizKit's own screens, framed one way across the site. A quiet
   frame on paper, the identity's hairline, the visual language's radius (16px frame, 6px screen),
   no shadow, nothing drawn over the screen. Each is cropped to the part that proves its line, with
   a narrower crop for phones. */
.screen { margin: 0; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.screen picture { display: block; }
.screen img { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
/* the ERP hero: the screen takes the hero's visual place */
.screen--hero { margin-top: clamp(48px, 6vw, 80px); }
/* inside a card, under the card's words */
.card .screen { margin-top: 8px; }
.screen--narrow { max-width: 460px; }
/* a full-width row under a row of cards (desktop), after its own card on a phone */
.cards > .screen--row { grid-column: 1 / -1; order: 1; }
/* under a customer story, the width of the story */
.story-feature .screen { grid-area: shot; margin-top: clamp(40px, 5vw, 64px); }
.story-feature:has(> .screen) { grid-template-areas: "label label" "title title" "stat text" "stat more" "shot shot"; }
@media (max-width: 900px) {
  .cards > .screen--row { order: 0; }
  .story-feature:has(> .screen) { grid-template-areas: "label" "title" "stat" "text" "shot" "more"; }
}
@media (max-width: 640px) {
  .screen { padding: 8px; }
  /* the ERP hero's phone crop is the menu of modules, shown at its own size */
  .screen--hero { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .screen--hero img { width: 238px; max-width: 100%; }
}
/* QA round 1 (2026-10-21): a caption under a screen, in the story's caption style; screens no
   crop of which reads on a phone are left out at 640px and under; a small phone crop shown at its
   own size rather than stretched */
.screen figcaption { margin: 14px 4px 2px; max-width: none; }
@media (max-width: 640px) {
  .screen--wide-only { display: none; }
  .screen--phone-own-size { width: fit-content; max-width: 100%; }
  .screen--phone-own-size img { width: 244px; max-width: 100%; }   /* the pending request crop, at its own width */
}
/* Round 13 (2026-10-22): a screen inside a case study's story, under the line that names it. The
   Stock Aging crop is shown at 540 wide; a 1x capture (the purchase history) at its own width,
   never stretched: --shot-w on desktop, --shot-w-phone at 640px and under */
.story-section .screen { margin-top: 28px; }
.story-section .screen + p { margin-top: 28px; }
.screen--story { max-width: 566px; }
.screen--own { width: fit-content; max-width: 100%; }
.screen--own img { width: var(--shot-w); max-width: 100%; }
@media (max-width: 640px) {
  .screen--own img { width: var(--shot-w-phone, var(--shot-w)); }
}
/* the caption under a screen shown at its own width wraps to the screen's width, never widens the mat */
.screen--own figcaption { width: 0; min-width: 100%; }
/* a screen in a landing page story that is narrower than the story: it sits at the left of the
   story's width, at its own size, rather than stretched across it */
.story-feature .screen--story, .story-feature .screen--own { justify-self: start; }