:root {
  --brand-gray: #5c6670;
  --brand-gray-rgb: 92, 102, 112;
  /* OPTION B — Standings/Sport: layers spread apart, blue carries. */
  --brand-blue: #1f6fd4;
  --brand-blue-rgb: 31, 111, 212;
  --bg: #c9d0d8;
  --surface: #dde3ea;
  --surface-strong: #f2f5f8;
  --surface-soft: #d4dbe3;
  --focus: #e7eff9;
  --text: #152029;
  --muted: #4b5560;
  --line: rgba(21, 32, 41, 0.16);
  --accent: var(--brand-blue);
  --accent-rgb: var(--brand-blue-rgb);
  --accent-soft: rgba(var(--brand-blue-rgb), 0.20);
  --pill: #cdd6e0;
  /* Soft blue ladder: steps between --bg and --brand-blue.
     Selectable surfaces live here so nothing reads black-on-white. */
  --step-1: #c2ccd9;
  --step-2: #aebdd0;
  --step-3: #93a8c4;
  --step-4: #6f8cb4;
  --ink-soft: #2c4562;
  --shadow: 0 30px 60px rgba(15, 25, 40, 0.14), 0 8px 16px rgba(15, 25, 40, 0.08);
  --shadow-soft: 0 12px 26px rgba(15, 25, 40, 0.12), 0 3px 7px rgba(15, 25, 40, 0.07);
  --radius-xl: 38px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 999px;
  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: 3px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 14%, rgba(245, 246, 248, 0.9), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(var(--accent-rgb), 0.05), transparent 24%),
    linear-gradient(180deg, rgba(245, 246, 248, 0.35), transparent 32%),
    var(--bg);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: auto -8vw 12vh auto;
  width: 36vw;
  height: 18vw;
  min-width: 420px;
  min-height: 220px;
  background:
    linear-gradient(
      90deg,
      transparent 0 8%,
      var(--accent) 8% 15%,
      transparent 15% 22%,
      var(--accent) 22% 31%,
      transparent 31% 44%,
      var(--accent) 44% 56%,
      transparent 56% 68%,
      var(--accent) 68% 100%
    );
  clip-path: polygon(0 70%, 10% 70%, 10% 56%, 22% 56%, 34% 18%, 46% 18%, 58% 72%, 70% 72%, 70% 46%, 84% 46%, 84% 78%, 100% 78%, 100% 100%, 0 100%);
  opacity: 0.98;
}

body::after {
  top: 8vh;
  left: -8vw;
  width: 28vw;
  height: 28vw;
  min-width: 280px;
  min-height: 280px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.55), transparent 64%);
}

body.bg-lineup-rails::before,
body.bg-decision-paths::before,
body.bg-constellation::before,
body.bg-orbit-rings::before,
body.bg-splash-ripples::before,
body.bg-splash-arc::before,
body.bg-surface-wake::before,
body.bg-splash-mist::before,
body.bg-lineup-rails::after,
body.bg-decision-paths::after,
body.bg-constellation::after,
body.bg-orbit-rings::after,
body.bg-splash-ripples::after,
body.bg-splash-arc::after,
body.bg-surface-wake::after,
body.bg-splash-mist::after {
  background: none;
  clip-path: none;
}

body.bg-lineup-rails::before,
.background-preview.preview-lineup-rails::before {
  inset: auto -6vw 10vh auto;
  width: min(48vw, 760px);
  height: min(28vw, 420px);
  min-width: 460px;
  min-height: 260px;
  background:
    radial-gradient(circle at 16% 11%, rgba(var(--accent-rgb), 0.34) 0 10px, transparent 11px),
    radial-gradient(circle at 24% 29%, rgba(var(--accent-rgb), 0.22) 0 9px, transparent 10px),
    radial-gradient(circle at 10% 47%, rgba(var(--accent-rgb), 0.16) 0 8px, transparent 9px),
    radial-gradient(circle at 17% 65%, rgba(var(--accent-rgb), 0.24) 0 8px, transparent 9px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.26)) 16% 10% / 72% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.18)) 24% 28% / 64% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.14)) 10% 46% / 78% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2)) 17% 64% / 58% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0.11)) 8% 82% / 46% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0)) 0 0 / 100% 100% no-repeat;
  opacity: 1;
}

body.bg-lineup-rails::after,
.background-preview.preview-lineup-rails::after {
  top: 10vh;
  left: -5vw;
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.72), transparent 64%);
}

body.bg-decision-paths::before,
.background-preview.preview-decision-paths::before {
  inset: auto -4vw 8vh auto;
  width: min(44vw, 700px);
  height: min(30vw, 440px);
  min-width: 420px;
  min-height: 260px;
  background:
    radial-gradient(circle at 14% 52%, rgba(var(--accent-rgb), 0.32) 0 10px, transparent 11px),
    radial-gradient(circle at 56% 24%, rgba(var(--accent-rgb), 0.26) 0 9px, transparent 10px),
    radial-gradient(circle at 73% 52%, rgba(var(--accent-rgb), 0.22) 0 9px, transparent 10px),
    radial-gradient(circle at 56% 80%, rgba(var(--accent-rgb), 0.28) 0 9px, transparent 10px),
    radial-gradient(circle at 90% 24%, rgba(var(--accent-rgb), 0.2) 0 9px, transparent 10px),
    radial-gradient(circle at 90% 52%, rgba(var(--accent-rgb), 0.16) 0 9px, transparent 10px),
    radial-gradient(circle at 90% 80%, rgba(var(--accent-rgb), 0.22) 0 9px, transparent 10px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.24)) 16% 51% / 20% 2px no-repeat,
    linear-gradient(138deg, transparent 47%, rgba(var(--accent-rgb), 0.18) 48% 52%, transparent 53%) 34% 30% / 26% 30% no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.18)) 56% 23% / 26% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.16)) 56% 51% / 18% 2px no-repeat,
    linear-gradient(42deg, transparent 47%, rgba(var(--accent-rgb), 0.18) 48% 52%, transparent 53%) 34% 50% / 26% 30% no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.18)) 56% 79% / 26% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0)) 0 0 / 100% 100% no-repeat;
  opacity: 1;
}

body.bg-decision-paths::after,
.background-preview.preview-decision-paths::after {
  top: 14vh;
  left: -6vw;
  width: 24vw;
  height: 24vw;
  min-width: 260px;
  min-height: 260px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.62), transparent 66%);
}

body.bg-constellation::before,
.background-preview.preview-constellation::before {
  inset: auto -4vw 10vh auto;
  width: min(44vw, 700px);
  height: min(30vw, 440px);
  min-width: 420px;
  min-height: 260px;
  background:
    linear-gradient(120deg, transparent 49%, rgba(var(--accent-rgb), 0.14) 50% 51%, transparent 52%) 18% 18% / 30% 22% no-repeat,
    linear-gradient(64deg, transparent 49%, rgba(var(--accent-rgb), 0.14) 50% 51%, transparent 52%) 42% 24% / 22% 28% no-repeat,
    linear-gradient(118deg, transparent 49%, rgba(var(--accent-rgb), 0.12) 50% 51%, transparent 52%) 22% 44% / 26% 24% no-repeat,
    linear-gradient(70deg, transparent 49%, rgba(var(--accent-rgb), 0.12) 50% 51%, transparent 52%) 48% 48% / 24% 28% no-repeat,
    linear-gradient(118deg, transparent 49%, rgba(var(--accent-rgb), 0.1) 50% 51%, transparent 52%) 62% 18% / 18% 22% no-repeat,
    radial-gradient(circle at 18% 20%, rgba(var(--accent-rgb), 0.3) 0 11px, transparent 12px),
    radial-gradient(circle at 42% 32%, rgba(var(--accent-rgb), 0.2) 0 9px, transparent 10px),
    radial-gradient(circle at 58% 21%, rgba(var(--accent-rgb), 0.26) 0 10px, transparent 11px),
    radial-gradient(circle at 29% 53%, rgba(var(--accent-rgb), 0.22) 0 9px, transparent 10px),
    radial-gradient(circle at 55% 58%, rgba(var(--accent-rgb), 0.16) 0 9px, transparent 10px),
    radial-gradient(circle at 74% 35%, rgba(var(--accent-rgb), 0.2) 0 8px, transparent 9px),
    radial-gradient(circle at 77% 70%, rgba(var(--accent-rgb), 0.28) 0 10px, transparent 11px);
  opacity: 1;
}

body.bg-constellation::after,
.background-preview.preview-constellation::after {
  top: 8vh;
  left: -5vw;
  width: 26vw;
  height: 26vw;
  min-width: 280px;
  min-height: 280px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.58), transparent 66%);
}

body.bg-orbit-rings::before,
.background-preview.preview-orbit-rings::before {
  inset: auto -12vw 6vh auto;
  width: min(48vw, 780px);
  height: min(38vw, 560px);
  min-width: 500px;
  min-height: 320px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 54% 52%, transparent 0 27%, rgba(var(--accent-rgb), 0.24) 27% 27.8%, transparent 27.8% 44%, rgba(var(--accent-rgb), 0.16) 44% 44.8%, transparent 44.8% 61%, rgba(var(--accent-rgb), 0.1) 61% 61.8%, transparent 61.8% 100%),
    radial-gradient(circle at 54% 52%, rgba(245, 246, 248, 0.24), transparent 56%);
  opacity: 1;
}

body.bg-orbit-rings::after,
.background-preview.preview-orbit-rings::after {
  top: 20vh;
  right: 20vw;
  left: auto;
  width: 140px;
  height: 140px;
  min-width: 140px;
  min-height: 140px;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.28) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(var(--accent-rgb), 0.18) 46% 48%, transparent 48% 100%);
}

body.bg-splash-ripples::before,
.background-preview.preview-splash-ripples::before {
  inset: auto -10vw 6vh auto;
  width: min(50vw, 820px);
  height: min(34vw, 520px);
  min-width: 520px;
  min-height: 320px;
  background:
    radial-gradient(circle at 58% 64%, transparent 0 10%, rgba(var(--accent-rgb), 0.22) 10% 10.8%, transparent 10.8% 20%, rgba(var(--accent-rgb), 0.14) 20% 20.8%, transparent 20.8% 31%, rgba(var(--accent-rgb), 0.08) 31% 31.8%, transparent 31.8% 100%),
    radial-gradient(circle at 75% 42%, transparent 0 6.5%, rgba(var(--accent-rgb), 0.14) 6.5% 7.2%, transparent 7.2% 13%, rgba(var(--accent-rgb), 0.08) 13% 13.7%, transparent 13.7% 100%),
    radial-gradient(circle at 48% 54%, rgba(var(--accent-rgb), 0.3) 0 8px, transparent 9px),
    radial-gradient(circle at 66% 28%, rgba(var(--accent-rgb), 0.18) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb), 0.14) 0 5px, transparent 6px),
    radial-gradient(circle at 86% 30%, rgba(var(--accent-rgb), 0.12) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0)) 0 0 / 100% 100% no-repeat;
  opacity: 1;
}

body.bg-splash-ripples::after,
.background-preview.preview-splash-ripples::after {
  top: 11vh;
  left: -5vw;
  width: 28vw;
  height: 28vw;
  min-width: 300px;
  min-height: 300px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.68), transparent 66%);
}

body.bg-splash-arc::before,
.background-preview.preview-splash-arc::before {
  inset: auto -6vw 8vh auto;
  width: min(46vw, 720px);
  height: min(28vw, 420px);
  min-width: 460px;
  min-height: 260px;
  background:
    radial-gradient(circle at 18% 72%, rgba(var(--accent-rgb), 0.26) 0 7px, transparent 8px),
    radial-gradient(circle at 28% 58%, rgba(var(--accent-rgb), 0.2) 0 6px, transparent 7px),
    radial-gradient(circle at 40% 44%, rgba(var(--accent-rgb), 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 54% 30%, rgba(var(--accent-rgb), 0.14) 0 5px, transparent 6px),
    radial-gradient(circle at 68% 22%, rgba(var(--accent-rgb), 0.12) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 32%, rgba(var(--accent-rgb), 0.1) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 78%, rgba(var(--accent-rgb), 0.1) 0 4px, transparent 5px),
    linear-gradient(145deg, transparent 47%, rgba(var(--accent-rgb), 0.16) 48% 50%, transparent 51%) 16% 38% / 70% 42% no-repeat,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0)) 0 0 / 100% 100% no-repeat;
  opacity: 1;
}

body.bg-splash-arc::after,
.background-preview.preview-splash-arc::after {
  top: 10vh;
  left: -5vw;
  width: 28vw;
  height: 28vw;
  min-width: 280px;
  min-height: 280px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.66), transparent 66%);
}

body.bg-surface-wake::before,
.background-preview.preview-surface-wake::before {
  inset: auto 0 7vh auto;
  width: min(50vw, 780px);
  height: min(24vw, 360px);
  min-width: 500px;
  min-height: 220px;
  background: radial-gradient(
    ellipse at 58% 66%,
    transparent 0 16%,
    rgba(var(--accent-rgb), 0.2) 16% 16.8%,
    transparent 16.8% 29%,
    rgba(var(--accent-rgb), 0.12) 29% 29.7%,
    transparent 29.7% 41%,
    rgba(var(--accent-rgb), 0.08) 41% 41.6%,
    transparent 41.6% 100%
  );
  opacity: 1;
}

body.bg-surface-wake::after,
.background-preview.preview-surface-wake::after {
  top: 12vh;
  left: -5vw;
  width: 30vw;
  height: 30vw;
  min-width: 280px;
  min-height: 280px;
  background: radial-gradient(circle, rgba(245, 246, 248, 0.78), transparent 68%);
}

body.bg-splash-mist::before,
.background-preview.preview-splash-mist::before {
  inset: auto -6vw 8vh auto;
  width: min(46vw, 720px);
  height: min(30vw, 420px);
  min-width: 460px;
  min-height: 260px;
  background:
    radial-gradient(circle at 18% 70%, rgba(var(--accent-rgb), 0.14) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 58%, rgba(var(--accent-rgb), 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 32% 64%, rgba(var(--accent-rgb), 0.1) 0 4px, transparent 5px),
    radial-gradient(circle at 38% 42%, rgba(var(--accent-rgb), 0.12) 0 4px, transparent 5px),
    radial-gradient(circle at 48% 54%, rgba(var(--accent-rgb), 0.08) 0 4px, transparent 5px),
    radial-gradient(circle at 56% 34%, rgba(var(--accent-rgb), 0.11) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 46%, rgba(var(--accent-rgb), 0.09) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 28%, rgba(var(--accent-rgb), 0.08) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 38%, rgba(var(--accent-rgb), 0.06) 0 4px, transparent 5px),
    radial-gradient(ellipse at 46% 58%, rgba(var(--accent-rgb), 0.08), transparent 56%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0)) 0 0 / 100% 100% no-repeat;
  opacity: 1;
}

body.bg-splash-mist::after,
.background-preview.preview-splash-mist::after {
  top: 10vh;
  left: -5vw;
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
  background: radial-gradient(circle, rgba(201, 208, 216, 0.7), transparent 68%);
}

.site-shell {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px 40px 108px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  padding: 18px 24px;
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 34px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(24, 21, 18, 0.035);
  backdrop-filter: blur(10px);
}

.topbar-home {
  margin-bottom: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  border-color: rgba(24, 21, 18, 0.06);
  background: var(--surface-soft);
  box-shadow: 0 8px 18px rgba(24, 21, 18, 0.02);
}

.topbar-subpage {
  margin-bottom: 28px;
  padding: 16px 22px;
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-text {
  display: grid;
  gap: 6px;
}

.brand-mark {
  display: block;
  width: 214px;
  height: auto;
}

.brand-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

.brand-subline {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 54%, transparent);
}

.brand-support {
  display: grid;
  gap: 4px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-home {
  gap: 12px;
}

.nav-subpage {
  gap: 10px 14px;
}

.nav a,
.nav span {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.93rem;
  letter-spacing: 0.02em;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
}

.nav-home a {
  padding: 7px 6px;
  font-size: 0.88rem;
}

.nav-subpage a {
  padding: 8px 6px;
  font-size: 0.88rem;
}

.nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.11);
}

.nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.nav .cta-link {
  color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 26%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  background: var(--step-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 16px rgba(28, 46, 68, 0.14);
}

.nav .cta-link:hover {
  background: var(--step-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 12px 22px rgba(28, 46, 68, 0.2);
}

.home-page .nav .cta-link {
  padding: 9px 16px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 420px);
  gap: 64px;
  align-items: end;
  min-height: 70vh;
  padding: 4vh 0 7vh;
}

.hero.hero-page {
  min-height: 0;
  align-items: start;
  padding: 1.5vh 0 5vh;
}

.hero.hero-page .hero-copy {
  padding-top: 0;
}

.hero.hero-page h1 {
  font-size: clamp(3rem, 4.6vw, 5rem);
  max-width: 19ch;
  line-height: 1;
  text-wrap: balance;
}

.about-page .hero.hero-page,
.products-page .hero.hero-page {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  min-height: 0;
  padding: 2vh 0 6vh;
}

.about-page .hero.hero-page .hero-copy,
.products-page .hero.hero-page .hero-copy {
  max-width: 56rem;
  padding-top: 0;
}

.about-page .hero.hero-page h1,
.products-page .hero.hero-page h1 {
  font-size: clamp(3.1rem, 5vw, 4.8rem);
  max-width: 19ch;
  line-height: 0.96;
  text-wrap: balance;
}

.about-page .hero.hero-page h1 {
  font-size: clamp(2.45rem, 3.6vw, 3.7rem);
  max-width: 34ch;
  line-height: 1.02;
}

.products-page .hero.hero-page h1 {
  font-size: clamp(2.45rem, 3.9vw, 3.85rem);
  max-width: 19ch;
  line-height: 0.99;
}

.hero-copy {
  max-width: 780px;
  padding-top: 7vh;
  min-width: 0;
}

.hero-home {
  position: relative;
  grid-template-columns: minmax(0, 1.12fr) minmax(290px, 340px);
  gap: 20px;
  align-items: start;
  min-height: 0;
  padding: 0 0 3.5vh;
}

.hero-home::before {
  content: "";
  position: absolute;
  inset: 26% 10% 14% 61%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 52%, rgba(var(--accent-rgb), 0.06), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(245, 246, 248, 0.36), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero-home .hero-copy {
  max-width: 720px;
  padding-top: 0;
}

.hero.hero-home h1 {
  font-size: clamp(2rem, 3.1vw, 3.35rem);
  max-width: 19ch;
  line-height: 1.04;
  text-wrap: balance;
}

.hero.hero-home > .hero-copy > p {
  max-width: 33rem;
  font-size: 1rem;
  line-height: 1.52;
}

.hero-copy-home {
  display: grid;
}

.hero .hero-copy-home > p {
  margin-bottom: 16px;
}

.hero-question-list {
  display: grid;
  gap: 10px;
  margin: 28px 0 28px;
  padding: 0;
  list-style: none;
  max-width: 38rem;
}

.hero-question-list li {
  position: relative;
  padding-left: 24px;
  color: color-mix(in srgb, var(--text) 76%, white 24%);
  line-height: 1.6;
}

.hero-question-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.46);
  transform: translateY(-50%);
}

.hero-proof-cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  max-width: 640px;
  margin-top: 34px;
}

.hero-proof-card {
  padding: 18px 18px 16px;
  border-radius: 24px;
  border: 1px solid rgba(24, 21, 18, 0.09);
  background: var(--surface-soft);
  box-shadow: none;
}

.hero-proof-card.is-lifted {
  transform: translateY(-10px);
}

.hero-proof-card.is-setback {
  transform: translateY(10px);
}

.hero-proof-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  margin-bottom: 10px;
}

.hero .hero-proof-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.58;
  color: color-mix(in srgb, var(--text) 72%, white 28%);
}

.hero-proof-tag {
  display: inline-flex;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-page .hero-proof-cluster {
  display: none;
}

.hero-collage {
  display: grid;
  gap: 12px;
  align-self: start;
  min-width: 0;
  margin-top: 4vh;
  padding: 12px;
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 28px;
  background: var(--surface-soft);
  box-shadow: 0 12px 24px rgba(24, 21, 18, 0.03);
  backdrop-filter: blur(12px);
}

.home-page .hero-collage {
  gap: 10px;
  margin-top: 3vh;
  padding: 10px;
}

.collage-anchor,
.collage-card {
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 24px;
}

.collage-anchor {
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, var(--surface-strong), rgba(246, 249, 247, 0.64));
}

.home-page .collage-anchor {
  padding: 14px 14px 12px;
}

.collage-kicker,
.collage-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.collage-kicker {
  color: color-mix(in srgb, var(--accent) 78%, white 22%);
  margin-bottom: 10px;
}

.hero .collage-anchor p,
.hero .collage-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.58;
  color: color-mix(in srgb, var(--text) 72%, white 28%);
}

.collage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.collage-grid-single {
  grid-template-columns: 1fr;
}

.collage-card {
  min-height: 0;
  padding: 15px;
  background: var(--surface);
}

.collage-label {
  color: color-mix(in srgb, var(--text) 78%, transparent);
  margin-bottom: 10px;
}

.collage-card-paige {
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(250, 243, 239, 0.72));
}

.collage-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 4px 2px 18px;
  color: color-mix(in srgb, var(--text) 76%, white 24%);
}

.home-page .collage-list {
  gap: 8px;
}

.collage-list li {
  line-height: 1.45;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--line);
}

.hero h1,
.section-heading h2,
.note-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  /* Cormorant's descenders (p, g, y) fall outside the line box below ~1.05, so a
     sub-1 leading lets them touch the line beneath. */
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* Homepage adoption stat cards — numeral only, brand blue (matches SPLASH wordmark). */
.homepage-adoption .note-card h3 {
  color: var(--brand-blue);
}

.hero h1 {
  font-size: clamp(3.4rem, 5.4vw, 5.8rem);
  max-width: 19ch;
  line-height: 1;
  text-wrap: balance;
}

.about-page .hero p,
.products-page .hero p {
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.hero p {
  max-width: 41rem;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 16px 0 22px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.home-page .hero-actions .button {
  min-width: 164px;
  padding: 12px 18px;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 16px;
}

.hero-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.hero-links a:hover {
  color: var(--accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.34);
}

.button,
.button-ghost,
.card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
  cursor: pointer;
}

.button,
.button-ghost {
  min-width: 176px;
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

/* One button treatment sitewide — no filled/ghost split. Same light accent-blue
   surface as .card-link, same hover, on every button on every page. */
.button,
.button-ghost {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 16px rgba(28, 46, 68, 0.08);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover,
.button-ghost:hover {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 12px 22px rgba(28, 46, 68, 0.12);
}

.button:hover,
.nav .cta-link:hover,
.card-link:hover,
.button-ghost:hover {
  transform: translateY(-1px);
}

.card-link:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 12px 24px rgba(24, 21, 18, 0.06);
}

.card-link {
  margin-top: 18px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(24, 21, 18, 0.04);
}

.concept-product .card-link {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.22);
  color: color-mix(in srgb, var(--text) 92%, var(--accent) 8%);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.07);
}

.concept-product .card-link:hover {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.1);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 720px;
  margin-top: 46px;
}

.hero-meta-home {
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 470px;
  margin-top: 44px;
  padding-left: 20px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.22);
}

.hero-meta-home .meta-block {
  padding-top: 0;
  border-top: 0;
}

.hero-meta-home .meta-label {
  color: var(--text);
}

.hero-meta-home .meta-value {
  color: color-mix(in srgb, var(--text) 74%, white 26%);
}

.meta-block {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.meta-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta-value {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 8px;
}

.panel {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-xl) 0 0;
  padding: 36px 34px 30px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 24px 0 0 24px;
  background: rgba(var(--accent-rgb), 0.42);
}

.panel .panel-mark {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 4px 0 18px;
}

.panel-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.panel-wordmark {
  display: block;
  width: 142px;
  height: auto;
  flex: 0 0 auto;
}

.panel-brand-copy {
  display: grid;
  gap: 4px;
}

.panel-brand-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-brand-copy .panel-mark {
  margin: 0;
}

.panel h2 {
  font-size: 1.58rem;
  line-height: 1.16;
  font-weight: 500;
  margin: 0 0 16px;
}

.panel p {
  margin: 0 0 18px;
  line-height: 1.65;
  color: var(--muted);
}

.panel .rule {
  height: 1px;
  background: var(--line);
  margin: 18px 0 20px;
}

.panel .field {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  margin-bottom: 18px;
}

.panel .panel-actions {
  display: grid;
  gap: 12px;
}

.panel-intro {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.panel-summary-stack {
  display: grid;
  gap: 14px;
}

.panel-summary-row {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.panel-summary-row strong {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-summary-row span {
  color: var(--muted);
  line-height: 1.55;
}

.panel-callout {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.08);
  color: color-mix(in srgb, var(--text) 80%, white 20%);
  line-height: 1.6;
}

.panel-home {
  padding: 30px 30px 28px;
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(246, 250, 248, 0.7));
}

.panel-home .panel-brand {
  margin-bottom: 18px;
}

.panel-home .panel-brand-copy {
  gap: 8px;
}

.panel-brand-minimal {
  display: block;
}

.panel-home .panel-mark {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--accent) 76%, white 24%);
}

.panel-home .panel-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.main-stack {
  display: grid;
  gap: 48px;
  margin-top: 12px;
}

.about-page .main-stack {
  gap: 34px;
}

.products-page .main-stack {
  gap: 34px;
}

.strip,
.section-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* Cards nested inside a .section-card step down one level so they read as a
   card against the section's surface, not a white void on a white void. */
.note-card,
.lane-card,
.proof-card,
.product-card,
.why-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.strip,
.section-card,
.note-card {
  border-radius: var(--radius-lg);
  min-width: 0;
}

.strip {
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.strip-title {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pill) 72%, white 28%);
  color: color-mix(in srgb, var(--text) 86%, white 14%);
  font-size: 0.9rem;
  border: 1px solid rgba(24, 21, 18, 0.06);
}

.section-card {
  padding: 44px;
}

.about-page .section-card {
  padding: 36px;
}

.products-page .section-card {
  padding: 36px;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 24px;
  align-items: start;
  margin-bottom: 34px;
}

/* Heading alone, no standfirst column — full width, single line where it fits. */
.section-heading-solo {
  grid-template-columns: 1fr;
}

.home-page .section-heading,
.about-page .section-heading,
.products-page .section-heading {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  margin-bottom: 24px;
}

/* Section headings that carry a kicker label (e.g. the products lanes) keep the
   kicker and headline stacked together in the wide column, with the standfirst
   moved to the side column. Without this the extra first child shifts the grid:
   the headline lands in the narrow column (cramped, over-wrapped) and the intro
   drops to a second row, opening a large empty gap above it. */
.section-heading:has(.mini-label) .mini-label,
.section-heading:has(.mini-label) h2 {
  grid-column: 1;
}
.section-heading:has(.mini-label) .mini-label {
  grid-row: 1;
}
.section-heading:has(.mini-label) h2 {
  grid-row: 2;
  margin-top: -8px;
}
.section-heading:has(.mini-label) p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.section-heading h2 {
  /* The floor has to stay well under the headline column's own width or long
     words overrun the grid track and print on top of the standfirst beside it. */
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.home-page .section-heading h2,
.about-page .section-heading h2,
.products-page .section-heading h2 {
  font-size: clamp(2.2rem, 3.2vw, 3.3rem);
  line-height: 1.06;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.lane-grid,
.proof-grid,
.product-grid,
.why-grid,
.service-grid {
  display: grid;
  gap: 20px;
}

.lane-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proof-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.why-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lane-card,
.proof-card,
.product-card,
.why-card {
  border-radius: 22px;
  padding: 30px;
}

.lane-card h3,
.product-card h3,
.why-card h3,
.service-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 500;
}

.lane-card p,
.proof-card p,
.product-card p,
.why-card p,
.service-card p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 72%, white 28%);
  line-height: 1.65;
}

.lane-label,
.proof-label,
.status,
.mini-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  margin-bottom: 16px;
}

.home-page .mini-label,
.home-page .proof-label,
.home-page .status,
.about-page .mini-label,
.about-page .proof-label,
.about-page .status,
.products-page .mini-label,
.products-page .proof-label,
.products-page .status {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--text) 64%, transparent);
}

.proof-label,
.mini-label,
.chip {
  cursor: default;
}

.status {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 68%, white 32%);
  color: var(--accent);
  letter-spacing: 0.14em;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.proof-card strong {
  display: block;
  font-size: 1.72rem;
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 500;
}

.service-card {
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.price-line {
  margin: 8px 0 12px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Tighten the run-in from the section heading to the ladder — 34px of heading
   margin plus the section gap read as a broken hole above the cards. */
#pricing-grid .section-heading {
  margin-bottom: 24px;
}

/* Tier ladder — pricing.html standings-style comparison of the five tiers.
   Extends .service-card / .price-line primitives; layered greys, not stark white. */
.tier-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Accent rail at the top edge — reads like a standings row marker. */
.tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(var(--accent-rgb), 0.22);
}

/* All four rungs read the same weight — no pre-selected step. */
.tier-card:hover {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), var(--shadow-soft);
  cursor: pointer;
}

.tier-head {
  min-height: 96px;
  margin-bottom: 4px;
}

.tier-head h3 {
  margin: 6px 0 0;
  font-size: 1.28rem;
  line-height: 1.12;
}

.tier-price {
  margin: 10px 0 12px;
  font-size: 1.32rem;
}

.tier-price .price-line-strike {
  display: inline-block;
  font-size: 0.78rem;
}

.tier-note {
  flex: 1;
  margin: 0 0 18px;
}

.tier-cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1180px) {
  .tier-ladder {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .tier-ladder {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .tier-ladder {
    grid-template-columns: 1fr;
  }
  .tier-head {
    min-height: 0;
  }
}

.price-line-strike {
  margin-left: 8px;
  color: color-mix(in srgb, var(--text) 55%, white 45%);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: line-through;
  text-decoration-color: rgba(var(--accent-rgb), 0.5);
}

.price-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.guarantee-line {
  margin: 10px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.pricing-anchor-note {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: color-mix(in srgb, var(--accent-soft) 40%, white 60%);
  font-size: 0.94rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 88%, white 12%);
}

.pricing-anchor-note strong {
  color: var(--accent);
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 28px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.comparison-table th,
.comparison-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.comparison-table th {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  background: var(--surface-strong);
}

.comparison-table td {
  color: color-mix(in srgb, var(--text) 76%, white 24%);
  line-height: 1.6;
}

.decision-fit {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
}

.decision-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.decision-closer {
  margin: 0;
  max-width: 56rem;
  color: var(--muted);
  line-height: 1.7;
}

.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.footer-note {
  display: block;
  grid-column: 1 / -1;
}

/* Cards inside a .section-card that is already --surface-strong step down
   one level so the card reads as a card, not a white void. */
#audience .service-card {
  background: var(--surface);
  border-color: rgba(21, 32, 41, 0.14);
}

/* Selectable surfaces shift up the blue ladder on hover so the
   cursor's location is always obvious. */
#audience .service-card,
.tier-card,
.proof-card {
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#audience .service-card:hover,
.tier-card:hover,
.proof-card:hover {
  background: var(--step-1);
  border-color: color-mix(in srgb, var(--ink-soft) 30%, transparent);
  box-shadow: 0 14px 28px rgba(28, 46, 68, 0.16);
}

.footer-note .footer-copyright {
  display: inline;
  margin-top: 0;
}

.footer-tagline {
  margin: 0 0 18px;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 78%, white 22%);
}

.footer-meta {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--text) 58%, white 42%);
}

.footer-meta .footer-legal {
  display: flex;
  gap: 4px;
}

.track-audience {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--text) 74%, white 26%);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 42ch;
}

.track-block {
  margin-top: 28px;
}

.track-block-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, white 42%);
  margin-bottom: 4px;
}

.track-takeaways {
  margin-top: 32px;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.track-takeaways .track-block-label {
  color: var(--accent);
}

.track-takeaways .service-list span {
  border-top: none;
  padding-top: 0;
  font-weight: 600;
  font-size: 1rem;
}

.track-takeaways .service-list {
  gap: 12px;
}

.track-close {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 66%, white 34%);
}

/* Curriculum courses — full-width numbered rows with a side takeaways panel.
   Scoped to #curriculum only; .track-audience / .track-close stay shared. */
#curriculum .course-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

#curriculum .course-row:last-of-type {
  border-bottom: 1px solid var(--line);
}

#curriculum .course-rail-num {
  font-family: var(--sans);
  font-variant-numeric: lining-nums;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

#curriculum .course-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

#curriculum .course-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, white 42%);
  margin-bottom: 8px;
}

#curriculum .course-body-grid h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.2;
}

#curriculum .course-mod-label {
  margin-top: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, white 42%);
  margin-bottom: 8px;
}

#curriculum .course-mod-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#curriculum .course-mod-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  padding-left: 18px;
}

#curriculum .course-mod-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

#curriculum .course-takeaways-side {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 24px;
}

#curriculum .course-takeaways-side .course-mod-label {
  margin-top: 0;
  color: var(--accent);
}

#curriculum .course-takeaways-side .course-mod-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

#curriculum .course-takeaways-side .course-mod-list li {
  font-weight: 600;
}

@media (max-width: 640px) {
  #curriculum .course-takeaways-side .course-mod-list {
    grid-template-columns: 1fr;
  }
}

/* Four-step path — Courses 1/2 live, 3/4 shown as future, closing the section. */
#curriculum .course-path {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

#curriculum .course-path-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, white 42%);
  margin-bottom: 20px;
}

#curriculum .course-path-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

#curriculum .course-path-step {
  position: relative;
  padding: 0 8px;
  text-align: center;
}

#curriculum .course-path-step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

#curriculum .course-path-step:first-child::before {
  display: none;
}

#curriculum .course-path-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

#curriculum .course-path-step.is-live .course-path-dot {
  background: var(--accent);
  color: #fff;
}

#curriculum .course-path-step.is-future .course-path-dot {
  background: var(--surface-soft);
  color: color-mix(in srgb, var(--text) 58%, white 42%);
  border: 1px dashed var(--line);
}

#curriculum .course-path-step h4 {
  margin: 0 0 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

#curriculum .course-path-step p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

#curriculum .course-path-step.is-future h4,
#curriculum .course-path-step.is-future p {
  color: color-mix(in srgb, var(--text) 58%, white 42%);
}

.service-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.service-list span {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.94rem;
}

.spotlight-grid,
.module-grid {
  display: grid;
  gap: 20px;
}

.spotlight-grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(280px, 0.86fr);
}

.products-page .spotlight-grid {
  grid-template-columns: 1fr;
}

.spotlight-card,
.module-card {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.spotlight-card {
  padding: 34px;
}

.spotlight-card h3,
.module-card h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.spotlight-card p,
.module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.spotlight-card h3 + p,
.module-card h3 + p {
  margin-top: 12px;
}

.spotlight-card .service-list,
.module-card .service-list {
  margin-top: 18px;
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-card {
  padding: 30px;
}

.section-home-intro {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-home-proof {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-home-intro .service-card,
.section-home-intro .lane-card,
.section-home-proof .proof-card,
.section-home-deeper .service-card {
  background: var(--surface-soft);
  box-shadow: none;
}

.section-home-intro .spotlight-actions {
  margin-top: 28px;
}

.section-home-lineup {
  position: relative;
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(248, 251, 250, 0.84));
}

.section-home-lineup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  right: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.04));
}

.section-home-lineup .card-link {
  margin-top: 20px;
}

.home-spotlight-grid {
  align-items: stretch;
  margin-bottom: 18px;
}

.spotlight-card.is-featured {
  position: relative;
  padding: 40px 38px;
  background:
    radial-gradient(ellipse at 88% 112%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    linear-gradient(180deg, var(--surface-strong), rgba(245, 251, 249, 0.82));
  box-shadow: 0 24px 48px rgba(24, 21, 18, 0.08);
  overflow: hidden;
}

.spotlight-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(var(--accent-rgb), 0.5);
}

.spotlight-card.is-featured h3 {
  font-size: 1.46rem;
}

.spotlight-card.is-context {
  background: var(--surface);
  box-shadow: none;
}

.home-module-grid {
  gap: 16px;
}

.home-module-grid .module-card {
  min-height: 0;
  padding: 24px 24px 22px;
  background: var(--surface-soft);
  box-shadow: none;
}

.home-module-grid .module-card h3 {
  font-size: 1.16rem;
}

.home-module-grid .module-card p {
  font-size: 0.98rem;
}

.module-stack {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.product-row {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.product-row strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.product-row span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}

.about-page .company-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.products-page .company-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: 16px;
}

.note-card {
  padding: 36px;
}

.about-page .note-card,
.about-page .proof-card,
.about-page .why-card {
  padding: 26px;
}

.products-page .note-card {
  display: grid;
  gap: 10px;
  padding: 26px;
}

.note-card h3 {
  font-size: 2rem;
  line-height: 0.98;
  margin-bottom: 18px;
}

.about-page .note-card h3 {
  font-size: 1.7rem;
  line-height: 1.02;
  margin-bottom: 12px;
}

.products-page .note-card h3 {
  font-size: 1.55rem;
  line-height: 1.04;
  margin-bottom: 8px;
}

.note-card.with-seal {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.about-page .note-card.with-seal {
  gap: 18px;
}

.note-wordmark {
  width: min(168px, 100%);
  height: auto;
  object-fit: contain;
  align-self: start;
}

.note-card p,
.note-card li {
  color: var(--muted);
  line-height: 1.7;
}

.about-page .note-card p,
.about-page .note-card li,
.about-page .proof-card p,
.about-page .why-card p,
.about-page .footer-panel p {
  line-height: 1.62;
}

.products-page .note-card p,
.products-page .note-card li,
.products-page .footer-panel p {
  line-height: 1.62;
}

.products-page .note-card ul {
  display: grid;
  gap: 8px;
}

.about-page .why-grid,
.about-page .proof-grid {
  gap: 16px;
}

.about-page .about-proof-feature {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--accent-rgb), 0.1), transparent 24%),
    var(--surface-strong);
}

.about-page .about-proof-feature strong {
  font-size: 2rem;
  line-height: 0.94;
}

.note-card ul {
  margin: 0;
  padding-left: 18px;
}

.footer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 6px 2px;
}

.footer-panel h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.01;
  margin: 0;
}

.about-page .footer-panel h2,
.products-page .footer-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.01;
}

.about-page .footer-panel {
  gap: 18px;
}

.products-page .footer-panel {
  gap: 18px;
}

.advisory-page .hero.hero-page h1 {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  max-width: 19ch;
}

.advisory-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.advisory-page .main-stack {
  gap: 34px;
}

.advisory-page .section-card {
  padding: 36px;
}

.advisory-page .section-heading {
  margin-bottom: 24px;
}

.advisory-page .service-grid,
.advisory-page .company-grid,
.advisory-page .footer-panel {
  gap: 16px;
}

.advisory-page .service-card,
.advisory-page .note-card {
  padding: 26px;
}

.advisory-page .service-card h3,
.advisory-page .note-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.advisory-page .service-card p,
.advisory-page .note-card p,
.advisory-page .note-card li,
.advisory-page .panel p,
.advisory-page .panel small,
.advisory-page .footer-panel p {
  line-height: 1.62;
}

.advisory-page .note-card ul {
  display: grid;
  gap: 8px;
}

.advisory-page .footer-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.01;
}

.services-page .hero.hero-page h1,
.coaching-page .hero.hero-page h1,
.strategy-page .hero.hero-page h1,
.comparisons-page .hero.hero-page h1,
.definitions-page .hero.hero-page h1,
.manual-workflow-friction-page .hero.hero-page h1,
.fractional-chief-ai-officer-page .hero.hero-page h1,
.geo-optimization-review-page .hero.hero-page h1,
.transformation-page .hero.hero-page h1,
.lead-generation-page .hero.hero-page h1 {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  max-width: 19ch;
}

.services-page .hero.hero-page .hero-copy > p,
.coaching-page .hero.hero-page .hero-copy > p,
.strategy-page .hero.hero-page .hero-copy > p,
.comparisons-page .hero.hero-page .hero-copy > p,
.definitions-page .hero.hero-page .hero-copy > p,
.manual-workflow-friction-page .hero.hero-page .hero-copy > p,
.fractional-chief-ai-officer-page .hero.hero-page .hero-copy > p,
.geo-optimization-review-page .hero.hero-page .hero-copy > p,
.transformation-page .hero.hero-page .hero-copy > p,
.lead-generation-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.services-page .main-stack,
.coaching-page .main-stack,
.strategy-page .main-stack,
.comparisons-page .main-stack,
.definitions-page .main-stack,
.manual-workflow-friction-page .main-stack,
.fractional-chief-ai-officer-page .main-stack,
.geo-optimization-review-page .main-stack,
.transformation-page .main-stack,
.lead-generation-page .main-stack {
  gap: 34px;
}

.services-page .section-card,
.coaching-page .section-card,
.strategy-page .section-card,
.comparisons-page .section-card,
.definitions-page .section-card,
.manual-workflow-friction-page .section-card,
.fractional-chief-ai-officer-page .section-card,
.geo-optimization-review-page .section-card,
.transformation-page .section-card,
.lead-generation-page .section-card {
  padding: 36px;
}

.services-page .section-heading,
.coaching-page .section-heading,
.strategy-page .section-heading,
.comparisons-page .section-heading,
.definitions-page .section-heading,
.manual-workflow-friction-page .section-heading,
.fractional-chief-ai-officer-page .section-heading,
.geo-optimization-review-page .section-heading,
.transformation-page .section-heading,
.lead-generation-page .section-heading {
  margin-bottom: 24px;
}

.services-page .service-grid,
.services-page .footer-panel,
.coaching-page .service-grid,
.coaching-page .footer-panel,
.strategy-page .footer-panel,
.comparisons-page .service-grid,
.comparisons-page .footer-panel,
.definitions-page .service-grid,
.definitions-page .footer-panel,
.manual-workflow-friction-page .service-grid,
.manual-workflow-friction-page .company-grid,
.manual-workflow-friction-page .footer-panel,
.fractional-chief-ai-officer-page .service-grid,
.fractional-chief-ai-officer-page .footer-panel,
.geo-optimization-review-page .service-grid,
.geo-optimization-review-page .company-grid,
.geo-optimization-review-page .footer-panel,
.transformation-page .footer-panel,
.lead-generation-page .service-grid,
.lead-generation-page .footer-panel {
  gap: 16px;
}

.services-page .service-card,
.coaching-page .service-card,
.comparisons-page .service-card,
.definitions-page .service-card,
.manual-workflow-friction-page .service-card,
.manual-workflow-friction-page .note-card,
.fractional-chief-ai-officer-page .service-card,
.geo-optimization-review-page .service-card,
.geo-optimization-review-page .note-card,
.lead-generation-page .service-card {
  padding: 26px;
}

.services-page .service-card h3,
.coaching-page .service-card h3,
.comparisons-page .service-card h3,
.definitions-page .service-card h3,
.manual-workflow-friction-page .service-card h3,
.manual-workflow-friction-page .note-card h3,
.fractional-chief-ai-officer-page .service-card h3,
.geo-optimization-review-page .service-card h3,
.geo-optimization-review-page .note-card h3,
.lead-generation-page .service-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.services-page .service-card p,
.coaching-page .service-card p,
.comparisons-page .service-card p,
.definitions-page .service-card p,
.manual-workflow-friction-page .service-card p,
.manual-workflow-friction-page .note-card p,
.manual-workflow-friction-page .note-card li,
.fractional-chief-ai-officer-page .service-card p,
.geo-optimization-review-page .service-card p,
.geo-optimization-review-page .note-card p,
.geo-optimization-review-page .note-card li,
.lead-generation-page .service-card p {
  line-height: 1.62;
}

.manual-workflow-friction-page .note-card ul,
.geo-optimization-review-page .note-card ul {
  display: grid;
  gap: 8px;
}

.portfolio-page .hero.hero-page h1 {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  max-width: 19ch;
}

.portfolio-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.portfolio-page .main-stack {
  gap: 34px;
}

.portfolio-page .section-card {
  padding: 36px;
}

.portfolio-page .section-heading {
  margin-bottom: 24px;
}

.portfolio-page .proof-grid,
.portfolio-page .company-grid,
.portfolio-page .service-grid,
.portfolio-page .footer-panel {
  gap: 16px;
}

.portfolio-page .proof-card,
.portfolio-page .note-card,
.portfolio-page .service-card {
  padding: 26px;
}

.portfolio-page .proof-card strong,
.portfolio-page .note-card h3,
.portfolio-page .service-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.portfolio-page .proof-card p,
.portfolio-page .note-card p,
.portfolio-page .note-card li,
.portfolio-page .service-card p,
.portfolio-page .footer-panel p {
  line-height: 1.62;
}

.portfolio-page .note-card ul {
  display: grid;
  gap: 8px;
}

.portfolio-page .portfolio-proof-feature {
  grid-column: 1 / -1;
}

.portfolio-page .footer-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.01;
}

.pricing-page .hero.hero-page h1 {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  max-width: 19ch;
}

.pricing-page .hero.hero-page .hero-copy > p {
  max-width: 36rem;
}

.pricing-page .main-stack {
  gap: 34px;
}

.pricing-page .section-card {
  padding: 36px;
}

.pricing-page .section-heading {
  margin-bottom: 24px;
}

.pricing-page .proof-grid,
.pricing-page .company-grid,
.pricing-page .service-grid {
  gap: 16px;
}

.pricing-page .note-card,
.pricing-page .service-card,
.pricing-page .proof-card {
  padding: 26px;
}

.pricing-page .note-card h3,
.pricing-page .service-card h3,
.pricing-page .proof-card strong {
  font-size: 1.55rem;
  line-height: 1.08;
}

.pricing-page .note-card p,
.pricing-page .note-card li,
.pricing-page .service-card p,
.pricing-page .proof-card p,
.pricing-page .site-footer-brand p,
.pricing-page .footer-note p {
  line-height: 1.62;
}

.pricing-page .note-card ul {
  display: grid;
  gap: 8px;
}

.pricing-page .pricing-path-feature {
  grid-column: 1 / -1;
}

.contact-page .hero.hero-page {
  gap: 44px;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 400px);
  padding: 2vh 0 6vh;
}

.contact-page .hero.hero-page h1 {
  font-size: clamp(2.45rem, 3.9vw, 3.85rem);
  max-width: 19ch;
}

.contact-page .hero-question-list {
  gap: 12px;
  margin-bottom: 24px;
  max-width: 38rem;
}

.contact-page .hero-question-list li {
  padding: 14px 18px 14px 24px;
  border-radius: 18px;
}

.contact-page .hero-question-list strong {
  font-size: 0.95rem;
}

.contact-page .main-stack {
  gap: 34px;
}

.contact-page .section-card {
  padding: 36px;
}

.contact-page .section-heading {
  margin-bottom: 24px;
}

.contact-page .company-grid,
.contact-page .service-grid {
  gap: 16px;
}

.contact-page .note-card,
.contact-page .service-card,
.contact-page .panel-start-here {
  padding: 26px;
}

.contact-page .panel-start-here h2,
.contact-page .note-card h3,
.contact-page .service-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.contact-page .panel-summary-stack {
  gap: 14px;
}

.contact-page .panel-summary-row {
  gap: 5px;
}

.contact-page .panel-summary-row span,
.contact-page .panel-callout,
.contact-page .note-card p,
.contact-page .service-card p,
.contact-page .note-card li,
.contact-page .footer-note p,
.contact-page .site-footer-brand p {
  line-height: 1.62;
}

.paige-page .hero.hero-page h1 {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  max-width: 19ch;
}

.paige-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.paige-page .main-stack {
  gap: 34px;
}

.paige-page .section-card {
  padding: 36px;
}

.paige-page .section-heading {
  margin-bottom: 24px;
}

.paige-page .proof-grid,
.paige-page .company-grid,
.paige-page .service-grid,
.paige-page .footer-panel {
  gap: 16px;
}

.paige-page .proof-card,
.paige-page .note-card,
.paige-page .service-card {
  padding: 26px;
}

.paige-page .proof-card strong,
.paige-page .note-card h3,
.paige-page .service-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.paige-page .proof-card p,
.paige-page .note-card p,
.paige-page .service-card p,
.paige-page .footer-panel p {
  line-height: 1.62;
}

.paige-page .paige-proof-feature {
  grid-column: 1 / -1;
}

.paige-page .footer-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.01;
}

.daisy-page .hero.hero-page h1 {
  font-size: clamp(2.2rem, 3.4vw, 3.45rem);
  max-width: 19ch;
}

.daisy-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.daisy-page .hero-question-list {
  gap: 10px;
}

.daisy-page .hero-question-list li {
  padding: 12px 14px;
}

.daisy-page .main-stack {
  gap: 34px;
}

.daisy-page .section-card {
  padding: 36px;
}

.daisy-page .section-heading {
  margin-bottom: 24px;
}

.daisy-page .company-grid,
.daisy-page .proof-grid,
.daisy-page .typo-grid,
.daisy-page .footer-panel {
  gap: 16px;
}

.daisy-page .note-card,
.daisy-page .proof-card,
.daisy-page .typo-card {
  padding: 26px;
}

.daisy-page .note-card h3,
.daisy-page .proof-card strong,
.daisy-page .typo-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.daisy-page .note-card p,
.daisy-page .proof-card p,
.daisy-page .typo-card p,
.daisy-page .footer-panel p,
.daisy-page .panel p,
.daisy-page .panel small,
.daisy-page .footer-note p,
.daisy-page .site-footer-brand p {
  line-height: 1.62;
}

.daisy-page .typo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.education-page .hero.hero-page h1 {
  font-size: clamp(2.3rem, 3.6vw, 3.7rem);
  max-width: 19ch;
}

.education-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.education-page .main-stack {
  gap: 34px;
}

.education-page .section-card {
  padding: 36px;
}

.education-page .section-heading {
  margin-bottom: 24px;
}

.education-page .proof-grid,
.education-page .service-grid,
.education-page .company-grid,
.education-page .footer-panel {
  gap: 16px;
}

.education-page .proof-card,
.education-page .service-card,
.education-page .note-card {
  padding: 26px;
}

.education-page .proof-card strong,
.education-page .service-card h3,
.education-page .note-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.education-page .proof-card p,
.education-page .service-card p,
.education-page .note-card p,
.education-page .note-card li,
.education-page .panel p,
.education-page .panel small,
.education-page .footer-panel p,
.education-page .footer-note p,
.education-page .site-footer-brand p {
  line-height: 1.62;
}

.education-page .education-proof-feature {
  grid-column: 1 / -1;
}

.platform-page .hero.hero-page h1 {
  font-size: clamp(2.35rem, 3.7vw, 3.75rem);
  max-width: 19ch;
}

.platform-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.platform-page .main-stack {
  gap: 34px;
}

.platform-page .section-card {
  padding: 36px;
}

.platform-page .section-heading {
  margin-bottom: 24px;
}

.platform-page .proof-grid,
.platform-page .service-grid,
.platform-page .company-grid,
.platform-page .footer-panel {
  gap: 16px;
}

.platform-page .proof-card,
.platform-page .service-card,
.platform-page .note-card {
  padding: 26px;
}

.platform-page .proof-card strong,
.platform-page .service-card h3,
.platform-page .note-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.platform-page .proof-card p,
.platform-page .service-card p,
.platform-page .note-card p,
.platform-page .note-card li,
.platform-page .panel p,
.platform-page .panel small,
.platform-page .footer-panel p,
.platform-page .site-footer-brand p {
  line-height: 1.62;
}

.platform-page .platform-workflow-card {
  display: grid;
  gap: 10px;
}

.platform-page .platform-workflow-card .service-list {
  margin-top: 6px;
}

.privacy-page .hero.hero-page h1,
.terms-page .hero.hero-page h1 {
  font-size: clamp(2.25rem, 3.5vw, 3.55rem);
  max-width: 19ch;
}

.not-found-page .main-stack {
  gap: 0;
}

.not-found-page .hero.hero-page {
  min-height: calc(100vh - 240px);
  padding: 3vh 0 5vh;
}

.not-found-page .hero.hero-page .hero-copy {
  max-width: 40rem;
  padding-top: 0;
}

.not-found-page .hero.hero-page h1 {
  font-size: clamp(2.7rem, 4.4vw, 4.2rem);
  max-width: 19ch;
  line-height: 0.98;
}

.not-found-page .hero.hero-page .hero-copy > p {
  max-width: 34rem;
}

.privacy-page .hero.hero-page .hero-copy > p,
.terms-page .hero.hero-page .hero-copy > p {
  max-width: 35rem;
}

.privacy-page .main-stack,
.terms-page .main-stack {
  gap: 34px;
}

.privacy-page .section-card,
.terms-page .section-card {
  padding: 36px;
}

.privacy-page .section-heading,
.terms-page .section-heading {
  margin-bottom: 24px;
}

.privacy-page .service-grid,
.privacy-page .company-grid,
.privacy-page .footer-panel,
.terms-page .footer-panel {
  gap: 16px;
}

.privacy-page .service-card,
.privacy-page .note-card {
  padding: 26px;
}

.privacy-page .service-card h3,
.privacy-page .note-card h3 {
  font-size: 1.55rem;
  line-height: 1.08;
}

.privacy-page .service-card p,
.privacy-page .note-card p,
.privacy-page .panel p,
.privacy-page .panel small,
.privacy-page .footer-panel p,
.privacy-page .site-footer-brand p,
.terms-page .site-footer-brand p,
.terms-page .footer-panel p {
  line-height: 1.62;
}

.footer-panel p {
  margin: 14px 0 0;
  max-width: 34rem;
  color: var(--muted);
  line-height: 1.7;
}

.site-footer {
  margin-top: 44px;
  padding: 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(140px, 0.72fr));
  gap: 24px;
  align-items: center;
}

.site-footer-brand {
  display: grid;
  gap: 14px;
  align-content: center;
}

.footer-mark {
  width: min(228px, 100%);
  height: auto;
}

.site-footer-brand p,
.footer-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.footer-copyright {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--muted) 90%, white 10%);
}

.footer-legal {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--muted) 92%, white 8%);
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 21, 18, 0.14);
}

.footer-legal a:hover {
  color: var(--accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.3);
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 76%, transparent);
}

.footer-list {
  display: grid;
  gap: 10px;
}

.footer-list a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-list a:hover {
  color: var(--accent);
}

.footer-note {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.footer-note .button-ghost {
  min-width: 0;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
}

.concept-index .hero {
  min-height: auto;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 420px);
  align-items: center;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.concept-preview {
  display: grid;
  gap: 20px;
  padding: 26px;
  border-radius: 26px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.concept-preview h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
}

.concept-preview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.concept-preview a {
  color: var(--text);
}

.concept-preview .preview-box {
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(245, 246, 248, 0.9), rgba(245, 246, 248, 0.3)),
    radial-gradient(circle at 24% 32%, rgba(245, 246, 248, 0.75), transparent 25%);
  position: relative;
  overflow: hidden;
}

.concept-preview .preview-box::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -8px;
  width: 160px;
  height: 90px;
  background: var(--accent);
  clip-path: polygon(0 75%, 12% 75%, 12% 58%, 28% 58%, 41% 20%, 52% 20%, 63% 75%, 77% 75%, 77% 44%, 91% 44%, 91% 85%, 100% 85%, 100% 100%, 0 100%);
}

.concept-preview .preview-box::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 44%;
  height: 58%;
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
}

.concept-editorial {
  /* Fonts + surface/color tokens inherit from :root — single stack sitewide. */
}

.concept-editorial .hero h1 {
  max-width: 9ch;
}

.concept-product {
  /* Surface/color tokens intentionally inherit from :root (Option B).
     Re-declaring them here silently reverted every past palette change
     because every page carries .concept-product. Fonts stay concept-specific. */
  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
}

.concept-product body::before,
.concept-product::before {
  opacity: 0.9;
}

.concept-product .panel {
  border-radius: var(--radius-xl);
}

.concept-product .product-card {
  background: linear-gradient(180deg, var(--surface-strong), rgba(245, 251, 249, 0.65));
}

body.concept-product.bg-surface-wake {
  background:
    radial-gradient(circle at 18% 14%, rgba(246, 248, 250, 0.60), transparent 26%),
    linear-gradient(135deg, rgba(31, 111, 212, 0.06), transparent 34%),
    linear-gradient(180deg, #dde3ea 0%, #d1d9e2 55%, #c9d0d8 100%);
}

body.concept-product.bg-surface-wake .panel {
  background: var(--surface);
  box-shadow: 0 32px 68px rgba(24, 26, 24, 0.08);
}

body.concept-product.bg-surface-wake .strip,
body.concept-product.bg-surface-wake .section-card,
body.concept-product.bg-surface-wake .note-card {
  background: var(--surface-strong);
}

body.concept-product.bg-surface-wake .lane-card,
body.concept-product.bg-surface-wake .proof-card,
body.concept-product.bg-surface-wake .why-card {
  background: var(--surface);
}

body.concept-product.bg-surface-wake .product-card {
  background:
    radial-gradient(ellipse at 82% 118%, rgba(var(--accent-rgb), 0.08), transparent 42%),
    linear-gradient(180deg, var(--surface-strong), rgba(244, 250, 248, 0.72));
}

body.concept-product.bg-surface-wake .service-card {
  background:
    radial-gradient(ellipse at 92% 112%, rgba(var(--accent-rgb), 0.06), transparent 46%),
    var(--surface);
}

body.concept-product.bg-surface-wake .spotlight-card,
body.concept-product.bg-surface-wake .module-card {
  background:
    radial-gradient(ellipse at 88% 118%, rgba(var(--accent-rgb), 0.06), transparent 46%),
    var(--surface-strong);
}

.start-here-page .site-shell {
  max-width: 1440px;
}

.start-here-page .topbar-subpage {
  margin-bottom: 34px;
  padding: 16px 24px 18px;
  gap: 24px;
  border-radius: 30px;
}

.start-here-page .brand-lockup {
  gap: 16px;
}

.start-here-page .brand-text {
  gap: 10px;
}

.start-here-page .brand-mark {
  width: 220px;
}

.start-here-page .brand-support {
  padding-left: 14px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.18);
}

.start-here-page .brand-kicker {
  font-size: 0.63rem;
  letter-spacing: 0.2em;
}

.start-here-page .brand-subline {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.start-here-page .nav .cta-link {
  border-color: rgba(18, 18, 18, 0.14);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 92%, #40362e 8%), var(--text));
  box-shadow: 0 14px 28px rgba(24, 21, 18, 0.14);
}

.start-here-page .nav .cta-link:hover {
  box-shadow: 0 18px 32px rgba(24, 21, 18, 0.18);
}

.start-here-page .hero.hero-page {
  min-height: auto;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 400px);
  gap: 52px;
  align-items: start;
  padding: 2vh 0 7vh;
}

.start-here-page .hero.hero-page .hero-copy {
  padding-top: 0;
}

.start-here-page .hero.hero-page h1 {
  font-size: clamp(3.5rem, 5.9vw, 6.1rem);
  max-width: 19ch;
}

.start-here-page .hero p {
  max-width: 34rem;
  margin: 20px 0 26px;
}

.start-here-page .hero-question-list {
  gap: 14px;
  margin-bottom: 26px;
  max-width: 42rem;
}

.start-here-page .hero-question-list li {
  display: grid;
  gap: 4px;
  padding: 15px 18px 15px 24px;
  border-radius: 20px;
  border: 1px solid rgba(18, 18, 18, 0.08);
  background: var(--surface-soft);
}

.start-here-page .hero-question-list li::before {
  left: 12px;
  top: 22px;
  width: 8px;
  height: 8px;
}

.start-here-page .hero-question-list strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
}

.start-here-page .hero-question-list span {
  color: color-mix(in srgb, var(--text) 72%, white 28%);
}

.start-here-page .hero-actions {
  align-items: center;
}

.start-here-page .hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 16px;
}

.start-here-page .hero-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.start-here-page .hero-links a:hover {
  color: var(--accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.34);
}

.start-here-page .panel-start-here {
  padding: 34px 30px 28px;
  border-radius: 32px;
  background: var(--surface-strong);
}

.start-here-page .panel-start-here::before {
  width: 4px;
  border-radius: 32px 0 0 32px;
}

.start-here-page .panel-start-here .panel-mark {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.start-here-page .panel-start-here h2 {
  font-size: 1.72rem;
  line-height: 1.14;
}

.start-here-page .panel-start-here p {
  margin-bottom: 0;
}

.concept-founder {
  /* Fonts + surface/color tokens inherit from :root — single stack sitewide. */
}

.concept-founder .hero h1 {
  max-width: 10.5ch;
}

.concept-founder .eyebrow::before {
  width: 30px;
}

.background-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.brand-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.option-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.option-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  align-items: center;
}

.option-heading h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
}

.recommend-badge,
.token-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recommend-badge {
  background: var(--accent-soft);
  color: var(--accent);
}

.token-pill {
  background: var(--pill);
  color: var(--text);
}

.background-preview {
  position: relative;
  min-height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 18%, rgba(245, 246, 248, 0.9), transparent 26%),
    linear-gradient(180deg, rgba(245, 246, 248, 0.52), transparent 34%),
    var(--bg);
}

.background-preview::before,
.background-preview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.background-preview::before {
  z-index: 0;
}

.background-preview::after {
  z-index: 0;
}

.preview-frame {
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  z-index: 1;
}

.preview-copy {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 2;
  max-width: 44%;
}

.preview-copy strong {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.preview-copy span {
  display: block;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.option-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.option-list {
  display: grid;
  gap: 10px;
}

.option-list span {
  display: block;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.94rem;
}

.structured-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.structured-brand-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.structured-brand-card h3 {
  margin: 0 0 10px;
  font-size: 1.42rem;
  font-weight: 500;
}

.structured-brand-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.structured-brand-mock {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: 250px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, #0f1012 0%, #15181c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.structured-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(18, 20, 23, 0.98));
  border: 1px solid rgba(96, 112, 130, 0.26);
}

.structured-wordmark {
  display: block;
  width: min(220px, 100%);
  height: auto;
  border-radius: 10px;
}

.structured-wordmark.hero {
  width: min(430px, 100%);
  justify-self: start;
}

.structured-wordmark.inset {
  width: min(260px, 100%);
}

.structured-wordmark.footer {
  width: min(240px, 100%);
}

.structured-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px 12px;
  color: rgba(228, 231, 236, 0.72);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.structured-nav .nav-cta {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 136, 152, 0.38);
  color: #edf1f5;
}

.structured-brand-mock.hero-lead {
  align-content: start;
  background:
    radial-gradient(circle at 24% 8%, rgba(48, 89, 144, 0.28), transparent 28%),
    linear-gradient(180deg, #0e1013 0%, #14181d 100%);
}

.ai-sparkle-group {
  position: absolute;
  left: 31%;
  top: 41%;
  width: 128px;
  height: 82px;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(125, 183, 255, 0.45));
  animation: ai-sparkle-twinkle 3.8s ease-in-out infinite;
}

.sparkle::before,
.sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(114, 165, 241, 0.82));
}

.sparkle::before {
  width: 2px;
  height: 100%;
}

.sparkle::after {
  width: 100%;
  height: 2px;
}

.sparkle-a {
  left: 8px;
  top: 22px;
}

.sparkle-b {
  left: 54px;
  top: 6px;
  width: 16px;
  height: 16px;
  animation-delay: 0.9s;
}

.sparkle-c {
  left: 86px;
  top: 34px;
  width: 14px;
  height: 14px;
  animation-delay: 1.6s;
}

@keyframes ai-sparkle-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.78) rotate(0deg);
  }

  30% {
    opacity: 0.82;
    transform: scale(1.02) rotate(8deg);
  }

  55% {
    opacity: 0.42;
    transform: scale(0.86) rotate(-4deg);
  }

  72% {
    opacity: 0.92;
    transform: scale(1.08) rotate(10deg);
  }
}

.structured-brand-mock.inset-mark {
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 246, 248, 0.07), transparent 26%),
    linear-gradient(180deg, #eef0f3 0%, #e4e7ea 100%);
  border: 1px solid var(--line);
}

.structured-brand-mock.footer-block {
  align-content: space-between;
}

.structured-inset {
  display: inline-flex;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(28, 31, 35, 0.98), rgba(15, 17, 20, 1));
  border: 1px solid rgba(88, 100, 116, 0.3);
  box-shadow: 0 22px 44px rgba(17, 18, 20, 0.22);
}

.structured-footer {
  display: inline-flex;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(25, 28, 32, 0.98), rgba(15, 17, 20, 0.98));
  border: 1px solid rgba(82, 93, 107, 0.32);
  justify-self: start;
}

.structured-lines {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.structured-lines.top-gap {
  margin-top: 0;
}

.structured-lines span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(228, 232, 238, 0.12);
}

.structured-brand-mock.inset-mark .structured-lines span {
  background: rgba(18, 18, 18, 0.1);
}

.structured-lines .wide {
  width: 84%;
}

.structured-lines .mid {
  width: 62%;
}

.structured-lines .narrow {
  width: 40%;
}

.brand-preview {
  min-height: 240px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 18%, rgba(245, 246, 248, 0.9), transparent 26%),
    linear-gradient(180deg, rgba(245, 246, 248, 0.5), transparent 34%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: 28px;
}

.brand-demo-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-presentation,
.brand-capsule {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.brand-option-mark {
  display: block;
  width: min(250px, 100%);
  height: auto;
}

.brand-option-mark.compact {
  width: min(180px, 100%);
}

.brand-capsule {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 36px rgba(20, 18, 16, 0.08);
}

.brand-presentation.quiet {
  gap: 14px;
}

.brand-presentation.centered {
  justify-items: center;
  text-align: center;
}

.brand-presentation.rail {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.brand-rail-rule {
  width: 2px;
  min-height: 112px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(17, 200, 235, 0.68), rgba(242, 27, 140, 0.42));
}

.brand-rail-copy {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.brand-presentation.splitbar {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.splitbar-side {
  display: grid;
  gap: 8px;
  justify-items: start;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.splitbar-side.right {
  justify-items: end;
  text-align: right;
}

.brand-presentation.hybrid {
  gap: 16px;
}

.hybrid-support {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hybrid-roundel {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(20, 18, 16, 0.12);
}

.brand-rule {
  width: 100%;
  max-width: 250px;
  height: 1px;
  background: var(--line);
}

.brand-option-mark.mono {
  filter: grayscale(1) contrast(1.2) brightness(0.34);
}

.real-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.real-brand-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.real-brand-card h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 500;
}

.real-brand-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.real-brand-mock {
  display: grid;
  gap: 18px;
  min-height: 240px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 14% 16%, rgba(245, 246, 248, 0.92), transparent 24%),
    linear-gradient(180deg, rgba(245, 246, 248, 0.54), transparent 34%),
    var(--surface-strong);
}

.mock-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mock-brand,
.mock-brand-companion {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mock-wordmark {
  width: 168px;
  height: auto;
}

.mock-roundel {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(20, 18, 16, 0.12);
}

.mock-roundel.tiny {
  width: 28px;
  height: 28px;
  box-shadow: 0 8px 18px rgba(20, 18, 16, 0.1);
}

.mock-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px 12px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mock-nav .nav-cta {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
}

.mock-hero-lines,
.mock-footer-lines {
  display: grid;
  gap: 10px;
}

.mock-hero-lines span,
.mock-footer-lines span,
.mock-panel span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.1);
}

.mock-hero-lines .long {
  width: 82%;
}

.mock-hero-lines .mid,
.mock-footer-lines .mid {
  width: 64%;
}

.mock-hero-lines .short,
.mock-footer-lines .short {
  width: 42%;
}

.mock-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 16px;
  align-items: end;
}

.mock-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px 20px 20px 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mock-footer-band {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.mock-topbar.beacon .mock-nav {
  gap: 10px;
}

.daisy-embed-card {
  display: grid;
  gap: 28px;
}

.embed-shell {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.embed-frame {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-strong);
}

.embed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 1180px) {
  .hero,
  .concept-index .hero,
  .section-heading,
  .spotlight-grid,
  .company-grid,
  .footer-panel,
  .site-footer-main,
  .background-options-grid,
  .brand-options-grid,
  .structured-brand-grid,
  .real-brand-grid,
  /* Page-scoped variants must be listed explicitly: they are written outside any
     media query and outrank the bare selectors above on specificity, so without
     these they stay multi-column on a phone and crush their text. */
  .home-page .section-heading,
  .about-page .section-heading,
  .products-page .section-heading,
  .products-page .company-grid,
  .about-page .company-grid {
    grid-template-columns: 1fr;
  }

  /* Single column: undo the kicker-heading grid placement so label, headline,
     and standfirst stack in DOM order instead of forcing an implicit column. */
  .section-heading:has(.mini-label) .mini-label,
  .section-heading:has(.mini-label) h2,
  .section-heading:has(.mini-label) p {
    grid-column: auto;
    grid-row: auto;
  }
  .section-heading:has(.mini-label) h2 {
    margin-top: 0;
  }

  .hero {
    min-height: auto;
  }

  /* Mobile heading scale. Selector is deliberately over-specific: page-scoped rules
     like `.about-page .hero.hero-page h1` live OUTSIDE any media query and win on
     specificity regardless of source order, which silently killed the plain
     `.hero h1` version of this rule on 25 of 26 pages. Do not weaken it. */
  .concept-product .hero.hero-page h1,
  .concept-product .hero.hero-home h1,
  .concept-product .hero h1 {
    max-width: 100%;
    font-size: clamp(2.1rem, 7.4vw, 3.4rem);
    line-height: 1.04;
  }

  .concept-product .section-heading h2 {
    line-height: 1.04;
  }

  .hero-home::before {
    inset: 6% 8% 0 8%;
  }

  .hero-collage {
    margin-top: 0;
    max-width: 720px;
  }

  .hero.hero-page .hero-copy {
    padding-top: 0;
  }

  .start-here-page .hero.hero-page {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-page .hero.hero-page {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .start-here-page .panel-start-here {
    max-width: 720px;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .concept-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-brand {
    max-width: 720px;
  }

  .embed-frame {
    min-height: 700px;
  }

  .leadgen-engine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .site-shell {
    padding: 20px 18px 72px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
  }

  .brand-lockup,
  .note-card.with-seal {
    grid-template-columns: 1fr;
  }

  .brand {
    min-width: min(100%, 392px);
  }

  /* .daisy-page locks typo-grid to 2 columns unconditionally, overriding the base
     auto-fill. At phone widths each column is ~155px, the cards' text overflows its
     grid row, and "Implementation or build" lands on top of the card below it. */
  .daisy-page .typo-grid {
    grid-template-columns: 1fr;
  }

  .brand-mark {
    width: min(268px, 100%);
  }

  .start-here-page .topbar-subpage {
    padding: 18px;
    border-radius: 28px;
  }

  .start-here-page .brand-support {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
  }

  .note-card.with-seal {
    gap: 16px;
  }

  .hero-copy {
    padding-top: 2vh;
  }

  .hero-home {
    gap: 28px;
    padding-top: 3vh;
  }

  .topbar-home {
    border-radius: 34px;
  }

  .nav-home {
    gap: 6px 14px;
  }

  .nav-subpage {
    gap: 6px 14px;
  }

  .hero-proof-cluster,
  .collage-grid {
    grid-template-columns: 1fr;
  }

  .hero-proof-card.is-lifted,
  .hero-proof-card.is-setback {
    transform: none;
  }

  .hero-home::before {
    display: none;
  }

  .concept-product .hero.hero-page h1,
  .concept-product .hero.hero-home h1,
  .concept-product .hero h1 {
    max-width: 100%;
    font-size: clamp(2.1rem, 7.4vw, 3.4rem);
    line-height: 1.04;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .start-here-page .hero-links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .button,
  .button-ghost {
    min-width: 0;
    width: 100%;
  }

  .lane-grid,
  .proof-grid,
  .product-grid,
  .service-grid,
  .why-grid,
  .module-grid,
  .hero-meta {
    grid-template-columns: 1fr;
  }

  .hero-meta-home {
    margin-top: 34px;
    padding-left: 16px;
  }

  .hero-collage {
    padding: 14px;
  }

  .site-footer {
    padding: 22px 18px;
  }

  .footer-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .embed-frame {
    min-height: 660px;
  }

  .embed-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .panel-home .panel-actions {
    grid-template-columns: 1fr;
  }

  .leadgen-decision-layout,
  .leadgen-input-layout,
  .leadgen-followup-shell,
  .leadgen-results-head {
    grid-template-columns: 1fr;
  }

  .leadgen-tree-card,
  .leadgen-tree-summary,
  .leadgen-form-shell,
  .leadgen-example-summary,
  .leadgen-followup-card,
  .leadgen-followup-proof,
  .leadgen-engine-shell,
  .leadgen-results-shell {
    padding: 22px;
  }

  .leadgen-results-rationale,
  .leadgen-dimension-grid {
    grid-template-columns: 1fr;
  }

  .leadgen-meter-row {
    grid-template-columns: 1fr;
  }

  .leadgen-reviewed-topline {
    flex-direction: column;
  }

  .panel {
    border-radius: 0 28px 0 0;
  }

  .start-here-page .panel-start-here {
    border-radius: 28px;
  }

  body::before {
    width: 70vw;
    min-width: 280px;
    height: 34vw;
    min-height: 150px;
    right: -24vw;
    bottom: 18vh;
  }
}

.voice-launch {
  cursor: pointer;
  font-family: inherit;
}

/* Daisy specifics & Button Improvements */
.concept-product .voice-launch {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #1e4d45 8%), var(--accent));
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.22);
}

.concept-product .voice-launch:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #1e4d45 15%), var(--accent));
  box-shadow: 0 16px 32px rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}

/* Card interactions */
.note-card, .proof-card, .service-card, .lane-card, .why-card, .product-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.note-card:hover, .proof-card:hover, .service-card:hover, .lane-card:hover, .why-card:hover, .product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.is-hidden {
  display: none !important;
}

.lead-generation-page .card-link {
  margin-top: 18px;
}

.leadgen-myth-grid {
  align-items: stretch;
}

.leadgen-callout {
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.leadgen-callout p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.leadgen-decision-layout,
.leadgen-input-layout,
.leadgen-followup-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(280px, 0.86fr);
  gap: 22px;
}

.leadgen-tree-card,
.leadgen-tree-summary,
.leadgen-form-shell,
.leadgen-example-summary,
.leadgen-followup-card,
.leadgen-followup-proof,
.leadgen-engine-shell {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.leadgen-tree-card,
.leadgen-form-shell,
.leadgen-example-summary,
.leadgen-followup-card,
.leadgen-followup-proof,
.leadgen-engine-shell {
  padding: 30px;
}

.leadgen-tree-summary {
  padding: 28px;
}

.leadgen-stage-rail,
.leadgen-engine-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.leadgen-stage-button,
.leadgen-engine-button,
.leadgen-choice {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.leadgen-stage-button,
.leadgen-engine-button {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.92rem;
}

.leadgen-stage-button:hover,
.leadgen-engine-button:hover,
.leadgen-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.24);
}

.leadgen-stage-button.is-active,
.leadgen-engine-button.is-active,
.leadgen-choice.is-selected {
  color: #fff;
  border-color: rgba(var(--accent-rgb), 0.28);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #9c3c24 12%), var(--accent));
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.16);
}

.leadgen-stage-panel {
  margin-top: 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}

.leadgen-stage-panel h3,
.leadgen-engine-note h3,
.leadgen-results-head h3,
.leadgen-followup-card h3 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 500;
}

.leadgen-stage-panel p,
.leadgen-tree-summary p,
.leadgen-engine-note p,
.leadgen-results-head p,
.leadgen-followup-card p,
.leadgen-followup-proof p {
  color: var(--muted);
  line-height: 1.7;
}

.leadgen-stage-panel h3 + p,
.leadgen-engine-note h3 + p,
.leadgen-followup-card h3 + p {
  margin-top: 12px;
}

.leadgen-summary-stack {
  display: grid;
  gap: 12px;
}

.leadgen-summary-row,
.leadgen-proof-step,
.leadgen-key-row {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.leadgen-summary-row strong,
.leadgen-proof-step strong {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leadgen-summary-row span,
.leadgen-proof-step span,
.leadgen-key-row span {
  color: var(--muted);
  line-height: 1.55;
}

.leadgen-engine-shell {
  display: grid;
  gap: 22px;
}

.leadgen-engine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.leadgen-engine-step {
  border-radius: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.leadgen-engine-step h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
  font-weight: 500;
}

.leadgen-engine-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.leadgen-run-head {
  display: grid;
  gap: 12px;
}

.leadgen-run-head h3,
.leadgen-review-preview h3,
.leadgen-reviewed-card h4 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 500;
}

.leadgen-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.leadgen-progress span {
  height: 8px;
  border-radius: 999px;
  background: rgba(24, 21, 18, 0.1);
  transition: background 200ms ease;
}

.leadgen-progress span.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #9c3c24 12%), var(--accent));
}

.leadgen-fieldset {
  display: none;
  margin-top: 28px;
}

.leadgen-fieldset.is-active {
  display: block;
}

.leadgen-fieldset + .leadgen-fieldset {
  margin-top: 24px;
}

.leadgen-field-label,
.leadgen-email-label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.leadgen-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.leadgen-choice {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.92rem;
}

.leadgen-actions {
  margin-top: 28px;
}

.leadgen-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.leadgen-step-actions .button-ghost:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.leadgen-actions-note,
.leadgen-email-note,
.leadgen-result-meta {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.leadgen-state-meters {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.leadgen-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
}

.leadgen-meter-row strong {
  font-weight: 500;
}

.leadgen-mini-bar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(24, 21, 18, 0.08);
}

.leadgen-mini-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.64), rgba(var(--accent-rgb), 0.95));
}

.leadgen-heat-key {
  margin-top: 22px;
}

.leadgen-key-row {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
}

.leadgen-heat-dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
}

.leadgen-heat-dot.hot,
.leadgen-heat-bar span.hot {
  background: #d65a35;
}

.leadgen-heat-dot.warm,
.leadgen-heat-bar span.warm {
  background: #d88b3c;
}

.leadgen-heat-dot.watch,
.leadgen-heat-bar span.watch {
  background: #7e857f;
}

.leadgen-results-shell {
  margin-top: 24px;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.leadgen-results-head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 22px;
}

.leadgen-results-head p {
  margin: 0;
}

.leadgen-results-rationale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.leadgen-rationale-card {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(24, 21, 18, 0.08);
  background: var(--surface-strong);
}

.leadgen-rationale-card strong,
.leadgen-dimension-chip strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leadgen-rationale-card span,
.leadgen-dimension-chip span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.leadgen-result-card {
  position: relative;
}

.leadgen-dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}

.leadgen-dimension-chip {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(24, 21, 18, 0.08);
  background: var(--surface-strong);
}

.leadgen-result-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.leadgen-score-badge {
  min-width: 78px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 74%, white 26%);
  color: var(--accent);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.leadgen-heat-bar {
  overflow: hidden;
  height: 9px;
  margin: 14px 0 12px;
  border-radius: 999px;
  background: rgba(24, 21, 18, 0.08);
}

.leadgen-heat-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.leadgen-email-row,
.leadgen-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.leadgen-email-input {
  flex: 1 1 240px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
}

.leadgen-email-input:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.42);
  outline-offset: 2px;
}

.leadgen-followup-message {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
}

.leadgen-followup-message strong {
  color: var(--accent);
}

.leadgen-proof-steps {
  display: grid;
  gap: 14px;
}

.leadgen-review-preview {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.leadgen-reviewed-list {
  display: grid;
  gap: 14px;
}

.leadgen-reviewed-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(24, 21, 18, 0.08);
  background: var(--surface-strong);
}

.leadgen-reviewed-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.leadgen-reviewed-score {
  min-width: 80px;
  padding: 10px 12px;
  border-radius: 18px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(24, 21, 18, 0.08);
}

.leadgen-reviewed-score.hot {
  color: #b14625;
  background: rgba(214, 90, 53, 0.14);
}

.leadgen-reviewed-score.warm {
  color: #a86923;
  background: rgba(216, 139, 60, 0.14);
}

.leadgen-reviewed-score.watch {
  color: #59605a;
  background: rgba(126, 133, 127, 0.14);
}

@media (max-width: 980px) {
  .leadgen-decision-layout,
  .leadgen-input-layout,
  .leadgen-followup-shell,
  .leadgen-results-head {
    grid-template-columns: 1fr;
  }

  .leadgen-tree-card,
  .leadgen-tree-summary,
  .leadgen-form-shell,
  .leadgen-example-summary,
  .leadgen-followup-card,
  .leadgen-followup-proof,
  .leadgen-engine-shell,
  .leadgen-results-shell {
    padding: 22px;
  }

  .leadgen-results-rationale,
  .leadgen-dimension-grid {
    grid-template-columns: 1fr;
  }

  .leadgen-meter-row {
    grid-template-columns: 1fr;
  }

  .leadgen-reviewed-topline {
    flex-direction: column;
  }
}

/* Scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


.voice-companion {
  position: sticky;
  bottom: 18px;
  z-index: 30;
  margin: 22px 0 0;
}

.voice-companion-shell {
  display: grid;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.9));
  box-shadow: 0 18px 40px rgba(24, 21, 18, 0.12);
  backdrop-filter: blur(14px);
}

.voice-companion-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.voice-companion-copy h2 {
  margin: 10px 0 8px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 0.98;
}

.voice-companion-copy p {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  line-height: 1.6;
}

.voice-companion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.voice-companion-actions .button-ghost {
  cursor: pointer;
  font-family: inherit;
}

.voice-companion-link {
  color: var(--text);
  text-decoration-color: rgba(var(--accent-rgb), 0.34);
  text-underline-offset: 0.2em;
}

body.has-voice-companion .voice-companion {
  animation: voice-companion-rise 180ms ease-out;
}

@keyframes voice-companion-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  body.lead-generation-page::before,
  body.lead-generation-page::after {
    display: none;
  }

  .voice-companion-shell {
    padding: 18px;
  }

  .panel-brand {
    flex-direction: column;
    gap: 12px;
  }

  .voice-companion-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .leadgen-engine-grid,
  .leadgen-myth-grid {
    grid-template-columns: 1fr;
  }

  .leadgen-stage-button,
  .leadgen-engine-button,
  .leadgen-choice,
  .leadgen-email-input,
  .leadgen-email-row .button,
  .leadgen-footer-actions .button,
  .leadgen-footer-actions .button-ghost {
    width: 100%;
  }

  .leadgen-choice-group,
  .leadgen-email-row,
  .leadgen-footer-actions,
  .leadgen-step-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .leadgen-key-row {
    grid-template-columns: auto 1fr;
  }

  .leadgen-key-row span:last-child {
    grid-column: 1 / -1;
  }

  .leadgen-progress {
    gap: 6px;
  }
}

.os-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: stretch;
}

.os-node {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.86));
  box-shadow: var(--shadow-soft);
}

.os-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 24px 0 0 24px;
  background: rgba(var(--accent-rgb), 0.48);
}

.os-node h3 {
  margin: 10px 0 12px;
  font-size: 1.7rem;
  line-height: 1.02;
}

.os-node p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.os-caption {
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 960px) {
  .os-diagram {
    grid-template-columns: 1fr;
  }
}

/* Daisy Hero Glow */
.concept-product .hero-page {
  position: relative;
  z-index: 1;
}

.concept-product .hero-page::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 15%;
  width: 70%;
  height: 100%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Timeline Layout */
.timeline-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0;
  margin: 0 auto;
  max-width: 600px;
}

.timeline-layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 4px, transparent 4px, transparent 8px);
}

.timeline-step {
  position: relative;
  padding-left: 60px;
}

.timeline-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  z-index: 2;
}

.timeline-step h3 {
  margin: 4px 0 8px;
  font-size: 1.4rem;
  color: var(--text);
}

.timeline-step p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
}

/* Typographic Grid */
.typo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 48px;
  padding: 32px 0;
}

.typo-card {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s ease;
}

.typo-card:hover {
  border-top-color: var(--accent);
}

.typo-card h3 {
  margin: 12px 0;
  font-size: 1.6rem;
  transition: color 0.3s ease;
}

.typo-card:hover h3 {
  color: var(--accent);
}

.typo-card p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.typo-card .card-link {
  margin-top: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  display: inline-block;
}

.typo-card .card-link::after {
  content: "→";
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.typo-card .card-link:hover {
  transform: none;
  background: transparent;
}

.typo-card .card-link:hover::after {
  transform: translateX(4px);
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  z-index: 101;
}

@media (max-width: 840px) {
  .topbar {
    position: relative;
  }

  .mobile-nav-toggle {
    display: block;
    /* Pinned to the masthead so the open panel (which starts below it) cannot
       cover the control that closes it. */
    position: absolute;
    top: 26px;
    right: 22px;
  }

  .nav-subpage {
    position: fixed;
    /* Sits below the masthead so the brand lockup stays visible while the menu
       is open. See the matching .mobile-nav-ready rule. */
    inset: 132px 0 auto 0;
    width: auto;
    height: auto;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    padding: 8px 0 28px;
    background: var(--surface-strong);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    /* pointer-events blocks the mouse but NOT the keyboard: without visibility the
       closed overlay's links stay in the tab order, so focus disappears off-screen
       into an invisible full-screen menu. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav-subpage.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  
  .nav-subpage a {
    font-size: 1.5rem;
  }
}

.mobile-compare-stack {
  display: none;
}

.pricing-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pricing-jump-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 840px) {
  .home-page .hero-collage {
    display: none;
  }

  .home-page .hero-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .home-page .hero h1 {
    max-width: 100%;
  }

  .home-page .hero p {
    margin-bottom: 20px;
  }

  .pricing-page .main-stack,
  .platform-page .main-stack {
    gap: 36px;
  }

  .pricing-page .note-card,
  .pricing-page .service-card,
  .platform-page .note-card,
  .platform-page .service-card,
  .platform-page .proof-card,
  .platform-page .os-node {
    padding: 22px;
  }

  .mobile-nav-ready .nav-home,
  .mobile-nav-ready .nav-subpage {
    position: fixed;
    /* Start below the masthead so the brand lockup and the toggle stay visible and
       usable while the menu is open — a full-viewport inset:0 sheet covers the logo
       and leaves the toggle orphaned on an empty field. */
    inset: 132px 0 auto 0;
    width: auto;
    height: auto;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    padding: 8px 0 28px;
    background: var(--surface-strong);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    /* pointer-events blocks the mouse but NOT the keyboard: without visibility the
       closed overlay's links stay in the tab order, so focus disappears off-screen
       into an invisible full-screen menu. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-nav-ready .nav-home.is-open,
  .mobile-nav-ready .nav-subpage.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-nav-ready .nav-home a,
  .mobile-nav-ready .nav-subpage a {
    font-size: 1.5rem;
  }

  .pricing-jump-strip {
    padding: 16px 18px;
  }

  .pricing-jump-links {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .pricing-jump-links::-webkit-scrollbar {
    display: none;
  }

  .pricing-jump-links a {
    flex: 0 0 auto;
  }

  .platform-page .platform-compare-table {
    display: none;
  }

  .platform-page .mobile-compare-stack {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
  }
}

body.home-page {
  --homepage-ink: #20262d;
  --homepage-ink-soft: #5d676f;
  --homepage-line: rgba(28, 24, 20, 0.09);
  /* Homepage surfaces/accent now inherit the global Option B palette so the
     homepage stops being a parallel design world. Ink/line typography kept. */
  --homepage-surface: var(--surface);
  --homepage-surface-strong: var(--surface-strong);
  --homepage-surface-soft: var(--surface-soft);
  --homepage-accent-rgb: var(--accent-rgb);
  --homepage-accent: var(--accent);
  --homepage-shadow: var(--shadow);
  --homepage-shadow-soft: var(--shadow-soft);
  background:
    radial-gradient(circle at 18% 14%, rgba(246, 248, 250, 0.60), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(var(--accent-rgb), 0.06), transparent 30%),
    linear-gradient(180deg, #dde3ea 0%, #d1d9e2 55%, #c9d0d8 100%);
}

.home-page .site-shell {
  max-width: 1440px;
  padding: 26px 32px 96px;
}

.home-page .topbar-home {
  margin-bottom: 22px;
  /* Padding must clear the 34px corner radius, or the wordmark sits inside the
     curve's arc and reads as cramped against the border. */
  padding: 22px 30px;
  border: 1px solid rgba(28, 24, 20, 0.07);
  background: rgba(245, 246, 248, 0.7);
  box-shadow: 0 14px 26px rgba(28, 24, 20, 0.025);
}

.home-page .nav-home a {
  color: color-mix(in srgb, var(--homepage-ink) 68%, white 32%);
}

.home-page .nav-home a:hover,
.home-page .nav-home a:focus-visible {
  color: var(--homepage-ink);
  background: var(--surface-strong);
}

.home-page .card-link {
  background: rgba(245, 246, 248, 0.82);
  border-color: rgba(28, 24, 20, 0.12);
  color: var(--homepage-ink);
  box-shadow: 0 10px 24px rgba(28, 24, 20, 0.04);
}

.home-page .card-link:hover {
  background: var(--surface-strong);
  border-color: rgba(var(--homepage-accent-rgb), 0.24);
  box-shadow: 0 14px 28px rgba(28, 24, 20, 0.06);
}

.home-page .main-stack.homepage-main {
  gap: 24px;
  margin-top: 0;
}

.home-page .homepage-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: 20px;
  align-items: start;
  padding: 8px 0 2px;
}

.home-page .homepage-hero-copy,
.home-page .homepage-hero-scene,
.home-page .homepage-section,
.home-page .founder-panel,
.home-page .close-cta-panel,
.home-page .evidence-feature-card,
.home-page .evidence-support-card,
.home-page .scenario-card,
.home-page .timeline-step,
.home-page .entry-card,
.home-page .offer-row {
  min-width: 0;
}

.home-page .homepage-hero-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 10px 4px 4px 4px;
}

.home-page .homepage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--homepage-ink) 65%, white 35%);
}

.home-page .homepage-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: rgba(var(--homepage-accent-rgb), 0.34);
}

.home-page .hero-price-line {
  margin: 2px 0;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--homepage-ink);
}

.home-page .hero-price-figure {
  font-weight: 700;
  color: var(--accent);
}

/* The second sentence gets its own line: .h1-break forces the break so
   "That is where we start." never starts mid-line with an orphaned word.
   text-wrap is set to pretty, not balance — balance evens out line lengths
   without regard for sentence boundaries, which is what stranded "it" on
   line three.

   The break holds at EVERY width, including phones. An earlier version
   released it below 560px on the assumption that small screens needed the
   line back; on a 440px iPhone that split the second sentence as
   "…use it. That" / "is where we start." — worse than the problem it was
   meant to solve. Do not reintroduce a release breakpoint. */
.home-page .homepage-hero h1 .h1-break {
  display: block;
  height: 0;
  overflow: hidden;
}

.home-page .homepage-hero h1 {
  margin: 0;
  max-width: 26ch;
  font-family: var(--display);
  font-size: clamp(2.45rem, 3.9vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.home-page .homepage-hero-lead {
  max-width: 34rem;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--homepage-ink) 90%, white 10%);
}

.home-page .homepage-hero-support {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--homepage-ink-soft);
}

.home-page .homepage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}

.home-page .homepage-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.home-page .homepage-pillars span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(28, 24, 20, 0.08);
  background: rgba(245, 246, 248, 0.7);
  color: color-mix(in srgb, var(--homepage-ink) 86%, white 14%);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.home-page .homepage-hero-scene {
  display: grid;
  align-items: stretch;
  align-self: start;
}

.home-page .scene-frame {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 34px;
  border: 1px solid rgba(28, 24, 20, 0.08);
  background:
    radial-gradient(circle at 86% 12%, rgba(var(--homepage-accent-rgb), 0.12), transparent 28%),
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.82));
  box-shadow: var(--homepage-shadow);
  overflow: hidden;
}

.home-page .scene-frame::before {
  content: "";
  position: absolute;
  inset: auto -12% -16% auto;
  width: 58%;
  height: 44%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 23%, rgba(var(--homepage-accent-rgb), 0.18) 23% 24%, transparent 24% 42%, rgba(var(--homepage-accent-rgb), 0.12) 42% 43%, transparent 43% 100%);
  opacity: 0.8;
}

.home-page .scene-header,
.home-page .scene-grid,
.home-page .scene-story {
  position: relative;
  z-index: 1;
}

.home-page .scene-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--homepage-ink) 58%, white 42%);
}

.home-page .scene-story {
  display: grid;
  gap: 8px;
  max-width: 29rem;
}

.home-page .scene-story h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.35vw, 2.45rem);
  line-height: 0.96;
  font-weight: 500;
  text-wrap: balance;
}

.home-page .scene-story p {
  margin: 0;
  color: var(--homepage-ink-soft);
  line-height: 1.58;
}

.home-page .scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-page .scene-card {
  display: grid;
  gap: 6px;
  padding: 14px 14px 13px;
  border-radius: 22px;
  border: 1px solid rgba(28, 24, 20, 0.08);
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(28, 24, 20, 0.035);
}

.home-page .scene-card strong {
  font-size: 0.94rem;
  font-weight: 600;
}

.home-page .scene-card span {
  color: var(--homepage-ink-soft);
  line-height: 1.56;
  font-size: 0.92rem;
}

.home-page .scene-card-quiet {
  background: rgba(245, 246, 248, 0.74);
}

.home-page .homepage-section {
  padding: 34px;
  border-radius: 34px;
  border-color: rgba(28, 24, 20, 0.08);
  background: var(--homepage-surface);
  box-shadow: var(--homepage-shadow-soft);
}

.home-page .homepage-section-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 22px;
  max-width: 48rem;
}

.home-page .homepage-section-heading h2 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(2.35rem, 3.2vw, 3.5rem);
  line-height: 0.98;
  font-weight: 500;
  text-wrap: balance;
}

.home-page .homepage-section-heading p {
  margin: 0;
  color: var(--homepage-ink-soft);
  line-height: 1.66;
  font-size: 1rem;
}

.home-page .evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.home-page .evidence-feature-card,
.home-page .evidence-support-card,
.home-page .entry-card,
.home-page .scenario-card,
.home-page .timeline-step,
.home-page .offer-row,
.home-page .founder-panel,
.home-page .close-cta-panel {
  border: 1px solid rgba(28, 24, 20, 0.08);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(28, 24, 20, 0.03);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.home-page .evidence-feature-card:hover,
.home-page .evidence-support-card:hover,
.home-page .scenario-card:hover,
.home-page .timeline-step:hover,
.home-page .entry-card:hover,
.home-page .offer-row:hover,
.home-page .founder-panel:hover,
.home-page .close-cta-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--homepage-accent-rgb), 0.22);
  box-shadow: 0 14px 30px rgba(28, 24, 20, 0.055);
}

.home-page .evidence-feature-card {
  display: grid;
  gap: 14px;
  padding: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(var(--homepage-accent-rgb), 0.12), transparent 24%),
    var(--surface-strong);
}

.home-page .evidence-feature-card h3,
.home-page .evidence-support-card h3,
.home-page .entry-card h3,
.home-page .timeline-step h3,
.home-page .founder-panel h2,
.home-page .close-cta-panel h3 {
  margin: 0;
}

.home-page .evidence-feature-card h3 {
  font-size: 1.52rem;
  line-height: 1.08;
  font-family: var(--display);
  font-weight: 500;
}

.home-page .evidence-feature-card p,
.home-page .evidence-support-card p,
.home-page .offer-row-copy p,
.home-page .scenario-card p,
.home-page .timeline-step p,
.home-page .entry-card p,
.home-page .founder-panel p,
.home-page .close-cta-panel p,
.home-page .relationship-closer p {
  margin: 0;
  color: var(--homepage-ink-soft);
  line-height: 1.68;
}

.home-page .evidence-sheet {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(28, 24, 20, 0.08);
  background: rgba(245, 246, 248, 0.84);
}

.home-page .evidence-sheet-row {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(28, 24, 20, 0.08);
}

.home-page .evidence-sheet-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.home-page .evidence-sheet-row span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--homepage-ink) 64%, white 36%);
}

.home-page .evidence-sheet-row strong {
  font-size: 0.95rem;
  line-height: 1.42;
  font-weight: 600;
}

.home-page .evidence-feature-actions,
.home-page .evidence-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-page .evidence-support-stack {
  display: grid;
  gap: 12px;
}

.home-page .evidence-support-card,
.home-page .entry-card {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.home-page .evidence-support-card h3,
.home-page .entry-card h3 {
  font-size: 1.22rem;
  line-height: 1.14;
  font-weight: 600;
}

.home-page .evidence-support-card ul,
.home-page .entry-card ul,
.home-page .founder-points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 16px;
  color: color-mix(in srgb, var(--homepage-ink) 84%, white 16%);
}

.home-page .offers-rail {
  display: grid;
  gap: 8px;
}

.home-page .offer-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 0.9fr) minmax(280px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
}

.home-page .offer-row-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(28, 24, 20, 0.09);
  background: rgba(245, 246, 248, 0.9);
  color: color-mix(in srgb, var(--homepage-ink) 68%, white 32%);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.home-page .offer-row-main {
  display: grid;
  gap: 8px;
}

.home-page .offer-row-main h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.16;
  font-weight: 600;
}

.home-page .offer-row-copy {
  display: grid;
  gap: 10px;
}

.home-page .offer-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-page .offer-row-tags span,
.home-page .scenario-fit {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(245, 246, 248, 0.9);
  border: 1px solid rgba(28, 24, 20, 0.07);
  color: color-mix(in srgb, var(--homepage-ink) 82%, white 18%);
  font-size: 0.8rem;
}

.home-page .offer-row-link {
  color: var(--homepage-ink);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(28, 24, 20, 0.14);
}

.home-page .offer-row-link:hover {
  border-bottom-color: rgba(var(--homepage-accent-rgb), 0.4);
}

.home-page .scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-page .scenario-card {
  display: grid;
  gap: 9px;
  padding: 20px;
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.72));
}

.home-page .scenario-scene {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--homepage-ink) 64%, white 36%);
}

.home-page .scenario-card h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 600;
}

.home-page .relationship-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-page .timeline-step {
  display: grid;
  gap: 9px;
  padding: 20px;
  background: var(--surface-strong);
}

.home-page .timeline-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 246, 248, 0.92);
  border: 1px solid rgba(28, 24, 20, 0.08);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--homepage-ink) 70%, white 30%);
}

.home-page .relationship-closer {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(28, 24, 20, 0.08);
}

.home-page .relationship-closer p {
  max-width: 42rem;
}

.home-page .close-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Three entry cards (Daisy, Rose, the work) — a 2-col track leaves an empty cell. */
.home-page .entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-page .entry-card-daisy {
  background:
    radial-gradient(circle at 86% 14%, rgba(var(--homepage-accent-rgb), 0.12), transparent 22%),
    var(--surface-strong);
}

.home-page .entry-card-paige {
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.74));
}


.home-page .homepage-close {
  background:
    linear-gradient(180deg, var(--surface-strong), rgba(245, 246, 248, 0.78));
}

.home-page .founder-panel,
.home-page .close-cta-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
}

/* 7 FAQ cards in a 3-col track leaves a lone card with two empty slots beside it.
   Let the last one span, same pattern as .pricing-path-feature. */
.home-page #questions .why-card:last-child {
  grid-column: 1 / -1;
}

.home-page .founder-panel h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 2.7vw, 2.9rem);
  line-height: 0.98;
  font-weight: 500;
}

.home-page .close-cta-panel h3 {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
}

.home-page .homepage-footer {
  margin-top: 32px;
  padding: 26px 28px;
  border-radius: 32px;
  border-color: rgba(28, 24, 20, 0.08);
  background: rgba(255, 251, 247, 0.84);
}

.home-page .homepage-footer-main {
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(140px, 0.7fr));
  gap: 22px;
}

.home-page .homepage-footer-brand p {
  max-width: 28rem;
}

.home-page .footer-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--homepage-ink) 68%, white 32%);
}

.home-page .footer-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.home-page .footer-list a {
  color: color-mix(in srgb, var(--homepage-ink) 86%, white 14%);
  text-decoration: none;
}

.home-page .footer-list a:hover {
  color: var(--homepage-ink);
}

.home-page .footer-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 24, 20, 0.08);
}

@media (max-width: 1180px) {
  .home-page .homepage-hero,
  .home-page .evidence-layout,
  .home-page .close-grid {
    grid-template-columns: 1fr;
  }

  .home-page .homepage-hero-copy {
    padding-bottom: 0;
  }

  .home-page .scene-frame {
    min-height: 0;
  }

  .home-page .homepage-section-heading,
  .home-page .offer-row {
    grid-template-columns: 1fr;
  }

  .home-page .offer-row {
    gap: 14px;
  }

  .home-page .offer-row-link {
    justify-self: start;
  }

  /* .entry-grid deliberately excluded: it holds 3 cards, so a 2-col track here would
     leave an empty cell through the whole 841-1180 band. It stays 3-up until the
     840px single-column collapse below. */
  .home-page .relationship-timeline,
  .home-page .scenario-grid,
  .home-page .homepage-footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .home-page .scene-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .home-page .site-shell {
    padding: 18px 18px 56px;
  }

  .home-page .main-stack.homepage-main {
    gap: 18px;
  }

  .home-page .homepage-hero {
    gap: 16px;
    padding-top: 4px;
  }

  .home-page .homepage-hero h1 {
    max-width: 100%;
    font-size: clamp(2.1rem, 7.4vw, 3rem);
    line-height: 1.04;
  }

  .home-page .homepage-hero-lead {
    font-size: 0.98rem;
    line-height: 1.56;
  }

  .home-page .homepage-actions,
  .home-page .evidence-feature-actions,
  .home-page .evidence-link-row,
  .home-page .relationship-closer {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .home-page .scene-grid,
  .home-page .scenario-grid,
  .home-page .relationship-timeline,
  .home-page .entry-grid,
  .home-page .homepage-footer-main {
    grid-template-columns: 1fr;
  }

  .home-page .homepage-section,
  .home-page .scene-frame,
  .home-page .founder-panel,
  .home-page .close-cta-panel,
  .home-page .evidence-feature-card,
  .home-page .evidence-support-card,
  .home-page .entry-card,
  .home-page .timeline-step,
  .home-page .scenario-card,
  .home-page .offer-row,
  .home-page .homepage-footer {
    padding: 18px;
  }

  .home-page .homepage-section-heading h2 {
    font-size: clamp(1.95rem, 7vw, 2.7rem);
    line-height: 1.01;
  }

  .home-page .homepage-section-heading {
    gap: 14px;
    margin-bottom: 16px;
  }

  .home-page .founder-panel h2,
  .home-page .close-cta-panel h3,
  .home-page .scene-story h2 {
    font-size: clamp(1.7rem, 6.6vw, 2.3rem);
    line-height: 1.02;
  }

  .home-page .homepage-pillars {
    gap: 8px;
  }

  .home-page .homepage-pillars span,
  .home-page .offer-row-tags span,
  .home-page .scenario-fit {
    font-size: 0.76rem;
  }

  .home-page .offer-row {
    gap: 12px;
  }

  .home-page .offer-row-copy,
  .home-page .evidence-support-card,
  .home-page .entry-card,
  .home-page .scenario-card,
  .home-page .timeline-step {
    gap: 8px;
  }

  .home-page .evidence-layout,
  .home-page .evidence-support-stack,
  .home-page .entry-grid,
  .home-page .close-grid,
  .home-page .relationship-timeline,
  .home-page .scenario-grid {
    gap: 10px;
  }

  .home-page .scene-header {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .home-page .site-shell {
    padding: 16px 16px 48px;
  }

  .home-page .brand-mark {
    width: 186px;
  }

  .home-page .brand-kicker {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }

  .home-page .homepage-hero h1 {
    max-width: 100%;
  }

  .home-page .homepage-hero {
    gap: 14px;
  }

  .home-page .scene-frame {
    gap: 14px;
  }

  .home-page .scene-story h2 {
    max-width: 100%;
    font-size: clamp(1.42rem, 7vw, 1.78rem);
  }

  .home-page .scene-header {
    font-size: 0.7rem;
  }

  .home-page .scene-grid {
    gap: 8px;
  }

  .home-page .scene-card {
    padding: 12px;
  }

  .home-page .scene-card strong {
    font-size: 0.9rem;
  }

  .home-page .scene-card span {
    font-size: 0.84rem;
    line-height: 1.46;
  }

  .home-page .homepage-section,
  .home-page .scene-frame,
  .home-page .founder-panel,
  .home-page .close-cta-panel,
  .home-page .evidence-feature-card,
  .home-page .evidence-support-card,
  .home-page .entry-card,
  .home-page .timeline-step,
  .home-page .scenario-card,
  .home-page .offer-row,
  .home-page .homepage-footer {
    padding: 16px;
    border-radius: 24px;
  }

  .home-page .evidence-feature-card h3,
  .home-page .evidence-support-card h3,
  .home-page .entry-card h3,
  .home-page .offer-row-main h3,
  .home-page .scenario-card h3,
  .home-page .timeline-step h3 {
    font-size: 1.08rem;
    line-height: 1.12;
  }

  .home-page .offer-row {
    gap: 10px;
  }

  .home-page .offer-row-mark,
  .home-page .timeline-step-number {
    width: 38px;
    height: 38px;
    font-size: 0.76rem;
  }

  .home-page .offer-row-main {
    gap: 6px;
  }

  .home-page .offer-row-copy {
    gap: 8px;
  }

  .home-page .homepage-section-heading {
    margin-bottom: 14px;
  }

  .home-page .homepage-section-heading p,
  .home-page .homepage-hero-lead,
  .home-page .evidence-feature-card p,
  .home-page .evidence-support-card p,
  .home-page .offer-row-copy p,
  .home-page .scenario-card p,
  .home-page .timeline-step p,
  .home-page .entry-card p,
  .home-page .founder-panel p,
  .home-page .close-cta-panel p,
  .home-page .relationship-closer p {
    line-height: 1.58;
  }

  .home-page .offer-row-tags span,
  .home-page .scenario-fit,
  .home-page .homepage-pillars span {
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.74rem;
  }
}

/* Agent conversation shell (SplashCandy-owned, role-generic) */
.agent-shell {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
}

.agent-shell-status {
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  min-height: 1.3em;
}

.agent-shell-indicator {
  display: none;
  gap: 6px;
  align-items: flex-end;
  height: 18px;
}

.agent-shell-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.55;
}

.agent-shell.sc-shell-live .agent-shell-indicator {
  display: inline-flex;
}

.agent-shell.sc-shell-live .agent-shell-indicator span {
  animation: agent-shell-listen 1.6s ease-in-out infinite;
}

.agent-shell.sc-shell-live.sc-shell-speaking .agent-shell-indicator span {
  animation: agent-shell-speak 0.9s ease-in-out infinite;
  opacity: 0.9;
}

.agent-shell-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.agent-shell-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes agent-shell-listen {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.6); }
}

@keyframes agent-shell-speak {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(2.4); }
}

.agent-shell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agent-shell .button,
.agent-shell .button-ghost {
  min-width: 0;
}

.agent-shell-end,
.agent-shell-ended-copy,
.agent-shell-error-copy {
  display: none;
}

.agent-shell.sc-shell-live .agent-shell-end {
  display: inline-flex;
}

.agent-shell.sc-shell-connecting .agent-shell-talk,
.agent-shell.sc-shell-live .agent-shell-talk {
  display: none;
}

.agent-shell.sc-shell-connecting .agent-shell-status {
  color: var(--text);
}

.agent-shell.sc-shell-ended .agent-shell-ended-copy {
  display: block;
}

.agent-shell.sc-shell-error .agent-shell-error-copy {
  display: block;
}

.agent-shell.sc-shell-error {
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--brand-gray) 12%);
}

.agent-shell-ended-copy p,
.agent-shell-error-copy p {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--muted);
}

.sc-shell-debug {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.sc-shell-debug button {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .agent-shell-indicator span {
    animation: none !important;
  }
}


/* 2026-07-01 design pass: cap body copy measure inside full-width cards. */
.portfolio-page .company-grid .note-card p,
.portfolio-page .company-grid .note-card li {
  max-width: 72ch;
}

/* Journey banner: the single forward step at the end of every primary page. */
.journey-next {
  margin-top: 48px;
  padding: 40px clamp(24px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-strong), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.journey-next-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.journey-next-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Self-check questions: static, no-JS reveal-answer pattern on education.html */
.self-check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.self-check-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  background: var(--surface);
  padding: 16px 20px;
}
.self-check-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.self-check-item summary::-webkit-details-marker {
  display: none;
}
.self-check-item summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--accent);
}
.self-check-item[open] summary::before {
  content: "\2212";
}
.self-check-item p {
  margin: 12px 0 0;
  color: var(--muted);
}
.journey-next-copy h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0;
  max-width: 40ch;
  text-wrap: balance;
}

/* Project 2 — imagery: founder headshot, conversation previews, generic image slots */

/* Founder section sits in open page space, no card shell — the photo
   and bio read as part of the page itself, not boxed content. */
.founder-open {
  margin-top: 48px;
  padding: 0 clamp(4px, 1vw, 12px);
}

.founder-open-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.founder-headshot-open {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.founder-headshot-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .founder-open-grid {
    grid-template-columns: 1fr;
  }
  .founder-headshot-open {
    max-width: 200px;
  }
}

.conversation-preview {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  padding: 22px;
  margin-bottom: 20px;
}

.conversation-preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.conversation-preview-bar span:not(.conversation-preview-label) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill);
}

.conversation-preview-label {
  margin-left: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.conversation-preview-transcript {
  display: grid;
  gap: 10px;
}

.conversation-preview-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.4;
}

.conversation-preview-bubble.is-agent {
  background: var(--accent-soft);
  color: var(--text);
  justify-self: start;
  border-bottom-left-radius: 6px;
}

.conversation-preview-bubble.is-caller {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  justify-self: end;
  border-bottom-right-radius: 6px;
}

.conversation-preview-waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-top: 16px;
  opacity: 0.5;
}

.conversation-preview-waveform span {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.conversation-preview-note {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
}

.image-slot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line);
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 18px;
}

/* ============================================================
   OPTION B — depth + accent finish (2026-07-17)
   Makes nested cards separate from their panels and carries
   the blue accent onto section labels. Appended last for
   specificity; no existing rule removed. Applies sitewide via
   the shared bg-surface-wake body scope.
   ============================================================ */
body.concept-product.bg-surface-wake .note-card,
body.concept-product.bg-surface-wake .why-card,
body.concept-product.bg-surface-wake .entry-card,
body.concept-product.bg-surface-wake .lane-card,
body.concept-product.bg-surface-wake .proof-card,
body.concept-product.bg-surface-wake .scene-card,
body.concept-product.bg-surface-wake .scenario-card,
body.concept-product.bg-surface-wake .offer-row,
body.concept-product.bg-surface-wake .timeline-step,
body.concept-product.bg-surface-wake .evidence-support-card,
body.concept-product.bg-surface-wake .evidence-feature-card,
body.concept-product.bg-surface-wake .evidence-sheet-row,
body.concept-product.bg-surface-wake .spotlight-card,
body.concept-product.bg-surface-wake .module-card,
body.concept-product.bg-surface-wake .product-card,
body.concept-product.bg-surface-wake .service-card,
body.concept-product.bg-surface-wake .tier-card,
body.concept-product.bg-surface-wake .founder-panel,
body.concept-product.bg-surface-wake .platform-workflow-card,
body.concept-product.bg-surface-wake .leadgen-followup-card,
body.concept-product.bg-surface-wake .leadgen-followup-proof,
body.concept-product.bg-surface-wake .leadgen-tree-card,
body.concept-product.bg-surface-wake .leadgen-rationale-card,
body.concept-product.bg-surface-wake .leadgen-reviewed-card,
body.concept-product.bg-surface-wake .leadgen-result-card,
body.concept-product.bg-surface-wake .leadgen-engine-step {
  background: var(--surface-strong);
  border: 1px solid rgba(21, 32, 41, 0.12);
  box-shadow: 0 8px 20px rgba(15, 25, 40, 0.08);
}
body.concept-product.bg-surface-wake .section-card {
  border: 1px solid rgba(21, 32, 41, 0.10);
  box-shadow: 0 18px 40px rgba(15, 25, 40, 0.10), 0 4px 10px rgba(15, 25, 40, 0.05);
}
body.concept-product.bg-surface-wake .price-line {
  color: var(--accent);
}

/* ============================================================
   TIER 3 — one canonical small-label spec (2026-07-17)
   Every overline/eyebrow/kicker/tag/timestamp label shares one
   size, spacing, weight, and color. Reserve accent-blue for an
   explicit .is-accent opt-in only. Fixes the "some blue some grey,
   different sizes, looks out of place" inconsistency. Scoped to
   concept pages; overrides the scattered per-class rules by order. */
body.concept-product .mini-label,
body.concept-product .proof-label,
body.concept-product .status,
body.concept-product .eyebrow,
body.concept-product .homepage-eyebrow,
body.concept-product .brand-kicker,
body.concept-product .panel-brand-kicker,
body.concept-product .meta-label,
body.concept-product .collage-label,
body.concept-product .footer-label,
body.concept-product .voice-companion-label,
body.concept-product .hero-proof-tag,
body.concept-product .journey-next-label,
body.concept-product .conversation-preview-label,
body.concept-product .home-page .scene-header {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  font-style: normal;
  color: var(--muted);
}

/* Opt-in accent: only labels explicitly marked .is-accent turn blue. */
body.concept-product .mini-label.is-accent,
body.concept-product .proof-label.is-accent,
body.concept-product .homepage-eyebrow.is-accent,
body.concept-product .hero-proof-tag.is-accent {
  color: var(--accent);
}
/* All four pricing tiers now read at equal weight — no pre-selected step, so the
   former accent-highlight override for the featured card is gone. The hover is
   re-asserted at this specificity because the page-scope card rule above resets
   background/box-shadow and would otherwise flatten it. */
body.concept-product.bg-surface-wake .tier-card:hover {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), var(--shadow-soft);
  cursor: pointer;
}

/* ============================================================
   Audit P0 (2026-07-18) — small-phone overflow fix.
   No breakpoint below 560px previously touched the generic hero
   H1 or the 176px-min buttons, so contact.html (the one page with
   no per-page H1 override) clipped mid-word at 390px and its two
   hero buttons overran the row. Shrink both at <=480px. This is
   the real fix; body{overflow-x:hidden} at :58 is now belt-and-
   suspenders, not the thing hiding the bug. */
@media (max-width: 480px) {
  .hero.hero-page h1 {
    font-size: clamp(1.9rem, 8vw, 3rem);
  }
  .button,
  .button-ghost,
  .home-page .hero-actions .button {
    min-width: 0;
    border-radius: var(--radius-lg);
  }
  .hero-actions .button,
  .hero-actions .button-ghost {
    flex: 1 1 100%;
  }
}


/* hide homepage corner/eyebrow stickies — founder direction 2026-07-20 */
.home-page .homepage-eyebrow,
.home-page .proof-label,
body.concept-product .panel-brand-kicker {
  display: none !important;
}

/* corner chrome cleanup 2026-07-20 */
.home-page .scene-header,
.home-page .hp-eyebrow,
.home-page .mini-label {
  display: none !important;
}

/* Exception: the adoption stat cards use .mini-label to attribute each figure
   to its source. Those must show — a stat on a credibility page needs its
   source beside it, not pooled in a footnote below the block. Every other
   homepage .mini-label stays hidden (section kickers like Assess/Teach/Daisy). */
.home-page .homepage-adoption .note-card .mini-label {
  display: block !important;
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

/* Pit crew supporting visual — homepage */
.home-page .homepage-pitcrew {
  padding: 8px 0 4px;
}
.home-page .pitcrew-figure {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(28, 24, 20, 0.08);
  box-shadow: 0 18px 44px -28px rgba(21, 32, 41, 0.45);
  background: #0e1216;
}
.home-page .pitcrew-image {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.home-page .homepage-actions .button-ghost {
  /* equal-weight paths — no single black primary door */
}

/* --- Homepage AI data chart -------------------------------------------- */
.ai-data-chart {
  margin: 26px 0 0;
  padding: 26px 28px 20px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}
.ai-data-chart-title {
  font-family: var(--display);
  font-size: 1.45rem;
  margin: 0 0 6px;
  color: var(--text);
}
.ai-data-chart-lede {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 58ch;
}
.ai-data-chart-svg {
  display: block;
  width: 100%;
  min-width: 460px;
  height: auto;
}
.ai-chart-bar {
  fill: rgba(var(--accent-rgb), 0.32);
}
.ai-chart-bar-lead {
  fill: var(--accent);
}
.ai-chart-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
}
.ai-chart-sub,
.ai-chart-foot {
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--muted);
}
.ai-chart-value {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  fill: var(--text);
  dominant-baseline: middle;
}
.ai-data-chart-caption {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 10px 0 0;
}
@media (max-width: 620px) {
  .ai-data-chart {
    padding: 20px 16px 16px;
  }
}

/* Contact hero CTA row — unified layered-grey bubbles, one row at desktop. */
.contact-hero-actions {
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}

.contact-hero-actions .button,
.contact-hero-actions .button-ghost {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 13px 16px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .contact-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .contact-hero-actions .button,
  .contact-hero-actions .button-ghost {
    white-space: normal;
    width: 100%;
  }
}