/* martiruiz.com, direction B "Every side of the table" (chosen 2026-09-29).
   Paper, navy ink, one orange. Inter Tight for display, Inter for text. */
:root {
  --bg: #FBFAF7;          /* paper */
  --band: #F1EEE8;        /* alternate section band, chart panels */
  --line: #DEDAD2;        /* hairlines */
  --ink: #16202E;         /* text and dark bands */
  --muted: #5E6570;       /* 5.6:1 on --bg, 5.0:1 on --band */
  --numeral: #D8D0C3;    /* display numerals: quiet, but fully legible */
  --on-ink: #FBFAF7;
  --on-ink-muted: #B9C0CA;/* 8.6:1 on --ink */
  --accent: #FF5F15;      /* a marker: bars, rules, the arrow dot in a button. Never a large fill behind dark text, never text on paper. */
  --accent-hover: #FF7436;
  --ink-hover: #24344B;   /* button hover on paper (12:1 with paper text) */
  --series-muted: #C3C7CD;/* non-highlighted chart series */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

  --g: 16px;
  --max: 1200px;
  --section: clamp(56px, 9vw, 112px);
  --header-h: 64px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --g: 32px; } }
@media (min-width: 1100px) { :root { --g: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (min-width: 720px) { body { font-size: 18px; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em, i { font-style: normal; } /* italic lives only in the callout */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--g); top: 12px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 12px 16px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.section { padding: var(--section) 0; }
.section.tight { padding-top: 0; }
.band { background: var(--band); }
.ink-band { background: var(--ink); color: var(--on-ink); }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6.8vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.5; max-width: 46ch; }
.lede strong { font-weight: 600; }
.muted { color: var(--muted); }
.eyebrow { font: 600 0.78rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { max-width: 20ch; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Buttons and links: 44px minimum targets throughout.
   Shape rule: anything you press is a pill; containers are 8px; form fields are 4px.
   Colour rule (Marti, 2026-10-02): navy carries the button, orange is only the arrow dot. On a navy
   surface the button turns paper. No orange fill behind dark text anywhere. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ink); color: var(--on-ink);
  font: 600 1rem/1.2 var(--font); letter-spacing: 0; white-space: nowrap;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 0; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--ink-hover); transform: translateY(-1px); }
.btn .arrow {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -6px -16px -6px 0;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.05rem; line-height: 1;
  transition: transform .2s ease;
}
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 0.92rem; gap: 10px; }
.btn-sm .arrow { width: 30px; height: 30px; margin: -4px -13px -4px 0; font-size: 0.95rem; }
.ink-band .btn, .panel .btn, .seat.now .btn { background: var(--on-ink); color: var(--ink); }
.ink-band .btn:hover, .panel .btn:hover, .seat.now .btn:hover { background: #fff; }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.textlink:hover { border-color: var(--accent); }
.micro { color: var(--muted); font-size: 0.9rem; margin-top: 12px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 247, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 800 1.15rem/1 var(--display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.head-cta { flex-shrink: 0; white-space: nowrap; }
.head-cta .l-short { display: none; }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 0.95rem; color: var(--muted); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.menu-toggle { display: none; }
@media (max-width: 1099px) {
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; background: none; border: 1px solid var(--line);
    color: var(--ink); font: 600 0.95rem/1 var(--font); padding: 0 16px; border-radius: 999px; cursor: pointer;
  }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--g) 24px; display: none; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { min-height: 56px; border-bottom: 1px solid var(--line); font-size: 1.1rem; color: var(--ink); }
  .head-cta { margin-left: auto; }
  .site-header .wrap { gap: 10px; }
}
@media (max-width: 559px) {
  .head-cta { padding: 10px 16px; }
  .head-cta .arrow { display: none; }
  .head-cta .l-full { display: none; }
  .head-cta .l-short { display: inline; }
}
@media (max-width: 374px) {
  .site-header .wrap { gap: 6px; }
  .brand { font-size: 1rem; }
  .head-cta { padding: 10px 12px; font-size: 0.82rem; }
  .menu-toggle { padding: 0 10px; font-size: 0.85rem; }
}

/* Heroes */
.hero { padding: clamp(36px, 7vw, 88px) 0 clamp(36px, 5vw, 64px); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 22px; }
.page-hero { padding: clamp(36px, 7vw, 88px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; }
.page-hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 6vw, 4.4rem); }
.page-hero .lede { margin-top: 20px; }
.hero-art { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.hero-art img {
  position: absolute; right: 0; bottom: 0; width: 60%; height: auto; max-height: 100%; object-fit: cover; object-position: right bottom; opacity: .9;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 22%);
  mask-composite: intersect;
}
@media (max-width: 1099px) { .hero-art { display: none; } }

/* The table: four seats */
.seats { border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seat { padding: 18px 12px 20px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.seat:nth-child(even) { padding: 18px 0 20px 12px; border-left: 1px solid var(--line); }
.seat .yr { font: 600 0.72rem/1.2 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.seat h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 8px 0 4px; }
.seat .where { color: var(--muted); font-size: 0.9rem; line-height: 1.45; margin: 0; }
.seat .fig { font: 800 clamp(1.6rem, 4vw, 2.7rem)/1 var(--display); letter-spacing: -0.03em; margin-top: 14px; }
.seat .fig small { display: block; font: 400 0.9rem/1.4 var(--font); letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.seat.now { background: var(--ink); color: var(--on-ink); padding: 18px 14px 20px; border-left: 0; }
.seat.now .yr, .seat.now .where, .seat.now .fig small { color: var(--on-ink-muted); }
.seat.now .fig { color: var(--accent); }
@media (min-width: 900px) {
  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seat, .seat:nth-child(even) { padding: 24px 24px 28px 0; margin-right: 24px; border-bottom: 0; border-left: 0; border-right: 1px solid var(--line); }
  .seat:nth-child(3) { border-right: 1px solid var(--line); }
  .seat.now { margin-right: 0; border-right: 0; padding: 24px 24px 28px; border-radius: 0 0 8px 8px; }
}
@media (max-width: 899px) { .seat.now { border-radius: 0 0 6px 0; } .seat:nth-child(3) { border-bottom: 0; } .seat.now { border-bottom: 0; } }

/* Three ways in */
.ways { display: grid; gap: 12px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.way { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 8px; display: flex; flex-direction: column; }
.band .way { background: var(--bg); }
.way h3 { font-size: 1.5rem; }
.way .when { color: var(--muted); margin: 4px 0 10px; }
.way p { font-size: 0.98rem; }
.way .go { margin-top: auto; display: flex; align-items: center; min-height: 52px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--line); }
.way .go:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* Why me */
.vs-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .vs-wrap { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.vs { list-style: none; margin: 0; padding: 0; }
.vs li { padding: 16px 0; border-top: 1px solid var(--line); }
.vs b { display: block; font: 800 1.1rem/1.3 var(--display); letter-spacing: -0.01em; }
.vs span { color: var(--muted); }
.vs li.me { border-top: 2px solid var(--ink); }
.vs li.me span { color: var(--ink); }

/* Proof cards and quote */
.proofs { display: grid; gap: 16px; }
@media (min-width: 720px) { .proofs { grid-template-columns: 1fr 1fr; gap: 32px; } }
.pcard { border-top: 2px solid var(--ink); padding-top: 18px; }
.pcard .big { font: 800 clamp(3rem, 9vw, 5.4rem)/0.9 var(--display); letter-spacing: -0.04em; }
.pcard p { color: var(--muted); margin-top: 12px; }
.quote-slot { margin-top: 32px; }

/* Callout: one per page, the only italic */
.callout { background: var(--band); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 64px); }
.callout blockquote { margin: 0; }
.callout blockquote p { font: italic 800 clamp(1.5rem, 3.8vw, 2.6rem)/1.15 var(--display); letter-spacing: -0.02em; max-width: 26ch; }
.callout .lead-in { margin-bottom: 20px; max-width: 56ch; }

/* Symptom links */
.symptoms { display: grid; }
.symptom-link { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; text-decoration: none; padding: 18px 0; min-height: 64px; border-top: 1px solid var(--line); }
.symptom-link:last-child { border-bottom: 1px solid var(--line); }
.symptom-link strong { font: 800 clamp(1.15rem, 2.4vw, 1.6rem)/1.2 var(--display); letter-spacing: -0.02em; }
.symptom-link .arrow { font-size: 1.4rem; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.symptom-link:hover .arrow { transform: translateX(6px); color: var(--accent); }
@media (min-width: 900px) { .symptoms { grid-template-columns: repeat(3, 1fr); gap: 0 32px; } .symptom-link { border-bottom: 1px solid var(--line); min-height: 140px; } }


/* Final CTA band */
.cta-band .wrap { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); }
.cta-band h2 { max-width: 15ch; color: var(--on-ink); }
.cta-band p { color: var(--on-ink-muted); margin-top: 16px; max-width: 52ch; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 32px; font-size: 0.95rem; color: var(--muted); }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.site-footer .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Interior layouts */
.split { display: grid; gap: 20px; }
@media (min-width: 900px) { .split { grid-template-columns: 4fr 7fr; gap: 64px; } }
.split h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 14ch; }
.stack > * + * { margin-top: 1em; }

/* Engagement comparison (How I Work) */
.compare { display: grid; gap: 16px; }
@media (min-width: 1000px) { .compare { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.shape { border: 1px solid var(--line); border-radius: 8px; padding: 24px 22px 8px; display: flex; flex-direction: column; background: var(--bg); }
.shape h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.shape .when { color: var(--muted); margin: 6px 0 16px; }
.shape dl { margin: 0 0 12px; }
.shape dt { font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.shape dd { margin: 4px 0 0; font-size: 0.98rem; }
.shape .go { margin-top: auto; }
.shape .go .btn { width: 100%; margin: 12px 0 16px; }

.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }
.two-col h3 { margin-bottom: 12px; }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: 12px 0; border-top: 1px solid var(--line); }
.plainlist li:last-child { border-bottom: 1px solid var(--line); }

.proof-block { border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; }
.proof-block .claim { font: 800 clamp(1.35rem, 3vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; max-width: 30ch; margin: 0 0 10px; }

.vignette { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--line); display: grid; gap: 20px; }
@media (min-width: 900px) { .vignette { grid-template-columns: 3fr 8fr; gap: 64px; } }
.vignette .tag { font: 600 0.78rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vignette dl { margin: 0; display: grid; gap: 18px; }
.vignette dt { font: 600 0.78rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.vignette dd { margin: 0; }

/* About */
.about-top { display: grid; gap: 28px; }
@media (min-width: 900px) { .about-top { grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; } }
.portrait-slot { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #E5E1D9, #D6D1C7); border-radius: 8px; display: grid; place-items: end center; padding: 12px; }
@media (max-width: 899px) { .portrait-slot { max-width: 240px; } }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.timeline li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .timeline li { grid-template-columns: 180px 1fr; gap: 24px; } }
.timeline .when { font: 600 0.78rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.timeline h3 { margin-bottom: 6px; }
.brands { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding: 0; list-style: none; }
.brands li { font: 800 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.02em; }

/* Book */
.book-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .book-grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } }
.scheduler { border: 1px solid var(--line); border-radius: 8px; padding: 24px; background: var(--bg); min-height: 360px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.start-note { background: var(--band); border-left: 3px solid var(--accent); padding: 12px 16px; font-weight: 600; margin: 0; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; padding: 16px 0 16px 48px; border-top: 1px solid var(--line); position: relative; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 800 1rem/1.6 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.steps strong { font-weight: 600; display: block; }

/* Placeholders: loud so nothing unfinished ships */
.slot { display: inline-block; font: 600 0.72rem/1.4 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink); background: var(--ink); padding: 4px 8px; border-radius: 2px; font-style: normal; }
.slot-box { border: 1px dashed var(--muted); border-radius: 8px; padding: 24px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }


/* Reveal on scroll: once, only with JS and motion allowed; never above the fold */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in { opacity: 1; transform: none; }
}
.js .hero .reveal, .js .page-hero .reveal { opacity: 1; transform: none; transition: none; }

/* Charts (chart-system-brief.md), on direction B tokens */
.chart { margin: 0; background: var(--band); border-radius: 8px; padding: clamp(22px, 4vw, 40px); }
.chart-title { font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1.1; max-width: 26ch; margin-bottom: 24px; }
.chart-stat { font: 800 1.05rem/1.3 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin: -10px 0 18px; }
.chart-body { width: 100%; }
.chart-svg { display: block; overflow: visible; font-family: var(--font); font-variant-numeric: tabular-nums lining-nums; }
.chart-note { margin-top: 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; max-width: 70ch; }
.c-label { fill: var(--ink); }
.c-muted { fill: var(--muted); }
.c-value { font-weight: 800; }
.c-big { font-family: var(--display); letter-spacing: -0.02em; }
.c-series { fill: var(--series-muted); }
.c-accent { fill: var(--accent); }
.c-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--accent); }
.c-ring { fill: none; stroke: var(--series-muted); stroke-width: 2; }
.chart .bar { transform-box: fill-box; transform-origin: left center; }
.chart .bar-v { transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .js .chart.reveal { opacity: 1; transform: none; }
  .js .chart .bar { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .js .chart .bar-v { transform: scaleY(0); }
  .js .chart .c-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .3s; }
  .js .chart .c-dot { opacity: 0; transition: opacity .3s ease 1.8s; }
  .js .chart.in .bar { transform: none; }
  .js .chart.in .c-line { stroke-dashoffset: 0; }
  .js .chart.in .c-dot { opacity: 1; }
}
/* Stage funnel (Home outcomes): plain HTML, readable without JavaScript */
.funnel, .proof-panel { margin: clamp(32px, 5vw, 48px) 0 0; background: var(--band); border-radius: 8px; padding: clamp(22px, 4vw, 44px); display: grid; gap: 28px; }
@media (min-width: 1000px) { .funnel, .proof-panel { grid-template-columns: 4fr 7fr; gap: 56px; align-items: start; } .funnel .chart-note { grid-column: 1 / -1; margin-top: 0; } }
.funnel .k, .proof-panel .k { font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.funnel h3, .proof-panel h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; margin: 0 0 12px; }
.funnel-head p:not(.k), .proof-story p:not(.k) { color: var(--muted); margin: 0; }
.funnel-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.funnel-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: baseline; }
.funnel-steps .st { font-weight: 600; grid-row: 1; grid-column: 1; }
.funnel-steps .n { font: 800 1.15rem/1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; text-align: right; grid-row: 1; grid-column: 3; }
.funnel-steps .track { grid-row: 2; grid-column: 1 / -1; height: 12px; }
.funnel-steps .bar { display: block; height: 100%; width: var(--w); background: var(--series-muted); border-radius: 2px; transform-origin: left center; }
.funnel-steps .win .bar { background: var(--accent); }
.funnel-steps .rt { grid-row: 1; grid-column: 2; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .funnel, .proof-panel { gap: 20px; } .funnel-head p:not(.k), .proof-story p:not(.k) { font-size: 0.95rem; } .funnel-steps .st { font-size: 0.95rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .funnel .bar { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .js .funnel.in .bar { transform: none; }
  .js .funnel.in li:nth-child(2) .bar { transition-delay: .08s; } .js .funnel.in li:nth-child(3) .bar { transition-delay: .16s; }
  .js .funnel.in li:nth-child(4) .bar { transition-delay: .24s; } .js .funnel.in li:nth-child(5) .bar { transition-delay: .32s; }
  .js .funnel.in li:nth-child(6) .bar { transition-delay: .4s; }
}
.features { display: grid; gap: clamp(16px, 3vw, 28px); }
.chart-feature { display: grid; gap: 24px; padding: clamp(24px, 5vw, 52px); }
@media (min-width: 900px) { .chart-feature { grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; } }
.chart-feature .chart-title { margin-bottom: 14px; font-size: clamp(1.2rem, 2.3vw, 1.55rem); }
.chart-feature .chart-note { margin-top: 0; }
.chart-bignum { margin: 0; font: 800 clamp(3.4rem, 10vw, 7rem)/0.9 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; }
.chart-statlabel { margin: 12px 0 22px; color: var(--muted); max-width: 30ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Retake stage 2: canvas decisions (2026-09-29) ===== */

/* Single-column hero. On wide screens it stops short of the fold so the top of the seats shows. */
.hero h1 { max-width: 17ch; font-size: clamp(2.5rem, 6.4vw, 5.3rem); line-height: 0.98; }
.hero .lede { max-width: 40ch; }
@media (min-width: 1100px) {
  .hero { min-height: calc(100svh - var(--header-h) - 104px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
}

/* Four seats, pinned on wide screens (site.js adds .pinned); stacked everywhere else */
.seats-section { padding: 0 0 clamp(48px, 7vw, 88px); }
.seats-section.pinned { height: 250vh; }
.seats-section.pinned .pin-inner { position: sticky; top: calc(var(--header-h) + 28px); }
.seats-section .pin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 18px; }
.seats-section .pin-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.seat .proof-line { font-size: 0.85rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.seat .mini { display: grid; gap: 5px; margin-top: 12px; }
.seat .mini span { display: block; height: 9px; transform-origin: left center; }
.seat .mini .was { background: var(--series-muted); }
.seat .mini .now-bar { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .seats-section.pinned .seat { opacity: 0.38; transition: opacity .45s ease; }
  .seats-section.pinned .seat.lit { opacity: 1; }
  .seats-section.pinned .seat .mini span { transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .seats-section.pinned .seat.lit .mini span { transform: none; }
}

/* Display numeral beside a section heading: large, quiet, captioned, never overlapped or clipped */
.numeral-head { display: grid; gap: 20px 48px; margin-bottom: clamp(28px, 4vw, 44px); }
.numeral-head .section-head { margin-bottom: 0; }
@media (min-width: 900px) { .numeral-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .numeral { text-align: right; } }
.numeral { margin: 0; }
.numeral .n { display: block; font: 800 clamp(4.5rem, 13vw, 11.5rem)/0.8 var(--display); letter-spacing: -0.05em; color: var(--numeral); white-space: nowrap; will-change: transform; font-variant-numeric: lining-nums; }
.numeral .cap { display: block; margin-top: 14px; font: 600 0.72rem/1.4 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); max-width: 30ch; margin-left: auto; }
@media (max-width: 899px) { .numeral .cap { margin-left: 0; } }
.quote-band .numeral-head { margin-bottom: 0; }

/* Stat tiles (in-block pieces) */
.tiles { display: grid; gap: 20px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1000px) { .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { border-top: 2px solid var(--ink); padding-top: 16px; }
.tile .k { font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tile .big { display: block; font: 800 clamp(2.8rem, 6vw, 4.4rem)/0.95 var(--display); letter-spacing: -0.04em; margin-top: 10px; font-variant-numeric: tabular-nums lining-nums; }
.tile p { color: var(--muted); margin: 10px 0 0; font-size: 0.98rem; }
.tile.ink { background: var(--ink); color: var(--on-ink); border-top: 0; border-radius: 8px; padding: 20px 20px 22px; }
.tile.ink .k, .tile.ink p { color: var(--on-ink-muted); }
.tile.ink .big { color: var(--accent); }
.way .stat { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.way .stat b { font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.way .stat span { font-size: 0.88rem; color: var(--muted); line-height: 1.35; }

/* Charts in a section: full chart from 720px up, the stat tile on phones */
@media (max-width: 719px) { .proof-chart { display: none !important; } }
@media (min-width: 720px) { .proof-tile { display: none !important; } }

/* Section with text beside its proof */
.with-proof { display: grid; gap: 28px; }
@media (min-width: 1000px) { .with-proof { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.with-proof h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 16ch; margin-bottom: 16px; }

/* Quote band (M4): type only, numeral behind */
.quote-band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-band .wrap { padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(64px, 10vw, 128px); }
.quote-band .rule { width: 56px; height: 3px; background: var(--accent); margin-bottom: 28px; }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p { font: italic 800 clamp(1.8rem, 4.6vw, 3.6rem)/1.1 var(--display); letter-spacing: -0.025em; max-width: 22ch; }
.quote-band .after { color: var(--muted); margin-top: 22px; }

/* How I Work: one row per engagement shape, text left, its proof right */
.shape-row { padding: clamp(36px, 6vw, 64px) 0; border-top: 1px solid var(--line); display: grid; gap: 24px; }
@media (min-width: 1000px) { .shape-row { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.shape-row h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.shape-row .when { color: var(--muted); margin: 6px 0 18px; font-size: 1.05rem; }
.shape-row dl { margin: 0 0 20px; }
.shape-row dt { font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.shape-row dd { margin: 4px 0 0; }

/* About */
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--band); }
@media (max-width: 899px) { .portrait { max-width: 280px; } }
.timeline .fig { font: 800 1.6rem/1 var(--display); letter-spacing: -0.03em; margin-top: 8px; }
.timeline .fig small { font: 400 0.9rem/1.4 var(--font); letter-spacing: 0; color: var(--muted); margin-left: 8px; }

/* Book */
.start-note[hidden] { display: none; }
.scheduler .slot-lines { display: grid; gap: 8px; width: 100%; }
.scheduler .fake-field { height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--band); }

/* Stage 2 fixes from the first preview pass */
/* While pinned the block is centred in the viewport by its sticky offset (site.js measures --pin-h), so no
   empty space is added above the heading or below the cards before and after the pin. */
.seats-section.pinned .pin-inner { top: max(calc(var(--header-h) + 28px), calc(var(--header-h) + (100svh - var(--header-h) - var(--pin-h, 100svh)) / 2)); }
@media (max-width: 899px) {
  .about-top > .portrait-pic { order: 2; max-width: 220px; }
  .about-top > div { order: 1; }
}
@media (max-width: 719px) {
  .tiles, .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .tiles.ladder { grid-template-columns: 1fr; gap: 14px; }
  .tiles.ladder .tile { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 14px; align-items: center; padding-top: 12px; }
  .tiles.ladder .tile .k { grid-column: 1 / -1; }
  .tiles.ladder .tile .big { margin-top: 6px; font-size: 2.1rem; }
  .tiles.ladder .tile p { margin-top: 6px; }
  .tile .big { font-size: 2.3rem; }
  .tile p { font-size: 0.9rem; }
  .way { padding: 18px 18px 4px; }
  .way p { margin-bottom: 0.6em; }
  .vs li { padding: 12px 0; }
  .section { padding: clamp(44px, 12vw, 64px) 0; }
}
.way .stat b { white-space: nowrap; }
@media (max-width: 719px) {
  .pin-head .textlink { display: none; }
  .way .detail { display: none; }
  .way .when { margin-bottom: 6px; }
  .quote-band .wrap { padding-top: 44px; padding-bottom: 44px; }
  .cta-band .wrap { padding-top: 44px; padding-bottom: 44px; }
  .section-head { margin-bottom: 22px; }
  .seats-section { padding-bottom: 36px; }
  .shape-row { padding: 32px 0; gap: 18px; }
  .shape-row dt { margin-top: 12px; }
  .shape-row .when { margin-bottom: 10px; }
  .page-hero { padding: 32px 0 32px; }
}
@media (max-width: 719px) {
  .site-footer { padding: 28px 0 20px; font-size: 0.92rem; }
  .site-footer .legal { margin-top: 16px; padding-top: 14px; }
}
.portrait { height: auto; }
.portrait-pic { display: block; }
@media (max-width: 899px) { .portrait-pic { max-width: 280px; } }
.band .chart { background: var(--bg); }

/* Stage 3: pre-CTA block (stake, then the success statement given more room) */
.cta-band .stake { color: var(--on-ink-muted); font-size: 1rem; margin: 0 0 18px; max-width: 60ch; }
.cta-band h2 { max-width: 22ch; font-size: clamp(1.8rem, 4.4vw, 3rem); }
.cta-band .success { color: var(--on-ink); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; margin-top: 16px; max-width: 48ch; }
.cta-band .micro { color: var(--on-ink-muted); }

/* Stage 3: "I work three ways" cards lead with the value line */
.way .value { font: 800 clamp(1.3rem, 2.4vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.02em; margin: 14px 0 18px; max-width: 18ch; color: var(--ink); }
.way .detail { color: var(--muted); font-size: 0.98rem; margin: 0 0 12px; }
@media (max-width: 719px) { .way .value { margin: 10px 0 12px; } }

/* Stage 3: the fog (problem) */
.foundation { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .foundation { grid-template-columns: 1fr 1fr; gap: 40px; } }
.foundation p { margin: 0; color: var(--muted); }
.foundation b { color: var(--ink); font-weight: 600; }
.agreement { list-style: none; margin: 0; padding: 0; }
.agreement li { padding: 12px 0 12px 28px; border-top: 1px solid var(--line); position: relative; }
.agreement li::before { content: ""; position: absolute; left: 0; top: 22px; width: 14px; height: 2px; background: var(--accent); }

/* Home: what a marketing leader should own */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pillars li { padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); }
.pillars li:last-child { border-bottom: 1px solid var(--line); }
.pillars b { display: block; color: var(--ink); font: 800 clamp(1.15rem, 2.2vw, 1.4rem)/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 6px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 0 32px; } .pillars li:last-child { border-bottom: 0; } .pillars li { border-bottom: 0; } }
/* Home: what a leader should own. An orange check leads each item; white tick, matching the arrow dot in buttons. */
.own-lede { margin: 16px 0 0; max-width: 62ch; }
.pillars.checks li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px 0; }
.pillars.checks li::before { content: ""; grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); }
.pillars.checks li::after { content: ""; position: absolute; left: 9px; top: 22px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pillars.checks b { grid-column: 2; margin: 1px 0 0; font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.25; }
.pillars.checks span { grid-column: 2; }
@media (min-width: 900px) { .pillars.checks { gap: 8px 40px; } .pillars.checks li { padding: 20px 0; } }
@media (max-width: 719px) {
  .own-section { padding: 36px 0; }
  .own-section .section-head { margin-bottom: 8px; }
  .own-section .own-lede { margin-top: 10px; font-size: 0.95rem; line-height: 1.5; }
  .pillars.checks li { padding: 11px 0; column-gap: 12px; row-gap: 2px; }
  .pillars.checks li::before { width: 22px; height: 22px; }
  .pillars.checks li::after { left: 8px; top: 15px; width: 5px; height: 10px; border-width: 0 2px 2px 0; }
  .pillars.checks b { font-size: 1.02rem; margin: 0; }
  .pillars.checks span { font-size: 0.9rem; line-height: 1.45; }
}

/* Panel: a dark frame for a short list that sits beside a section's argument (the fog on Home, the agreement on How I Work) */
.panel { background: var(--ink); color: var(--on-ink); border-radius: 8px; padding: clamp(22px, 3vw, 36px); }
.panel .k { font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-muted); margin: 0 0 6px; }
.panel-list { list-style: none; margin: 0; padding: 0; counter-reset: panel; }
.panel-list li { counter-increment: panel; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 6px; padding: 16px 0; border-top: 1px solid rgba(251, 250, 247, 0.14); }
.panel-list li::before { content: counter(panel, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font: 800 1.35rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.panel-list li > * { grid-column: 2; }
.panel-list b { font: 800 clamp(1.05rem, 1.8vw, 1.25rem)/1.25 var(--display); letter-spacing: -0.015em; color: var(--on-ink); }
.panel-list span { color: var(--on-ink-muted); font-size: 0.98rem; line-height: 1.5; }
.panel-close { margin: 4px 0 0; padding-top: 18px; border-top: 1px solid rgba(251, 250, 247, 0.14); color: var(--on-ink); font-weight: 600; position: relative; }
.panel-close::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--accent); }
@media (min-width: 900px) { .symptoms.related { grid-template-columns: repeat(2, 1fr); } .symptoms.related .symptom-link { min-height: 96px; } }

/* Stage 5: long-form pages (service, industry, articles, FAQ) */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.9em; margin-bottom: 0.2em; max-width: 24ch; }
.prose h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); margin-top: 1.6em; margin-bottom: 0.1em; letter-spacing: -0.015em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose strong { color: var(--ink); }
.prose .lede { font-size: clamp(1.15rem, 2vw, 1.3rem); }
.article-meta { color: var(--muted); font-size: 0.95rem; margin-top: 18px; }
.inline-cta { background: var(--band); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: clamp(20px, 3vw, 28px); margin: 2.2em 0; max-width: 68ch; }
.band .inline-cta { background: var(--bg); }
.inline-cta p { margin: 0 0 16px; font: 800 clamp(1.1rem, 2vw, 1.3rem)/1.3 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.inline-cta .micro { font: 400 0.9rem/1.5 var(--font); color: var(--muted); margin: 12px 0 0; letter-spacing: 0; }
.faq-list { max-width: 72ch; }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; font: 800 clamp(1.05rem, 2vw, 1.25rem)/1.3 var(--display); letter-spacing: -0.015em; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font: 600 1.5rem/1 var(--font); color: var(--accent); }
details.faq[open] summary::after { content: "\2212"; }
details.faq .answer { padding: 0 0 20px; color: var(--ink); }
details.faq .answer p + p { margin-top: 0.8em; }
.ways.four { grid-template-columns: 1fr; }
@media (min-width: 900px) { .ways.four { grid-template-columns: repeat(2, 1fr); } }
.post-list { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.post-list li { border-top: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list a { display: block; padding: 22px 0; text-decoration: none; min-height: 44px; }
.post-list .t { display: block; font: 800 clamp(1.2rem, 2.4vw, 1.6rem)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.post-list .d { display: block; color: var(--muted); margin-top: 8px; }
.post-list a:hover .t { color: var(--accent); }

/* Stage 6: booking form on /book/ */
.booking { display: block; min-height: 0; padding: clamp(20px, 3vw, 32px); background: #fff; }
.booking [hidden] { display: none !important; }
.booking h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 18px; outline: none; }
.booking-steps { list-style: none; margin: 0 0 24px; padding: 0 0 16px; display: flex; gap: 8px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.booking-steps li { display: inline-flex; align-items: center; gap: 8px; }
.booking-steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; }
.booking-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.booking-steps li[aria-current="step"] span { background: var(--accent); border-color: var(--accent); color: #fff; }
.booking-steps li.done span { background: var(--ink); border-color: var(--ink); color: #fff; }
.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.booking label, .q-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.booking input[type="text"], .booking input[type="email"], .booking textarea { display: block; width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #C9C4BA; border-radius: 4px; padding: 11px 12px; min-height: 48px; }
.booking textarea { min-height: 88px; resize: vertical; }
.booking input:focus-visible, .booking textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.booking input[aria-invalid="true"] { border-color: #B42318; }
.field-error, .form-error { color: #B42318; font-size: 0.92rem; margin: 6px 0 0; }
.form-error { margin: 0 0 14px; }
.optional { font-weight: 400; color: var(--muted); margin-left: 6px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking .btn { margin-top: 4px; }
.booking .micro { margin-top: 14px; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { font: 800 clamp(1.1rem, 2vw, 1.3rem)/1.3 var(--display); letter-spacing: -0.015em; margin-bottom: 14px; padding: 0; }
.q-count { color: var(--muted); font-size: 0.9rem; margin: -8px 0 16px; }
.choices { display: grid; gap: 8px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choices label { position: relative; margin: 0; font-weight: 400; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: flex; align-items: center; min-height: 52px; padding: 12px 14px; border: 1px solid #C9C4BA; border-radius: 4px; background: #fff; line-height: 1.3; }
.choices label:hover span { border-color: var(--ink); }
.choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.choices input:checked + span { border-color: var(--accent); background: #FFF1E8; box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.q-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; }
.q-nav .btn:only-child, .q-nav [data-back][hidden] + .btn { margin-left: auto; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid #C9C4BA; }
.cal-inline { width: 100%; min-height: 520px; overflow: auto; }
.cal-fallback { background: var(--band); border-left: 3px solid var(--accent); padding: 14px 16px; }
.start-over { margin: 16px 0 0; }
.booking button.link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.legal a { color: inherit; }
.btn.ghost:hover { background: var(--band); color: var(--ink); }

/* Seats with story (2026-09-30): story, figure, and the lesson each seat taught */
.seat .story { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin: 6px 0 0; }
.seat .lesson { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 600 0.92rem/1.4 var(--font); color: var(--ink); position: relative; }
.seat .lesson::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 2px; background: var(--accent); }
.seat.now .story { color: var(--on-ink-muted); }
.seat.now .lesson { color: var(--on-ink); border-top-color: rgba(251, 250, 247, 0.16); }
@media (max-width: 559px) {
  .seats { grid-template-columns: 1fr; }
  .seat, .seat:nth-child(even) { padding: 18px 0 20px; border-left: 0; }
  .seat:nth-child(3) { border-bottom: 1px solid var(--line); }
  .seat.now { padding: 20px 16px 22px; border-radius: 0 0 6px 6px; }
}
/* Four columns: line up story, figure and lesson across the seats */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .seats { grid-template-rows: repeat(5, auto); }
    .seat { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .seat .fig { align-self: end; }
  }
}
/* Running text inside the numeric seats uses normal figures, so hyphens don't space out ("top-20") */
.seat .story, .seat .lesson, .seat .fig small { font-variant-numeric: normal; font-feature-settings: normal; }

/* Track record: compact proof cards side by side instead of full-width panels (2026-09-30) */
.features.compact .chart-feature { grid-template-columns: 1fr; gap: 14px; padding: clamp(20px, 3vw, 28px); align-items: start; align-content: start; }
.features.compact .chart-bignum { font-size: clamp(2.8rem, 6vw, 4rem); }
.features.compact .chart-statlabel { margin: 8px 0 12px; font-size: 0.95rem; }
.features.compact .chart-title { font-size: clamp(1.05rem, 1.8vw, 1.2rem); margin-bottom: 8px; }
.features.compact .chart-note { font-size: 0.9rem; }
@media (min-width: 900px) {
  .features.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* three cards (the deploy build, without the held chart) sit in one row */
  .features.compact:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.features.compact .chart-side { display: contents; }
.features.compact .chart-bignum { order: 1; }
.features.compact .chart-statlabel { order: 2; }
.features.compact .chart-title { order: 3; }
.features.compact .chart-body { order: 4; }
.features.compact .chart-note { order: 5; }
/* Chart labels are words; only the values need tabular figures (keeps "Third-party" from spacing out) */
.chart-svg { font-variant-numeric: normal; }
.chart-svg .c-value { font-variant-numeric: tabular-nums lining-nums; }

/* How I Work: proof cards stacked beside an offer */
.proof-stack { display: grid; gap: 16px; }
.proof-stack .tile .big { font-size: clamp(2rem, 4.2vw, 3rem); }

/* Sub-heading labels over content: bold ink led by a short orange bar, so they stand out (Marti, 2026-10-02).
   Ink, not orange text: the accent is for fills and rules only on paper. */
.shape-row dt, .tile .k, .funnel .k, .proof-panel .k, .panel .k { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.1em; }
.shape-row dt, .tile .k, .funnel .k, .proof-panel .k { color: var(--ink); }
.panel .k { color: var(--on-ink); }
.shape-row dt::before, .tile .k::before, .funnel .k::before, .proof-panel .k::before, .panel .k::before { content: ""; flex: none; width: 16px; height: 3px; background: var(--accent); }

/* Kickers and captions that were small gray caps: the same bold, larger treatment (Marti, 2026-10-02: no small type).
   The bar is inline so a kicker that wraps on a phone keeps its second line flush left. */
.eyebrow, .seat .yr, .timeline .when, .numeral .cap, .site-footer h2 { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em; color: var(--ink); }
.seat.now .yr { color: var(--on-ink); }
.eyebrow::before, .seat .yr::before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 3px; margin: -2px 10px 0 0; background: var(--accent); }

/* Redesign pass (branch taste-audit, 2026-10-02): interaction and wrapping polish */
p, li, dd, figcaption { text-wrap: pretty; }
.btn:active { transform: translateY(1px) scale(0.985); }
.textlink:active, .way .go:active, .symptom-link:active { opacity: 0.7; }
.menu-toggle:active { transform: translateY(1px); }
.way { transition: border-color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.way:hover { border-color: var(--ink); }
.way .go { transition: color .2s ease; }
.textlink { transition: border-color .2s ease, opacity .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .way:hover { transform: translateY(-2px); }
}

/* Texture (branch taste-audit): a fixed film grain over the whole page. Fixed and non-interactive so
   it never repaints on scroll. This reopens the 2026-09-29 no-imagery decision at Marti's request. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.12  0 0 0 0 0.18  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px; opacity: 0.16; mix-blend-mode: multiply;
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* Video hero (branch taste-audit): a muted background loop of trades at work. It sits under a heavy navy
   wash, slightly desaturated, so it reads as real work at a glance without inviting a close look.
   site.js plays the clips in sequence; without JS, or under reduced motion, the poster frame shows.
   No pause control, at Marti's direction (2026-10-02). */
.video-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--on-ink); display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100svh - var(--header-h)), 860px); padding: clamp(96px, 16vw, 200px) 0 clamp(40px, 6vw, 80px); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(0.96); transition: opacity .6s ease; }
.hero-media video.is-out { opacity: 0; }
.hero-media video.is-flipped { transform: scaleX(-1); }
.hero-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(22, 32, 46, 0.90) 0%, rgba(22, 32, 46, 0.74) 46%, rgba(22, 32, 46, 0.50) 100%),
  linear-gradient(0deg, rgba(22, 32, 46, 0.72) 0%, rgba(22, 32, 46, 0) 46%); }
.video-hero .eyebrow { color: var(--on-ink); }
.video-hero h1 { color: var(--on-ink); max-width: 16ch; }
.video-hero .lede { color: var(--on-ink); max-width: 44ch; }
.video-hero .textlink { color: var(--on-ink); border-bottom-color: rgba(251, 250, 247, 0.5); }
.video-hero .textlink:hover { border-bottom-color: var(--accent); }
@media (min-width: 1100px) { .hero.video-hero { display: flex; min-height: min(calc(100svh - var(--header-h)), 860px); justify-content: flex-end; } }
@media (max-width: 719px) {
  .video-hero { min-height: min(calc(100svh - var(--header-h)), 640px); padding-top: 120px; }
  .hero-media::after { background: linear-gradient(0deg, rgba(22, 32, 46, 0.93) 0%, rgba(22, 32, 46, 0.74) 55%, rgba(22, 32, 46, 0.55) 100%); }
}

/* Redesign steps 4 and 5 (branch taste-audit): break the repeated rows of three, and give sections
   different amounts of room so the proof gets the most. Home only. */

/* Rows, not three equal cards: every .ways list on the site reads down the page. On Home the heading
   is held beside the sequence (.ways-section); elsewhere it sits above. */
.ways { grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--ink); }
.way, .band .way { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 0 14px; }
.way:hover { transform: none; border-color: var(--line); }
.way h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.way .value { max-width: 34ch; }
.way p:not(.when):not(.value) { max-width: 60ch; }
.way .go { border-top: 0; margin-top: 0; min-height: 44px; }
@media (min-width: 900px) {
  .ways { grid-template-columns: 1fr; }
  .way { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: 40px; align-items: start; padding: 30px 0 20px; }
  .way h3 { grid-column: 1; grid-row: 1 / span 4; }
  .way > :not(h3) { grid-column: 2; }
  .way .when { margin: 6px 0 8px; }
  .way .value { margin: 0 0 6px; }
  .way .go { justify-self: start; }
}
@media (min-width: 1000px) {
  .ways-section .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .ways-section .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
  .ways-section .way { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (max-width: 719px) { .way { padding: 18px 0 8px; } .way p:not(.when):not(.value) { display: block; } }

/* Check lists: every .pillars list is equal items, two across. None leads the others. */
@media (min-width: 900px) {
  .pillars.checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 5vw, 72px); }
  .pillars.checks li { padding: 22px 0 24px; }
  .pillars.checks li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 719px) {
  .wide-only { display: none; }
  .own-section { padding: 30px 0 32px; }
  .own-section .pillars.checks li { padding: 8px 0 9px; }
}

/* Link lists ("where growth breaks"): full-width rows, not columns */
@media (min-width: 900px) {
  .symptoms, .symptoms.related { grid-template-columns: 1fr; gap: 0; }
  .symptom-link, .symptoms.related .symptom-link { min-height: 0; padding: 26px 0; border-bottom: 0; }
  .symptom-link:last-child { border-bottom: 1px solid var(--line); }
  .symptom-link strong { font-size: clamp(1.4rem, 2.6vw, 2rem); }
}

/* Rhythm: each section gets its own room, slightly more below than above. The outcomes get the most. */
@media (min-width: 720px) {
  .fog-section { padding: clamp(64px, 8vw, 96px) 0 clamp(72px, 9vw, 108px); }
  .ways-section { padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px); }
  .outcomes-section { padding: clamp(96px, 13vw, 168px) 0 clamp(104px, 14vw, 180px); }
  .own-section { padding: clamp(64px, 8vw, 96px) 0 clamp(76px, 9.5vw, 116px); }
  .breaks-section { padding: clamp(52px, 6vw, 72px) 0 clamp(60px, 7vw, 88px); }
}
@media (max-width: 719px) {
  .outcomes-section { padding: 64px 0 72px; }
  .breaks-section { padding: 36px 0 44px; }
}

/* Footer: one compact block. Deep links live on the hub pages and in page content, so this carries
   only the main paths, contact and the legal line. */
.site-footer { padding: 32px 0 24px; }
.site-footer .wrap { display: grid; gap: 14px; }
.foot-id p { margin: 2px 0 0; max-width: 46ch; }
.foot-links, .foot-contact { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 0; }
.foot-links a, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 600; }
.foot-contact a { font-weight: 400; }
.site-footer .legal { margin-top: 4px; padding-top: 14px; }
@media (min-width: 900px) {
  .site-footer { padding: 40px 0 28px; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start; }
  .foot-links { grid-column: 2; grid-row: 1; justify-content: flex-end; max-width: 520px; }
  .foot-contact { grid-column: 1; grid-row: 2; }
  .site-footer .legal { grid-column: 1 / -1; }
}
@media (max-width: 719px) { .site-footer { padding: 24px 0 18px; } .site-footer .wrap { gap: 8px; } .foot-links { column-gap: 18px; } }

/* Career cards on phones and tablets: one swipeable row, not four stacked cards. The next card
   peeks in from the right so the row reads as scrollable. Saves about a screen of height. */
@media (max-width: 899px) {
  .seats-section { padding-top: 40px; }
  .seats-section .seats { display: flex; gap: 12px; border-top: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--g)); padding: 2px var(--g) 10px; scroll-padding-left: var(--g); scrollbar-width: none; }
  .seats-section .seats::-webkit-scrollbar { display: none; }
  .seats-section .seat, .seats-section .seat:nth-child(even), .seats-section .seat:nth-child(3) { flex: 0 0 84%; scroll-snap-align: start; display: flex; flex-direction: column;
    padding: 18px 18px 20px; border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: 0 0 8px 8px; background: var(--bg); }
  .seats-section .seat.now { background: var(--ink); border-color: var(--ink); border-radius: 0 0 8px 8px; }
  .seats-section .seat .lesson { margin-top: auto; }
  .seats-section .seat .fig { margin-bottom: 14px; }
}
.foot-id .brand { color: var(--ink); }

/* Rhythm on every page: slightly more room below a section than above it. Sections that carry the
   proof get more; a section that is only a pulled quote gets less. */
@media (min-width: 720px) {
  .section { padding: clamp(56px, 7.5vw, 96px) 0 clamp(64px, 9vw, 116px); }
  .section:has(.features), .section:has(.funnel), .section:has(.proof-panel) { padding: clamp(80px, 11vw, 144px) 0 clamp(88px, 12vw, 160px); }
  .section:has(> .wrap > .callout) { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
  .fog-section { padding: clamp(64px, 8vw, 96px) 0 clamp(72px, 9vw, 108px); }
  .ways-section { padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px); }
  .outcomes-section { padding: clamp(96px, 13vw, 168px) 0 clamp(104px, 14vw, 180px); }
  .own-section { padding: clamp(64px, 8vw, 96px) 0 clamp(76px, 9.5vw, 116px); }
  .breaks-section { padding: clamp(52px, 6vw, 72px) 0 clamp(60px, 7vw, 88px); }
  .section.tight, .section[style*="padding-top:0"] { padding-top: 0; }
}

/* Spacing pass (2026-10-02). A heading never sits flush against the section above it, and content
   never touches the divider under a page's top section: it gets the same room below the line as above. */
.section.after-hero { padding-top: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) {
  .seats-section { --seats-top: clamp(48px, 5vw, 72px); padding-top: var(--seats-top); }
  .seats-section.pinned { height: calc(250vh + var(--seats-top)); }
}

/* Button placement (2026-10-02). Closing band: the button and its one-line promise read as one lockup on wide
   screens. On phones the main button in the closing band and the booking form spans the column, label left, arrow right. */
.cta-band .cta-row { gap: 14px 28px; }
.cta-band .cta-row .micro { margin: 0; max-width: 36ch; }
@media (max-width: 559px) {
  .cta-band .cta-row .btn, .booking form > .btn { width: 100%; justify-content: space-between; }
}
@media (min-width: 1100px) { .head-cta { margin-left: 12px; } }

/* ===== Lift (branch lift, 2026-10-02): depth, layers and motion so the page has body.
   One light source, from above. Shadows are tinted navy, never black. Paper sits on top, the band
   sits slightly below it, navy blocks float highest. Motion only on transform and opacity. */
:root {
  --lift-1: 0 1px 1px rgb(22 32 46 / .04), 0 3px 10px -4px rgb(22 32 46 / .10);
  --lift-2: 0 1px 2px rgb(22 32 46 / .06), 0 14px 30px -12px rgb(22 32 46 / .24);
  --lift-3: 0 2px 4px rgb(22 32 46 / .10), 0 30px 60px -24px rgb(22 32 46 / .45), 0 60px 110px -50px rgb(22 32 46 / .30);
  --sheen: inset 0 1px 0 rgb(255 255 255 / .08);
  --navy-light: radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .075), transparent 55%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Layers: the band reads as a level below the paper sections around it */
.band { box-shadow: inset 0 16px 22px -18px rgb(22 32 46 / .16), inset 0 -16px 22px -18px rgb(22 32 46 / .10); }
.ink-band { background-image: var(--navy-light); box-shadow: inset 0 18px 30px -20px rgb(0 0 0 / .45); }

/* The navy "Now" seat floats */
.seat.now { background-image: var(--navy-light); box-shadow: var(--lift-3), var(--sheen); }
@media (min-width: 900px) { .seats .seat.now { border-radius: 8px; position: relative; z-index: 1; } }

/* Paper objects that hold proof sit just above the surface */
.funnel, .proof-panel, .chart, .scheduler { box-shadow: var(--lift-2); }
.band .funnel, .band .proof-panel, .band .chart { box-shadow: var(--lift-2); }
.tiles.ladder .tile { background: #fff; border-top: 0; border-radius: 8px; padding: 20px 22px 22px; box-shadow: var(--lift-1); }
.callout, .inline-cta { box-shadow: var(--lift-1); }

/* Header lifts off the page after the first scroll */
.site-header { transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.site-header.raised { border-bottom-color: transparent; box-shadow: 0 1px 0 rgb(22 32 46 / .06), 0 10px 28px -14px rgb(22 32 46 / .30); background: rgba(251, 250, 247, 0.97); }

/* Buttons carry a little weight of their own */
.btn { box-shadow: 0 1px 2px rgb(22 32 46 / .18), 0 6px 16px -8px rgb(22 32 46 / .45); transition: background-color .2s ease, transform .25s var(--ease-out), box-shadow .25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(22 32 46 / .16), 0 14px 28px -12px rgb(22 32 46 / .55); }
.ink-band .btn { box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -10px rgb(0 0 0 / .6); }
.btn.ghost { box-shadow: none; }

/* Rows you can press rise into a card under the pointer, without moving the layout */
@media (hover: hover) and (min-width: 720px) {
  .way, .symptom-link, .post-list a { position: relative; isolation: isolate; }
  .way::before, .symptom-link::before, .post-list a::before {
    content: ""; position: absolute; inset: 0 -20px; z-index: -1; border-radius: 10px; background: var(--bg);
    box-shadow: var(--lift-2); opacity: 0; transform: scale(.985); transition: opacity .25s ease, transform .35s var(--ease-out);
  }
  .band .way::before { background: #fff; }
  .way:hover::before, .symptom-link:hover::before, .post-list a:hover::before { opacity: 1; transform: none; }
  .way:hover, .symptom-link:hover { border-bottom-color: transparent; }
}

/* Centred in its section: the text column sits on the card's middle, and the room below the card allows
   for its shadow so the space above and below reads the same. */
@media (min-width: 1000px) { .fog-section .with-proof { align-items: center; } }
@media (min-width: 720px) { .fog-section { padding-bottom: clamp(80px, 9.5vw, 116px); } }
@media (max-width: 719px) { .fog-section { padding-bottom: 56px; } }

/* Entrances: a longer, softer rise; navy blocks settle into place; list items follow one another */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .panel.reveal, .js .tile.ink.reveal, .js .funnel.reveal, .js .proof-panel.reveal { transform: translateY(44px) scale(.975); }
  .js .reveal.in, .js .panel.reveal.in, .js .tile.ink.reveal.in, .js .funnel.reveal.in, .js .proof-panel.reveal.in { transform: none; }
  .js .hero .reveal, .js .page-hero .reveal { transform: none; transition: none; }
  .video-hero .hero-copy > * { animation: rise-in .9s var(--ease-out) both; }
  .video-hero .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .video-hero .hero-copy > :nth-child(3) { animation-delay: .18s; }
  .video-hero .hero-copy > :nth-child(4) { animation-delay: .28s; }
  .video-hero .hero-media { animation: settle 2.4s var(--ease-out) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* Check marks: the tick sits centred in its circle at every row padding */
.pillars.checks li::after { top: 22px; }
@media (min-width: 900px) { .pillars.checks li::after { top: 28px; } }
@media (max-width: 719px) { .own-section .pillars.checks li::after { top: 14px; } }

/* Phones: lighter shadows, no hover cards */
@media (max-width: 719px) {
  .seat.now { box-shadow: var(--lift-2), var(--sheen); }
  .funnel, .proof-panel, .chart, .scheduler { box-shadow: var(--lift-1); }
}

/* List panels (every page, chosen by Marti 2026-10-02 from the Fractional CMO trial): a light card with a
   navy header strip carrying the label. The navy is held to the header as a highlight. */
.panel { --pad: clamp(22px, 3vw, 36px); background: #fff; background-image: none; color: var(--ink); padding: 0; overflow: hidden; box-shadow: var(--lift-2); }
.panel .k { margin: 0; padding: 18px var(--pad); background: var(--ink); background-image: var(--navy-light); color: var(--on-ink); }
.panel .panel-list { padding: 6px var(--pad) 0; }
.panel .panel-list li { border-top-color: var(--line); }
.panel .panel-list li:first-child { border-top: 0; }
.panel .panel-list li::before, .panel .panel-list b { color: var(--ink); }
.panel .panel-list span { color: var(--muted); }
.panel .panel-close { margin: 4px var(--pad) 0; padding: 18px 0 var(--pad); color: var(--ink); border-top-color: var(--line); }
@media (min-width: 1000px) { .with-proof:has(> .panel) { align-items: center; } }
.panel > .panel-list:last-child { padding-bottom: calc(var(--pad) - 12px); }

/* Proof tiles (How I Work, problem pages): the same treatment as the list panels (Marti, 2026-10-02).
   Navy header strip carries the label; the figure sits in navy on a light card. */
.tile.ink { background: #fff; background-image: none; color: var(--ink); padding: 0; overflow: hidden; box-shadow: var(--lift-2); }
.tile.ink .k { margin: 0; padding: 13px 22px; background: var(--ink); background-image: var(--navy-light); color: var(--on-ink); }
.tile.ink .big { color: var(--ink); margin: 16px 22px 0; }
.tile.ink p { color: var(--muted); margin: 8px 22px 20px; }

/* The "Now" career card: the light card with a navy header strip carrying "Now" (Marti, 2026-10-02) */
.seats-section .seats .seat.now { background: #fff; background-image: none; color: var(--ink); overflow: hidden; border-color: var(--line); box-shadow: var(--lift-2); }
.seats-section .seats .seat.now .yr { margin: -24px -24px 4px; padding: 10px 24px; background: var(--ink); background-image: var(--navy-light); color: var(--on-ink); }
.seats-section .seats .seat.now .story, .seats-section .seats .seat.now .fig small { color: var(--muted); }
.seats-section .seats .seat.now .fig { color: var(--ink); }
.seats-section .seats .seat.now .lesson { color: var(--ink); border-top-color: var(--line); }
@media (max-width: 899px) {
  .seats-section .seats .seat.now { border-top: 0; }
  .seats-section .seats .seat.now .yr { margin: -18px -18px 14px; padding: 13px 18px; }
}

/* Check lists: a shorter item beside a longer one keeps its description tight under its title */
.pillars.checks li { align-content: start; }

/* Home outcomes: the story beside its proof chart, in the panel the funnel used. The chart sits flat
   inside the panel rather than as a second card. */
.proof-panel .chart { background: none; box-shadow: none; padding: 0; border-radius: 0; }
@media (min-width: 1000px) { .proof-panel { align-items: center; } }

/* How I Work, Build proof on phones: the three cards in one swipeable row, the same pattern as the
   career cards, so the longer outbound story (proof refresh, 2026-10-08) doesn't make the page longer. */
@media (max-width: 719px) {
  .proof-stack { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--g)); padding: 4px var(--g) 18px; scroll-padding-left: var(--g); scrollbar-width: none; }
  .proof-stack::-webkit-scrollbar { display: none; }
  .proof-stack > .tile { flex: 0 0 84%; scroll-snap-align: start; }
}
/* How I Work, "How you'll know it worked": on phones the story above already carries the 51% fact, so its tile stays off */
@media (max-width: 719px) { #worked .worked-tile { display: none !important; } }