/* ============================================================
   AutomationTown v2
   Aesthetic: refined editorial, agentic, paper + aurora
   ============================================================ */

:root {
  /* Warm cream neutrals (workshop/cabin) */
  --paper:       oklch(0.945 0.022 78);
  --paper-2:     oklch(0.905 0.028 72);
  --paper-3:     oklch(0.845 0.036 68);
  --ink:         oklch(0.205 0.028 48);   /* umber-biased near-black */
  --ink-soft:    oklch(0.390 0.030 55);
  --ink-muted:   oklch(0.560 0.024 60);
  --rule:        oklch(0.830 0.030 70);
  --rule-soft:   oklch(0.880 0.024 74);

  /* Moss/forest green (cutting-mat reference) */
  --green:       oklch(0.485 0.100 150);
  --green-deep:  oklch(0.360 0.088 150);
  --green-ink:   oklch(0.260 0.075 150);
  --green-tint:  oklch(0.875 0.055 145);

  /* Terracotta/amber — founder's invitation */
  --orange:      oklch(0.680 0.140 48);
  --orange-deep: oklch(0.530 0.135 42);
  --orange-tint: oklch(0.895 0.055 62);

  /* Cooked-umber dark surface */
  --slate:       oklch(0.225 0.025 52);
  --slate-2:     oklch(0.285 0.028 52);

  /* Back-compat aliases so canary-era selectors keep working */
  --accent:      var(--orange);
  --accent-deep: var(--orange-deep);

  /* Typography — Fraunces display + Inter body/labels */
  --ff-display:  'Fraunces', 'Source Serif 4', Georgia, ui-serif, serif;
  --ff-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-serif:    'Fraunces', Georgia, ui-serif, serif;
  --ff-label:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-mono:     var(--ff-label);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;
  --s-11: 192px;

  /* Layout */
  --page-pad: clamp(20px, 4vw, 64px);
  --max-w: 1360px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph: cubic-bezier(0.2, 0.9, 0.1, 1);

  /* Nav height token */
  --nav-h: 68px;
  --strip-h: 0px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, form { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* When Lenis is active, html.lenis gets this class */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(15px, 0.92rem + 0.2vw, 17px);
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'ss01', 'ss02';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Date strip: cohort 2 announcement at top of page — dismissible */
.date-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--strip-h);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px var(--page-pad) 8px calc(var(--page-pad) + 4px);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 70;
  line-height: 1.4;
}
.date-strip[hidden] { display: none !important; }
.date-strip__close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: color-mix(in oklab, var(--paper), transparent 35%);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.date-strip__close:hover {
  background: color-mix(in oklab, var(--paper), transparent 88%);
  color: var(--paper);
}
.date-strip__close svg { width: 12px; height: 12px; display: block; }
.date-strip__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green), transparent 70%);
  animation: pulse 2.4s var(--ease-out) infinite;
  flex: 0 0 auto;
}
.date-strip__text { color: color-mix(in oklab, var(--paper), transparent 15%); }
.date-strip__text strong {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0;
}
.date-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--green), transparent 60%);
  padding-bottom: 1px;
}
.date-strip__cta svg { width: 9px; height: 9px; }
.date-strip__cta:hover { border-color: currentColor; }

/* Nav sits below the date strip */
.nav { top: var(--strip-h); }

.skip {
  position: absolute;
  top: -60px;
  left: var(--page-pad);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--ff-mono);
  font-size: 12px;
  z-index: 1000;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 10px; }

::selection {
  background: var(--green);
  color: var(--paper);
}

/* ============================================================
   Typography primitives
   ============================================================ */

.h-display,
.h-section {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.02;
  font-feature-settings: 'kern', 'liga';
  color: var(--ink);
  text-wrap: balance;
}
.h-section--light { color: var(--paper); }

.h-display em,
.h-section em {
  font-style: italic;
  font-weight: 500;
  font-family: var(--ff-serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 40;
  color: var(--green-deep);
}
.h-section--light em { color: var(--green); }
/* Cohort-specific: the "Five weeks" em uses the same orange as the week labels */
.section--cohort .h-section--light em { color: var(--orange); }

.kicker,
.overline {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.overline {
  color: var(--ink-muted);
}
.overline--light { color: color-mix(in oklab, var(--paper), transparent 30%); }

.kicker__dot {
  width: 5px; height: 5px;
  background: var(--green-deep);
  border-radius: 999px;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--green), transparent 70%); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--green), transparent 88%); }
}

.overline__line {
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.6;
}

/* ============================================================
   Buttons / pills
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), transform 0.2s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
}
.pill svg { width: 10px; height: 10px; }
.pill--ghost {
  border-color: var(--rule);
  background: color-mix(in oklab, var(--paper), transparent 60%);
  backdrop-filter: blur(6px);
}
.pill--ghost:hover {
  background: var(--paper);
  border-color: var(--ink);
}
.pill--dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.35), 0 4px 18px oklch(0.22 0.03 52 / 0.18);
}
.pill--dark:hover {
  transform: translateY(-1px);
  background: var(--green-ink);
  border-color: var(--green-ink);
  box-shadow: 0 2px 0 var(--green-deep), 0 10px 26px oklch(0.22 0.03 52 / 0.25);
}
.pill--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.15), 0 4px 14px oklch(0.22 0.03 52 / 0.2);
}
.pill--light:hover {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
}
.pill--ghost-light {
  color: var(--paper);
  border-color: color-mix(in oklab, var(--paper), transparent 70%);
  background: transparent;
}
.pill--ghost-light:hover {
  background: color-mix(in oklab, var(--paper), transparent 90%);
  border-color: var(--paper);
}
.pill--orange {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--orange);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.18), 0 6px 18px oklch(0.22 0.03 50 / 0.22);
}
.pill--orange:hover {
  transform: translateY(-1px);
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--paper);
  box-shadow: 0 2px 0 var(--orange-deep), 0 12px 28px oklch(0.22 0.03 50 / 0.28);
}
.pill--lg { padding: 14px 22px; font-size: 13px; }
.pill--form {
  padding: 10px 18px;
  margin: 4px;
}
.pill--full { width: 100%; }

/* ============================================================
   Nav
   ============================================================ */

.nav {
  position: fixed;
  top: var(--strip-h, 0px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 14px var(--page-pad) 14px;
  transition: top 0.2s var(--ease-out), background 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
  height: var(--nav-h);
}
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--paper), transparent 18%);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.nav.is-scrolled::after { opacity: 1; border-color: var(--rule-soft); }

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand__mark { width: 28px; height: 28px; color: var(--green-deep); }
.brand__name { font-family: var(--ff-display); }

.nav__links {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.nav__link svg { width: 9px; height: 6px; opacity: 0.5; }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__ctas {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;
}

/* ============================================================
   Section scaffold
   ============================================================ */

.section {
  position: relative;
  padding: clamp(var(--s-8), 8vw, var(--s-11)) var(--page-pad);
  max-width: var(--max-w);
  margin: 0 auto;
}
.section--dark {
  max-width: none;
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--slate);
  color: var(--paper);
}
.section--dark + .section { margin-top: 0; }

.section__head {
  display: grid;
  gap: var(--s-4);
  max-width: 58rem;
  margin-bottom: clamp(var(--s-7), 5vw, var(--s-9));
}
.section__head--center {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section__head--center .overline,
.section__head--center .kicker {
  justify-content: center;
  margin: 0 auto;
}
.section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  max-width: var(--max-w);
  align-items: start;
  margin-bottom: var(--s-9);
}
.section__head--split > div { display: grid; gap: var(--s-4); align-content: start; }
.section__head--split .section__lede { max-width: 48ch; }
.section__head--split > div > .pill { margin-top: var(--s-3); width: max-content; }

.h-section {
  font-size: clamp(34px, 1.8rem + 2.1vw, 58px);
}

.section__lede {
  font-family: var(--ff-body);
  font-size: clamp(16px, 0.95rem + 0.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  letter-spacing: 0.01em;
}
.section__lede--light { color: color-mix(in oklab, var(--paper), transparent 28%); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + 24px) var(--page-pad) clamp(32px, 3vw, 56px);
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: clip;
}
.hero--split {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__plasma {
  position: absolute;
  inset: -10% -20% auto auto;
  width: 80%;
  height: 80%;
  pointer-events: none;
  filter: blur(60px) saturate(1.2);
  z-index: -1;
  opacity: 0.55;
}
.plasma {
  position: absolute;
  border-radius: 50%;
}
.plasma--a {
  top: -10%; right: -10%;
  width: 70%; height: 70%;
  background: radial-gradient(circle at 30% 30%, var(--green-tint), transparent 60%);
}
.plasma--b {
  top: 20%; right: 10%;
  width: 40%; height: 40%;
  background: radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 60%);
}
.plasma--c {
  top: 40%; right: 20%;
  width: 30%; height: 30%;
  background: radial-gradient(circle at 50% 50%, var(--green-tint), transparent 60%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 80px);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: flex-start;
  max-width: 28rem;
}

/* Split hero (Vimeo facade on right) */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
}
.hero--split .hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: flex-start;
  max-width: 36rem;
}
.hero--split .hero__headline {
  max-width: 18ch;
  font-size: clamp(36px, 1.8rem + 2.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero--split .hero__headline em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange-deep);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}
.hero--split .hero__sub {
  max-width: 42ch;
  font-size: clamp(17px, 0.95rem + 0.4vw, 21px);
}
.hero__sub-em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--green-deep);
}

@media (max-width: 900px) {
  .hero--split { min-height: auto; }
  .hero__split { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero__copy { max-width: 100%; }
}

.hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.04), 0 18px 40px oklch(0.22 0.03 50 / 0.18);
  margin: 0;
  cursor: pointer;
}
.hero__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: sepia(0.12) saturate(0.95) brightness(0.92);
  transition: filter 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.hero__video:hover .hero__video-poster {
  filter: sepia(0.18) saturate(1.05) brightness(0.82);
  transform: scale(1.015);
}
.hero__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(0.22 0.03 50 / 0.32) 100%);
  pointer-events: none;
}
.hero__video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 20px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1rem + 0.25vw, 20px);
  letter-spacing: -0.005em;
  border: 1px solid var(--rule);
  cursor: pointer;
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.12), 0 14px 34px oklch(0.22 0.03 50 / 0.3);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  z-index: 2;
}
.hero__video-play:hover {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--orange);
  transform: translate(-50%, -50%) scale(1.03);
}
.hero__video-play-icon {
  width: 22px;
  height: 22px;
  color: var(--orange);
  transition: color 0.25s var(--ease-out);
}
.hero__video-play:hover .hero__video-play-icon { color: var(--paper); }
.hero__video-cap {
  position: absolute;
  bottom: 14px;
  left: 20px;
  color: color-mix(in oklab, var(--paper), transparent 15%);
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  font-weight: 500;
  letter-spacing: 0.14em;
  font-size: 12px;
  z-index: 2;
}
.hero__video--playing .hero__video-play,
.hero__video--playing .hero__video-cap,
.hero__video--playing::after,
.hero__video--playing .hero__video-poster { display: none; }
.hero__video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero__headline {
  font-size: clamp(40px, 2.2rem + 2.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  max-width: 19ch;
}
.hero__headline .word {
  display: inline-block;
  will-change: filter, opacity, transform;
}

.hero__sub {
  font-size: clamp(16px, 0.95rem + 0.35vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}

.hero__form {
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.02), 0 8px 24px oklch(0.22 0.03 52 / 0.06);
  width: min(480px, 100%);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.hero__form:focus-within {
  border-color: var(--ink);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.02), 0 12px 30px oklch(0.22 0.03 52 / 0.14);
}
.hero__form input {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.hero__form input::placeholder { color: var(--ink-muted); }

.hero__note {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero__note span:not(:last-child)::after {
  content: '·';
  margin-left: 14px;
  color: var(--rule);
}

/* Hero stage (floating cards) */
.hero__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 440px;
}
.hero__card {
  position: absolute;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.8) inset,
    0 2px 0 oklch(0 0 0 / 0.04),
    0 24px 40px -12px oklch(0.22 0.03 52 / 0.16),
    0 60px 120px -30px oklch(0.22 0.03 52 / 0.16);
  transform-origin: center center;
  will-change: transform;
}
.hero__card--main {
  inset: 0 0 0 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}
.hero__card--main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 42%;
}
.hero__card--stat {
  top: 38%;
  left: -8%;
  width: 48%;
  padding: 18px 20px;
  z-index: 3;
  background: var(--paper);
}
.hero__card--pill {
  top: 4%;
  right: -6%;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--paper);
}

.statcard {
  display: grid;
  gap: 8px;
}
.statcard__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.statcard__big {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: 'opsz' 60;
}
.statcard__unit {
  font-size: 0.5em;
  font-family: var(--ff-display);
  vertical-align: super;
  margin-left: -6px;
  color: var(--ink-muted);
}
.statcard__sub {
  font-family: var(--ff-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-muted);
  margin-left: 10px;
  align-self: baseline;
}
.statcard__bar {
  width: 100%;
  height: 5px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.statcard__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  border-radius: 999px;
  transition: width 1.4s var(--ease-emph);
}

/* v4: Next live drop-in card (replaces the "78% seats filled" overlay) */
.dropincard {
  display: grid;
  gap: 10px;
}
.dropincard__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dropincard__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.dropincard__meta {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.dropincard__when {
  color: var(--ink);
  font-weight: 500;
}
.dropincard__note {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.statcard__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.statcard__strong { color: var(--ink-soft); }

.dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ink-muted);
  display: inline-block;
  flex: 0 0 auto;
}
.dot--green { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green), transparent 75%); }

.pillcard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pillcard__ico {
  width: 16px; height: 16px;
  color: var(--green);
}

/* Hero tool marks */
.hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  justify-content: center;
  align-items: center;
  padding-top: clamp(var(--s-7), 6vw, var(--s-9));
  margin-top: clamp(var(--s-8), 6vw, var(--s-10));
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 0.95rem + 0.4vw, 20px);
  color: var(--ink-muted);
}
.hero__marks li {
  transition: color 0.25s var(--ease-out);
}
.hero__marks li:hover { color: var(--ink); }
.hero__marks-claude {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.hero__marks-claude img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Cohort Claude credit */
.cohort__marks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cohort__built {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
  backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 15%);
  font-weight: 500;
}
.cohort__built img { width: 14px; height: 14px; display: block; }

/* ============================================================
   Live feed (upcoming events, API-backed)
   ============================================================ */

.section--feed {
  padding-top: clamp(var(--s-7), 5vw, var(--s-8));
  padding-bottom: clamp(var(--s-8), 6vw, var(--s-10));
  position: relative;
}
.section--feed::before {
  content: '';
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: 0;
  height: 1px;
  background: var(--rule);
}
.feed__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-7));
}
.feed__head > div { display: grid; gap: var(--s-3); align-content: end; max-width: 52rem; }
.feed__title { font-size: clamp(28px, 1.4rem + 1.7vw, 48px); }
.feed__lede {
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}
.feed__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-deep);
}
.feed__all {
  justify-self: end;
}

.feed {
  display: grid;
  gap: 10px;
}
.event {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.event:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  box-shadow: 0 12px 26px -14px oklch(0.22 0.03 52 / 0.18);
}

.event__date {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 1px;
  padding: 10px 12px;
  border-right: 1px solid var(--rule-soft);
}
.event__month {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--green-deep);
}
.event__day {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 0.95;
  color: var(--ink);
  font-variation-settings: 'opsz' 40;
}
.event__dow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.event__body { display: grid; gap: 4px; min-width: 0; }
.event__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.event__status--live {
  color: var(--green-deep);
  font-weight: 500;
}
.event__status--soon { color: var(--green-deep); font-weight: 500; }
.event__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(17px, 0.9rem + 0.35vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.event__meta {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink-soft);
}
.event__kind {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.event--live {
  border-color: color-mix(in oklab, var(--green), transparent 60%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--green-tint), var(--paper) 55%), var(--paper));
}
.event--live .event__kind {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.event--cohort {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.event--cohort .event__title,
.event--cohort .event__day { color: var(--paper); }
.event--cohort .event__meta { color: color-mix(in oklab, var(--paper), transparent 30%); }
.event--cohort .event__month,
.event--cohort .event__dow,
.event--cohort .event__status { color: color-mix(in oklab, var(--paper), transparent 35%); }
.event--cohort .event__status--soon { color: var(--green); }
.event--cohort .event__date { border-right-color: color-mix(in oklab, var(--paper), transparent 85%); }
.event--cohort .event__kind {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

/* ============================================================
   Features section
   ============================================================ */

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
@media (max-width: 1200px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feature {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-6);
  padding: clamp(24px, 2vw, 36px);
  background: var(--paper-2);
  border-radius: 16px;
  border: 1px solid var(--rule-soft);
  min-height: 560px;
}
.feature__head { display: grid; gap: 14px; }
.feature__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 1.1rem + 0.7vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.feature__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
}
.learn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  width: max-content;
  transition: gap 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.learn svg { width: 10px; height: 10px; }
.learn:hover { gap: 12px; color: var(--green-deep); }

/* Mock UI */
.feature__visual {
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
  padding: 20px;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 14px 30px -12px oklch(0.22 0.03 52 / 0.10);
  align-self: end;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mock { display: grid; gap: 10px; }
.mock__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.mock__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--paper);
}
.mock__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--rule);
}
.mock__dot--live {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green), transparent 75%);
  animation: pulse 2s var(--ease-out) infinite;
}
.mock__dot--tue { background: oklch(0.70 0.12 60); }
.mock__title { font-size: 13px; color: var(--ink); font-weight: 500; }
.mock__time {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.mock__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-soft);
  width: max-content;
}

/* Community feature mock (mock--feed) */
.mock--feed { gap: 12px; }
.mock__post {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--paper);
}
.mock__post .avatar { width: 28px; height: 28px; }
.mock__post-name {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.mock__post-meta {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.mock__post-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.35;
}
.mock__post-stats {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.mock__weeks {
  display: grid;
  gap: 6px;
}
.mock__weeks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper);
}
.mock__weeks li b {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}
.mock__weeks li.is-active {
  background: color-mix(in oklab, var(--green-tint), var(--paper) 30%);
  border-color: var(--green);
  color: var(--ink);
}
.mock__weeks li.is-active b { color: var(--green-deep); }

.mock__builder {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
}
.avatar--b { background: linear-gradient(135deg, oklch(0.75 0.12 60), oklch(0.55 0.10 30)); }
.avatar--c { background: linear-gradient(135deg, oklch(0.70 0.14 230), oklch(0.50 0.12 260)); }
.mock__bname { font-size: 13px; color: var(--ink); font-weight: 500; }
.mock__bmeta { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-muted); }
.badge {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--green-deep);
  background: var(--green-tint);
  padding: 4px 8px;
  border-radius: 999px;
}

/* ============================================================
   Dark section scaffold + aurora
   ============================================================ */

.section--dark .section__head .h-section,
.section--dark .section__head .section__lede,
.section--dark .h-section,
.section--dark .section__lede { color: var(--paper); }

.section__dark-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.section__dark-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, oklch(0.26 0.03 52), transparent 60%),
    linear-gradient(to bottom, oklch(0.22 0.03 52), oklch(0.18 0.028 52));
  z-index: -1;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora--a {
  width: 55%; height: 55%;
  left: -10%; top: -10%;
  background: radial-gradient(circle at 50% 50%, oklch(0.60 0.12 60), transparent 60%);
}
.aurora--b {
  width: 45%; height: 45%;
  right: -5%; bottom: -20%;
  background: radial-gradient(circle at 50% 50%, oklch(0.50 0.13 50), transparent 60%);
}
.aurora--green-a {
  width: 60%; height: 60%;
  left: -15%; bottom: -20%;
  background: radial-gradient(circle at 50% 50%, oklch(0.55 0.12 148), transparent 60%);
}
.aurora--green-b {
  width: 40%; height: 40%;
  right: -10%; top: -10%;
  background: radial-gradient(circle at 50% 50%, oklch(0.50 0.11 145), transparent 60%);
}
.aurora--cta-a {
  width: 70%; height: 70%;
  left: -10%; top: 0%;
  background: radial-gradient(circle at 50% 50%, oklch(0.55 0.14 150), transparent 60%);
}
.aurora--cta-b {
  width: 50%; height: 50%;
  right: -10%; bottom: -20%;
  background: radial-gradient(circle at 50% 50%, oklch(0.48 0.12 155), transparent 60%);
}
.aurora--cta-c {
  width: 40%; height: 40%;
  left: 30%; top: 30%;
  background: radial-gradient(circle at 50% 50%, oklch(0.60 0.11 145), transparent 60%);
  opacity: 0.35;
}

/* Hero secondary CTA: text link instead of second pill */
.hero__cta-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 8px 4px;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.hero__cta-sub:hover { color: var(--ink); border-color: var(--ink); }
.hero__cta-sub--light { color: color-mix(in oklab, var(--paper), transparent 30%); border-color: color-mix(in oklab, var(--paper), transparent 70%); }
.hero__cta-sub--light:hover { color: var(--paper); border-color: var(--paper); }

/* ============================================================
   Countdown ticker (Cohort 2)
   ============================================================ */
.countdown {
  display: grid;
  gap: 10px;
  margin-top: var(--s-3);
  padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--paper), transparent 80%);
  border-radius: 14px;
  background: color-mix(in oklab, var(--paper), transparent 94%);
  backdrop-filter: blur(10px);
  max-width: 520px;
}
.countdown__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 45%);
}
.countdown__grid {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--paper);
}
.countdown__unit {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 58px;
}
.countdown__num {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(32px, 1.4rem + 1.6vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variation-settings: 'opsz' 60;
  font-variant-numeric: tabular-nums;
  transition: transform 0.25s var(--ease-out);
}
.countdown__num.is-tick { transform: translateY(-2px); }
.countdown__key {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 50%);
}
.countdown__sep {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(24px, 1.2rem + 1vw, 32px);
  color: color-mix(in oklab, var(--paper), transparent 60%);
  line-height: 1;
  align-self: center;
  transform: translateY(-8px);
}
.countdown.is-live .countdown__grid { opacity: 0.6; }
.countdown.is-live::after {
  content: 'Cohort 2 is live. Next cohort starts August 2026.';
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--green);
}

/* Scarcity meta variant */
.cohort__meta-item--warn strong { color: oklch(0.82 0.14 70); letter-spacing: 0.02em; }

/* ============================================================
   Cohort FAQ (scarcity-focused, expandable)
   ============================================================ */
.cohort__faq {
  max-width: 960px;
  margin: clamp(var(--s-7), 5vw, var(--s-8)) auto 0;
  display: grid;
  gap: 4px;
  padding: 0 var(--s-2);
}
.cohort__faq-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 50%);
  margin-bottom: 8px;
}
.cfaq {
  border-top: 1px solid color-mix(in oklab, var(--paper), transparent 85%);
  transition: background 0.25s var(--ease-out);
}
.cfaq:last-of-type { border-bottom: 1px solid color-mix(in oklab, var(--paper), transparent 85%); }
.cfaq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(17px, 0.95rem + 0.35vw, 21px);
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 0.2s var(--ease-out);
}
.cfaq summary::-webkit-details-marker { display: none; }
.cfaq summary:hover { color: var(--green); }
.cfaq__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  opacity: 0.7;
}
.cfaq__icon::before,
.cfaq__icon::after {
  content: '';
  position: absolute;
  inset: auto 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.cfaq__icon::after { transform: rotate(90deg); }
.cfaq[open] .cfaq__icon { opacity: 1; color: var(--green); }
.cfaq[open] .cfaq__icon::after { transform: rotate(0deg); }
.cfaq__body {
  padding: 0 0 20px;
  max-width: 68ch;
  color: color-mix(in oklab, var(--paper), transparent 25%);
  font-size: 15px;
  line-height: 1.6;
  animation: cfaqIn 0.3s var(--ease-out);
}
@keyframes cfaqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cohort header with big date card */
.cohort__header {
  max-width: 880px;
  margin: 0 auto clamp(var(--s-7), 5vw, var(--s-8));
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  justify-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.cohort__header .overline { justify-content: center; }

/* Horizontal ribbon: Kickoff date + live countdown on one line */
.cohort__ribbon {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(10px, 1vw, 14px) clamp(18px, 2vw, 26px);
  border-radius: 14px;
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 78%);
  color: var(--paper);
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.cohort__ribbon-left,
.cohort__ribbon-right {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
}
.cohort__ribbon-kick,
.cohort__ribbon-label {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 11px;
  color: var(--orange);
}
.cohort__ribbon-kick { color: var(--orange); }
.cohort__ribbon-label { color: color-mix(in oklab, var(--paper), transparent 40%); }
.cohort__ribbon-date {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  color: var(--paper);
  letter-spacing: -0.01em;
}
.cohort__ribbon-sep {
  width: 1px;
  height: 22px;
  background: color-mix(in oklab, var(--paper), transparent 75%);
}
.cohort__ribbon-cd {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--paper);
}
.cohort__ribbon-cd-unit { display: inline-flex; align-items: baseline; gap: 1px; }
.cohort__ribbon-cd-unit span {
  font-size: clamp(16px, 0.95rem + 0.3vw, 20px);
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
  display: inline-block;
  text-align: right;
}
.cohort__ribbon-cd-unit em {
  font-family: var(--ff-label);
  font-style: normal;
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 11px;
  color: color-mix(in oklab, var(--paper), transparent 45%);
}

@media (max-width: 600px) {
  .cohort__ribbon { width: 100%; max-width: 420px; }
  .cohort__ribbon-sep { display: none; }
}
.cohort__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: color-mix(in oklab, var(--paper), transparent 30%);
}
.cohort__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Cohort uses the same rich dark-green treatment as the Final CTA so the
   two green sections read as the same brand surface. */
.section--cohort {
  max-width: none;
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  background: oklch(0.30 0.075 150);
  color: var(--paper);
  padding: clamp(var(--s-8), 8vw, var(--s-11)) var(--page-pad);
  position: relative;
}
.section--cohort .section__dark-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.section--cohort .section__dark-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 50%, oklch(0.22 0.08 155), transparent 70%),
    linear-gradient(to bottom, oklch(0.32 0.078 150), oklch(0.24 0.07 150));
  z-index: -1;
}

.section--cohort > * { position: relative; z-index: 1; }
.section--dark > * { position: relative; z-index: 1; }

.section--cohort .section__head {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Results (dark) stats
   ============================================================ */
.section--results {
  padding: clamp(var(--s-9), 10vw, var(--s-11)) var(--page-pad);
}

.stats {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
.stat {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-right: 10px;
}
.stat__big {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(56px, 2.8rem + 4vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variation-settings: 'opsz' 60;
}
.stat__cur {
  font-family: var(--ff-display);
  font-size: 0.55em;
  color: color-mix(in oklab, var(--paper), transparent 30%);
}
.stat__sup {
  font-size: 0.35em;
  font-family: var(--ff-display);
  vertical-align: super;
  color: color-mix(in oklab, var(--paper), transparent 30%);
  letter-spacing: 0;
}
.stat__label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(15px, 0.9rem + 0.25vw, 18px);
  color: var(--paper);
}
.stat__sub {
  font-family: var(--ff-body);
  font-size: 14px;
  color: color-mix(in oklab, var(--paper), transparent 35%);
  line-height: 1.5;
  max-width: 30ch;
}

/* ============================================================
   Members / quotes
   ============================================================ */
.section--members { padding-top: clamp(var(--s-9), 10vw, var(--s-11)); }

.quotes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
}
.quote {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: clamp(20px, 2vw, 32px);
  display: grid;
  gap: var(--s-4);
  grid-column: span 6;
}
.quote--portrait {
  grid-column: span 8;
  grid-template-columns: minmax(160px, 200px) 1fr;
  align-items: start;
  gap: clamp(16px, 2vw, 32px);
}
.quote--wide {
  grid-column: span 8;
  grid-template-columns: minmax(160px, 200px) 1fr;
  align-items: start;
  gap: clamp(16px, 2vw, 32px);
}
.quotes > .quote:last-child {
  grid-column: span 12;
  grid-template-columns: minmax(180px, 260px) 1fr;
}
.quote--stat {
  grid-column: span 4;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  min-height: 280px;
  padding: clamp(22px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.firm-logo {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  color: color-mix(in oklab, var(--paper), transparent 30%);
}
.quote__big {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(60px, 2.8rem + 4.5vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  font-variation-settings: 'opsz' 60;
}
.quote--stat .quote__big .stat__sup { color: color-mix(in oklab, var(--paper), transparent 35%); font-size: 0.25em; }
.quote__sub {
  font-size: 14px;
  color: color-mix(in oklab, var(--paper), transparent 30%);
  max-width: 30ch;
}

.quote__portrait {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: 10px;
  background:
    linear-gradient(180deg, oklch(0.62 0.08 240) 0%, oklch(0.32 0.06 240) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.quote__portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 30% at 50% 18%, oklch(0.88 0.04 60 / 0.85), transparent 70%),
    radial-gradient(55% 42% at 50% 78%, oklch(0.75 0.06 30 / 0.7), transparent 70%);
  mix-blend-mode: screen;
}
.quote__portrait::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, oklch(0 0 0 / 0.28), transparent);
}
.quote__portrait--b {
  background: linear-gradient(180deg, oklch(0.62 0.09 20) 0%, oklch(0.30 0.06 10) 100%);
}
.quote__portrait--c {
  background: linear-gradient(180deg, oklch(0.60 0.10 150) 0%, oklch(0.32 0.08 150) 100%);
}
.quote--portrait .quote__portrait::before,
.quote--wide .quote__portrait::before {
  background:
    radial-gradient(45% 30% at 50% 20%, oklch(0.92 0.03 60 / 0.9), transparent 70%),
    radial-gradient(52% 40% at 50% 72%, oklch(0.82 0.06 35 / 0.75), transparent 70%);
}

.quote__body { display: grid; gap: var(--s-4); align-content: start; }
.quote__text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(18px, 1rem + 0.4vw, 24px);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.quote__foot {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.quote__name {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--ink);
}
.quote__role {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}

/* ============================================================
   In the room
   ============================================================ */

.section--inroom {
  padding-top: clamp(var(--s-8), 8vw, var(--s-10));
  padding-bottom: clamp(var(--s-8), 8vw, var(--s-10));
}

.inroom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.inroom__card {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 1.6vw, 24px);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  min-height: 160px;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.inroom__card:hover { background: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.inroom__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.inroom__card ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 1.05rem + 0.7vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.inroom__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
  color: var(--ink);
  min-height: 72px;
}
.logomark:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -14px oklch(0.22 0.03 52 / 0.2);
}
.logomark img {
  max-width: 100%;
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}
.logomark[data-logo="karbon"] img { height: 22px; }
.logomark[data-logo="quickbooks"] img { height: 32px; }
.logomark[data-logo="xero"] img { height: 40px; }
.logomark[data-logo="financialcents"] img { height: 26px; }
.logomark[data-logo="chatgpt"] img { height: 40px; }
.logomark[data-logo="gemini"] img { height: 34px; }
.logomark[data-logo="copilot"] img { height: 26px; }
.logomark[data-logo="zapier"] img { height: 22px; }
.logomark[data-logo="power-automate"] img { height: 32px; }
.logomark[data-logo="github"] img { height: 32px; }
.logomark--claude {
  gap: 8px;
}
.logomark--claude img { width: 20px; height: 20px; }
.logomark--claude span {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Text-only logomark (for tools/agencies without an available mark) */
.logomark--text {
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  text-align: center;
}
.logomark--text .logomark__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.logomark--text .logomark__sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  line-height: 1.3;
}
.logomark--agencies {
  background: color-mix(in oklab, var(--green), transparent 92%);
  border-color: color-mix(in oklab, var(--green), transparent 70%);
}
.logomark--agencies .logomark__name { color: var(--green-ink); }
.logomark--agencies .logomark__sub { color: color-mix(in oklab, var(--green-ink), transparent 30%); }
.inroom__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.inroom__card:last-child .inroom__logos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .inroom__logos,
  .inroom__card:last-child .inroom__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Mechanism (Why this works) — 3-column comparison
   ============================================================ */
.section--mechanism {
  padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--page-pad);
}
.mech {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mech__col {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 2vw, 32px);
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  min-height: 360px;
  align-content: start;
  position: relative;
}
.mech__col--alt {
  color: var(--ink-soft);
  background: var(--paper);
}
.mech__col--us {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 30px 60px -30px oklch(0.22 0.03 52 / 0.3);
}
.mech__col--us::before {
  content: 'Our approach';
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--green);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--green), transparent 85%);
  border: 1px solid color-mix(in oklab, var(--green), transparent 55%);
}
.mech__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.mech__col--us .mech__label { color: color-mix(in oklab, var(--paper), transparent 45%); }
.mech__hit {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(24px, 1.2rem + 1.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mech__col--us .mech__hit { color: var(--paper); }
.mech__list {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.mech__col--us .mech__list { color: color-mix(in oklab, var(--paper), transparent 22%); }
.mech__list li {
  padding-left: 22px;
  position: relative;
}
.mech__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--ink-muted);
}
.mech__col--us .mech__list li::before { background: var(--green); height: 2px; top: 0.6em; }
.mech__time {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.mech__col--us .mech__time { border-color: color-mix(in oklab, var(--paper), transparent 82%); color: color-mix(in oklab, var(--paper), transparent 40%); }
.mech__time strong {
  font-family: var(--ff-display);
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ink);
}
.mech__col--us .mech__time strong { color: var(--green); }
.mech__foot {
  max-width: 68ch;
  margin: clamp(var(--s-6), 4vw, var(--s-7)) auto 0;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(17px, 0.95rem + 0.35vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .mech { grid-template-columns: 1fr; }
  .mech__col { min-height: auto; }
}

/* ============================================================
   Impact testimonials (metric + before/after + verify)
   ============================================================ */
.quotes--impact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.quote--impact {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  padding: clamp(22px, 1.8vw, 30px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  grid-column: span 1;
}
.quote__hit {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 2px;
}
.quote__metric {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variation-settings: 'opsz' 60;
  margin: 0;
}
.quote__metric-num { font-size: clamp(56px, 2.4rem + 3.5vw, 84px); }
.quote__metric-unit {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(18px, 1rem + 0.4vw, 22px);
  color: var(--ink-muted);
  letter-spacing: -0.005em;
}
.quote__metric-sub {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink-soft);
}
.quote__portrait {
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  border-radius: 999px;
  flex: 0 0 auto;
}
.quote__body { display: grid; gap: 12px; align-content: start; }
.quote__workflow {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
.quote__workflow span {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.quote__ba {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.quote__ba-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: baseline;
}
.quote__ba-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.quote__ba-label--after { color: var(--green-deep); font-weight: 700; }
.quote__text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.quote__foot {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.quote__name {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink);
}
.quote__role {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.quote__verify {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule);
  width: max-content;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.quote__verify:hover { color: var(--green-deep); border-color: currentColor; }

@media (max-width: 1100px) {
  .quotes--impact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .quotes--impact { grid-template-columns: 1fr; }
}

/* ============================================================
   About Chad
   ============================================================ */
.section--about {
  padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--page-pad);
}
.about {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.about__portrait {
  margin: 0;
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--nav-h) + var(--strip-h, 0px) + 24px);
  align-self: start;
}
.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 16px;
  border: 1px solid var(--rule);
  filter: saturate(0.98) contrast(1.02);
}
.about__portrait figcaption {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.about__portrait figcaption > span:first-child {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink);
}
.about__caption-sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-soft);
}
.about__body { display: grid; gap: var(--s-4); align-content: start; padding-top: 6px; }
.about__title {
  font-size: clamp(32px, 1.7rem + 2vw, 56px);
  max-width: 22ch;
}
.about__prose {
  display: grid;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}
.drop {
  font-family: var(--ff-display);
  font-weight: 600;
  float: left;
  font-size: 3.6em;
  line-height: 0.85;
  padding: 4px 10px 0 0;
  color: var(--green-deep);
  font-variation-settings: 'opsz' 60;
}
.about__quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.1rem + 0.5vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  border-left: 1px solid var(--rule);
  max-width: 52ch;
  margin-top: var(--s-2);
}

/* Inline "what I run at LiveCA" callout — now a 4-slide carousel with arrows */
.about__inside {
  margin-top: var(--s-4);
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head nav"
    "track nav";
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  max-width: 60ch;
  overflow: hidden;
}
.about__inside-head {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.about__inside-track { grid-area: track; }
.about__inside-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--green-deep);
  font-weight: 700;
}
.about__inside-nav {
  grid-area: nav;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}
.about__inside-count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  min-width: 32px;
  text-align: center;
}
.about__inside-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out);
}
.about__inside-arrow:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.about__inside-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.about__inside-arrow svg { width: 12px; height: 12px; }

/* Rolodex WHEEL: true 3D cylinder — cards are physically mounted around a
   horizontal axle. The wheel rotates as a whole; cards stay flat on their
   faces. On rotation you see the front card tumble forward AND the next
   card rise from beneath, like turning a spindle. */

/* Register wheel rotation as an animatable <angle> so CSS transitions can
   smoothly interpolate it even when GSAP's ticker is paused. */
@property --wheel-rot {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.about__inside-track {
  position: relative;
  min-height: 260px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: visible;
  border-radius: 10px;
  isolation: isolate;
}

/* The wheel rotates around its horizontal center axis.
   Inset from the track so the flipping card sits visibly smaller than the
   outer chassis, with room to breathe. */
.rolo-wheel {
  position: absolute;
  inset: 20px;
  transform-style: preserve-3d;
  transform: rotateX(var(--wheel-rot, 0deg));
  transition: --wheel-rot 1.25s cubic-bezier(0.66, 0, 0.2, 1);
  will-change: transform;
}
.rolo-wheel.is-turning { /* runtime hook kept in case we want to theme mid-turn */ }
.about__inside-slide.rolo-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 16px 18px;
  background: linear-gradient(180deg,
    var(--paper) 0%,
    color-mix(in oklab, var(--paper), var(--paper-2) 40%) 100%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.65) inset,
    0 -1px 0 color-mix(in oklab, var(--ink), transparent 92%) inset,
    0 14px 30px -16px oklch(0.22 0.03 52 / 0.3);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Each card positioned on the cylinder. JS sets --slide-angle per card. */
  transform:
    rotateX(var(--slide-angle, 0deg))
    translateZ(var(--rolo-radius, 140px));
  transition: box-shadow 0.4s var(--ease-out);
}
/* Active card sits forward, bright */
.about__inside-slide.rolo-card.is-active {
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.65) inset,
    0 -1px 0 color-mix(in oklab, var(--ink), transparent 92%) inset,
    0 20px 38px -14px oklch(0.22 0.03 52 / 0.38);
}
/* Inactive cards on the far side fade slightly; they remain in 3D space */
.about__inside-slide.rolo-card:not(.is-active) {
  filter: brightness(0.96) saturate(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .rolo-wheel { transition: none; transform: none; }
  .about__inside-slide.rolo-card {
    position: relative;
    transform: none;
    display: none;
  }
  .about__inside-slide.rolo-card.is-active { display: grid; }
}
.about__inside-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(17px, 0.95rem + 0.4vw, 21px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.about__inside-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.about__inside-tools {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  margin-top: 2px;
}
.about__inside-tools span {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  margin-right: 6px;
}

/* Rolodex on mobile: stack head / wheel / arrows so the wheel gets full
   width and there's enough room for the longest card (Daily email digest). */
@media (max-width: 720px) {
  .about__inside {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "track"
      "nav";
    padding: 16px;
  }
  .about__inside-nav {
    flex-direction: row;
    justify-content: center;
    align-self: auto;
    padding-left: 0;
    padding-top: 10px;
    border-left: none;
    border-top: 1px solid var(--rule);
    gap: 14px;
  }
  .about__inside-track { min-height: 340px; }
  .about__inside-slide.rolo-card { padding: 14px 16px; gap: 7px; }
  .about__inside-body { font-size: 14px; line-height: 1.5; }
}

/* ============================================================
   Guarantee
   ============================================================ */
.section--promise {
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad);
}
.promise {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3vw, 48px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.promise::after {
  content: '';
  position: absolute;
  inset: auto -20% -60% auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--green), transparent 80%), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.promise__mark {
  width: 80px;
  height: 80px;
  color: var(--green-deep);
  display: grid;
  place-items: center;
  align-self: start;
  animation: promiseSpin 60s linear infinite;
}
@keyframes promiseSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.promise > div:last-child { display: grid; gap: var(--s-4); justify-items: center; }
.promise__title {
  font-size: clamp(28px, 1.4rem + 1.5vw, 44px);
  line-height: 1.08;
  max-width: 28ch;
}
.promise__body {
  font-size: clamp(15px, 0.9rem + 0.25vw, 18px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 62ch;
}
.promise__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: var(--s-2);
}
.promise__list li { display: inline-flex; align-items: center; gap: 8px; }
.promise__list svg { width: 16px; height: 16px; color: var(--green-deep); }

/* ============================================================
   Seat slider (firm plan)
   ============================================================ */
.seatslider {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
}
.seatslider__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.seatslider__seats { display: grid; gap: 2px; }
.seatslider__count {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.seatslider__hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 45%);
}
.seatslider__total {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--paper);
}
.seatslider__total-amount {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 60;
}
.seatslider__total-amount::before {
  content: '$';
  font-family: var(--ff-display);
  font-size: 0.55em;
  font-weight: 500;
  color: color-mix(in oklab, var(--paper), transparent 30%);
  margin-right: 2px;
  vertical-align: super;
}
.seatslider__total-unit {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--paper), transparent 40%);
}

.seatslider__range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  margin: 4px 0;
  cursor: pointer;
}
.seatslider__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--green) 0%,
    var(--green) var(--fill, 0%),
    color-mix(in oklab, var(--paper), transparent 80%) var(--fill, 0%),
    color-mix(in oklab, var(--paper), transparent 80%) 100%);
}
.seatslider__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper), transparent 80%);
}
.seatslider__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--green);
}
.seatslider__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 14px oklch(0 0 0 / 0.4);
  margin-top: -8px;
  transition: transform 0.2s var(--ease-out);
}
.seatslider__range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.seatslider__range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 14px oklch(0 0 0 / 0.4);
}
.seatslider__range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.seatslider__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--paper), transparent 50%);
}
.seatslider__breakdown {
  font-family: var(--ff-body);
  font-size: 13px;
  color: color-mix(in oklab, var(--paper), transparent 30%);
  line-height: 1.5;
}
.seatslider__breakdown [data-seat-perseat] {
  font-weight: 600;
  color: var(--paper);
}
.seatslider--enterprise .seatslider__total-amount {
  font-size: 28px;
}

/* Plan promise line */
.plan__promise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.plan__promise svg { width: 14px; height: 14px; color: var(--green-deep); }
.plan__promise a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.plan__promise a:hover { border-color: currentColor; }
.plan__promise--dark { color: color-mix(in oklab, var(--paper), transparent 35%); }
.plan__promise--dark svg { color: var(--green); }
.plan__promise--dark a { color: var(--paper); border-color: color-mix(in oklab, var(--paper), transparent 70%); }

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(var(--s-6), 4vw, var(--s-7));
  border-top: 1px solid var(--rule);
  margin-top: clamp(var(--s-7), 4vw, var(--s-8));
}
.proof li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.proof svg { width: 20px; height: 20px; color: var(--green-deep); margin-top: 1px; }

/* ============================================================
   Cohort
   ============================================================ */

.weeks {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  counter-reset: week;
  position: relative;
}
.week {
  display: grid;
  grid-template-columns: clamp(80px, 9vw, 120px) 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: clamp(24px, 2.4vw, 36px);
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 80%);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  color: var(--paper);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  position: relative;
}
.week:hover {
  background: color-mix(in oklab, var(--paper), transparent 88%);
  border-color: color-mix(in oklab, var(--orange), transparent 40%);
  transform: translateY(-2px);
}
.week__num {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(52px, 5.6vw, 80px);
  line-height: 0.9;
  color: color-mix(in oklab, var(--paper), transparent 55%);
  display: block;
  align-self: start;
  margin-top: 2px;
}
.week__num em {
  font-style: italic;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  color: var(--orange-tint);
  font-weight: 500;
}
.week__body-wrap { display: grid; gap: 8px; min-width: 0; }
.week__label {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--orange);
  margin: 0;
}
.week__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 1.1rem + 0.5vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-wrap: balance;
}
.week__body {
  font-size: 15px;
  color: color-mix(in oklab, var(--paper), transparent 28%);
  line-height: 1.55;
}
.week__chip {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.12em;
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in oklab, var(--paper), transparent 32%);
  padding-top: clamp(8px, 0.9vw, 12px);
  border-top: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
  margin-top: clamp(4px, 0.6vw, 8px);
}

@media (max-width: 640px) {
  .week { grid-template-columns: 1fr; gap: 4px; padding: 22px; }
  .week__num { font-size: 56px; }
}
.cohort__cta {
  max-width: var(--max-w);
  margin: clamp(var(--s-7), 4vw, var(--s-8)) auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.cohort__note {
  font-family: var(--ff-label);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--paper), transparent 30%);
}

/* ============================================================
   Trust
   ============================================================ */

.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.trust__item {
  display: grid;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  align-content: start;
  min-height: 180px;
}
.trust__item svg { width: 22px; height: 22px; color: var(--green-deep); }
.trust__item h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 0.95rem + 0.4vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.trust__item p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ============================================================
   Pricing
   ============================================================ */

.section--pricing .section__head { text-align: center; }
.section--pricing .section__head .overline { justify-content: center; }
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1024px;
  margin: 0 auto;
}
.plan {
  padding: clamp(24px, 2.2vw, 36px);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.plan--firm {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 30px 60px -30px oklch(0.22 0.03 52 / 0.35);
}
.plan__head { display: grid; gap: 6px; }
.plan__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 1.1rem + 0.6vw, 28px);
  letter-spacing: -0.01em;
}
.plan__desc {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 44ch;
}
.plan--firm .plan__desc { color: color-mix(in oklab, var(--paper), transparent 30%); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
.plan--firm .plan__price { border-color: color-mix(in oklab, var(--paper), transparent 85%); }
.plan__amount {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(44px, 1.8rem + 3vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 60;
}
.plan__per {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.plan--firm .plan__per { color: color-mix(in oklab, var(--paper), transparent 35%); }
.plan__yearly {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: -6px;
}
.plan--firm .plan__yearly { color: color-mix(in oklab, var(--paper), transparent 35%); }
.plan__feats { display: grid; gap: 8px; }
.plan__feats li {
  font-size: 14px;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.plan--firm .plan__feats li { color: color-mix(in oklab, var(--paper), transparent 18%); }
.plan__feats li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.58em;
  width: 12px;
  height: 2px;
  background: var(--green-deep);
}
.plan--firm .plan__feats li::before { background: var(--green); }

/* ============================================================
   Final CTA
   ============================================================ */

.section--cta {
  max-width: none;
  margin: 0;
  padding: clamp(var(--s-9), 10vw, var(--s-11)) var(--page-pad);
  background: oklch(0.30 0.075 150);
  color: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.cta__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 50%, oklch(0.22 0.08 155), transparent 70%),
    linear-gradient(to bottom, oklch(0.32 0.078 150), oklch(0.24 0.07 150));
  z-index: -1;
}
.cta__inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  position: relative;
  z-index: 2;
}
.cta__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--paper), transparent 35%);
  margin-top: var(--s-2);
}
.cta__title {
  font-size: clamp(40px, 2.2rem + 2.6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 16ch;
  color: var(--paper);
  text-wrap: balance;
}
.cta__title em { color: var(--green); }
.cta__sub {
  font-size: clamp(16px, 0.95rem + 0.4vw, 20px);
  color: color-mix(in oklab, var(--paper), transparent 30%);
  max-width: 46ch;
  line-height: 1.5;
}
.hero__form--lg { width: min(540px, 100%); background: color-mix(in oklab, var(--paper), transparent 92%); border-color: color-mix(in oklab, var(--paper), transparent 80%); }
.hero__form--lg input { color: var(--paper); }
.hero__form--lg input::placeholder { color: color-mix(in oklab, var(--paper), transparent 45%); }
.cta__note {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: color-mix(in oklab, var(--paper), transparent 40%);
  letter-spacing: 0.04em;
}

/* ============================================================
   Footer
   ============================================================ */

.foot {
  background: var(--paper);
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad) var(--s-7);
  border-top: 1px solid var(--rule);
}
.foot__top {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(var(--s-7), 4vw, var(--s-8));
}
.foot__col { display: grid; gap: 8px; align-content: start; }
.foot__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.foot__col a {
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.foot__col a:hover { color: var(--ink); }
.foot__brand { display: grid; gap: 12px; align-content: start; }
.foot__tag {
  font-family: var(--ff-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(18px, 0.95rem + 0.4vw, 22px);
  color: var(--ink-soft);
  line-height: 1.3;
  max-width: 26ch;
  letter-spacing: 0;
}
.badge-new {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
}

.foot__bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   Split-word / reveal helpers (GSAP targets these)
   ============================================================ */

[data-split] .word {
  display: inline-block;
}
[data-reveal] { opacity: 0; }
/* Hero stays visible even if reveal JS doesn't fire (static first paint) */
.hero [data-reveal],
.hero .hero__headline .word { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 38rem; }
  .hero__stage { aspect-ratio: 3 / 2; min-height: 380px; }

  .features { grid-template-columns: 1fr; }
  .feature { min-height: auto; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }

  .quotes { grid-template-columns: repeat(4, 1fr); }
  .quote { grid-column: span 4; }
  .quote--portrait, .quote--wide { grid-column: span 4; }
  .quote--stat { grid-column: span 2; }
  .quote--stat:nth-of-type(4) { grid-column: span 4; }

  .section__head--split { grid-template-columns: 1fr; }
  .inroom { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: 1fr; }

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

  .foot__top { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__ctas .pill--ghost { display: none; }

  .cohort__meta { gap: 10px 16px; }
  .cohort__meta-item { font-size: 11px; }

  /* Date strip: compress on mobile */
  .date-strip { font-size: 11px; gap: 10px; flex-wrap: wrap; padding: 8px 42px 8px 14px; }
  .date-strip__close { right: 6px; }
  .date-strip__text { flex: 1; min-width: 0; }
  .date-strip__cta { white-space: nowrap; }

  /* About: stack portrait above body */
  .about { grid-template-columns: 1fr; }
  .about__portrait { max-width: 340px; position: static; }

  /* Guarantee: stack mark above content */
  .promise { grid-template-columns: 1fr; padding: 26px; }
  .promise__mark { width: 56px; height: 56px; }

  /* Pricing plans on mobile */
  .plans { grid-template-columns: 1fr; }

  .hero { padding-top: calc(var(--nav-h) + 32px); }
  .hero__headline { font-size: clamp(40px, 10vw, 56px); }
  .hero__stage { min-height: 320px; }
  .hero__card--stat { left: -4%; top: 44%; width: 62%; }
  .hero__card--pill { right: -2%; top: 3%; }
  .hero__form { flex-direction: column; padding: 8px; border-radius: 16px; align-items: stretch; }
  .hero__form input { padding: 10px 12px; }
  .hero__form .pill--form { width: 100%; }
  .hero__marks { gap: 16px 24px; font-size: 18px; }

  .stats { grid-template-columns: 1fr; gap: var(--s-6); }
  .stat__big { font-size: clamp(64px, 18vw, 92px); }

  .quotes { grid-template-columns: 1fr; }
  .quote, .quote--portrait, .quote--wide, .quote--stat { grid-column: span 1; }
  .quote--portrait, .quote--wide { grid-template-columns: 1fr; }
  .quote__portrait { max-width: 220px; }

  .inroom { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }

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

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

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-split] .word { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   V3 ADDITIONS
   ============================================================ */

/* -------- Gap 1: Self-qualify -------- */
.section--qualify {
  padding-top: clamp(var(--s-7), 5vw, var(--s-8));
  padding-bottom: clamp(var(--s-7), 5vw, var(--s-8));
}
.section--qualify .section__head { max-width: 40rem; }
.section--qualify .h-section { font-size: clamp(30px, 1.6rem + 1.8vw, 50px); }
.qualify {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}
.qualify__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.qualify__item:hover { border-color: var(--ink); transform: translateY(-1px); }
.qualify__mark {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 0.85;
  color: var(--green-deep);
  font-style: italic;
  transform: translateY(4px);
}
.qualify__item p {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.qualify__foot {
  max-width: var(--max-w);
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 0.95rem + 0.4vw, 22px);
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 720px) { .qualify { grid-template-columns: 1fr; } }

/* -------- Welcome / Who it's for -------- */
.section--welcome {
  padding: clamp(var(--s-8), 6vw, var(--s-10)) var(--page-pad);
  background: var(--paper-2);
}
.welcome__head {
  max-width: 72ch;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.welcome__head .overline { justify-content: center; }
.welcome__title {
  font-size: clamp(32px, 2rem + 1.4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.welcome__title em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--green-deep);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
}
.welcome__lede {
  font-size: clamp(16px, 0.95rem + 0.3vw, 19px);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}
.welcome__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.welcome-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.welcome-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink-muted);
  box-shadow: 0 18px 40px -18px oklch(0.22 0.03 52 / 0.22);
}
.welcome-card__tag {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--green-deep);
}
.welcome-card--beginner .welcome-card__tag { color: var(--green-deep); }
.welcome-card--builder .welcome-card__tag { color: var(--orange-deep); }
.welcome-card--nerd .welcome-card__tag { color: var(--ink); }
.welcome-card__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 1.1rem + 0.6vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.welcome-card__body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.welcome__firm {
  max-width: var(--max-w);
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.welcome__firm-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 999px;
  display: inline-block;
}
.welcome__firm-link {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.welcome__firm-link:hover { color: var(--ink); }

@media (max-width: 900px) {
  .welcome__cards { grid-template-columns: 1fr; }
}

/* -------- Legacy: Gap 3: Not-technical reassurance (retained for safety) -------- */
.section--reassure {
  padding: clamp(var(--s-7), 5vw, var(--s-8)) var(--page-pad);
  background: var(--paper-2);
}
.reassure {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.reassure__stat { display: grid; justify-items: center; gap: 6px; min-width: 220px; }
.reassure__pct {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(80px, 4rem + 5vw, 156px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--green-deep);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variation-settings: 'opsz' 60;
  margin: 0;
}
.reassure__unit { font-size: 0.5em; color: var(--ink-muted); letter-spacing: 0; }
.reassure__pct-sub {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 24ch;
  text-align: center;
  line-height: 1.4;
}
.reassure__body { display: grid; gap: 12px; align-content: start; max-width: 48rem; }
.reassure__title { font-size: clamp(26px, 1.4rem + 1.5vw, 42px); }
.reassure__lede { font-size: 17px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px) {
  .reassure { grid-template-columns: 1fr; justify-items: start; }
  .reassure__stat { min-width: 0; justify-items: start; }
  .reassure__pct-sub { text-align: left; max-width: none; }
}

/* -------- Gap 5: Free preview -------- */
.section--preview {
  padding: clamp(var(--s-7), 5vw, var(--s-9)) var(--page-pad);
}
.preview {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.preview__meta { display: grid; gap: 14px; max-width: 44rem; }
.preview__title { font-size: clamp(28px, 1.5rem + 1.6vw, 48px); }
.preview__lede { font-size: 17px; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }
.preview__form {
  display: flex;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: min(480px, 100%);
  margin-top: 6px;
  transition: border-color 0.25s var(--ease-out);
}
.preview__form:focus-within { border-color: var(--ink); }
.preview__form input {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.preview__form input::placeholder { color: var(--ink-muted); }
.preview__form .pill--form { margin: 4px; }
.preview__ack {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--green-deep);
  letter-spacing: 0.04em;
}
.preview__note {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.preview__card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 30px 60px -30px oklch(0.22 0.03 52 / 0.18);
}
.preview__video { display: grid; gap: 14px; }
.preview__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background:
    linear-gradient(135deg, oklch(0.32 0.05 52), oklch(0.16 0.03 52));
  display: grid;
  place-items: center;
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.preview__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 50% at 50% 50%, color-mix(in oklab, var(--green), transparent 78%), transparent 70%);
  mix-blend-mode: screen;
}
.preview__play { width: 66px; height: 66px; position: relative; z-index: 2; }
.preview__caption { display: grid; gap: 4px; }
.preview__caption-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.preview__caption-meta {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 900px) {
  .preview { grid-template-columns: 1fr; }
}

/* -------- Gap 4: Week in the life -------- */
.section--week {
  padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--page-pad);
}
.weekline { max-width: var(--max-w); margin: 0 auto; }
.weekline__days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.weekline__day {
  display: grid;
  gap: 8px;
  padding: 20px 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  min-height: 200px;
}
.weekline__day--soft { background: var(--paper); border-style: dashed; }
.weekline__when {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--green-deep);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.weekline__what {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(17px, 0.9rem + 0.4vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.weekline__note {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.weekline__paces {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.weekline__pace {
  padding: 22px 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  display: grid;
  gap: 6px;
}
.weekline__pace--mid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.weekline__pace-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.weekline__pace--mid .weekline__pace-label { color: var(--green); }
.weekline__pace-amt {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 1.1rem + 0.6vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.weekline__pace--mid .weekline__pace-amt { color: var(--paper); }
.weekline__pace-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.weekline__pace--mid .weekline__pace-desc { color: color-mix(in oklab, var(--paper), transparent 25%); }
.weekline__foot {
  margin-top: clamp(var(--s-5), 3vw, var(--s-6));
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
  .weekline__days { grid-template-columns: repeat(2, 1fr); }
  .weekline__paces { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .weekline__days { grid-template-columns: 1fr; }
}

/* -------- Gap 2: Workflows grid (inside cohort) -------- */
.workflows-block {
  max-width: var(--max-w);
  margin: clamp(var(--s-7), 5vw, var(--s-8)) auto 0;
}
.workflows-block__head { display: grid; gap: 10px; margin-bottom: clamp(var(--s-5), 3vw, var(--s-6)); max-width: 52rem; }
.workflows-block__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(24px, 1.3rem + 1.2vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
}
.workflows-block__lede { font-size: 16px; color: color-mix(in oklab, var(--paper), transparent 30%); max-width: 60ch; line-height: 1.55; }
.workflows-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.workflow-card {
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 80%);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 18px;
  display: grid;
  gap: 8px;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.workflow-card:hover {
  background: color-mix(in oklab, var(--paper), transparent 88%);
  border-color: var(--green);
  transform: translateY(-1px);
}
.workflow-card__tag {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--green);
}
.workflow-card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(16px, 0.9rem + 0.25vw, 18px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--paper);
}
.workflow-card__body { font-size: 13.5px; color: color-mix(in oklab, var(--paper), transparent 30%); line-height: 1.5; }
.workflows-block__foot {
  margin-top: clamp(var(--s-5), 3vw, var(--s-6));
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: color-mix(in oklab, var(--paper), transparent 25%);
  max-width: 62ch;
}
/* When the foot stands alone (no grid above it), center it and give it breathing room */
.workflows-block__foot--standalone {
  max-width: var(--max-w);
  margin: clamp(var(--s-6), 4vw, var(--s-7)) auto 0;
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(17px, 0.95rem + 0.3vw, 20px);
}
@media (max-width: 1100px) { .workflows-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .workflows-grid { grid-template-columns: 1fr; } }

/* -------- Gap 10: After Cohort 2 -------- */
.after-cohort {
  max-width: var(--max-w);
  margin: clamp(var(--s-7), 5vw, var(--s-8)) auto 0;
  padding: clamp(24px, 2.5vw, 36px);
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 80%);
  border-radius: 18px;
  display: grid;
  gap: var(--s-4);
}
.after-cohort__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(24px, 1.3rem + 1.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.after-cohort__body {
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  line-height: 1.55;
  color: color-mix(in oklab, var(--paper), transparent 25%);
  max-width: 70ch;
}
.after-cohort__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--s-2);
}
.after-cohort__list li {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
  background: color-mix(in oklab, var(--paper), transparent 95%);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--paper), transparent 45%);
}
.after-cohort__list li span:first-child {
  font-family: var(--ff-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-weight: 500;
  font-style: italic;
}
@media (max-width: 720px) { .after-cohort__list { grid-template-columns: 1fr; } }

/* Timezone helper */
.cohort__tz {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* -------- Gap 7: Safe with client data -------- */
.section--safe {
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad);
  background: var(--paper-2);
}
.safe {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.safe__mark {
  width: 80px;
  height: 80px;
  color: var(--green-deep);
  display: grid;
  place-items: center;
}
.safe__body { display: grid; gap: 14px; max-width: 62rem; }
.safe__lede {
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 60ch;
}
.safe__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: var(--s-3);
}
.safe__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  align-items: start;
}
.safe__list svg { width: 20px; height: 20px; color: var(--green-deep); margin-top: 1px; }
.safe__item-t {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}
.safe__item-d {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 4px;
}
.safe__foot {
  font-family: var(--ff-body);
  font-size: 13.5px;
  color: var(--ink-muted);
  margin-top: var(--s-3);
}
@media (max-width: 900px) {
  .safe { grid-template-columns: 1fr; }
  .safe__list { grid-template-columns: 1fr; }
}

/* -------- Honorable: Inside LiveCA -------- */
.section--insideca {
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad);
}
.insideca {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.insideca__card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(22px, 2vw, 32px);
  display: grid;
  gap: 10px;
  position: relative;
  min-height: 300px;
}
.insideca__no {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--green-deep);
}
.insideca__tag {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.insideca__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(19px, 1rem + 0.5vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.insideca__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.insideca__meta {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.insideca__meta span {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  margin-right: 6px;
}
.insideca__foot {
  max-width: var(--max-w);
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 1000px) { .insideca { grid-template-columns: 1fr; } }

/* -------- Gap 9: Payback math inline -------- */
.plan__payback {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--green), transparent 90%);
  border: 1px solid color-mix(in oklab, var(--green), transparent 75%);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  align-items: start;
}
.plan__payback svg { width: 18px; height: 18px; color: var(--green-deep); margin-top: 2px; }
.plan__payback strong { color: var(--green-ink); font-weight: 700; }
.plan__payback--dark {
  background: color-mix(in oklab, var(--green), transparent 80%);
  border-color: color-mix(in oklab, var(--green), transparent 60%);
  color: var(--paper);
}
.plan__payback--dark svg { color: var(--green); }
.plan__payback--dark strong { color: var(--green); }

/* Partner-pitch line in firm plan head */
.plan__partners {
  margin-top: 6px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px dashed color-mix(in oklab, var(--paper), transparent 75%);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper), transparent 18%);
  font-family: var(--ff-body);
}
.plan__partners strong {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.005em;
}

/* -------- Gap 6: Before you pay FAQ -------- */
.section--bfaq {
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad);
}
.section--bfaq .section__head { text-align: center; max-width: 48rem; margin-left: auto; margin-right: auto; }
.section--bfaq .overline { justify-content: center; }
.bfaq { max-width: 900px; margin: 0 auto; }
.bfaq__email { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.bfaq__email:hover { color: var(--green-deep); border-color: currentColor; }
.bfaq__item { border-top: 1px solid var(--rule); }
.bfaq__item:last-of-type { border-bottom: 1px solid var(--rule); }
.bfaq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(17px, 0.95rem + 0.35vw, 22px);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
.bfaq__item summary::-webkit-details-marker { display: none; }
.bfaq__item summary:hover { color: var(--green-deep); }
.bfaq__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  opacity: 0.7;
}
.bfaq__icon::before,
.bfaq__icon::after {
  content: '';
  position: absolute;
  inset: auto 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.bfaq__icon::after { transform: rotate(90deg); }
.bfaq__item[open] .bfaq__icon { opacity: 1; color: var(--green-deep); }
.bfaq__item[open] .bfaq__icon::after { transform: rotate(0deg); }
.bfaq__body {
  padding: 0 0 20px;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

/* -------- Gap 8: Onboarding preview -------- */
.section--onboard {
  padding: clamp(var(--s-8), 6vw, var(--s-9)) var(--page-pad);
  background: var(--paper-2);
}
.onboard {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.onboard__step {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 20px 24px;
  display: grid;
  gap: 8px;
  position: relative;
}
.onboard__step--last {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.onboard__when {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--green-deep);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.onboard__step--last .onboard__when {
  color: var(--green);
  border-color: color-mix(in oklab, var(--paper), transparent 85%);
}
.onboard__t {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(17px, 0.9rem + 0.4vw, 20px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.onboard__step--last .onboard__t { color: var(--paper); }
.onboard__d { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.onboard__step--last .onboard__d { color: color-mix(in oklab, var(--paper), transparent 25%); }
.onboard__foot {
  max-width: var(--max-w);
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
@media (max-width: 1100px) { .onboard { grid-template-columns: repeat(2, 1fr); } .onboard__step--last { grid-column: 1 / -1; } }
@media (max-width: 560px) { .onboard { grid-template-columns: 1fr; } .onboard__step--last { grid-column: 1; } }

/* -------- 4th international testimonial portrait -------- */
.quote__portrait--d {
  background: linear-gradient(180deg, oklch(0.62 0.09 60) 0%, oklch(0.30 0.06 50) 100%);
}

/* ============================================================
   V3.2 REBRAND PASS
   ============================================================ */

/* Reassure spectrum list */
.reassure__word {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(80px, 4rem + 5vw, 156px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--green-deep);
  font-variation-settings: 'opsz' 60;
  margin: 0;
  font-style: italic;
}
.reassure__spectrum {
  display: grid;
  gap: 10px;
  margin-top: var(--s-3);
}
.reassure__spectrum li {
  display: grid;
  grid-template-columns: minmax(120px, 140px) 1fr;
  gap: 18px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  align-items: baseline;
}
.reassure__spec-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--green-deep);
}
.reassure__spectrum li span:last-child {
  font-size: 14.5px;
  color: var(--ink);
}

/* Features lite: 3 tiles, skimmable, no big mockup visuals */
.section--features-lite {
  padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--page-pad);
}
.features-lite {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.feature-lite {
  display: grid;
  gap: 12px;
  padding: clamp(24px, 2.2vw, 34px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  align-content: start;
  min-height: 260px;
  position: relative;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.feature-lite:hover { border-color: var(--ink); transform: translateY(-2px); }
.feature-lite__no {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--green-deep);
  font-weight: 700;
}
.feature-lite__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 1.1rem + 0.9vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.feature-lite__body {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: auto;
}
@media (max-width: 1100px) { .features-lite { grid-template-columns: 1fr; } }

.section__head--tight {
  max-width: 60ch;
  margin: 0 auto clamp(28px, 3vw, 48px);
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.section__head--tight .overline { justify-content: center; }
.features-lite__title {
  font-size: clamp(28px, 1.7rem + 1vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Before/after panel — each card shows a two-column transformation
   (metric with muted orange "before" vs vivid green "after") so the
   change reads at a glance, not as prose. */
/* Testimonial mosaic — 4-col irregular grid, mixed-media cards. */
.ba-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(260px, auto);
  gap: clamp(14px, 1.6vw, 20px);
}
.ba-tile {
  position: relative;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 20px;
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 14px 38px -22px oklch(0.22 0.03 52 / 0.28);
  overflow: hidden;
  min-width: 0;
}
.ba-tile--quote-lg { grid-column: span 2; }
.ba-tile--photo-quote { grid-column: span 2; padding: 0; flex-direction: row; align-items: stretch; }
.ba-tile--portrait { padding: 0; }
.ba-tile--stat { justify-content: space-between; }

/* Brand/context tag — small-caps pill */
.ba-tile__mark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink), transparent 90%);
  color: var(--ink);
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  border: 1px solid var(--rule-soft);
}
.ba-tile__mark--overlay {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--paper);
  box-shadow: 0 6px 14px -6px oklch(0.22 0.03 52 / 0.35);
  z-index: 2;
}
a.ba-tile__mark--link { text-decoration: none; transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
a.ba-tile__mark--link:hover { color: var(--green-deep); border-color: color-mix(in oklab, var(--green-deep), transparent 55%); }
a.ba-tile__name--link { text-decoration: none; color: inherit; transition: color 0.2s var(--ease-out); }
a.ba-tile__name--link:hover { color: var(--green-deep); }
.ba-tile__mark--on-stat {
  background: color-mix(in oklab, var(--paper), transparent 35%);
  border-color: transparent;
}

/* Quote body */
.ba-tile__quote {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.ba-tile__quote p,
.ba-tile blockquote p {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(16px, 0.9rem + 0.4vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.ba-tile__quote--sm p {
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.45;
}

/* Attribution */
.ba-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ba-tile__meta--inline {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ba-tile__meta-text { display: flex; flex-direction: column; gap: 2px; }
.ba-tile__name {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.ba-tile__role {
  font-family: var(--ff-label);
  font-size: 12.5px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* Avatar (small circle in inline meta) */
.ba-tile__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orange-tint), var(--green-tint));
  border: 1px solid var(--rule);
  flex-shrink: 0;
  overflow: hidden;
  display: block;
}
.ba-tile__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Stat card — before → after comparison */
.ba-tile--stat-warm {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--orange-tint), var(--paper) 20%),
    color-mix(in oklab, var(--orange-tint), var(--paper) 45%));
  border-color: color-mix(in oklab, var(--orange-deep), transparent 80%);
}
.ba-tile--stat-moss {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--green-tint), var(--paper) 15%),
    color-mix(in oklab, var(--green-tint), var(--paper) 40%));
  border-color: color-mix(in oklab, var(--green-deep), transparent 75%);
}
.ba-tile__compare {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.ba-tile__before,
.ba-tile__after,
.ba-tile__metric {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  font-variation-settings: 'opsz' 72;
}
.ba-tile__before {
  font-size: clamp(36px, 2.2vw + 1rem, 52px);
  color: color-mix(in oklab, var(--ink), transparent 45%);
  position: relative;
}
.ba-tile__before::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 50%;
  height: 3px;
  background: var(--orange-deep);
  transform: rotate(-6deg);
  border-radius: 2px;
}
.ba-tile__after,
.ba-tile__metric {
  font-size: clamp(48px, 3vw + 1rem, 72px);
  color: var(--green-ink);
}
.ba-tile--stat-warm .ba-tile__after { color: var(--orange-deep); }
.ba-tile__before small,
.ba-tile__after small,
.ba-tile__metric small {
  font-family: var(--ff-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-left: 4px;
  color: var(--ink-muted);
  font-variant: all-small-caps;
}
.ba-tile__arrow {
  display: inline-grid;
  place-items: center;
  color: var(--ink-muted);
  align-self: center;
}
.ba-tile__stat-label {
  margin: 0;
  font-family: var(--ff-label);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 22ch;
}

/* Portrait-dominant card */
.ba-tile--portrait {
  display: block;
  min-height: clamp(320px, 32vw, 440px);
}
.ba-tile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 80% at 30% 20%, oklch(0.92 0.05 62 / 0.85), transparent 60%),
    linear-gradient(155deg, var(--orange-tint), var(--green-tint) 60%, var(--paper-3));
  overflow: hidden;
}
.ba-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}
.ba-tile__photo[data-placeholder]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 30% 70%, oklch(0.35 0.04 50 / 0.18), transparent 70%),
    radial-gradient(40% 30% at 75% 25%, oklch(0.95 0.02 70 / 0.35), transparent 70%);
  pointer-events: none;
}
.ba-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 2vw, 26px);
  padding-top: 60px;
  background: linear-gradient(to top,
    oklch(0.18 0.02 50 / 0.78) 10%,
    oklch(0.18 0.02 50 / 0.45) 55%,
    transparent);
  color: oklch(0.97 0.02 80);
  margin: 0;
}
.ba-tile__caption p {
  margin: 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(16px, 0.9rem + 0.4vw, 19px);
  line-height: 1.35;
  max-width: 26ch;
}

/* Photo + quote card */
.ba-tile__photo--split {
  position: relative;
  inset: auto;
  width: 44%;
  min-width: 220px;
  height: auto;
  align-self: stretch;
  flex-shrink: 0;
}
.ba-tile__photo-body {
  padding: clamp(22px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.ba-tile__photo-body blockquote {
  margin: 0;
  flex: 1;
}
.ba-tile__photo-body blockquote p {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(16px, 0.9rem + 0.4vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 1024px) {
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-tile--quote-lg,
  .ba-tile--photo-quote { grid-column: span 2; }
}
@media (max-width: 680px) {
  .ba-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ba-tile,
  .ba-tile--quote-lg,
  .ba-tile--photo-quote { grid-column: span 1; }
  .ba-tile--photo-quote { flex-direction: column; }
  .ba-tile__photo--split { width: 100%; min-height: 240px; }
  .ba-tile--portrait { min-height: 300px; }
}

/* Quote transformation cards (legacy — retained for alt layouts) */
.quotes--tx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.quote-tx {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 2vw, 32px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  align-content: start;
}
.quote-tx--feature {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.quote-tx__tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  width: max-content;
  max-width: 100%;
}
.quote-tx--feature .quote-tx__tag {
  color: var(--green);
  background: transparent;
  border-color: color-mix(in oklab, var(--paper), transparent 70%);
}
.quote-tx__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.quote-tx--feature .quote-tx__ba { background: color-mix(in oklab, var(--paper), transparent 80%); border-color: color-mix(in oklab, var(--paper), transparent 80%); }
.quote-tx__col {
  padding: 14px 16px;
  background: var(--paper);
  display: grid;
  gap: 4px;
}
.quote-tx--feature .quote-tx__col { background: var(--ink); }
.quote-tx__lbl {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.quote-tx__col--after .quote-tx__lbl { color: var(--green-deep); }
.quote-tx--feature .quote-tx__col--after .quote-tx__lbl { color: var(--green); }
.quote-tx--feature .quote-tx__lbl { color: color-mix(in oklab, var(--paper), transparent 45%); }
.quote-tx__val {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.quote-tx--feature .quote-tx__val { color: var(--paper); }
.quote-tx__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 0.95rem + 0.35vw, 22px);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.quote-tx--feature .quote-tx__quote { color: var(--paper); }
.quote-tx__foot { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--rule); }
.quote-tx--feature .quote-tx__foot { border-color: color-mix(in oklab, var(--paper), transparent 80%); }
.quote-tx__name {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink);
}
.quote-tx--feature .quote-tx__name { color: var(--paper); }
.quote-tx__role {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.quote-tx--feature .quote-tx__role { color: color-mix(in oklab, var(--paper), transparent 35%); }
@media (max-width: 1100px) { .quotes--tx { grid-template-columns: 1fr; } }

/* Inside the community — tool cards grid (onboarding replacement) */
.section--tools {
  padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--page-pad);
}
.tools {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tool-card {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  align-content: start;
  min-height: 260px;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  will-change: transform;
}
.tool-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 20px 40px -24px oklch(0.22 0.03 52 / 0.25); }
.tool-card__ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--green-deep);
  transition: transform 0.4s var(--ease-emph), color 0.3s var(--ease-out);
}
.tool-card:hover .tool-card__ico { transform: rotate(-6deg) scale(1.08); color: var(--green); }
.tool-card__ico svg { width: 26px; height: 26px; }
.tool-card__t {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 0.95rem + 0.55vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.tool-card__d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tools__foot {
  max-width: var(--max-w);
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-soft);
}
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }

/* Plan tiers (3 columns, flat pricing) */
.plans--tiers {
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.plan--firm-10 {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  position: relative;
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -40px oklch(0.22 0.03 52 / 0.35);
}
.plan__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing__enterprise {
  max-width: var(--max-w);
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.pricing__enterprise a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.pricing__enterprise a:hover { color: var(--green-deep); border-color: currentColor; }

@media (max-width: 1100px) { .plans--tiers { grid-template-columns: 1fr; } .plan--firm-10 { transform: none; } }

/* Cohort link (inside meta, body) */
.cohort__link { color: var(--green); border-bottom: 1px solid color-mix(in oklab, var(--green), transparent 60%); padding-bottom: 1px; }
.cohort__link:hover { color: var(--paper); border-color: currentColor; }
.cfaq__link { color: var(--green); }
.cfaq__link:hover { color: var(--paper); }

/* ============================================================
   Firm pricing: two-plan duo layout
   ============================================================ */
.plans--duo {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: stretch;
}
.plan--firm-calc {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  position: relative;
}
@media (max-width: 960px) {
  .plans--duo { grid-template-columns: 1fr; }
}

/* Firm plan: price sits at the same vertical level as Individual's $39 */
.plan__price--calc .plan__amount {
  font-variant-numeric: tabular-nums;
}

/* Seat calculator (slider-based) */
.seatcalc {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: color-mix(in oklab, var(--paper), transparent 92%);
  border: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
  border-radius: 14px;
  margin-top: 4px;
}
.seatcalc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.seatcalc__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: color-mix(in oklab, var(--paper), transparent 45%);
}
.seatcalc__count {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.seatcalc__count span { font-variation-settings: 'opsz' 60; }

.seatcalc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  margin: 2px 0 4px;
  cursor: pointer;
  --range-fill: 0%;
}
/* WebKit track */
.seatcalc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--green) 0%,
      var(--green) var(--range-fill),
      color-mix(in oklab, var(--paper), transparent 75%) var(--range-fill),
      color-mix(in oklab, var(--paper), transparent 75%) 100%);
}
.seatcalc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 0;
  margin-top: -8px;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 14px oklch(0 0 0 / 0.4);
  transition: transform 0.15s var(--ease-out);
}
.seatcalc__range::-webkit-slider-thumb:hover { transform: scale(1.08); }

/* Firefox track */
.seatcalc__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper), transparent 75%);
}
.seatcalc__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--green);
}
.seatcalc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 14px oklch(0 0 0 / 0.4);
}
.seatcalc__range:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 10px;
}

.seatcalc__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--paper), transparent 55%);
  padding: 0 4px;
}

.seatcalc__bonus {
  padding: 10px 12px;
  background: color-mix(in oklab, var(--green), transparent 80%);
  border: 1px solid color-mix(in oklab, var(--green), transparent 55%);
  border-radius: 8px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--green);
}

.seatcalc__scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--paper), transparent 45%);
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--paper), transparent 88%);
}
.seatcalc__scale strong {
  color: var(--paper);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 12.5px;
  font-style: italic;
}
.seatcalc__link {
  color: var(--green);
  border-bottom: 1px solid color-mix(in oklab, var(--green), transparent 60%);
  padding-bottom: 1px;
}
.seatcalc__link:hover { color: var(--paper); border-color: currentColor; }

/* ============================================================
   Tool ecosystem orbit (v5: replaces "in the room" mural)
   ============================================================ */
.section--ecosystem {
  padding: clamp(var(--s-9), 7vw, var(--s-11)) var(--page-pad);
  text-align: center;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.section--ecosystem .section__head--tight { margin-bottom: clamp(32px, 4vw, 56px); }
.eco__title em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange-deep);
}
.eco {
  position: relative;
  width: min(720px, 92vw);
  --eco-size: min(720px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.eco__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--green-deep), transparent 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.eco__ring--mid { width: 62%; aspect-ratio: 1; }
.eco__ring--outer {
  width: 95%;
  aspect-ratio: 1;
  border-color: color-mix(in oklab, var(--orange-deep), transparent 78%);
}

.eco__nucleus {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    color-mix(in oklab, var(--green-tint), var(--paper) 20%),
    color-mix(in oklab, var(--orange-tint), var(--paper) 30%));
  border: 1px solid var(--rule);
  box-shadow:
    0 2px 0 oklch(1 0 0 / 0.6) inset,
    0 18px 48px -14px oklch(0.3 0.075 150 / 0.35),
    0 32px 64px -28px oklch(0.53 0.135 42 / 0.28);
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.4vw, 18px);
}
.eco__nucleus-label {
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--green-deep);
  text-align: center;
  margin: 0;
}
.eco__ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 0.7vw, 9px);
  width: 100%;
  align-content: center;
  justify-items: stretch;
}
.eco__ai {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-label);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  justify-content: center;
  min-width: 0;
}
.eco__ai img {
  width: clamp(12px, 1.2vw, 16px);
  height: clamp(12px, 1.2vw, 16px);
  object-fit: contain;
  flex-shrink: 0;
}
.eco__ai span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.eco-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 7px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--ff-label);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 0 4px 14px -6px oklch(0.22 0.03 52 / 0.22);
  transform: translate(-50%, -50%)
    translate(
      calc(cos(calc(var(--angle) + var(--chip-rot, 0deg))) * var(--r)),
      calc(sin(calc(var(--angle) + var(--chip-rot, 0deg))) * var(--r))
    );
  transition: border-color 0.3s var(--ease-out);
}
.eco-chip:hover {
  border-color: var(--ink-muted);
  transform: translate(-50%, -50%)
    translate(
      calc(cos(calc(var(--angle) + var(--chip-rot, 0deg))) * var(--r)),
      calc(sin(calc(var(--angle) + var(--chip-rot, 0deg))) * var(--r))
    )
    scale(1.06);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.eco-chip--dev {
  --r: calc(var(--eco-size) * 0.31);
  color: var(--orange-deep);
  border-color: color-mix(in oklab, var(--orange-deep), transparent 72%);
}
@property --orbit-rot {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
.eco-chip--acct {
  --r: calc(var(--eco-size) * 0.475);
  --chip-rot: var(--orbit-rot, 0deg);
  color: var(--green-deep);
  border-color: color-mix(in oklab, var(--green-deep), transparent 70%);
  /* 18 chips on the outer ring — tighten typography so they all breathe */
  font-size: clamp(11px, 0.92vw, 13px);
  padding: 6px 12px;
  letter-spacing: 0.01em;
}

.eco__legend {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  flex-wrap: wrap;
  margin: 0 auto clamp(18px, 2vw, 28px);
  font-family: var(--ff-label);
  font-variant: all-small-caps;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.eco__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.eco__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.eco__legend-dot--ai { background: linear-gradient(135deg, var(--green), var(--orange)); }
.eco__legend-dot--acct { background: var(--green-deep); }
.eco__legend-dot--dev { background: var(--orange); }

.eco__foot {
  max-width: 54ch;
  margin: 0 auto clamp(22px, 2.4vw, 32px);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.eco__cta { display: inline-flex; }

@media (max-width: 720px) {
  .eco { --eco-size: 92vw; width: 92vw; }
  .eco-chip { font-size: 10.5px; padding: 5px 10px; }
  /* Pull both orbits inward on mobile so no chip extends past the viewport. */
  .eco-chip--dev { --r: calc(var(--eco-size) * 0.26); }
  .eco-chip--acct { --r: calc(var(--eco-size) * 0.40); font-size: 10.5px; padding: 4px 9px; }
  .eco__nucleus { width: 40%; }
  .eco__ai { font-size: 10px; padding: 5px 6px; gap: 4px; }
  .eco__ai img { width: 11px; height: 11px; }
}

/* Legacy in-the-room mural kept (unused) */
.section--inroom-mural {
  padding: clamp(var(--s-8), 6vw, var(--s-10)) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.mural__header {
  max-width: 960px;
  margin: 0 auto clamp(var(--s-6), 4vw, var(--s-7));
  text-align: center;
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.mural__header .overline { justify-content: center; }
.mural__title {
  font-size: clamp(32px, 1.8rem + 2vw, 58px);
}
.mural__title em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 500;
}
.mural__lede {
  max-width: 64ch;
  margin: 0 auto;
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  color: var(--ink-soft);
  line-height: 1.55;
}

.mural {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.mural__scene {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, auto);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.2vw, 18px);
  padding: 20px 0;
}

/* Tiles: base */
.mural-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  position: relative;
  text-align: center;
  transform-origin: center center;
  will-change: transform;
  transition: box-shadow 0.35s var(--ease-out), border-color 0.3s var(--ease-out),
              transform 0.5s var(--ease-out);
  --p-y: 0px;
  --p-rot: 0deg;
  transform: translate3d(0, var(--p-y), 0) rotate(var(--p-rot));
  box-shadow: 0 1px 0 color-mix(in oklab, var(--ink), transparent 92%);
}
.mural-tile:hover {
  border-color: var(--ink);
  box-shadow: 0 24px 48px -24px oklch(0.22 0.03 52 / 0.3);
  z-index: 2;
}
.mural-tile img {
  max-width: 84%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}
.mural-tile__kind {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-variant: all-small-caps;
  color: var(--ink-muted);
}
.mural-tile__kind--green { color: var(--green-deep); }
.mural-tile__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 1rem + 0.6vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.mural-tile__sub {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 26ch;
  line-height: 1.3;
}
.mural-tile__mark { width: 38px !important; height: 38px !important; max-height: 38px !important; }

/* Tile sizes */
.mural-tile--sm  { grid-column: span 1; grid-row: span 1; }
.mural-tile--md  { grid-column: span 2; grid-row: span 1; }
.mural-tile--lg  { grid-column: span 2; grid-row: span 2; padding: 28px 24px; }

/* Feature tile (Claude) */
.mural-tile--feature {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.mural-tile--feature .mural-tile__name { color: var(--paper); }
.mural-tile--feature .mural-tile__kind { color: var(--green); }

/* Agencies tile */
.mural-tile--agencies {
  background: color-mix(in oklab, var(--green), transparent 88%);
  border-color: color-mix(in oklab, var(--green), transparent 65%);
  grid-column: span 3;
  grid-row: span 2;
  padding: 30px 28px;
}
.mural-tile--agencies .mural-tile__name {
  color: var(--green-ink);
  font-size: clamp(22px, 1.1rem + 0.9vw, 30px);
}
.mural-tile--agencies .mural-tile__sub { color: var(--green-ink); opacity: 0.8; }

/* Text-style tiles (no logo) */
.mural-tile--text {
  background: var(--paper-2);
}

/* Large image tiles should render marks bigger */
.mural-tile--lg img { max-height: 56px; }
.mural-tile--lg .mural-tile__name { font-size: clamp(22px, 1.2rem + 0.8vw, 30px); }

/* Mural foot + cta */
.mural__foot {
  max-width: 52ch;
  margin: clamp(var(--s-6), 4vw, var(--s-7)) auto 0;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-inline: auto;
}
.mural__foot .dot { margin-top: 8px; flex: 0 0 auto; }
.mural__cta {
  display: inline-flex;
  margin: clamp(var(--s-5), 3vw, var(--s-6)) auto 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Responsive tightening */
@media (max-width: 1100px) {
  .mural__scene { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mural-tile--lg { grid-column: span 2; grid-row: span 1; }
  .mural-tile--agencies { grid-column: span 4; grid-row: span 1; }
}
@media (max-width: 640px) {
  .mural__scene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mural-tile--md, .mural-tile--lg, .mural-tile--agencies { grid-column: span 2; grid-row: span 1; }
}

/* Firm plan card price/em styling alignment */
.plan--firm-calc .plan__yearly {
  color: color-mix(in oklab, var(--paper), transparent 25%);
}
.plan--firm-calc .plan__yearly em {
  font-style: italic;
  color: var(--green);
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.plan--firm-calc .plan__yearly [data-seats-per],
.plan--firm-calc .plan__yearly [data-seats-monthly] {
  color: var(--paper);
  font-weight: 600;
}

/* ============================================================
   Contact Chad modal
   ============================================================ */
.contact-modal {
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  max-width: 480px;
  width: calc(100vw - 32px);
  box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.45);
}
.contact-modal::backdrop {
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
}
.contact-modal[open] {
  animation: contactModalIn 180ms ease-out;
}
@keyframes contactModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-form,
.contact-modal__success {
  padding: clamp(20px, 2.4vw, 28px);
  display: grid;
  gap: 14px;
}
.contact-form[hidden],
.contact-modal__success[hidden],
.contact-modal__err[hidden] {
  display: none;
}
.contact-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.contact-modal__title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.contact-modal__close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.contact-modal__close svg { width: 14px; height: 14px; }
.contact-modal__close:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.contact-modal__lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.contact-field {
  display: grid;
  gap: 6px;
}
.contact-field > span {
  font-family: var(--ff-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-field input,
.contact-field textarea {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.contact-field textarea {
  resize: vertical;
  min-height: 110px;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--orange), transparent 78%);
}
.contact-field.is-invalid input,
.contact-field.is-invalid textarea {
  border-color: oklch(0.6 0.18 28);
}
.contact-field.is-invalid input:focus,
.contact-field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.6 0.18 28), transparent 78%);
}
.contact-field__err {
  font-size: 12.5px;
  line-height: 1.4;
  color: oklch(0.6 0.18 28);
  margin-top: 2px;
}
.contact-field__err[hidden] {
  display: none;
}
/* Honeypot: completely hidden from humans, still in the DOM for bots */
.contact-field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.contact-modal__err {
  margin: 0;
  font-size: 13px;
  color: oklch(0.55 0.18 28);
  line-height: 1.4;
  flex: 1;
}
.contact-modal__success {
  text-align: center;
  place-items: center;
}
.contact-modal__check {
  color: var(--green-deep);
  width: 56px;
  height: 56px;
}
.contact-modal__check svg { width: 100%; height: 100%; }

@media (max-width: 480px) {
  .contact-modal__foot { flex-direction: column; align-items: stretch; }
  .contact-modal__foot .pill { justify-content: center; }
}