:root {
  --paper: #f7f4ed;
  --paper2: #fffdf7;
  --ink: #171717;
  --muted: #4d4740;
  --red: #d94a38;
  --blue: #2f5d7c;
  --blue-dark: #203f56;
  --manila: #ede3d2;
  --yellow: #f4c542;
  --green: #516b55;
  --line: rgba(23,23,23,.18);
  --shadow: var(--sh-2);
  --shadow-big: var(--sh-3);
  --radius: var(--r-lg);
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.site { overflow: hidden; overflow: clip; min-height: 100vh; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 12px; background: var(--ink); color: var(--paper2); padding: 10px 14px; border-radius: var(--r-pill); z-index: 100; }
.skip-link:focus { left: 12px; }

header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: var(--fs-h2); font-weight: 900; letter-spacing: .005em; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--red); }
.links { display: flex; gap: 18px; align-items: center; font-size: var(--fs-micro); font-weight: 900; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-text { display: flex; gap: 18px; align-items: center; }
.pill { border: 2px solid var(--ink); background: var(--ink); color: var(--paper2); padding: 10px 15px; border-radius: var(--r-pill); text-decoration: none !important; }
.nav-burger { display: none; background: var(--paper2); border: 2px solid var(--ink); border-radius: var(--r-sm); font-size: var(--fs-lead); line-height: 1; padding: 5px 10px; cursor: pointer; color: var(--ink); }
.nav-cta { display: none; }

section { padding: clamp(48px, 6vw, 80px) 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: .003em; }
h1 { font-size: var(--fs-xl); line-height: .93; font-weight: 900; max-width: 980px; margin-bottom: 0; }
h2 { font-size: var(--fs-h1); line-height: .98; font-weight: 900; max-width: 980px; margin-bottom: 0; }
h3 { font-size: var(--fs-h2); line-height: 1; font-weight: 900; margin-bottom: 12px; }
.red { color: var(--red); }
.lead { font-size: var(--fs-h3); color: var(--muted); max-width: 870px; margin: 22px 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.eyebrow.red { color: var(--red); }
.dot { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--red); border: 2px solid var(--ink); display: inline-block; flex: 0 0 auto; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 20px;
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  font-weight: 900; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.button:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.primary { background: var(--red); color: var(--paper2); }
.secondary { background: var(--manila); }
.reassure { margin: 16px 0 0; font-size: var(--fs-small); color: var(--muted); font-weight: 700; }

.hero { padding-top: clamp(58px, 7vw, 98px); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.13fr) minmax(260px,.85fr); gap: clamp(30px, 5vw, 58px); align-items: center; }
.hero .sub { display: block; font-size: var(--fs-lead); font-weight: 900; color: var(--blue); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; line-height: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-card {
  background: var(--blue); color: var(--paper2);
  border: 3px solid var(--ink); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--shadow-big);
  rotate: 1deg;
}
.hero-card h2 { color: var(--paper2); font-size: var(--fs-h1); }
.hero-card p { color: rgba(255,253,247,.88); font-size: var(--fs-body); margin: 16px 0 0; }
.flow { margin-top: 25px; border-top: 2px solid rgba(255,253,247,.36); }
.flow div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 2px solid rgba(255,253,247,.36); align-items: baseline; }
.flow strong { font-size: var(--fs-lead); }
.flow span { font-weight: 900; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,253,247,.68); }
.flow .front { color: var(--yellow); }

.method { background: var(--paper2); border-top: 2px solid var(--ink); }
.method-head { max-width: 900px; }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 640px) { .lifecycle { grid-template-columns: 1fr; } }
.principle { background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--radius); padding: 26px; min-height: 220px; box-shadow: var(--shadow); }
.principle .where { display: block; font-size: var(--fs-label); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.principle.front { background: var(--manila); }
.principle.front .where { color: var(--red); }
.principle b { display: block; font-size: var(--fs-h2); line-height: 1; color: var(--red); margin-bottom: 12px; }
.principle.front b { color: var(--ink); }
.principle p { font-size: var(--fs-body); margin: 0; color: var(--muted); }
.callout { background: var(--yellow); border: 3px solid var(--ink); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 34px); margin-top: 28px; box-shadow: var(--shadow); }
.callout b { display: block; font-size: var(--fs-h2); line-height: 1.04; margin-bottom: 12px; }
.callout p { font-size: var(--fs-lead); margin: 0; color: #2c271c; max-width: 820px; }

/* generic editorial card grid (keynote takeaways, secret-track set list, session "for you") */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 34px; }
.cards.two-up { grid-template-columns: repeat(2,1fr); }
.card { background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card .num { display: block; font-size: var(--fs-label); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.card h3 { font-size: var(--fs-h2); }
.card p { font-size: var(--fs-body); margin: 0; color: var(--muted); }
.card.fill { background: var(--manila); }
.cmp header { padding: 18px 24px; border-bottom: 3px solid var(--ink); background: var(--manila); }
.cmp header span { font-weight: 900; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.cmp.low header { background: var(--ink); }
.cmp.low header span { color: var(--yellow); }
.cmp ul { list-style: none; margin: 0; padding: 12px 24px 24px; }
.cmp li { padding: 13px 0 13px 30px; border-bottom: 2px solid var(--line); font-size: var(--fs-body); font-weight: 700; color: var(--ink); position: relative; }
.cmp li:last-child { border-bottom: 0; }
.cmp li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: var(--green); }
.cmp.low li { color: var(--muted); }
.cmp.low li::before { background: var(--red); border-radius: 3px; }
.dark .eyebrow { color: var(--yellow); }
.dark .lead { color: rgba(255,253,247,.8); }
.lanes { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 34px; align-items: stretch; }
.lane {
  background: var(--paper2); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 360px;
}
.lane:nth-child(2) { background: var(--manila); }
.tag { display: inline-flex; align-self: flex-start; border: 2px solid var(--ink); background: var(--yellow); padding: 6px 10px; font-weight: 900; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-pill); margin-bottom: 16px; }
.lane h3 { color: var(--blue); }
.lane .outcome { font-size: var(--fs-lead); font-weight: 900; color: var(--ink); margin: 0 0 12px; line-height: 1.2; }
.lane p { font-size: var(--fs-body); color: var(--muted); margin: 0 0 14px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.bio-copy p { font-size: var(--fs-body); color: #302c27; margin: 16px 0 0; }
.bio-copy p.first { font-size: var(--fs-body); line-height: 1.45; color: #302c27; }
.human-matters span { background: var(--manila); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 8px 10px; text-align: center; font-weight: 900; font-size: var(--fs-micro); }

.experience { background: var(--manila); border-top: 2px solid var(--ink); }
.experience-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 24px; margin-top: 28px; align-items: stretch; }
.stat-card { background: var(--red); color: var(--paper2); border: 3px solid var(--ink); border-radius: var(--radius); padding: clamp(26px, 4vw, 36px); box-shadow: var(--shadow); }
.stat-card b { display: block; font-size: var(--fs-xl); line-height: .82; }
.stat-card span { display: block; font-size: var(--fs-h2); font-weight: 900; margin-top: 18px; line-height: 1.12; }
.experience-card { background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); }
.experience-card p { font-size: var(--fs-lead); color: var(--muted); margin: 0 0 18px; }
.action-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 20px; }
.action-list div { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 12px 14px; font-weight: 900; }
.experience-card p.note { margin-top: 20px; }
.video-embed { position: relative; margin-top: 32px; aspect-ratio: 16 / 9; border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-big); background: var(--ink); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.album { background: var(--paper2); }
.album-card {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.46fr);
  gap: clamp(24px, 4vw, 42px); align-items: center;
  background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-big);
}
.album-card .eyebrow { color: var(--red); }
.album-card p { font-size: var(--fs-lead); color: var(--muted); margin: 16px 0 0; }
.album-actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }
.album-cover { background: var(--ink); color: var(--paper2); border: 3px solid var(--ink); border-radius: var(--r-md); padding: 30px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.album-cover strong { display: block; font-size: var(--fs-h1); line-height: .95; }
.album-cover span { display: block; margin-top: 14px; font-size: var(--fs-small); color: var(--yellow); font-weight: 900; letter-spacing: .04em; }
.ticket .price small { font-size: var(--fs-lead); font-weight: 900; color: #2c271c; }
.ticket p { font-size: var(--fs-body); color: #2c271c; margin: 16px 0 0; }
.ticket .perf span { font-weight: 900; font-size: var(--fs-small); padding-left: 26px; position: relative; }
.ticket .perf span::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: var(--paper2); }

.faq { margin-top: 34px; max-width: 900px; }
.faq details { border: 3px solid var(--ink); border-radius: var(--r-md); background: var(--paper2); padding: 18px 22px; margin-bottom: 14px; box-shadow: 5px 5px 0 var(--ink); }
.faq summary { cursor: pointer; font-weight: 900; font-size: var(--fs-lead); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-weight: 900; color: var(--red); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 14px 0 0; font-size: var(--fs-body); color: var(--muted); }

.closing { background: var(--blue); color: var(--paper2); }
.closing p { font-size: var(--fs-lead); color: rgba(255,253,247,.84); max-width: 760px; margin: 20px 0 0; }
.closing .eyebrow { color: var(--yellow); }
.closing .reassure { color: rgba(255,253,247,.74); }
.closing .button.primary { background: var(--red); color: var(--paper2); }
.closing .button.secondary { background: var(--paper2); color: var(--ink); }
.secret-tease { margin-top: 26px; font-size: var(--fs-small); color: rgba(255,253,247,.78); font-weight: 700; }
.secret-tease a { color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

footer { background: var(--ink); color: rgba(255,253,247,.78); padding: 28px 0; font-size: var(--fs-micro); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.footer-tag { margin-bottom: 12px; }
.legal { max-width: 760px; font-size: var(--fs-micro); line-height: 1.45; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; font-weight: 900; }
.footer-links a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .nav-burger { display: inline-flex; align-items: center; }
  .nav-text {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper2); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    padding: 4px 20px 14px; box-shadow: var(--sh-1);
  }
  .nav-text.open { display: flex; }
  .nav-text a { padding: 14px 2px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
  .nav-text a:first-child { border-top: 0; }
  .pill { display: none; }
  .nav-text .nav-cta { display: block; border-top: 0; margin-top: 12px; padding: 13px; text-align: center; background: var(--ink); color: var(--paper2); border-radius: var(--r-pill); font-weight: 900; }
  .hero-grid, .human-card, .experience-grid, .album-card, .closing-grid, .offer-grid { grid-template-columns: 1fr; }
  .hero-card { rotate: 0deg; }
  .principles, .lanes, .context-strip, .asset-row, .compare, .cards, .cards.two-up { grid-template-columns: 1fr; }
  .lane, .principle, .asset, .card { min-height: auto; }
  .asset-row { grid-template-columns: repeat(2,1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .wrap { width: min(100% - 28px, var(--max)); }
  .nav { min-height: 66px; }
  .brand { font-size: var(--fs-lead); }
  section { padding: 48px 0; }
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-h1); }
  .lead { font-size: var(--fs-body); }
  .hero-actions .button, .album-actions .button { width: 100%; text-align: center; }
  .hero-card, .callout, .principle, .lane, .human-card, .stat-card, .experience-card, .album-card, .album-cover, .cmp, .card, .ticket { border-radius: var(--r-md); }
  .flow div { flex-direction: column; gap: 2px; }
  .human-matters, .action-list, .asset-row { grid-template-columns: 1fr; }
  .links { gap: 10px; }
  .pill { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}
.asset img { width: 100%; height: 100%; object-fit: cover; }
.asset.book img { object-fit: contain; padding: 10px; }
.asset b { font-size: var(--fs-body); line-height: 1.15; }
.asset span { color: var(--muted); font-size: var(--fs-small); }

/* hero headline: smaller than the global h1 so long event headlines don't overlap the card */
.hero h1 { font-size: var(--fs-xl); line-height: .98; }
.pc-list li { counter-increment: p; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 13px 0; border-top: 2px solid rgba(255,253,247,.28); align-items: baseline; }
.pc-list li:first-child { border-top: 0; padding-top: 4px; }
.pc-list li::before { content: counter(p); color: var(--yellow); font-weight: 900; font-size: var(--fs-small); }
.pc-list b { display: block; font-size: var(--fs-small); line-height: 1.2; }
.pc-list span { display: block; font-size: var(--fs-micro); color: rgba(255,253,247,.74); margin-top: 2px; }
.secret-feature .ghost {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%) rotate(-4deg);
  font-size: var(--fs-mega); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(255,248,234,.08); pointer-events: none; z-index: 0;
}
.secret-feature .eyebrow { color: #b7ff2a; justify-content: center; }
.secret-feature .eyebrow .dot { background: #ff2f92; border-color: #09080d; }
.secret-feature h2 { color: #fff8ea; margin: 0 0 22px; }
.secret-feature .neon { color: #ff2f92; text-shadow: 0 0 22px rgba(255,47,146,.5); }
.secret-feature p { color: #e4dcf1; font-size: var(--fs-lead); margin: 0 auto 36px; max-width: 560px; }
.play-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px; border: 3px solid #050408; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #b7ff2a, #00d7ff); color: #07060a;
  font-weight: 900; font-size: var(--fs-lead); text-decoration: none;
  box-shadow: var(--sh-2);
  transition: transform .16s ease, box-shadow .16s ease;
  animation: pulseGlow 2.4s ease-in-out infinite;
}
.play-cta:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-2); }
.play-tri { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #07060a; display: inline-block; }
@keyframes pulseGlow { 0%,100% { box-shadow: var(--sh-2); } 50% { box-shadow: var(--sh-2); } }
.eq-deco { display: inline-flex; gap: 4px; height: 26px; align-items: flex-end; margin-top: 30px; }
.eq-deco i { width: 5px; height: 8px; background: linear-gradient(#00d7ff, #b7ff2a); border-radius: 2px; animation: eqbar 1s ease-in-out infinite; }
.eq-deco i:nth-child(2){animation-delay:.15s} .eq-deco i:nth-child(3){animation-delay:.3s} .eq-deco i:nth-child(4){animation-delay:.45s} .eq-deco i:nth-child(5){animation-delay:.6s} .eq-deco i:nth-child(6){animation-delay:.75s}
@keyframes eqbar { 0%,100% { height: 8px; } 50% { height: 26px; } }
@media (max-width: 640px) {
  .secret-feature { border-radius: var(--r-md); }
  .play-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .play-cta { animation: none; }
  .eq-deco i { animation: none; height: 16px; }
}

/* ==========================================================================
   V2 (2026-08-12) — design tokens, normalization, new components, motion.
   Appended last so it wins on equal specificity. Legacy blocks above are
   untouched, which keeps the sub-pages working while inheriting the tokens.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */


:root {
  --font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* type: one scale, nine steps, nothing off-ladder */
  --fs-label: 12px;
  --fs-micro: 13px;
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-lead: clamp(18px, 1.4vw, 21px);
  --fs-h3: clamp(21px, 2.1vw, 26px);
  --fs-h2: clamp(32px, 4.2vw, 52px);
  --fs-h1: clamp(34px, 3.9vw, 48px);
  --fs-display: clamp(40px, 5.4vw, 68px);

  /* weight: three, all real on a variable axis */
  --w-body: 400;
  --w-mid: 700;
  --w-bold: 900;

  /* radius: three plus the pill */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* one shadow ladder */
  --sh-1: 4px 4px 0 var(--ink);
  --sh-2: 8px 8px 0 var(--ink);
  --sh-3: 12px 12px 0 var(--ink);

  /* derived colors, so no more one-off hexes */
  --ink-card: color-mix(in srgb, var(--ink) 94%, var(--paper));
  --on-dark: color-mix(in srgb, var(--paper2) 80%, transparent);
  --on-yellow: color-mix(in srgb, var(--ink) 88%, var(--yellow));
  --space: clamp(52px, 6vw, 88px);
}

/* --- 2. Normalization ---------------------------------------------------- */
body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--w-body); }
section { padding: var(--space) 0; }
h1, h2, h3 { font-weight: var(--w-bold); letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.0; }
h2 { font-size: var(--fs-h2); line-height: 1.02; }
h3 { font-size: var(--fs-h3); line-height: 1.08; margin-bottom: 10px; }
p, blockquote, li { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); font-weight: var(--w-body); max-width: 68ch; }
.reassure { font-size: var(--fs-small); font-weight: var(--w-mid); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
}
.hero h1 { font-size: var(--fs-h1); }
.hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); align-items: start; }
.hero .sub { display: none; }

/* buttons: two sizes, four intents, one motion */
.button {
  min-height: 50px; padding: 13px 22px; gap: 8px;
  font-family: inherit; font-size: var(--fs-small); font-weight: var(--w-mid);
  border-radius: var(--r-pill); box-shadow: var(--sh-1); cursor: pointer; appearance: none;
}
.button.lg { min-height: 60px; padding: 17px 28px; font-size: var(--fs-body); }
.button.primary, .primary { background: var(--red); color: var(--paper2); }
.button.ghost, .button.secondary, .secondary { background: var(--paper2); color: var(--ink); }
.button.dark { background: var(--yellow); color: var(--on-yellow); }
.button.is-done { background: var(--green); color: var(--paper2); }
.pill { font-size: var(--fs-micro); font-weight: var(--w-mid); }

:where(section[id]) { scroll-margin-top: 96px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- 3. Hero: the interactive model ------------------------------------- */
/* no max-width here: the grid column is the measure. A ch-based cap resolves
   against the 17px body size, not the 48px h1, and crushes the headline. */
.hero h1 { max-width: 22ch; }
.hero .lead { max-width: 58ch; }
.fold-proof li { max-width: 22ch; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.fold-proof b { display: block; font-size: var(--fs-lead); font-weight: var(--w-bold); color: var(--ink); }

.model {
  background: var(--paper2); border: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.model-switch { display: flex; border: 0; margin: 0; padding: 18px 20px 0; }
.model-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.model-switch label {
  flex: 1; text-align: center; padding: 11px 8px; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink);
  font-size: var(--fs-label); font-weight: var(--w-mid); letter-spacing: .02em;
  transition: background-color .2s ease, color .2s ease;
}
.model-switch label:first-of-type { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.model-switch label:last-of-type { border-radius: 0 var(--r-pill) var(--r-pill) 0; border-left-width: 0; }
.model:has(#mv-today:checked) label[for="mv-today"],
.model:has(#mv-real:checked) label[for="mv-real"] { background: var(--ink); color: var(--paper2); }
.model-switch input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; position: relative; }

.model-field { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; padding: 20px; }
.model-field i {
  aspect-ratio: 1; border-radius: var(--r-pill);
  background: var(--red); border: 2px solid var(--ink);
  transition: opacity .4s ease, transform .4s ease, background-color .4s ease;
}
.model-field i:nth-child(4n+2) { transition-delay: 60ms; }
.model-field i:nth-child(4n+3) { transition-delay: 120ms; }
.model-field i:nth-child(4n) { transition-delay: 180ms; }
.model:has(#mv-today:checked) .model-field i { opacity: .15; transform: scale(.72); }
.model:has(#mv-today:checked) .model-field i:nth-child(4),
.model:has(#mv-today:checked) .model-field i:nth-child(11),
.model:has(#mv-today:checked) .model-field i:nth-child(19) { opacity: 1; transform: none; }
.model:has(#mv-real:checked) .model-field i:nth-child(3n) { background: var(--yellow); }
.model:has(#mv-real:checked) .model-field i:nth-child(5n+1) { background: var(--blue); }

.model-caption { display: none; margin: 0; padding: 0 20px 20px; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.model:has(#mv-today:checked) .model-caption[data-view="today"],
.model:has(#mv-real:checked) .model-caption[data-view="real"] { display: block; }

.model-stages { border-top: 3px solid var(--ink); }
.model-stage { padding: 16px 20px; }
.model-stage span {
  display: block; margin-bottom: 5px; font-size: var(--fs-label); font-weight: var(--w-bold);
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}
.model-stage strong { font-size: var(--fs-body); font-weight: var(--w-mid); line-height: 1.15; }
.model-stage-back { background: var(--ink); color: var(--paper2); }
.model-stage-back span { color: var(--yellow); }
.model-result {
  list-style: none; margin: 0; padding: 15px 20px; display: grid; gap: 7px;
  background: var(--yellow); border-top: 3px solid var(--ink);
  font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--on-yellow);
}
.bridge-inner { max-width: 820px; border-left: 7px solid var(--red); padding-left: clamp(18px, 2.4vw, 30px); }
.bridge-label { margin: 0 0 16px; font-size: var(--fs-h2); line-height: 1.14; font-weight: var(--w-bold); letter-spacing: -.015em; }
.bridge-copy { margin: 0; max-width: 66ch; font-size: var(--fs-lead); color: var(--muted); }
.bridge-sig { margin: 20px 0 0; font-size: var(--fs-micro); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.bridge-sig::before {
  content: ""; display: inline-block; width: 26px; height: 3px;
  margin-right: 11px; vertical-align: middle; background: var(--red);
}

/* --- 5. The leak --------------------------------------------------------- */
.leak { background: var(--ink); color: var(--paper2); border-top: 3px solid var(--ink); }
.leak h2 { color: var(--paper2); }
.leak .eyebrow { color: var(--yellow); }
.leak .eyebrow .dot { background: var(--yellow); border-color: var(--paper2); }
.leak .lead { color: var(--on-dark); }
.leak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 20px; margin-top: clamp(30px, 3.6vw, 44px); }
.leak-grid article {
  background: var(--ink-card); border: 3px solid var(--paper2);
  border-radius: var(--r-lg); padding: 26px; box-shadow: 8px 8px 0 var(--red);
  transition: transform .2s ease, box-shadow .2s ease;
}
.leak-grid article:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--red); }
.leak-step { display: block; margin-bottom: 12px; font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.leak-grid h3 { color: var(--paper2); }
.leak-grid p { margin: 0; font-size: var(--fs-small); color: var(--on-dark); }

/* --- 6. The journey ------------------------------------------------------ */
.journey {
  position: relative; list-style: none; margin: clamp(38px, 4vw, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px;
}
.journey::before, .journey::after { content: ""; position: absolute; top: -16px; left: 0; height: 4px; border-radius: 2px; }
.journey::before { width: 100%; background: var(--line); }
.journey::after { width: 0; background: var(--red); }
.journey-step {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.journey-step:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--ink); }
.journey-step:last-child { background: var(--manila); }
.j-num { font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: .8; color: var(--blue); }
.j-kicker { margin: 0 0 8px; font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.journey-step h3 { font-size: var(--fs-h3); }
.journey-step p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.owns { margin-top: clamp(30px, 3.4vw, 42px); }

/* --- 7. Stakeholder outcomes -------------------------------------------- */
.stake { margin-top: clamp(38px, 4.4vw, 56px); padding-top: clamp(28px, 3vw, 38px); border-top: 3px dashed var(--line); }
.stake-label { margin: 0 0 20px; font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .11em; text-transform: uppercase; color: var(--blue); }
.stake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 14px; }
.stake-grid article { background: var(--manila); border: 3px solid var(--ink); border-radius: var(--r-md); padding: 20px; transition: transform .2s ease; }
.stake-grid article:hover { transform: translateY(-3px); }
.stake-grid span { display: block; margin-bottom: 10px; font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.stake-grid strong { font-size: var(--fs-body); line-height: 1.18; font-weight: var(--w-mid); }
.reveal-band .eyebrow { color: var(--on-yellow); }
.reveal-band .eyebrow .dot { background: var(--ink); border-color: var(--on-yellow); }
.reveal-band h2 { font-size: var(--fs-display); }
.reveal-band h2 span { display: block; color: var(--red); }
.reveal-copy p { margin: 0 0 14px; max-width: 54ch; font-size: var(--fs-lead); color: var(--on-yellow); }
.reveal-name strong { font-weight: var(--w-bold); }
.cred-grid { display: grid; grid-template-columns: minmax(200px, .72fr) minmax(0, 1.6fr); gap: clamp(24px, 3.4vw, 48px); margin-top: clamp(30px, 3.4vw, 42px); align-items: start; }
.cred-portrait { margin: 0; }
.cred-portrait img { display: block; width: 100%; height: auto; background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.cred-portrait figcaption { margin-top: 14px; font-size: var(--fs-small); }
.cred-portrait b { display: block; font-size: var(--fs-body); font-weight: var(--w-bold); }
.cred-portrait span { color: var(--muted); }
.cred-quote {
  margin: 0 0 22px; padding-left: 20px; border-left: 8px solid var(--red);
  font-size: var(--fs-h2); line-height: 1.12; font-weight: var(--w-bold); letter-spacing: -.02em;
}
.cred-bio { margin: 0 0 24px; max-width: 62ch; color: var(--muted); }
.cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cred-list li { background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--r-md); padding: 16px 18px; font-size: var(--fs-small); color: var(--muted); }
.cred-list span { display: block; margin-bottom: 6px; font-size: var(--fs-label); font-weight: var(--w-bold); letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.fwd-quote {
  margin: 24px 0 0; padding: clamp(20px, 2.4vw, 28px); max-width: 74ch;
  background: var(--paper2); border-left: 8px solid var(--blue); border-radius: var(--r-sm);
  font-size: var(--fs-lead); line-height: 1.45; font-weight: 700;
}
.fwd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.fwd-note { max-width: 38ch; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.keynote-band h2 { color: var(--paper2); font-size: var(--fs-h2); }
.keynote-band .eyebrow { color: var(--yellow); }
.keynote-band .eyebrow .dot { background: var(--yellow); border-color: var(--paper2); }
.keynote-band p { margin: 14px 0 0; max-width: 60ch; color: var(--on-dark); }
.next-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; font-size: var(--fs-small); color: var(--on-dark); }
.closing .reassure { color: var(--on-dark); }

/* --- 13. Motion --------------------------------------------------------- */
@keyframes hif-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hif-grow { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal-up { animation: hif-rise linear both; animation-timeline: view(); animation-range: entry 8% entry 62%; }
    .journey::after { animation: hif-grow linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
  }
  html.js-reveal .reveal-up { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  html.js-reveal .reveal-up.is-in { opacity: 1; transform: none; }
}

/* --- 14. Responsive ----------------------------------------------------- */
@media (max-width: 980px) {
  /* .hero-grid must be repeated here: the base rule above is later in source
     order than the legacy 980px collapse, so it would otherwise win. */
  .hero-grid, .reveal-inner, .keynote-inner, .cred-grid { grid-template-columns: 1fr; }
  .cred-portrait { max-width: 320px; }
  .keynote-inner .button { width: 100%; text-align: center; }
}
@media (max-width: 640px) {
  .hero-copy { max-width: none; }
  .fwd-actions .button, .closing-action .button { width: 100%; text-align: center; }
  .model-top, .model-switch { flex-wrap: wrap; }
  .model-field { grid-template-columns: repeat(6, 1fr); }
  .fold-proof { gap: 14px; }
  .fold-proof li { max-width: none; }
}

/* ==========================================================================
   V4 (2026-08-13) — palette collapse, one typeface, secret track rehoused.
   Four surfaces (paper / paper2 / manila / ink), one accent (red), tints of
   ink for hierarchy. Blue, blue-dark, yellow, green and the six neon values
   in the secret-track block are aliased away rather than hunted down rule by
   rule, so nothing above can reintroduce them.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk var";
  src: url("assets/fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Schibsted Grotesk var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* the scale, eleven steps, nothing off-ladder */
  --fs-label: 12px;
  --fs-micro: 13px;
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-lead: clamp(18px, 1.3vw, 20px);
  --fs-h3: clamp(20px, 1.9vw, 24px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h1: clamp(34px, 4vw, 48px);
  --fs-display: clamp(38px, 4.8vw, 58px);
  --fs-xl: clamp(52px, 7.5vw, 96px);
  --fs-mega: clamp(88px, 17vw, 220px);

  /* retired hues, aliased to survivors */
  --blue: var(--ink);
  --blue-dark: var(--ink);
  --yellow: var(--manila);
  --green: var(--ink);
  --on-yellow: var(--ink);

  /* tints of ink, for hierarchy without another hue */
  --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --ink-45: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --on-dark: color-mix(in srgb, var(--paper2) 78%, transparent);
  --on-dark-quiet: color-mix(in srgb, var(--paper2) 55%, transparent);
}

/* labels and eyebrows: quiet, not a second brand color */
.eyebrow,
.card .num, .principle .where, .cmp header span,
.model-stage span, .cred-list span, .stake-label, .stake-grid span,
.leak-step, .j-kicker, .model-top, .model-switch label, .model-result { letter-spacing: .1em; }
.eyebrow { color: var(--muted); }
.card .num, .principle .where, .cmp header span, .model-stage span, .cred-list span, .stake-label { color: var(--ink-70); }
.j-num { color: var(--ink-45); }
.j-kicker, .leak-step { color: var(--red); }

/* on dark surfaces, the quiet label is a paper tint */
.leak .eyebrow, .closing .eyebrow, .secret-feature .eyebrow, .model-stage-back span { color: var(--manila); }
.leak .eyebrow .dot, .closing .eyebrow .dot, .secret-feature .eyebrow .dot { background: var(--red); border-color: var(--manila); }
.leak-grid p, .closing p, .next-steps { color: var(--on-dark); }

/* accent bars: one accent */
.fwd-quote { border-left-color: var(--red); }
.callout { background: var(--manila); }
.callout p { color: var(--ink-70); }
.keynote-band h2 { color: var(--ink); }
.keynote-band .eyebrow { color: var(--ink-70); }
.keynote-band .eyebrow .dot { background: var(--red); border-color: var(--ink); }
.keynote-band p { color: var(--ink-70); }
.button.dark { background: var(--ink); color: var(--paper2); }

/* reveal band is now a manila tint, so the red does the shouting */
.reveal-band .eyebrow { color: var(--ink-70); }
.reveal-copy p { color: var(--ink-70); }
.secret-feature .ghost { color: var(--paper2); opacity: .07; text-shadow: none; }
.secret-feature h2 { color: var(--paper2); }
.secret-feature .neon { color: var(--red); text-shadow: none; }
.secret-feature p { color: var(--on-dark); font-size: var(--fs-lead); }
.play-cta {
  background: var(--red); color: var(--paper2);
  border: 2px solid var(--paper2); border-radius: var(--r-pill);
  box-shadow: 4px 4px 0 var(--paper2);
  font-family: inherit; font-size: var(--fs-small); font-weight: var(--w-mid);
  animation: none; text-shadow: none;
}
.play-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--paper2); }
.play-tri { border-color: transparent transparent transparent var(--paper2); }
.eq-deco i { background: var(--red); }
.eq-deco i:nth-child(even) { background: var(--manila); }

/* --- Weight discipline: three, on a real variable axis ------------------ */
h1, h2, h3, .brand, .callout b, .principle b, .bridge-label, .cred-quote,
.fold-proof b, .cred-portrait b, .model-stage strong, .flow strong { font-weight: 900; }
.eyebrow, .button, .pill, .links, .card .num, .principle .where, .cmp header span,
.leak-step, .j-kicker, .j-num, .stake-label, .stake-grid span, .stake-grid strong,
.cred-list span, .model-top, .model-switch label, .model-result, .model-stage span,
.bridge-sig, .reassure, .fold-proof li, .fwd-note, .fwd-quote, .play-cta { font-weight: 700; }
body, p, li, blockquote, .lead, .copy, .cred-bio, .bridge-copy { font-weight: 400; }

/* form controls inherit the family instead of falling back to the UA font */
button, input, select, textarea { font-family: inherit; }

/* ==========================================================================
   V5 (2026-08-13) — two families with clear roles, readable forwardable
   paragraph, stakeholder icons, footer separated, equalizer repositioned.
   ========================================================================== */



:root {
  /* display: warm, human, a little wonky. text: neutral and legible. */
  --font-display: "Fraunces var", Georgia, "Times New Roman", serif;
  --font-sans: "Schibsted Grotesk var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* everything is grotesk unless it is a headline or a passage meant to be read */
h1, h2, h3, .brand, .bridge-label, .cred-quote, .callout b, .principle b, .fwd-quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  letter-spacing: -.012em;
}
h1, h2, .brand { font-variation-settings: "SOFT" 50, "WONK" 0; }
h3 { font-weight: 700; letter-spacing: -.006em; }

/* the forwardable paragraph is the one block on the page people actually read
   end to end, so it gets the serif at text weight, a real measure and leading */
.fwd-quote {
  font-weight: 400;
  font-size: clamp(19px, 1.65vw, 23px);
  line-height: 1.58;
  max-width: 58ch;
  letter-spacing: 0;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--ink);
}

/* --- Stakeholder grid: icons instead of four grey labels ---------------- */
.stake-grid article { display: grid; gap: 12px; align-content: start; }
.stake-ico {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--paper2); border: 3px solid var(--ink); border-radius: var(--r-sm);
  color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.stake-ico svg { width: 22px; height: 22px; display: block; }
.stake-grid article:hover .stake-ico { background: var(--red); color: var(--paper2); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.stake-grid span { margin-bottom: 0; }
.stake-grid strong { font-size: var(--fs-body); line-height: 1.25; }

/* --- Footer: a light surface, so it stops merging into the dark CTA ----- */
footer {
  background: var(--paper); color: var(--ink-70);
  border-top: 3px solid var(--ink);
  padding: clamp(34px, 4vw, 52px) 0 clamp(28px, 3vw, 38px);
}
.footer-tag { color: var(--ink-70); margin-bottom: 14px; }
footer .legal { color: var(--ink-45); }
.footer-links a { color: var(--ink); }

/* --- Equalizer: a block under the play control, plus a quiet second use - */
.eq-deco {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 5px; height: 26px; margin: 24px auto 0;
}
.eq-deco i { width: 5px; }
.eq-small i { width: 3px; height: 4px; border-radius: 1px; animation-duration: 1.4s; }
@keyframes eqbar-small { 0%,100% { height: 4px; } 50% { height: 14px; } }
.eq-small i { animation-name: eqbar-small; background: var(--manila); }
.eq-small i:nth-child(even) { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .eq-small i { animation: none; height: 9px; } }

/* .model-stage span (0,1,1) outranks .eq-small (0,1,0), so the backstage
   equalizer was being styled as a label. Scope it up. */
.model-stage .eq-small { display: inline-flex; margin: 10px 0 0; letter-spacing: 0; }
/* give the backstage equalizer its own line instead of trailing the sentence */
.model-stage strong { display: block; }

/* ==========================================================================
   V6 (2026-08-13) — tighten the serif to four roles, rebuild the forwardable
   paragraph as one block instead of a box inside a box.
   ========================================================================== */

/* the serif earns four jobs: the two headline levels, the pull quote and the
   one passage people read end to end. Everything else is the grotesk. */
/* every h1 and h2 is the serif, with no exceptions, or the rule is not a rule */
h3, .brand, .callout b, .principle b, .footer-brand {
  font-family: var(--font-sans);
  font-variation-settings: normal;
  letter-spacing: -.015em;
}
h3 { font-weight: 900; }
.fwd-quote {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding: clamp(22px, 2.4vw, 30px) 0 0;
  background: none;
  border: 0;
  border-top: 3px solid var(--line);
  border-radius: 0;
  max-width: 56ch;
}
.fwd-quote::before {
  content: "";
  display: block;
  width: 44px; height: 4px;
  margin-bottom: clamp(18px, 2vw, 24px);
  background: var(--red);
  border-radius: 2px;
}
.fwd-actions {
  margin-top: clamp(24px, 2.6vw, 32px);
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 3px solid var(--line);
}

/* tablet: keep the sets balanced. A three-step sequence reads as 3-across or
   as a stack, never as 2+1, and four outcome tiles should be 2+2, not 3+1. */
@media (max-width: 980px) {
  .leak-grid { grid-template-columns: 1fr; }
  .stake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stake-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V7 (2026-08-13) — one family, deliberate line breaks, a capture animation
   that means something, a stronger close, and a burger that centres.
   ========================================================================== */

/* one typeface. --font-display stays as a name so the role split in the CSS
   above still reads, but it now resolves to the same family. */
:root { --font-display: var(--font-sans); }
h1, h2, h3, .brand, .bridge-label, .cred-quote, .callout b, .principle b, .fwd-quote,
.footer-brand, .keynote-band h2, .reveal-band h2 {
  font-variation-settings: normal;
  font-optical-sizing: auto;
}
.fwd-quote { letter-spacing: -.005em; }

/* --- Line discipline ---------------------------------------------------- */
/* a heading carrying two thoughts breaks between them, not wherever the
   measure runs out */
.l { display: block; }
h1 .l, h2 .l { text-wrap: balance; }
.stake-label .l { display: inline; }
.stake-label .l + .l::before { content: " "; }
@media (min-width: 700px) { .stake-label .l { display: block; } }
.hero h1 { max-width: 26ch; }
.nav, .fold-proof b, .model-top span, .leak-step, .j-kicker { text-wrap: nowrap; }

/* --- Backstage: signal being captured, not an audio meter ---------------- */
.capture {
  position: relative; display: block; width: 96px; height: 12px; margin: 12px 0 0;
}
.capture i {
  position: absolute; left: 0; top: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--manila);
  animation: capture-in 2.6s linear infinite;
}
.capture i:nth-child(2) { animation-delay: .65s; }
.capture i:nth-child(3) { animation-delay: 1.3s; }
.capture i:nth-child(4) { animation-delay: 1.95s; }
.capture b {
  position: absolute; right: 0; top: 0;
  width: 5px; height: 12px; border-radius: 2px;
  background: var(--red);
  animation: capture-land 2.6s linear infinite;
}
@keyframes capture-in {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  78%  { transform: translateX(80px); opacity: 1; }
  100% { transform: translateX(88px); opacity: 0; }
}
@keyframes capture-land {
  0%, 70% { transform: scaleY(1); }
  82%     { transform: scaleY(1.5); }
  100%    { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .capture i, .capture b { animation: none; }
  .capture i { opacity: 1; }
  .capture i:nth-child(2) { transform: translateX(26px); }
  .capture i:nth-child(3) { transform: translateX(52px); }
  .capture i:nth-child(4) { transform: translateX(78px); }
}

/* --- The close ---------------------------------------------------------- */
.reassure .ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--red); }
.reassure .ico svg { width: 17px; height: 17px; display: block; }
.closing .reassure { color: var(--paper2); }

/* .button.lg is (0,2,0) so this has to match it or the size never lands */
.button.cta-main {
  width: 100%; justify-content: space-between; gap: 20px;
  min-height: 70px; padding: 20px 28px;
  font-size: var(--fs-h3); letter-spacing: -.012em;
  box-shadow: 6px 6px 0 var(--paper2);
  border-color: var(--paper2);
}
.button.cta-main:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--paper2); }
.cta-arrow { font-size: 1.15em; line-height: 1; transition: transform .18s ease; }
.cta-main:hover .cta-arrow { transform: translateX(4px); }

/* --- Burger: a square that actually centres its icon -------------------- */
.nav-burger {
  align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border-radius: var(--r-sm); line-height: 0;
}
.nav-burger svg { width: 22px; height: 22px; display: block; }

/* the hero's second sentence is the punchline, so it gets a size that lets it
   sit on a single line in the column rather than wrapping mid-phrase */
.hero h1 { font-size: clamp(31px, 3.28vw, 42px); max-width: none; }

/* ==========================================================================
   V8 (2026-08-13) — the leak section calms down and gets icons; asymmetric
   grids now respond to their container, not the viewport.
   ========================================================================== */

/* --- Container queries -------------------------------------------------- */
/* the viewport can be 1280 while this wrap is 700 (narrow pane, embedded
   preview, split view). Viewport media queries miss that and the two-column
   grids squash. These wraps become containers so the grids react to the space
   they actually have. */
.hero .wrap, .cred .wrap, .reveal-band .wrap, .keynote-band .wrap, .closing .wrap {
  container-type: inline-size;
}
@container (max-width: 780px) {
  .hero-grid, .cred-grid, .reveal-inner, .keynote-inner, .closing-grid { grid-template-columns: 1fr; }
  .cred-portrait { max-width: 300px; }
  .keynote-inner .button { width: 100%; }
}
@container (max-width: 560px) {
  .hero h1 { font-size: clamp(30px, 8vw, 38px); }
}
/* when there is room, the portrait should not be a thumbnail */
.cred-grid { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.55fr); }

/* --- The leak: quieter surfaces, one accent, and iconography ------------- */
/* was: cream 3px borders and red hard shadows on near-black cards, which read
   as an eyesore against a near-black section. */
.leak-grid article {
  background: var(--ink-card);
  border: 2px solid color-mix(in srgb, var(--paper2) 15%, transparent);
  border-radius: var(--r-lg);
  box-shadow: none;
  padding: clamp(22px, 2.4vw, 30px);
}
.leak-grid article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--paper2) 32%, transparent);
  box-shadow: none;
}
.leak-ico svg { width: 24px; height: 24px; display: block; }
.leak-grid article:hover .leak-ico { background: var(--red); border-color: var(--red); color: var(--paper2); }
.leak-step { color: var(--red); margin-bottom: 10px; }
.leak-grid h3 { margin-bottom: 10px; }
/* give the section room so the cards are not competing with the lead */
.leak .lead { max-width: 62ch; }
.leak-grid { margin-top: clamp(34px, 4vw, 52px); }

/* ==========================================================================
   V9 (2026-08-13) — the hero widget calms down.
   Six stacked bands became four. Four type sizes, all on the scale. The
   toggle labels lost the tracking that was pushing their centring off, and
   the capture animation now spans the row instead of sitting in a 96px stub.
   ========================================================================== */

/* the label group added .1em tracking to the toggle, and trailing letter-space
   on centred text reads as misalignment. Sentence-case controls get none. */
.model-switch label {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 12px 10px;
  text-wrap: nowrap;
  line-height: 1.2;
}
.model-switch { padding: 18px 20px 4px; gap: 0; }

.model-field { gap: 8px; padding: 18px 20px 14px; }
.model-caption { font-size: var(--fs-small); padding: 0 20px 18px; line-height: 1.45; }

.model-stage { padding: 15px 20px; }
.model-stage span { font-size: var(--fs-label); letter-spacing: .1em; }
.model-stage strong { font-size: var(--fs-body); }

/* the payoff was three stacked uppercase lines, which made the card a poster.
   Same words, one line, one treatment. */
.model-result {
  display: flex; flex-wrap: wrap; gap: 3px 9px;
  padding: 13px 20px;
  font-size: var(--fs-micro); font-weight: 700;
  text-transform: none; letter-spacing: 0;
  line-height: 1.35;
}
.model-result li + li::before { content: "· "; opacity: .55; }

/* --- Capture: spans the row, lands in the store ------------------------- */
.capture { position: relative; display: block; width: 100%; height: 14px; margin: 14px 0 2px; }
.capture i {
  position: absolute; top: 4px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--manila);
  animation: capture-run 3s linear infinite;
}
.capture i:nth-child(2) { animation-delay: .6s; }
.capture i:nth-child(3) { animation-delay: 1.2s; }
.capture i:nth-child(4) { animation-delay: 1.8s; }
.capture i:nth-child(5) { animation-delay: 2.4s; }
.capture b {
  position: absolute; right: 0; top: 0;
  width: 5px; height: 14px; border-radius: 2px;
  background: var(--red);
}
@keyframes capture-run {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { left: calc(100% - 17px); opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .capture i { animation: none; opacity: 1; }
  .capture i:nth-child(2) { left: 22%; }
  .capture i:nth-child(3) { left: 44%; }
  .capture i:nth-child(4) { left: 66%; }
  .capture i:nth-child(5) { left: 84%; }
}

/* ==========================================================================
   V10 (2026-08-13) — three fixes the render surfaced.
   ========================================================================== */

/* a leading separator can wrap to the start of a line, which reads as a typo.
   Trailing separators stay attached to the item before them. */
.model-result li + li::before { content: none; }
.model-result li:not(:last-child)::after { content: " ·"; opacity: .5; }

/* the punchline needs ~673px at 40px to hold one line, so the column gets a
   little wider and the type a little smaller. It was breaking mid-phrase. */
.hero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(270px, .68fr); }
.hero h1 { font-size: clamp(30px, 3.05vw, 40px); }

/* three proof points, three columns, not 2 + 1 */
@media (min-width: 700px) {
  .fold-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .fold-proof li { max-width: none; }
}

/* ==========================================================================
   V11 (2026-08-13) — space. The page was built on 48-80px section padding,
   20px gutters, 18px grid gaps and 26px card padding, which is why it read
   cramped. One spacing scale, applied everywhere, plus fewer competing
   effects so the space is what does the work.
   ========================================================================== */

:root {
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 72px; --sp-8: 104px;
  --gutter: clamp(24px, 5vw, 88px);
  --max: 1140px;
  --gap-grid: clamp(18px, 1.9vw, 28px);
  --pad-card: clamp(26px, 2.4vw, 36px);
  --pad-section: clamp(72px, 7.4vw, 118px);
}

/* --- Page frame ---------------------------------------------------------- */
.wrap { width: min(var(--max), calc(100% - var(--gutter))); }
section { padding: var(--pad-section) 0; }
.hero { padding-top: clamp(48px, 5vw, 80px); padding-bottom: var(--pad-section); }
body { line-height: 1.55; }

/* --- Vertical rhythm ----------------------------------------------------- */
.eyebrow { margin-bottom: var(--sp-4); }
.lead { margin-top: var(--sp-4); line-height: 1.5; }
.method-head { margin-bottom: 0; }
h2 + .lead, h1 + .lead { margin-top: var(--sp-4); }
.hero-actions { margin-top: var(--sp-5); gap: var(--sp-3); }
.owns { margin-top: var(--sp-7); }
.stake { margin-top: var(--sp-7); padding-top: var(--sp-6); }
.stake-label { margin-bottom: var(--sp-4); }

/* --- Grids: consistent gaps and room to breathe ------------------------- */
.hero-grid { gap: clamp(32px, 4.5vw, 76px); align-items: start; }
.leak-grid, .journey, .stake-grid, .cards, .cred-list { gap: var(--gap-grid); }
.journey { margin-top: var(--sp-6); }
.leak-grid { margin-top: var(--sp-6); }
.cred-grid { gap: clamp(28px, 3.2vw, 56px); margin-top: var(--sp-6); }
.footer-inner { gap: var(--sp-5); }

/* --- Cards: real padding ------------------------------------------------ */
.card, .principle, .journey-step, .leak-grid article, .stake-grid article, .cred-list li {
  padding: var(--pad-card);
}
.stake-grid article, .cred-list li { padding: clamp(20px, 1.9vw, 26px); }
.model-switch { padding: var(--sp-4) var(--sp-4) var(--sp-1); }
.model-field { padding: var(--sp-4) var(--sp-4) var(--sp-3); gap: 9px; }
.model-caption { padding: 0 var(--sp-4) var(--sp-4); }
.model-stage { padding: var(--sp-3) var(--sp-4); }
.model-result { padding: var(--sp-3) var(--sp-4); }
.bridge-inner { padding-left: clamp(22px, 2.6vw, 38px); }

/* --- Fewer competing effects: shadows earn their place ------------------ */
/* the model card, the forwardable card and the controls keep the hard shadow.
   The repeating small cards do not: nine offset shadows in a row is noise, and
   the borders already separate them. */
.journey-step, .stake-grid article, .cred-list li, .card, .principle { box-shadow: none; }
.journey-step:hover { box-shadow: none; transform: translateY(-3px); }
.stake-ico { box-shadow: none; }
.stake-grid article:hover .stake-ico { box-shadow: none; }

/* --- Balance -------------------------------------------------------------- */
.cred-grid { grid-template-columns: minmax(260px, .9fr) minmax(0, 1.5fr); }
.cred-quote { margin-bottom: var(--sp-5); }
.cred-bio { margin-bottom: var(--sp-5); }
.leak .lead, .method-head .lead { max-width: 60ch; }
.next-steps { gap: var(--sp-2); line-height: 1.5; }

/* ==========================================================================
   V12 (2026-08-13) — restructure. Ten sections became six.
   bridge folded into the hero · the mullet reveal became the closing beat of
   the method · keynote + secret track merged into one "also" band placed
   before the ask · the forwardable paragraph and the CTA merged into one
   close, because forwarding and replying are the two things a referred reader
   actually does.
   Also fixes a real bug: the section class was .cred, which collided with the
   legacy .cred rule for the old hero credibility line (max-width: 760px), so
   the whole section was rendering 760px wide inside a 1280px page.
   ========================================================================== */

/* --- Section surfaces ---------------------------------------------------- */
.credibility { background: var(--manila); border-top: 3px solid var(--ink); }
.also { background: var(--paper2); border-top: 3px solid var(--ink); }
.close { background: var(--ink); color: var(--paper2); border-top: 3px solid var(--ink); }
.close h2, .close h3 { color: var(--paper2); }
.close .eyebrow { color: var(--manila); }
.close .eyebrow .dot { background: var(--red); border-color: var(--manila); }

/* --- Containers (new names) --------------------------------------------- */
.hero .wrap, .method .wrap, .credibility .wrap, .also .wrap, .close .wrap {
  container-type: inline-size;
}
@container (max-width: 820px) {
  .hero-grid, .cred-grid, .close-grid, .mullet, .also-grid { grid-template-columns: 1fr; }
  .cred-portrait { max-width: 300px; }
}

/* --- Hero: the referral bridge, now part of the fold's section ----------- */
.hero .bridge-inner { margin-top: clamp(52px, 5.5vw, 88px); }

/* --- The mullet reveal, as the method's last beat ------------------------ */
.mullet {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 56px); align-items: start;
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 3px solid var(--line);
}
.mullet-title {
  margin: 0; font-size: var(--fs-display); font-weight: 900;
  line-height: 1.0; letter-spacing: -.025em;
}
.mullet-copy p { margin: 0 0 var(--sp-3); font-size: var(--fs-lead); color: var(--ink-70); }
.mullet-name strong { font-weight: 900; color: var(--ink); }

/* --- The also band: two secondary paths, one row ------------------------ */
.also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-grid); }
.also-card {
  display: grid; align-content: start; gap: var(--sp-3);
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: var(--pad-card);
}
.also-card h3, .also-card p { margin: 0; }
.also-card p { color: var(--ink-70); }
.also-card .button, .also-card .play-cta { justify-self: start; margin-top: var(--sp-2); }
.also-dark h3 { color: var(--paper2); }
.also-dark p { color: var(--on-dark); }
.also-dark .eyebrow { color: var(--manila); }
.also-dark .eyebrow .dot { background: var(--red); border-color: var(--manila); }
.also-dark .neon { color: var(--red); text-shadow: none; }
.also-dark .eq-deco { justify-content: flex-start; margin: var(--sp-2) 0 0; }

/* --- The close: forward it, or talk ------------------------------------- */
.close-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 3.4vw, 64px); align-items: start; margin-top: var(--sp-6);
}
.close-share {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: clamp(26px, 2.8vw, 42px);
}
.close-share h3 { color: var(--ink); margin-bottom: var(--sp-2); }
.close-share .fwd-quote { margin-top: var(--sp-4); padding-top: var(--sp-4); }
.close-share .fwd-note { margin: var(--sp-4) 0 0; }
.close-talk h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.close-talk p { color: var(--on-dark); margin: 0 0 var(--sp-4); }
.close-talk .next-steps { margin: 0 0 var(--sp-5); }
.close-talk .reassure { color: var(--paper2); margin-top: var(--sp-3); }
.close-talk .cta-main { max-width: 460px; }

/* ==========================================================================
   V13 (2026-08-13) — the real logo, the rock hand back in Side B, the
   equalizer to the right of the play control, and that control sized to match
   the button beside it.
   ========================================================================== */

/* --- Logo ---------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 60px; width: auto; }
.nav { min-height: 92px; }
.footer-logo { height: 74px; width: auto; margin-bottom: var(--sp-2); }
@media (max-width: 640px) { .brand-logo { height: 46px; } .nav { min-height: 76px; } }
.also-dark > * { position: relative; z-index: 1; }
.also-dark .ghost {
  position: absolute; z-index: 0; top: -18px; right: -12px;
  font-size: 132px; line-height: 1; opacity: .08;
  pointer-events: none; user-select: none;
}

/* --- The play control: same size as the button it sits beside ------------ */
.play-cta {
  min-height: 50px; padding: 13px 22px; gap: 10px;
  font-size: var(--fs-small); font-weight: 700;
  box-shadow: var(--sh-1);
}
.play-cta:hover { box-shadow: 2px 2px 0 var(--paper2); }
.play-tri { border-width: 8px 0 8px 13px; }

/* --- Button and equalizer on one row, with room between them ------------ */
.play-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-2);
}
.also-dark .play-row .eq-deco { margin: 0; justify-content: flex-end; height: 24px; }
.also-dark .play-row .eq-deco i { width: 4px; }

/* V14 — the logo needs presence to be legible as hand lettering, and the
   capture dots need a track or they read as stray specks. */
.brand-logo { height: 72px; }
.nav { min-height: 104px; }
@media (max-width: 640px) { .brand-logo { height: 48px; } .nav { min-height: 78px; } }
.capture::before {
  content: ""; position: absolute; left: 0; right: 10px; top: 6px;
  height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--paper2) 16%, transparent);
}

/* ==========================================================================
   V15 (2026-08-13) — the approved ten.
   ========================================================================== */

/* 6 + bigger: 320x193 asset (54KB, was 118KB) shown at 96px in the header.
   A WebP/AVIF pass would take this under 15KB but needs tooling we do not
   have locally, so this is the honest floor for now. */
.brand-logo { height: 96px; }
.nav { min-height: 128px; }
.footer-logo { height: 86px; }
@media (max-width: 900px) { .brand-logo { height: 72px; } .nav { min-height: 100px; } }
@media (max-width: 640px) { .brand-logo { height: 56px; } .nav { min-height: 84px; } }

/* 1 + 2: the widget gets width, and the dot grid goes 12 x 2 instead of 8 x 3,
   which is what closes the 87px hang between the columns. */
.hero-grid { grid-template-columns: minmax(0, 1.26fr) minmax(300px, .74fr); }
.hero h1 { font-size: clamp(30px, 2.98vw, 39px); }
.model-field { grid-template-columns: repeat(12, 1fr); gap: 7px; }
@media (max-width: 640px) { .model-field { grid-template-columns: repeat(8, 1fr); } }

/* 3: the result band, restacked. No wrapping middot at the start of a line. */
.model-result { display: grid; gap: 5px; font-size: var(--fs-label); }
.model-result li::after { content: none; }
.model-result li { display: flex; align-items: baseline; gap: 8px; }
.model-result li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 2px;
  background: var(--red); transform: translateY(-3px);
}

/* 4: one button ladder. Heights were 44 / 50 / 53 / 81. Now 44 / 52 / 72,
   driven by min-height with centred flex so padding cannot skew it. */
.button {
  min-height: 52px; padding: 8px 22px; line-height: 1.15;
  font-size: var(--fs-small);
}
.button.lg, .button.cta-main { min-height: 72px; padding: 10px 28px; font-size: var(--fs-h3); }
.play-cta { min-height: 52px; padding: 8px 22px; line-height: 1.15; }
.pill { min-height: 44px; display: inline-flex; align-items: center; }

/* 7: Side B on a light surface, so the close is the only dark block */
.also-b { background: var(--manila); color: var(--ink); }
.also-b h3 { color: var(--ink); }
.also-b p { color: var(--ink-70); }
.also-b .eyebrow { color: var(--ink-70); }
.also-b .eyebrow .dot { background: var(--red); border-color: var(--ink); }
.also-b .neon { color: var(--red); text-shadow: none; }
.also-b .play-cta { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.also-b .play-cta:hover { box-shadow: 2px 2px 0 var(--ink); }
.also-b .play-tri { border-color: transparent transparent transparent var(--paper2); }
.also-b { position: relative; overflow: hidden; }
.also-b > * { position: relative; z-index: 1; }
.also-b .ghost {
  position: absolute; z-index: 0; top: -16px; right: -10px;
  font-size: 128px; line-height: 1; opacity: .1;
  pointer-events: none; user-select: none;
}
.also-b .play-row .eq-deco { justify-content: flex-end; margin: 0; height: 24px; }
.also-b .play-row .eq-deco i { width: 4px; background: var(--red); }
.also-b .play-row .eq-deco i:nth-child(even) { background: var(--ink); }

/* 8: the method was 1684px, roughly double every other section. Tightened
   without collapsing the rhythm. */
.method .journey { margin-top: var(--sp-5); }
.method .owns { margin-top: var(--sp-6); }
.method .stake { margin-top: var(--sp-6); padding-top: var(--sp-5); }
.method .mullet { margin-top: var(--sp-6); padding-top: var(--sp-5); }
.method-head .lead { max-width: 56ch; }

/* V16 — closing the last of the hero hang: the restacked result band cost back
   some of what the 12x2 dot grid saved, so the widget's internal padding comes
   in a notch. 87px -> 51px -> ~25px. */
.model-switch { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.model-stage { padding: 14px var(--sp-4); }
.model-result { padding: 12px var(--sp-4); }
.model-caption { padding: 0 var(--sp-4) var(--sp-3); }

/* ==========================================================================
   V17 (2026-08-13) — photography, the marks, the outcome grid's new home,
   a toggle affordance, and the bullet bug.
   ========================================================================== */

/* BUG: V10 set .model-result li + li::before to none to stop a wrapping
   middot. V15 then used ::before for the red tick, so only the first of the
   three lines had one. */
.model-result li + li::before { content: ""; }
.room img {
  width: 100%; height: auto; display: block;
  border: 3px solid var(--paper2); border-radius: var(--r-lg);
}
.room figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-small);
  color: var(--on-dark); max-width: 60ch;
}
.leak .stake { border-top-color: color-mix(in srgb, var(--paper2) 22%, transparent); }
.leak .stake-label { color: var(--manila); }
.leak .stake-grid article { background: var(--ink-card); border-color: color-mix(in srgb, var(--paper2) 15%, transparent); }
.leak .stake-grid span { color: var(--manila); }
.leak .stake-grid strong { color: var(--paper2); }
.leak .stake-ico { border-color: color-mix(in srgb, var(--paper2) 22%, transparent); color: var(--manila); background: transparent; }
.leak .stake-grid article:hover .stake-ico { background: var(--red); border-color: var(--red); color: var(--paper2); }
.also-photo > *:not(.also-img) { margin-left: var(--pad-card); margin-right: var(--pad-card); }
.also-photo > .eyebrow { margin-top: var(--pad-card); }
.also-photo > .button { margin-bottom: var(--pad-card); }

/* --- The marks: square tiles, contain, nothing cropped ------------------ */
.marks { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 3px dashed var(--line); }
.marks-label {
  margin: 0 0 var(--sp-4); font-size: var(--fs-label); font-weight: 900;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-70);
}
.marks-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap-grid);
}
.marks-grid li { display: grid; gap: var(--sp-2); justify-items: start; }
.marks-grid img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: var(--paper2); border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 10px;
  transition: transform .2s ease;
}
.marks-grid li:hover img { transform: translateY(-3px); }
.marks-grid span { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-70); }

/* --- The toggle affordance ---------------------------------------------- */
.model-switch { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .model-switch.is-nudging label[for="mv-real"] {
    animation: nudge 1.6s ease-in-out 2;
  }
}
@keyframes nudge {
  0%, 100% { background: var(--paper); }
  50% { background: color-mix(in srgb, var(--red) 18%, var(--paper)); }
}

/* ==========================================================================
   V18 (2026-08-13) — BUG: every collapse rule below was being overridden.
   The @container blocks were declared before the two-column base rules, and
   at equal specificity the later declaration wins regardless of the query.
   That is why the close section stayed two columns at 375px, with the
   forwardable paragraph 107px wide. All collapse rules now live at the end of
   the file, after every base rule they need to beat.
   ========================================================================== */
@container (max-width: 820px) {
  .hero-grid, .cred-grid, .close-grid, .mullet, .also-grid { grid-template-columns: 1fr; }
  .cred-portrait { max-width: 300px; }
  .keynote-inner .button { width: 100%; }
}
@container (max-width: 560px) {
  .close-share, .fwd-card { padding: clamp(20px, 5vw, 28px); }
  .marks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero-grid, .cred-grid, .close-grid, .mullet, .also-grid, .closing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .close-talk .cta-main { max-width: none; }
  .fold-proof { grid-template-columns: 1fr; gap: var(--sp-3); }
  .room img { border-radius: var(--r-md); }
}

/* ==========================================================================
   V19 (2026-08-13) — contrast. Measured with canvas-resolved colours and
   alpha compositing, so color-mix() surfaces are counted properly.
   12 failures against WCAG AA:
   - cream on --red buttons was 4.14 (needs 4.5) in three places
   - .leak-step red on the dark cards was 3.69 (needs 4.5)
   - .j-num at --ink-45 was 2.87 on paper and 2.48 on manila (needs 3.0)
   - the footer legal line at --ink-45 was 2.87 (needs 4.5)
   Two functional shades of the same hue, plus two tint corrections.
   ========================================================================== */
:root {
  --red-ink: #bf3a29;   /* filled interactive surfaces */
  --red-lift: #ea7565;  /* red labels on ink surfaces */
}
.button.primary, .primary, .play-cta, .button.is-done { background: var(--red-ink); }
.leak .leak-step { color: var(--red-lift); }
.j-num { color: var(--ink-70); }
footer .legal { color: var(--ink-70); }

.marks { margin-top: var(--sp-6); padding-top: var(--sp-4); }
.marks-grid {
  display: flex; flex-wrap: nowrap; gap: var(--sp-3);
  grid-template-columns: none;
}
.marks-grid li { display: block; flex: 0 0 auto; }
.marks-grid img {
  width: 62px; height: 62px; aspect-ratio: 1;
  padding: 6px; border-width: 2px; border-radius: var(--r-sm);
  object-fit: contain;
}
@media (max-width: 640px) {
  .marks-grid { gap: var(--sp-2); }
  .marks-grid img { width: 54px; height: 54px; padding: 5px; }
}
/* ==========================================================================
   V21 (2026-08-13) — BUG: the logo was distorted on mobile, not just small.
   .brand is a flex item with flex: 0 1 auto, and img carries max-width: 100%,
   so the width collapsed while height stayed fixed and object-fit: fill
   stretched the bitmap. Rendered ratio was 1.356 against a natural 1.658,
   an 18% horizontal squeeze. Locked the ratio and stopped the shrink.
   ========================================================================== */
.brand { flex: 0 0 auto; }
.brand-logo, .footer-logo {
  width: auto; max-width: none;
  aspect-ratio: 320 / 193;
  object-fit: contain;
}
@media (max-width: 900px) { .brand-logo { height: 76px; } .nav { min-height: 104px; } }
@media (max-width: 640px) { .brand-logo { height: 68px; } .nav { min-height: 92px; } .footer-logo { height: 72px; } }
@media (max-width: 400px) { .brand-logo { height: 60px; } .nav { min-height: 84px; gap: 12px; } }

/* ==========================================================================
   V22 (2026-08-13) — the fold, reworked.
   The three facts were a footnote row at the bottom of the fold, competing
   with the widget beside them. They are now a designed band of their own, and
   the referral bridge moved up into the fold where a forwarded reader meets it
   first, which is also what keeps the left column from going empty.
   ========================================================================== */

/* the bridge, now inside the fold's column */
.hero-copy .bridge-inner {
  margin: var(--sp-5) 0 0;
  border-left: 5px solid var(--red);
  padding-left: var(--sp-4);
  max-width: 54ch;
}
.hero-copy .bridge-label { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.24; margin-bottom: var(--sp-2); }
.hero-copy .bridge-copy { font-size: var(--fs-body); max-width: none; }
.hero-copy .bridge-sig { margin-top: var(--sp-3); font-size: var(--fs-label); }
.hero-copy .bridge-sig::before { width: 20px; margin-right: 9px; }
.proofbar-grid > div {
  padding: 0 clamp(18px, 2.4vw, 36px);
  border-left: 3px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.proofbar-grid > div:first-child { padding-left: 0; border-left: 0; }
.proofbar-grid > div:last-child { padding-right: 0; }
.proofbar b {
  display: block; font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 900; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.proofbar span {
  display: block; font-size: var(--fs-small); font-weight: 400;
  line-height: 1.45; color: var(--ink-70); max-width: 30ch;
}
@media (max-width: 760px) {
  .proofbar-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .proofbar-grid > div { padding: 0 0 var(--sp-4); border-left: 0; border-bottom: 3px solid color-mix(in srgb, var(--ink) 16%, transparent); }
  .proofbar-grid > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .proofbar b { font-size: clamp(30px, 9vw, 40px); }
  .proofbar span { max-width: none; }
}

/* ==========================================================================
   V23 (2026-08-13) — navigation restored across all three pages, and the two
   sub-pages get a real interactive component built from the same parts as the
   hero widget: a segmented control driving panels, CSS only via :has().
   ========================================================================== */

/* nav has five links now, so it needs to breathe and to wrap gracefully */
.links { gap: clamp(12px, 1.4vw, 20px); }
.nav-text { gap: clamp(12px, 1.4vw, 20px); flex-wrap: wrap; }
@media (max-width: 1080px) { .links a { font-size: var(--fs-label); } }

/* --- The stepper -------------------------------------------------------- */
.stepper {
  margin: 0 0 var(--sp-6);
  background: var(--paper2);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.step-switch {
  position: relative; display: flex; border: 0; margin: 0;
  padding: var(--sp-4) var(--sp-4) 0; gap: 0;
}
.step-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.step-switch label {
  flex: 1; text-align: center; cursor: pointer;
  padding: 12px 10px; line-height: 1.2;
  background: var(--paper); border: 2px solid var(--ink);
  font-size: var(--fs-micro); font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
.step-switch label:first-of-type { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.step-switch label:last-of-type { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.step-switch label:not(:first-of-type) { border-left-width: 0; }
.stepper:has(#ppp-1:checked) label[for="ppp-1"],
.stepper:has(#ppp-2:checked) label[for="ppp-2"],
.stepper:has(#ppp-3:checked) label[for="ppp-3"],
.stepper:has(#room-1:checked) label[for="room-1"],
.stepper:has(#room-2:checked) label[for="room-2"],
.stepper:has(#room-3:checked) label[for="room-3"] { background: var(--ink); color: var(--paper2); }

.step-panels { padding: var(--sp-5) var(--sp-4) var(--sp-5); }
.step-panel { display: none; }
.stepper:has(#ppp-1:checked) .step-panel[data-step="1"],
.stepper:has(#ppp-2:checked) .step-panel[data-step="2"],
.stepper:has(#ppp-3:checked) .step-panel[data-step="3"],
.stepper:has(#room-1:checked) .step-panel[data-step="1"],
.stepper:has(#room-2:checked) .step-panel[data-step="2"],
.stepper:has(#room-3:checked) .step-panel[data-step="3"] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .step-panel { animation: none; }
  .stepper .step-panel[data-step] { animation: step-in .34s ease both; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.step-where {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2);
  font-size: var(--fs-label); font-weight: 900;
  letter-spacing: .11em; text-transform: uppercase;
}
.step-where::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ink);
}
.step-back { color: var(--ink-70); }
.step-back::before { background: var(--ink); }
.step-front { color: var(--red-ink); }
.step-front::before { background: var(--red-ink); }
.step-panel h3 { margin-bottom: var(--sp-2); }
.step-panel p { margin: 0; max-width: 62ch; color: var(--ink-70); }
.step-switch.is-nudging label:nth-of-type(2) { animation: nudge 1.6s ease-in-out 2; }

/* --- FAQ: animate the disclosure instead of snapping ------------------- */
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* V24 — the bridge overcorrected the fold: the copy column went from 90px
   shorter than the widget to 90px taller. Tightening it splits the difference. */
.hero-copy .bridge-inner { margin-top: var(--sp-4); border-left-width: 4px; padding-left: var(--sp-3); }
.hero-copy .bridge-label { font-size: clamp(17px, 1.35vw, 19px); }
.hero-copy .bridge-copy { font-size: var(--fs-small); }

/* V25 — BUG: V10's trailing separator was still live, so the restacked result
   band rendered "Less spray and pray ·" with a stray middot after two of the
   three lines. The ticks come from ::before now, so the ::after must go. */
.model-result li:not(:last-child)::after { content: none; }

/* V26 — the stepper needs introducing rather than appearing unannounced */
.stepper-intro { margin-bottom: var(--sp-3); }
.stepper { margin-bottom: var(--sp-7); }

/* V27 — the two cards in the also band are equal height, but their content is
   not, so the buttons sat at different heights. Pushing both to the bottom of
   their card puts them on one line. */
.also-card { display: flex; flex-direction: column; align-items: stretch; }
.also-card > .button, .also-card > .play-row { margin-top: auto; }
.also-card > .play-row { padding-top: var(--sp-2); }
.also-card > .button { align-self: flex-start; }
.also-card > .play-row { padding-top: 0; }

/* ==========================================================================
   V28 (2026-08-13) — two bugs, the numbers rehoused, and the toggle fixed for
   mobile.
   ========================================================================== */

/* BUG: V10's separator rule set opacity .55, and V15 reused ::before for the
   red tick, so ticks two and three rendered at 55% while the first was full
   strength. Measured 1 / 0.55 / 0.55. */
.model-result li + li::before { opacity: 1; }

/* BUG: .j-kicker was pinned to nowrap and measured exactly its container
   width (199px of 199px) on the four-up journey. One font metric away from
   breaking out of the card. It wraps now. */
.j-kicker { text-wrap: balance; white-space: normal; }

/* --- The numbers, in Why Scott where credibility belongs ---------------- */
.cred-stats {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0 0 var(--sp-5);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-bottom: 3px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.cred-stats li {
  padding: 0 clamp(16px, 2vw, 30px);
  border-left: 3px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.cred-stats li:first-child { padding-left: 0; border-left: 0; }
.cred-stats li:last-child { padding-right: 0; }
.cred-stats b {
  display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 900;
  line-height: 1; letter-spacing: -.03em; margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.cred-stats span { display: block; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-70); }
@media (max-width: 760px) {
  .cred-stats { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cred-stats li { padding: 0 0 var(--sp-4); border-left: 0; border-bottom: 3px solid color-mix(in srgb, var(--ink) 16%, transparent); }
  .cred-stats li:last-child { padding-bottom: 0; border-bottom: 0; }
}

@media (max-width: 560px) {
  /* two long labels side by side at 335px was the problem. Stacked, they read. */
  .model-switch { flex-direction: column; padding-bottom: 0; }
  .model-switch label { text-wrap: normal; padding: 11px 12px; text-align: left; }
  .model-switch label:first-of-type { border-radius: var(--r-md) var(--r-md) 0 0; }
  .model-switch label:last-of-type { border-radius: 0 0 var(--r-md) var(--r-md); border-left-width: 2px; border-top-width: 0; }
  .step-switch { flex-direction: column; }
  .step-switch label:first-of-type { border-radius: var(--r-md) var(--r-md) 0 0; }
  .step-switch label:last-of-type { border-radius: 0 0 var(--r-md) var(--r-md); }
  .step-switch label:not(:first-of-type) { border-left-width: 2px; border-top-width: 0; }
}

/* V29 — the reveal line breaks where the joke lands, the marks are links, and
   they were too small on desktop (62px) while fine on mobile. */
.mullet-name .l + .l { margin-top: 4px; }
.horns { font-size: 1.05em; margin-left: 2px; }

.marks-grid { gap: clamp(12px, 1.4vw, 20px); }
.marks-grid a { display: block; line-height: 0; border-radius: var(--r-sm); }
.marks-grid img {
  width: clamp(62px, 7vw, 96px); height: auto; aspect-ratio: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.marks-grid a:hover img { transform: translateY(-3px); box-shadow: var(--sh-1); }
.marks-grid a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (max-width: 640px) { .marks-grid img { width: 54px; } }

/* ==========================================================================
   V30 (2026-08-13) — one visual vocabulary, so a reader can tell pain from
   solution from outcome without reading a word.
     pain      dark surface, red, a mark that escapes
     fix       light card, numeral, forward motion
     outcome   light card, icon in a tile, no red
   The outcome grid was on the dark pain surface, which contradicted its own
   copy, so it has moved back to the method section.
   ========================================================================== */

/* --- Pain: a leak, drawn the same way three times ----------------------- */
.leak-mark {
  display: flex; align-items: center; gap: 6px;
  height: 24px; margin-bottom: clamp(14px, 1.6vw, 20px);
}
.leak-mark i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red-lift); flex: 0 0 auto;
}
.leak-mark i:nth-child(2) { opacity: .55; width: 7px; height: 7px; }
.leak-mark i:nth-child(3) { opacity: .3; width: 6px; height: 6px; }
.leak-mark i:nth-child(4) { opacity: .14; width: 5px; height: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .leak-mark i { animation: leak-fade 3.2s ease-in-out infinite; }
  .leak-mark i:nth-child(2) { animation-delay: .25s; }
  .leak-mark i:nth-child(3) { animation-delay: .5s; }
  .leak-mark i:nth-child(4) { animation-delay: .75s; }
}
@keyframes leak-fade {
  0%, 70%, 100% { transform: none; }
  35% { transform: translateX(5px); }
}
.leak-grid article:hover .leak-mark i { background: var(--red-lift); }

/* --- Fix: forward motion on each step ----------------------------------- */
.j-kicker { display: flex; align-items: baseline; gap: 7px; }
.j-kicker::after {
  content: "→"; font-size: 1.05em; color: var(--red-ink);
  transition: transform .2s ease;
}
.journey-step:hover .j-kicker::after { transform: translateX(3px); }

/* --- Outcome: back on the light side, no red ---------------------------- */
.method .stake { border-top: 3px dashed var(--line); }
.method .stake-grid article { background: var(--paper2); }
.method .stake-ico { background: var(--manila); color: var(--ink); border-color: var(--ink); }
.method .stake-grid article:hover .stake-ico { background: var(--ink); border-color: var(--ink); color: var(--paper2); }

/* V31 — the marks live under Scott's photo now, as a 2x2 block so they can
   stay large in a narrow column, and the caption reads at a proper size. */
.cred-portrait { display: grid; gap: var(--sp-3); }
.cred-portrait figcaption { margin-top: var(--sp-2); }
.cred-portrait b { font-size: var(--fs-h3); line-height: 1.1; margin-bottom: 2px; }
.cred-portrait span { font-size: var(--fs-body); color: var(--ink-70); }

.cred-portrait .marks { margin: var(--sp-3) 0 0; padding-top: var(--sp-4); border-top: 3px dashed var(--line); }
.cred-portrait .marks-label { margin-bottom: var(--sp-3); }
.cred-portrait .marks-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); flex-wrap: initial;
}
.cred-portrait .marks-grid li { display: block; }
.cred-portrait .marks-grid img { width: 100%; height: auto; max-width: 104px; }
@media (max-width: 820px) {
  .cred-portrait .marks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cred-portrait .marks-grid img { max-width: none; }
}

/* V32 — spacing audit: the credibility heading was sitting flush on the stats
   block (0px). Everything else measured clean. */
.cred-stats { margin-top: var(--sp-6); }

/* ==========================================================================
   V33 (2026-08-13) — type rebalance across all three pages.
   The base was 17px with secondary copy at 15px and 13px, which is below a
   comfortable reading size for 2026, and the display step had drifted to 58px
   against a 40px h2, so the top and bottom of the scale were both wrong.
   Base moves to 18px, secondary to 16px, and the display step comes down so
   the ladder reads as one system.
   ========================================================================== */
:root {
  --fs-label: 12px;
  --fs-micro: 14px;
  --fs-small: 16px;
  --fs-body: 18px;
  --fs-lead: clamp(19px, 1.45vw, 22px);
  --fs-h3: clamp(21px, 1.95vw, 26px);
  --fs-h2: clamp(30px, 3.3vw, 42px);
  --fs-h1: clamp(34px, 3.05vw, 44px);
  --fs-display: clamp(34px, 3.9vw, 50px);
}

/* copy that was reading as fine print is body copy */
.next-steps, .cred-list li, .leak-grid p, .journey-step p, .stake-grid strong,
.model-caption, .also-card p, .step-panel p, .card p, .marks-label { font-size: var(--fs-body); }
.next-steps { line-height: 1.5; }
.fwd-note, .marks-grid span, .cred-portrait figcaption { font-size: var(--fs-small); }
.leak-grid p, .journey-step p, .also-card p, .step-panel p { line-height: 1.5; }

/* the reveal headline was 58px against a 42px h2. It leads, it does not shout. */
.mullet-title { font-size: var(--fs-display); }
.cred-quote { font-size: clamp(22px, 2.4vw, 29px); }

/* --- The forwardable card was too tall ---------------------------------- */
/* the paragraph carried 1.58 leading at up to 23px on a 58ch measure, and the
   note sat on its own line below the buttons. */
.close-share { padding: clamp(24px, 2.4vw, 34px); }
.close-share .fwd-quote {
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 52ch;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
}
.close-share .fwd-actions {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  align-items: center; gap: var(--sp-3);
}
.close-share .fwd-note { margin: 0; flex: 1 1 14ch; min-width: 14ch; max-width: none; }

/* --- Journey arrows: right where the flow is horizontal, down where it is
       vertical. The axis of progression changes at the breakpoint. -------- */
.j-kicker::after { display: inline-block; transition: transform .2s ease; }
@media (max-width: 820px) {
  .j-kicker::after { content: "↓"; }
  .journey-step:hover .j-kicker::after { transform: translateY(3px); }
}

/* V34 — the last labels below the scale floor. 10.5px uppercase was unreadable
   at arm's length; nothing sits under 12px now except decorative watermarks. */
.stake-grid span, .cred-list span, .model-top span, .model-stage span,
.marks-label, .stake-label, .leak-step, .j-kicker, .step-where { font-size: var(--fs-label); }

/* V35 — contrast on the sub-pages. Three legacy rules outranked the accessible
   action colour at higher specificity, so they were still shipping --red:
     .closing .button.primary   cream on red, 4.14, needs 4.5
     .eyebrow.red               12px red on manila, 4.14
     .principle.front .where    12px red on manila, 3.31
   All three now use --red-ink. */
.closing .button.primary, .closing .primary { background: var(--red-ink); }
.eyebrow.red, .principle.front .where, .principle b { color: var(--red-ink); }

/* V36 — the sub-page closings had a lone button sitting in an empty second
   column, top-aligned against tall copy. One column, action under the copy. */
.closing-single { max-width: 68ch; }
.closing-single .cta-main { max-width: 420px; margin-top: var(--sp-5); }
.closing-single .reassure { margin-top: var(--sp-3); }
.closing-single .secret-tease { margin-top: var(--sp-4); }
.closing .secret-tease a { color: var(--yellow); }

/* V37 — the last two contrast failures, both legacy and both on the sub-pages.
   .album-card .eyebrow was still --red on paper2 (4.14/4.5) and
   .principle.front .where was --red-ink on manila (4.29/4.5), still short
   because manila is a light surface. Small red type needs the darker action
   red on paper, and on manila it needs ink. */
.album-card .eyebrow { color: var(--red-ink); }
.principle.front .where { color: var(--ink); }
.j-kicker, .leak-step { color: var(--red-ink); }
.leak .leak-step { color: var(--red-lift); }
.faq summary::after { color: var(--red-ink); }
/* small red type anywhere on a light surface uses the action red */
.eyebrow.red, .red-label { color: var(--red-ink); }

/* V38 — the forwardable paragraph was still reading large in a narrow column,
   and the marks under the portrait go in one row of four rather than 2x2. */
.close-share .fwd-quote { font-size: var(--fs-body); line-height: 1.55; max-width: 54ch; }
.close-share h3 { font-size: var(--fs-h3); }

.cred-portrait .marks-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 10px);
}
.cred-portrait .marks-grid img { width: 100%; max-width: none; padding: 5px; border-width: 2px; }
@media (max-width: 820px) {
  .cred-portrait .marks-grid { gap: var(--sp-2); }
}

/* ==========================================================================
   V39 (2026-08-13) — the portrait crossfades to the mullet shot.
   Hover on pointer devices, tap on touch. Touch gets a visible cue, because a
   tap target nobody can see is worse than no interaction at all. The cue shows
   on both, so desktop gets the hint too.
   ========================================================================== */
.portrait-swap { position: relative; display: block; line-height: 0; }
.portrait-swap img {
  width: 100%; height: auto; display: block;
  background: var(--paper2); border: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.portrait-b {
  position: absolute; inset: 0; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .portrait-swap:hover .portrait-b { opacity: 1; }
}
.portrait-swap:has(#mullet-swap:checked) .portrait-b { opacity: 1; }

.portrait-cue {
  position: absolute; right: 10px; bottom: 10px;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--paper2); border: 3px solid var(--ink);
  border-radius: var(--r-pill); box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cue-horns { font-size: 20px; }
.portrait-cue:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.portrait-swap:has(#mullet-swap:checked) .portrait-cue { background: var(--red-ink); }
#mullet-swap:focus-visible + .portrait-a + .portrait-b + .portrait-cue,
.portrait-cue:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .portrait-b { transition: none; }
  .portrait-cue { transition: none; }
}
/* the figure no longer styles the img directly, the swap wrapper does */
.cred-portrait > img { display: none; }

/* ==========================================================================
   V40 (2026-08-13) — the top-to-bottom pass.
   ========================================================================== */

/* 1. The widget no longer changes height when you switch states. Both captions
      occupy the same grid cell, so the card is as tall as the longer one. */
.model-captions { display: grid; padding: 0 var(--sp-4) var(--sp-3); }
.model-caption {
  grid-area: 1 / 1; display: block; padding: 0; margin: 0;
  visibility: hidden; opacity: 0; transition: opacity .25s ease;
}
.model:has(#mv-today:checked) .model-caption[data-view="today"],
.model:has(#mv-real:checked) .model-caption[data-view="real"] { visibility: visible; opacity: 1; }

/* 3. the method: a proper measure, and fewer treatments inside the cards */
.method-head .lead, .method > .wrap > .lead { max-width: 68ch; }
.journey-step p { color: var(--ink-70); font-weight: 400; }
.journey-step h3 { color: var(--ink); }
.j-num { color: var(--ink-70); }
.j-kicker { color: var(--ink-70); }
.j-kicker::after { color: var(--red-ink); }

/* 4. the marks sit closer to the photo, and the column bottoms line up */
.cred-grid { align-items: stretch; }
.cred-portrait { grid-template-rows: auto auto 1fr; align-content: start; }
.cred-portrait .marks { margin-top: var(--sp-2); padding-top: var(--sp-3); }

/* 5 + 6. the forwardable card: no rules, and copy that is not touching buttons */
.close-share .fwd-quote { border-top: 0; padding-top: 0; margin-top: var(--sp-3); }
.close-share .fwd-actions { border-top: 0; padding-top: 0; margin-top: var(--sp-5); }
.close-share .fwd-note { margin-top: var(--sp-4); }
.close-talk .reassure { margin-top: var(--sp-4); }

/* 7. the footer aligns: links in a column on the right, a row when it stacks */
.footer-inner { align-items: start; }
.footer-links { display: grid; gap: 10px; justify-items: end; justify-content: end; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { grid-auto-flow: row; justify-items: start; justify-content: start; }
}

/* 8. mobile gutters were 12px a side, which put copy against the edge */
:root { --gutter: clamp(40px, 5vw, 88px); }
@media (max-width: 640px) {
  .next-steps { padding-left: 22px; }
  .next-steps li { padding-right: 4px; }
}