/* ============================================================
   Vinyl Marketing · Free AI Blueprint landing page
   Built on the Vinyl Marketing design system tokens.
   ============================================================ */

@import url("colors_and_type.css");

/* ---------- Shell ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--vm-cream);
  color: var(--vm-ink);
  font: var(--type-body-lg);
  margin: 0;
  overflow-x: hidden;
  scroll-padding-top: 96px;
}
.page { max-width: 1728px; margin: 0 auto; }
.gutter { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 1100px) { :root { --gutter: 48px; } }
@media (max-width: 700px)  { :root { --gutter: 22px; } }

img { display: block; max-width: 100%; }
::selection { background: rgba(220,128,68,0.24); }

/* ---------- Reusable: eyebrow + rule ---------- */
.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}
.eyebrow-row__label {
  font: var(--type-eyebrow-sm);
  font-size: 21px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  background: linear-gradient(90deg, #80C6C6, #0097A7, #006778);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap;
}
.eyebrow-row__rule { display: none; }
.eyebrow-row--center { justify-content: center; }
.eyebrow-row--center .eyebrow-row__rule { display: none; }
.eyebrow-row--center .eyebrow-row__label {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--vm-orange-600);
}

/* ---------- Headlines ---------- */
.h-sec {
  font: var(--type-display-2);
  letter-spacing: var(--track-tight);
  color: var(--vm-teal-700);
  text-wrap: balance;
  margin: 0 0 28px;
}
.h-sec--sm { font: 500 48px/1.15 var(--font-display); letter-spacing: var(--track-tight); }
/* headline forced onto a single line (scales with viewport, wraps on mobile) */
.h-sec--fit { white-space: normal; }
.sub {
  font: var(--type-lead);
  color: var(--vm-teal-700);
  max-width: 30ch;
  margin: 0;
}
.sub--wide { max-width: 40ch; }
.body-col p { font: var(--type-body-lg); color: var(--vm-ink); max-width: 64ch; }
.body-col p + p { margin-top: 18px; }

.section { padding-top: 120px; padding-bottom: 120px; position: relative; }
.section--tight { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 700px) {
  .section { padding-top: 72px; padding-bottom: 72px; }
  .h-sec { font-size: 46px; }
  .h-sec--sm { font-size: 34px; }
  .sub { font-size: 23px; max-width: none; }
}

/* Pull line — the brand's standalone statement device */
.pull {
  font: 500 italic 40px/1.3 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--vm-teal-700);
  text-wrap: balance;
  max-width: 22ch;
  margin: 0;
}
.pull--wide { max-width: 32ch; }
@media (max-width: 700px) { .pull { font-size: 28px; max-width: none; } }

/* ============================================================
   THE ONE CTA — primary peach pill (peach fill, teal text), no arrow
   ============================================================ */
.btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vm-orange-400);
  color: var(--vm-teal-800);
  border: none;
  border-radius: 999px;
  padding: 19px 34px;
  font: 600 16px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn-apply .arrow { display: none; }
.btn-apply:hover { filter: brightness(0.94); }
.btn-apply:active { opacity: 0.85; }
/* secondary, reversed pill (teal fill, peach text) for persistent chrome */
.btn-apply--secondary { background: var(--vm-teal-800); color: var(--vm-orange-400); }
.btn-apply--lg { padding: 23px 42px; font-size: 18px; }
.btn-apply--sm { padding: 14px 24px; font-size: 14px; }
.btn-apply--block { display: flex; justify-content: center; width: 100%; }
@media (max-width: 700px) {
  .btn-apply { padding: 17px 26px; font-size: 14px; }
  .btn-apply--lg { padding: 19px 30px; font-size: 15px; }
}

/* CTA placed at section end with a touch of air */
.cta-end { margin-top: 56px; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 24px;
}
.header__logo { display: inline-flex; align-items: center; }
.header__logo img { height: 46px; width: auto; }
.header__right { display: flex; align-items: center; gap: 20px; }
.hamburger {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px dashed var(--vm-ink);
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex: none;
  transition: background var(--dur-base);
}
.hamburger:hover { background: rgba(51,51,51,0.06); }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--vm-ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 700px) {
  .header__logo img { height: 38px; }
  .header__right .btn-apply { display: none; }
}

/* Slide-down menu panel */
.menu {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 86vw);
  background: var(--vm-cream-soft);
  z-index: 60;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 40px 44px;
  box-shadow: -20px 0 60px rgba(13,90,103,0.10);
}
.menu.open { transform: translateX(0); }
.menu__close {
  align-self: flex-end;
  width: 52px; height: 52px;
  border: 2px solid var(--vm-ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.menu__close::before, .menu__close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; background: var(--vm-ink);
}
.menu__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.menu__close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.menu__links { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }
.menu__links a {
  font: 500 30px/1.2 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--vm-teal-700);
  text-decoration: none;
  padding: 10px 0;
  transition: color var(--dur-base);
}
.menu__links a:hover { color: var(--vm-orange-600); }
.menu__foot { margin-top: auto; padding-top: 32px; }
.menu-scrim {
  position: fixed; inset: 0; background: rgba(51,51,51,0.32);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.menu-scrim.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   STICKY CTA BAR
   ============================================================ */
.sticky-cta {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(241,238,232,0.86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--surface-hairline);
  transform: translateY(-104%);
  transition: transform var(--dur-base) var(--ease-out);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta__inner {
  max-width: 1728px; margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sticky-cta__logo { display: inline-flex; align-items: center; }
.sticky-cta__logo img { height: 30px; width: auto; display: block; }
.sticky-cta__label {
  font: 500 19px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--vm-teal-700);
}
.sticky-cta__label span { color: var(--vm-orange-600); }
@media (max-width: 700px) {
  .sticky-cta { top: auto; bottom: 0; transform: translateY(104%); border-bottom: none; border-top: 1px solid var(--surface-hairline); }
  .sticky-cta.show { transform: translateY(0); }
  .sticky-cta__inner { padding: 10px 16px; }
  .sticky-cta__logo { display: none; }
  .sticky-cta .btn-apply { width: 100%; justify-content: center; }
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero { position: relative; padding-top: 64px; padding-bottom: 120px; isolation: isolate; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.hero__eyebrow {
  font: var(--type-eyebrow-sm);
  font-size: 21px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--vm-ink);
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
}
.hero__eyebrow::after { content: none; }
.hero__title {
  font: var(--type-display-1);
  letter-spacing: var(--track-tight);
  color: var(--vm-teal-700);
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero__sub {
  font: var(--type-lead);
  color: var(--vm-ink);
  max-width: 40ch;
  margin: 0 0 40px;
}
.hero__trust {
  margin-top: 28px;
  font: 400 15px/1.5 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--vm-ink);
  opacity: 0.62;
  max-width: 46ch;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 42% at 73% 32%, rgba(128,198,198,0.5), rgba(128,198,198,0) 70%),
    radial-gradient(32% 40% at 26% 70%, rgba(255,186,123,0.4), rgba(255,186,123,0) 70%);
}
.hero__bg img { display: none; }
@media (max-width: 1100px) {
  .hero__title { font-size: 60px; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__doc { order: 2; }
}
@media (max-width: 700px) {
  .hero { padding-top: 32px; padding-bottom: 80px; }
  .hero__title { font-size: 42px; }
  .hero__sub { font-size: 22px; max-width: none; }
}

.hero__bullets { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.hero__bullets li { display: flex; align-items: center; gap: 14px; font: 400 20px/1.35 var(--font-body); color: var(--vm-ink); }
.hero__bullets li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--vm-orange-600); }
@media (max-width: 700px) { .hero__bullets li { font-size: 18px; } }

/* Hero blueprint document mock */
.hero__doc { display: flex; align-items: center; justify-content: center; min-height: 500px; }
.hero__doc .doc-mock { min-height: 480px; width: 100%; }
@media (max-width: 700px) { .hero__doc { min-height: 440px; } }

/* Hero org-chart preview card — mirrors the Section 5 org styling */
.hero__preview {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--vm-cream-soft);
  border: 1px solid var(--surface-hairline);
  padding: 28px 28px 30px;
  overflow: hidden;
}
.hero__preview-label {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vm-ink); opacity: 0.5; margin-bottom: 20px; text-align: center;
}
.hp-apex {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  max-width: 260px; margin: 0 auto;
  border: 2px solid var(--vm-teal-700); border-radius: 12px;
  background: var(--vm-white); padding: 12px 18px;
}
.hp-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--vm-teal-300), var(--vm-teal-800));
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-mono); color: var(--vm-cream);
}
.hp-role { font: 500 15px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--vm-ink); }
.hp-tag { display: block; margin-top: 2px; font: 400 9px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.5; }
.hp-trunk { width: 2px; height: 16px; background: rgba(51,51,51,0.45); margin: 0 auto; }
.hp-bus { height: 2px; background: rgba(51,51,51,0.45); margin: 0 auto 14px; width: 78%; }
.hp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hp-chip {
  border: 1.5px solid transparent; border-radius: 10px;
  background:
    linear-gradient(var(--vm-cream-dim), var(--vm-cream-dim)) padding-box,
    linear-gradient(130deg, var(--vm-teal-700), var(--vm-teal-300) 42%, var(--vm-orange-600)) border-box;
  padding: 12px 12px; text-align: center;
  font: 500 12px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--vm-teal-800);
}
.hero__preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, var(--vm-cream-soft)); }

/* ============================================================
   Two-column section layout (copy + visual, ping-pong)
   ============================================================ */
.colsec { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.colsec__copy { min-width: 0; }
.colsec__visual { min-width: 0; }
@media (min-width: 981px) {
  .colsec--visual-left .colsec__copy { order: 2; }
  .colsec--visual-left { align-items: start; }
  .colsec--align-h2 { align-items: start; }
  .colsec--align-h2 .colsec__visual { margin-top: 54px; }
}
@media (max-width: 980px) {
  .colsec { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   SECTION 2 — RECOGNITION (output bar graph)
   ============================================================ */
.bargraph {
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.bargraph__axis { display: none; }
.bargraph__plot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-items: stretch; min-height: 480px;
}
.bar { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bar__top { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bar__cap { height: 96px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; }
.bar__value {
  font: 500 44px/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--vm-teal-700);
  margin-bottom: 14px;
}
.bar__col {
  width: 100%; max-width: 138px; border-radius: 10px 10px 0 0;
  flex: 0 0 auto; transform-origin: bottom center; transform: scaleY(1);
}
.bar__col--flat { height: 126px; }
.bar__col--mid  { height: 151px; }
.bar__col--full { height: 290px; }
/* grow-in animation only enhances; resting state (and no-JS) is always full height */
.bargraph.reveal.in .bar__col { animation: barGrow 1.1s var(--ease-out); }
.bargraph.reveal.in .bar:nth-child(2) .bar__col { animation-delay: 0.1s; }
.bargraph.reveal.in .bar:nth-child(3) .bar__col { animation-delay: 0.2s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar__col--flat { background: rgba(51,51,51,0.26); }
.bar__col--mid  { background: var(--vm-teal-300); }
.bar__col--full {
  position: relative; overflow: hidden;
  border: 2px solid transparent; border-radius: 10px 10px 0 0;
  background:
    linear-gradient(168deg, var(--vm-teal-800) 0%, var(--vm-teal-700) 12%, var(--vm-teal-600) 24%, var(--vm-teal-500) 36%, var(--vm-teal-300) 54%, var(--vm-orange-300) 74%, var(--vm-orange-400) 87%, var(--vm-orange-600) 100%) padding-box,
    conic-gradient(from 210deg, var(--vm-teal-700), var(--vm-teal-300), var(--vm-orange-300), var(--vm-orange-600), var(--vm-teal-700)) border-box;
  box-shadow: 0 10px 34px rgba(13,90,103,0.2);
}
.bar__col--full::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,0.03) 34%,
    rgba(255,255,255,0.055) 50%,
    rgba(255,255,255,0.03) 66%,
    rgba(255,255,255,0) 92%);
  transform: translateX(-150%);
  animation: barSheen 12s ease-in-out infinite;
}
@keyframes barSheen { 0%, 62% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@media (prefers-reduced-motion: reduce) { .bar__col--full::after { animation: none; opacity: 0; } }
.bar__label {
  margin-top: 14px; font: 500 15px/1.2 var(--font-display); letter-spacing: -0.02em;
  color: var(--vm-ink); max-width: 16ch; text-wrap: balance;
}
.bar:last-child .bar__label { color: var(--vm-teal-700); }
.bar__note {
  margin-top: 6px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--vm-ink); opacity: 0.5; max-width: 20ch;
}
@media (max-width: 700px) {
  .bargraph { padding: 36px 22px 32px; }
  .bargraph__plot { gap: 14px; min-height: 420px; }
  .bar__value { font-size: 38px; }
  .bar__col--flat { height: 130px; }
  .bar__col--mid  { height: 156px; }
  .bar__col--full { height: 300px; }
  .bar__label { font-size: 14px; }
  .bar__note { display: none; }
}

/* ============================================================
   SECTION 3 — WHY NOW (before / after)
   ============================================================ */
.shift-band { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; margin-top: 0; }
.shift-card {
  border-radius: var(--radius-lg); padding: 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.shift-card--before { background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline); }
.shift-card--after { background: var(--vm-teal-800); color: var(--vm-cream); }
.shift-card__tag { font: 400 13px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.shift-card--after .shift-card__tag { color: var(--vm-orange-300); opacity: 1; }
.shift-card__title { font: var(--type-display-3); letter-spacing: var(--track-tight); }
.shift-card--before .shift-card__title { color: var(--vm-ink); }
.shift-card__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shift-card__list li { font: 400 15px/1.4 var(--font-body); position: relative; padding-left: 20px; }
.shift-card__list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--vm-orange-600); font-weight: 700; }
.shift-card--after .shift-card__list li::before { color: var(--vm-orange-300); }
.shift-card--before .shift-card__list li { opacity: 0.7; }
.shift-arrow { display: flex; align-items: center; justify-content: center; color: var(--vm-orange-600); transform: rotate(90deg); }
.shift-arrow svg { width: 40px; height: 40px; }

/* ============================================================
   SECTION 4 — REFRAME (AI Brain vertical stack)
   ============================================================ */
.stack { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 0; }
.stack__node {
  position: relative;
  width: 100%; max-width: 720px;
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  background: var(--vm-teal-800); color: var(--vm-cream);
  text-align: left;
}
.stack__icon { position: absolute; top: 26px; right: 26px; width: 30px; height: 30px; color: var(--vm-orange-300); }
.stack__icon svg { width: 100%; height: 100%; display: block; }
.stack__kicker { font: 400 13px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; color: var(--vm-orange-300); }
.stack__title { font: var(--type-display-3); letter-spacing: var(--track-tight); margin: 0 0 12px; color: var(--vm-cream); }
.stack__desc { font: 400 15px/1.5 var(--font-body); margin: 0; max-width: 44ch; color: var(--vm-cream); opacity: 0.9; }
.stack__arrow {
  display: flex; align-items: center; justify-content: center; height: 42px; color: var(--vm-orange-600);
}
.stack__arrow svg { width: 28px; height: 28px; }
@property --chip-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.stack__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.stack__chips span {
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--vm-teal-800); padding: 9px 15px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--vm-white), var(--vm-white)) padding-box,
    conic-gradient(from var(--chip-ang), var(--vm-teal-700), var(--vm-teal-300) 30%, var(--vm-orange-300) 55%, var(--vm-orange-600) 70%, var(--vm-teal-700)) border-box;
  animation: chipSpin 9s linear infinite;
}
@keyframes chipSpin { to { --chip-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .stack__chips span { animation: none; } }

/* ============================================================
   SECTION 5 — ORG CHART (centerpiece)
   ============================================================ */
.org { background: #F4F4F2; border: none; border-radius: 15px; margin-inline: 40px; padding-inline: 48px; padding-block: 84px; }
.org--centered .eyebrow-row { justify-content: center; }
.org--centered .h-sec { text-align: center; }
.org--centered > p { text-align: center; }
@media (max-width: 700px) { .org { margin-inline: 14px; padding-inline: 22px; } }

/* outer "card within a card" wrapping the calculator + disclaimer */
.calc-card {
  background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-lg); padding: 22px; margin: 80px 0 40px;
}
/* size control + counter */
.org__panel {
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
  background: var(--vm-white); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-md); padding: 24px 28px; margin: 0 0 14px;
}
.size-ctrl__label { font: 400 13px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.6; margin-bottom: 12px; }
.size-ctrl__opts { display: inline-flex; background: var(--vm-cream-dim); border-radius: 999px; padding: 4px; gap: 2px; }
.size-ctrl__opts button {
  border: none; background: transparent; cursor: pointer;
  font: 500 14px/1 var(--font-mono); letter-spacing: 0.04em;
  color: var(--vm-ink); padding: 11px 16px; border-radius: 999px; white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base);
}
.size-ctrl__opts button[aria-pressed="true"] { background: var(--vm-teal-800); color: var(--vm-cream); }
.counter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.counter__cell { border-left: 2px solid var(--vm-orange-600); padding-left: 16px; }
.counter__num { font: 500 40px/1 var(--font-display); letter-spacing: -0.04em; color: var(--vm-teal-700); }
.counter__unit { display: block; margin-top: 4px; font: 400 13px/1 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.55; }
.counter__cap { margin-top: 8px; font: 400 13px/1.35 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.6; }
@media (max-width: 900px) {
  .org__panel { grid-template-columns: 1fr; gap: 28px; }
  .counter { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
}
@media (max-width: 540px) {
  .counter__num { font-size: 32px; }
  .size-ctrl__opts button { padding: 10px 11px; font-size: 13px; }
}
.org__disclaimer {
  margin: 0; max-width: none;
  font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.01em;
  color: var(--vm-ink); opacity: 0.5;
}

/* ---------- ORG TREE ---------- */
/* one clean connector colour for the whole hierarchy */
.org__chart { margin-top: 8px; --org-line: rgba(51,51,51,0.45); }

/* apex: the human top of the org + its two direct AI reports */
.org__apex { display: flex; flex-direction: column; align-items: center; }
.org__apexwrap { display: flex; flex-direction: column; align-items: center; }
.apex-pair { display: flex; flex-direction: column; align-items: center; }
.apex-pair__link { width: 2px; height: 20px; background: var(--org-line); }
.apex-reports {
  --apex-card-w: 248px; --apex-gap: 16px;
  display: flex; gap: var(--apex-gap); justify-content: center; position: relative; padding-top: 20px;
}
.apex-reports::before { /* horizontal bus spanning EXACTLY between the two card centers */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(var(--apex-card-w) + var(--apex-gap)); height: 2px; background: var(--org-line);
}
.apex-reports .teammate { width: var(--apex-card-w); position: relative; }
.apex-reports .teammate::before { /* clean stub up from each card centre to the bus */
  content: ""; display: block; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 20px; background: var(--org-line);
}
.apex-reports .teammate::after { display: none; }
@media (max-width: 560px) {
  .apex-reports { flex-direction: column; gap: 14px; padding-top: 14px; --apex-card-w: 100%; }
  .apex-reports::before { display: none; }
  .apex-reports .teammate { width: 100%; }
  .apex-reports .teammate::before { top: -14px; height: 14px; }
  .apex-reports .teammate:first-child::before { display: none; }
}
.teammate--solo { max-width: 300px; width: 300px; }
.teammate--solo::before, .teammate--solo::after { display: none; }
@media (max-width: 360px) { .teammate--solo { width: 100%; } }

/* trunk: a single clean line dropping from leadership to the department bus */
.org__trunk { width: 2px; height: 30px; background: var(--org-line); margin: 0 auto; }

/* department grid with one tidy horizontal bus across the top */
.org__depts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 30px; }
.org__depts::before { /* the bus — spans exactly between the first and last column centres (accounts for the 3 × 18px gaps) */
  content: ""; position: absolute; top: 0; left: calc((100% - 54px) / 8); right: calc((100% - 54px) / 8); height: 2px; background: var(--org-line);
}
@media (max-width: 1100px) { .org__depts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .org__depts { grid-template-columns: 1fr; } }

.dept { display: flex; flex-direction: column; align-items: stretch; position: relative; }
.dept::before { /* stub from the bus down to each department */
  content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 30px; background: var(--org-line);
}
@media (max-width: 1100px) {
  .org__trunk { display: none; }
  .org__depts { padding-top: 0; }
  .org__depts::before { display: none; }
  .dept::before { display: none; }
  .dept { margin-top: 28px; }
}

.dept__label {
  font: 400 12px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vm-ink); opacity: 0.55; text-align: center; margin-bottom: 14px;
}

/* a human lead + the AI teammates reporting to them */
.lead + .lead { margin-top: 22px; }
.node {
  display: block; width: 100%; border-radius: 12px; text-align: left;
  background: var(--vm-white); border: 1px solid var(--surface-hairline); padding: 14px 16px;
}
.node--human {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--vm-teal-700); background: var(--vm-cream-soft);
  position: relative; z-index: 2;
}
.node--apex { max-width: 320px; }
.node__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--vm-teal-300), var(--vm-teal-800));
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-mono); color: var(--vm-cream);
}
.node__role { display: block; font: 500 16px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--vm-ink); }
.node__text { display: flex; flex-direction: column; min-width: 0; }
.node__tag { display: block; margin-top: 2px; font: 400 10px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.5; }

/* connector: clean vertical line from the human into each AI card, no masks */
/* connector: a single clean line straight down, AI cards centred under the human */
.branch { position: relative; padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.branch::before { /* one vertical line; the opaque cards hide it, so it only shows in the gaps */
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 2px; background: var(--org-line); z-index: 0;
}

/* AI cards: a 2px gradient outline so they read as AI assistants */
@property --ai-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.teammate {
  position: relative; z-index: 1; cursor: pointer; text-align: left;
  border: 2px solid transparent; border-radius: 12px;
  background:
    linear-gradient(var(--vm-cream-dim), var(--vm-cream-dim)) padding-box,
    conic-gradient(from var(--ai-angle), var(--vm-teal-700), var(--vm-teal-300), var(--vm-orange-600), var(--vm-teal-700)) border-box;
  padding: 14px 40px 14px 16px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.teammate:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,90,103,0.12);
  background:
    linear-gradient(var(--vm-white), var(--vm-white)) padding-box,
    conic-gradient(from var(--ai-angle), var(--vm-teal-700), var(--vm-teal-300), var(--vm-orange-600), var(--vm-teal-700)) border-box;
  animation: aiSpin 4s linear infinite;
}
@keyframes aiSpin { to { --ai-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .teammate:hover { animation: none; } }
.teammate__role { display: block; font: 500 15px/1.18 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-800); }
.teammate__i {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--vm-teal-700); color: var(--vm-teal-700);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-mono); font-style: italic;
}
.teammate:hover .teammate__i { background: var(--vm-teal-700); color: var(--vm-cream); }

/* ---------- CAPACITY LEDGER (salary-equivalent arrow bars) ---------- */
.ledger {
  background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-lg); padding: 32px 34px; margin-top: 28px;
}
.ledger__head { margin-bottom: 22px; }
.ledger__title { font: var(--type-display-3); letter-spacing: var(--track-tight); color: var(--vm-teal-700); margin-bottom: 8px; }
.ledger__note { font: var(--type-body); color: var(--vm-ink); opacity: 0.7; max-width: none; }
@media (max-width: 540px) { .ledger { padding: 24px 20px; } .ledger__note { white-space: normal; } }
.ledger__bars { display: flex; flex-direction: column; gap: 10px; }
.lbar {
  display: flex; align-items: center; gap: 14px; min-width: 300px;
  border: 2px solid transparent; border-radius: 12px;
  background:
    linear-gradient(var(--vm-white), var(--vm-white)) padding-box,
    linear-gradient(118deg, var(--vm-teal-700), var(--vm-teal-300) 46%, var(--vm-orange-600)) border-box;
  padding: 13px 18px;
}
.lbar__val { flex: none; min-width: 54px; font: 600 15px/1 var(--font-mono); letter-spacing: 0.01em; color: var(--vm-teal-800); }
.lbar__role { font: 500 16px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--vm-ink); white-space: nowrap; }
.lbar__arrow { margin-left: auto; flex: none; display: flex; color: var(--vm-orange-600); }
.lbar__arrow svg { width: 16px; height: 16px; }
.ledger__total {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 22px;
  margin-top: 18px; padding: 18px 26px; border-radius: 14px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--vm-teal-800), var(--vm-teal-800)) padding-box,
    linear-gradient(118deg, var(--vm-teal-300), var(--vm-orange-300) 50%, var(--vm-orange-600)) border-box;
  color: var(--vm-cream);
}
.ledger__total-lbl { display: flex; flex-direction: column; gap: 4px; font: 500 16px/1.15 var(--font-display); letter-spacing: -0.02em; }
.ledger__total-sub { font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.ledger__total-val { display: flex; align-items: baseline; gap: 8px; font: 500 38px/1 var(--font-display); letter-spacing: -0.04em; color: var(--vm-orange-300); }
.ledger__total-unit { font: 400 13px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vm-cream); opacity: 0.6; }
@media (max-width: 560px) {
  .lbar { width: 100% !important; min-width: 0; }
  .ledger__total { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
}

.org__caption { margin: 48px auto 0; max-width: 880px; text-align: center; }
.org__caption p { font: var(--type-body-lg); color: var(--vm-ink); max-width: none; }
.org__caption p + p { margin-top: 18px; }
.org__capacity {
  background: var(--vm-teal-800); color: var(--vm-cream); border-radius: var(--radius-lg);
  padding: 28px 32px; font: 400 17px/1.55 var(--font-body);
}
.org__capacity strong { color: var(--vm-orange-300); font-weight: 500; }
@media (max-width: 820px) { .org__caption { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(51,51,51,0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--vm-cream-soft); border-radius: var(--radius-lg);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(13,90,103,0.22);
  transform: translateY(16px) scale(0.98); transition: transform var(--dur-base) var(--ease-out);
}
.modal-scrim.open .modal { transform: none; }
.modal__head { padding: 32px 36px 24px; border-bottom: 1px solid var(--surface-hairline); position: relative; }
.modal__dept { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-orange-600); margin-bottom: 14px; }
.modal__role { font: 500 34px/1.04 var(--font-display); letter-spacing: -0.03em; color: var(--vm-teal-700); margin: 0; }
.modal__reports { margin-top: 12px; font: 400 14px/1.4 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.6; }
.modal__close {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px;
  border: 2px solid var(--vm-ink); border-radius: 50%; background: var(--vm-cream-soft); cursor: pointer;
}
.modal__close::before, .modal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--vm-ink); }
.modal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal__body { padding: 28px 36px 36px; }
.modal__desc { font: 400 17px/1.55 var(--font-body); color: var(--vm-ink); margin: 0 0 28px; }
.modal__sub { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.55; margin-bottom: 14px; }
.modal__systems { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.modal__systems li {
  font: 400 13px/1.2 var(--font-mono); letter-spacing: 0.02em;
  background: var(--vm-white); border: 1px solid var(--surface-hairline); color: var(--vm-teal-800);
  padding: 9px 13px; border-radius: 999px;
}
.modal__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--vm-teal-800); color: var(--vm-cream);
  border-radius: 999px; padding: 12px 20px;
  font: 500 15px/1 var(--font-mono); letter-spacing: 0.04em;
}
.modal__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vm-orange-300); }
.modal__note {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--surface-hairline);
  font: 400 13px/1.5 var(--font-body); color: var(--vm-ink); opacity: 0.62; max-width: none;
}
@media (max-width: 540px) {
  .modal__head { padding: 26px 24px 20px; }
  .modal__role { font-size: 27px; }
  .modal__body { padding: 22px 24px 28px; }
}

/* ============================================================
   SECTION 6 — EXTEND THE TEAM
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.split__col { border-radius: var(--radius-lg); padding: 36px 34px; }
.split__col--ai { background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline); }
.split__col--human { background: var(--vm-teal-800); color: var(--vm-cream); }
.split__tag { font: var(--type-display-3); letter-spacing: var(--track-tight); text-transform: none; margin-bottom: 22px; opacity: 1; color: var(--vm-teal-700); }
.split__col--human .split__tag { color: var(--vm-cream); opacity: 1; }
.split__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.split__list li { display: flex; gap: 14px; font: 400 18px/1.4 var(--font-body); align-items: flex-start; }
.split__list .mk { flex: none; margin-top: 2px; }
.equation {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 48px;
}
.eq-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline);
  border-radius: 999px; padding: 16px 28px;
  font: 500 22px/1 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700);
}
.eq-card .mk { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.eq-card--yes .mk { background: rgba(0,103,120,0.12); }
.eq-card--no .mk { background: rgba(208,0,0,0.10); }
.eq-card--no { color: var(--vm-ink); opacity: 0.7; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION 7 — VISION (stat band)
   ============================================================ */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; padding-top: 56px; border-top: 2px solid var(--vm-orange-600); }
.statband--two { grid-template-columns: 1fr 1fr; max-width: 920px; }
/* "what gets faster" list */
.faster {
  margin-top: 48px;
  background: var(--vm-white); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-lg); padding: 36px 40px;
}
.faster__head { font: 400 14px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-teal-800); margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--surface-hairline); }
.faster__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; }
.faster__list li { display: flex; gap: 14px; align-items: flex-start; font: 400 18px/1.4 var(--font-body); color: var(--vm-ink); }
.faster__list li .faster__mk { display: none; }
.faster__list li::before { content: "\2022"; color: var(--vm-orange-600); font-weight: 700; flex: none; line-height: 1.4; }
.faster__mk { flex: none; margin-top: 1px; }
@media (max-width: 760px) { .faster { padding: 28px 24px; } .faster__list { grid-template-columns: 1fr; } }
.statband__cell { }
.statband__num { font: 500 80px/0.95 var(--font-display); letter-spacing: -0.05em; color: var(--vm-teal-700); }
.statband__num--text { font-size: 44px; line-height: 1.04; }
.statband__cap { margin-top: 14px; font: var(--type-body); color: var(--vm-ink); max-width: 26ch; }
@media (max-width: 980px) { .statband { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 540px) { .statband { grid-template-columns: 1fr; } .statband__num { font-size: 60px; } }

/* centered, gradient-outlined "vision capacity" card (stats + pull + CTA) */
.vision-cap {
  max-width: 860px; margin: 64px auto 0; text-align: center;
  border: 3px solid transparent; border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--vm-cream-soft), var(--vm-cream-soft)) padding-box,
    linear-gradient(125deg, var(--vm-teal-700), var(--vm-teal-300) 46%, var(--vm-orange-600)) border-box;
  padding: 56px 56px 48px;
}
.vision-cap .statband { margin-top: 0; padding-top: 0; border-top: none; max-width: none; gap: 40px; }
.vision-cap .statband__cell { display: flex; flex-direction: column; align-items: center; }
.vision-cap .statband__num { font-size: 68px; }
.vision-cap .statband__cap { margin-top: 12px; max-width: 24ch; text-wrap: balance; }
.vision-cap__pull { max-width: 26ch; margin: 40px auto 0; font-style: normal; }
.vision-cap .cta-end { margin-top: 36px; display: flex; justify-content: center; }
@media (max-width: 600px) { .vision-cap { padding: 40px 26px 36px; } .vision-cap .statband__num { font-size: 54px; } }

/* ============================================================
   SECTION 8 / 9 — OFFER + PROOF (blueprint doc mock)
   ============================================================ */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 56px; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; gap: 48px; } }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li {
  display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--surface-hairline); align-items: flex-start;
}
.checklist li:first-child { padding-top: 0; }
.checklist__mk { flex: none; margin-top: 2px; color: var(--vm-orange-600); }
.checklist__title { font: 500 19px/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }
.checklist__desc { font: 400 15px/1.45 var(--font-body); color: var(--vm-ink); opacity: 0.75; margin-top: 2px; }
.reveal-free {
  margin-top: 44px; font: 500 30px/1.25 var(--font-display); letter-spacing: -0.03em; color: var(--vm-teal-700); text-wrap: balance; max-width: 22ch;
}
.reveal-free b { color: var(--vm-orange-600); font-weight: 500; }

/* document mock */
.doc-mock { position: relative; display: flex; justify-content: center; min-height: 520px; }
.doc {
  position: absolute; border-radius: 8px; background: var(--vm-white);
  box-shadow: 0 18px 50px rgba(13,90,103,0.16); overflow: hidden;
}
.doc--cover { width: 320px; aspect-ratio: 8.5/11; z-index: 3; left: 50%; transform: translateX(-72%) rotate(-5deg); top: 0; }
.doc--p1 { width: 300px; aspect-ratio: 8.5/11; z-index: 2; left: 50%; transform: translateX(-30%) rotate(3deg); top: 28px; }
.doc--p2 { width: 290px; aspect-ratio: 8.5/11; z-index: 1; left: 50%; transform: translateX(8%) rotate(9deg); top: 56px; }
.doc-cover-inner { height: 100%; display: flex; flex-direction: column; padding: 30px; background: var(--vm-teal-800); color: var(--vm-cream); }
.doc-cover-inner .doc-eyebrow { font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vm-orange-300); }
.doc-cover-inner .doc-title { margin-top: auto; font: 500 30px/0.98 var(--font-display); letter-spacing: -0.03em; }
.doc-cover-inner .doc-rule { width: 44px; height: 2px; background: var(--vm-orange-600); margin: 18px 0; }
.doc-cover-inner .doc-client { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.doc-cover-inner .doc-logo { height: 22px; width: auto; margin-bottom: 0; }
.doc-cover-inner .doc-logo-text { font: 500 18px/1 var(--font-display); letter-spacing: 0.18em; color: var(--vm-cream); text-transform: uppercase; }
.doc-page-inner { height: 100%; padding: 26px 24px; display: flex; flex-direction: column; gap: 9px; }
.doc-h { font: 500 14px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); margin-bottom: 4px; }
.doc-eyebrow-sm { font: 400 8px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vm-orange-600); margin-bottom: 10px; }
.doc-line { height: 6px; border-radius: 3px; background: var(--vm-cream-dim); }
.doc-line.blur { background: repeating-linear-gradient(90deg, var(--vm-stone) 0 18px, var(--vm-cream-dim) 18px 34px); filter: blur(2.4px); }
.doc-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; margin-top: 8px; }
.doc-bars span { flex: 1; background: var(--vm-teal-300); border-radius: 3px 3px 0 0; }
@media (max-width: 540px) {
  .doc-mock { min-height: 440px; }
  .doc--cover { width: 240px; transform: translateX(-66%) rotate(-5deg); }
  .doc--p1 { width: 224px; transform: translateX(-28%) rotate(3deg); }
  .doc--p2 { width: 214px; transform: translateX(6%) rotate(9deg); }
}

/* big pull quote (proof) */
.bigquote { margin-top: 64px; border-top: 2px solid var(--vm-orange-600); padding-top: 48px; }
.bigquote__body { font: 500 italic 48px/1.22 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); margin: 0; max-width: 24ch; text-wrap: balance; }
.bigquote__attr { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.bigquote__avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--vm-teal-300), var(--vm-teal-800)); display:flex; align-items:center; justify-content:center; font: 700 16px/1 var(--font-mono); color: var(--vm-cream); }
.bigquote__name { font: 700 16px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-teal-500); }
.bigquote__note { margin-top: 6px; font: 400 12px/1.3 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.5; }
@media (max-width: 700px) { .bigquote__body { font-size: 30px; max-width: none; } }

/* ============================================================
   SECTION 10 — LOCAL PROOF (testimonials + map)
   ============================================================ */
.local-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-top: 56px; align-items: start; }
@media (max-width: 980px) { .local-grid { grid-template-columns: 1fr; } }
.tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .tcards { grid-template-columns: 1fr; } }
.tcard {
  background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 18px;
}
.tcard__quote { font: 500 19px/1.35 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); text-wrap: pretty; }
.tcard__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--vm-teal-300), var(--vm-teal-800)); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-mono); color: var(--vm-cream); flex: none; }
.tcard__name { font: 700 13px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-teal-800); }
.tcard__meta { margin-top: 4px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.4; }

.map-card { background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 96px; }
.map-card__title { font: 500 22px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); margin-bottom: 6px; }
.map-card__sub { font: 400 14px/1.4 var(--font-body); color: var(--vm-ink); opacity: 0.65; margin-bottom: 20px; }
.map { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--vm-cream-dim); }
.region-map { display: block; width: 100%; height: 100%; }
.rm-radius { fill: rgba(0,103,120,0.07); stroke: none; }
.rm-radius-core { fill: none; stroke: var(--vm-teal-700); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.5; }
.rm-city circle { fill: var(--vm-ink); opacity: 0.5; }
.rm-city text { font: 400 12px/1 var(--font-mono); letter-spacing: 0.03em; fill: var(--vm-ink); opacity: 0.6; text-anchor: middle; }
.rm-pin { fill: var(--vm-orange-600); stroke: var(--vm-cream); stroke-width: 3; }
.rm-pin-halo { fill: var(--vm-orange-600); opacity: 0.18; }
.rm-home-label { font: 700 12px/1 var(--font-mono); letter-spacing: 0.08em; fill: var(--vm-teal-800); text-anchor: middle; }

/* ============================================================
   SECTION 11 — PROCESS (steps + timeline)
   ============================================================ */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.steps3--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps3, .steps3--four { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 560px) { .steps3, .steps3--four { grid-template-columns: 1fr; } }
.pstep { background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline); border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.pstep__num { width: 52px; height: 52px; border: 2px solid var(--vm-teal-700); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 22px/1 var(--font-mono); color: var(--vm-teal-700); }
.pstep__title { font: 500 36px/1.1 var(--font-display); letter-spacing: var(--track-tight); color: var(--vm-teal-700); }
.pstep__body { font: 400 15px/1.5 var(--font-body); color: var(--vm-ink); }

/* timeline — clearer, more present; line sits in its own band above the text */
.timeline { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; padding-top: 54px; }
.timeline--four { grid-template-columns: repeat(4, 1fr); }
.timeline::before { content: ""; position: absolute; top: 11px; left: 10%; right: 10%; height: 2px; background: var(--vm-orange-600); }
.tl-node { text-align: center; position: relative; padding: 0 8px; }
.tl-node::before { content: ""; position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--vm-teal-800); border: 4px solid var(--vm-cream); box-shadow: 0 0 0 2px var(--vm-orange-600); }
.tl-node__day { font: 500 22px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }
.tl-node__label { margin-top: 8px; font: 400 15px/1.35 var(--font-body); color: var(--vm-ink); opacity: 0.7; }
@media (max-width: 760px) {
  .timeline, .timeline--four { grid-template-columns: 1fr 1fr; gap: 36px 16px; padding-top: 40px; }
}
@media (max-width: 460px) {
  .timeline, .timeline--four { grid-template-columns: 1fr; gap: 24px; padding-top: 0; }
  .timeline::before { display: none; }
  .tl-node::before { display: none; }
  .tl-node { text-align: left; border-left: 2px solid var(--vm-orange-600); padding-left: 16px; }
}
.process-line { margin-top: 56px; text-align: center; font: 500 italic 32px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }

/* ============================================================
   SECTION 12 — WHY FREE (plain)
   ============================================================ */
.plain { max-width: 760px; }
.plain p { font: 400 21px/1.6 var(--font-body); color: var(--vm-ink); }
.whyfree { max-width: 820px; }
.whyfree p { margin: 0 0 18px; }
.whyfree strong { font-weight: 600; color: var(--vm-teal-800); }
.whyfree em { font-style: italic; }
.whyfree mark { background: linear-gradient(transparent 58%, rgba(255,186,123,0.6) 0); color: inherit; padding: 0 1px; }
.whyfree__hl { color: var(--vm-orange-600); font-weight: 500; }
.whyfree__punch {
  display: inline-block;
  font: 500 34px/1.1 var(--font-display) !important; letter-spacing: -0.03em;
  color: var(--vm-teal-700); margin: 18px 0 26px !important;
  padding: 20px 30px;
  border: 2px solid transparent; border-radius: 14px;
  background:
    linear-gradient(var(--vm-cream-soft), var(--vm-cream-soft)) padding-box,
    linear-gradient(122deg, var(--vm-teal-700), var(--vm-teal-300) 48%, var(--vm-orange-600)) border-box;
}
@media (max-width: 560px) { .whyfree__punch { font-size: 26px !important; padding: 16px 20px; } }

/* ============================================================
   SECTION 13 — THE CATCH (spots)
   ============================================================ */
.catch { background: var(--vm-teal-800); color: var(--vm-cream); border-radius: 15px; margin-inline: 40px; padding-inline: 48px; text-align: center; }
.catch .h-sec, .catch .sub, .catch .body-col, .catch .pull { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .catch { margin-inline: 14px; padding-inline: 22px; } }
.catch .h-sec { color: var(--vm-cream); }
.catch .sub { color: var(--vm-cream); opacity: 0.92; }
.catch .body-col p { color: var(--vm-cream); opacity: 0.86; }
.catch .pull { color: var(--vm-cream); }
.catch .eyebrow-row__label { color: var(--vm-orange-300); }
.spots {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; padding: 14px 22px;
}
.spots__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vm-orange-300); position: relative; }
.spots__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--vm-orange-300); opacity: 0.5; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } }
.spots__text { font: 500 15px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.spots__text b { color: var(--vm-orange-300); font-weight: 700; }

/* ============================================================
   SECTION 14 — IS THIS YOU (two columns)
   ============================================================ */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col { border-radius: var(--radius-lg); padding: 36px 34px; }
.fit-col--yes { background: var(--vm-cream-soft); border: 2px solid var(--vm-teal-700); }
.fit-col--no { background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline); }
.fit-col__tag { font: var(--type-display-3); letter-spacing: var(--track-tight); text-transform: none; margin-bottom: 24px; }
.fit-col--yes .fit-col__tag { color: var(--vm-teal-800); }
.fit-col--no .fit-col__tag { color: var(--vm-ink); opacity: 0.55; }
.fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fit-list li { display: flex; gap: 14px; font: 400 18px/1.4 var(--font-body); color: var(--vm-ink); align-items: flex-start; }
.fit-col--no .fit-list li { opacity: 0.66; }
.fit-list .mk { flex: none; margin-top: 1px; }

/* ============================================================
   SECTION 15 — WHY VINYL (team)
   ============================================================ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 8px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } }
.team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.team-member { display: flex; flex-direction: column; gap: 12px; }
.team-photo { aspect-ratio: 1/1; height: auto !important; border-radius: var(--radius-lg); overflow: hidden; background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline); }
.team-name { font: 500 30px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }
.team-role { font: 500 14px/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vm-teal-800); }
.badge-2015 { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 28px; }
.badge-2015 .yr { font: 500 64px/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--vm-teal-700); }
.badge-2015 .lbl { font: 400 14px/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.6; max-width: 18ch; }
.why-line { margin-top: 24px; font: 500 italic 22px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--vm-teal-700); }

/* ============================================================
   SECTION 16 — FAQ (accordion)
   ============================================================ */
.faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; max-width: none; margin-top: 48px; align-items: start; }
.faq__item { border-bottom: 1px solid var(--surface-hairline); }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px; font: 500 21px/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700);
}
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; column-gap: 0; } }
.faq__icon { flex: none; width: 26px; height: 26px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--vm-orange-600); transition: transform var(--dur-base) var(--ease-out); }
.faq__icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq__a-inner { padding: 0 4px 28px; font: 400 18px/1.6 var(--font-body); color: var(--vm-ink); max-width: 70ch; }
@media (max-width: 700px) { .faq__q { font-size: 19px; } }

/* ============================================================
   SECTION 17 — NOTE FROM SCOTT
   ============================================================ */
.note-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; margin-top: 28px; }
@media (max-width: 860px) { .note-grid { grid-template-columns: 1fr; gap: 36px; justify-items: center; } }
.note-photo-col { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .note-photo-col { position: static; align-items: center; } }
.note-photo { display: block; width: 432px; max-width: 100%; height: 560px; border-radius: var(--radius-lg); overflow: hidden; background: var(--vm-cream-dim); border: 1px solid var(--surface-hairline); }
.note-photo-cap { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.note-photo-cap__name { font: 500 24px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }
.note-photo-cap__loc { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.5; }

/* the letter, set like a real letter on the page */
.note-letter {
  position: relative;
  border: 2px solid transparent; border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--vm-cream-soft), var(--vm-cream-soft)) padding-box,
    linear-gradient(130deg, var(--vm-teal-700), var(--vm-teal-300) 48%, var(--vm-orange-600)) border-box;
  padding: 52px 52px 44px;
}
.note-letter::before { display: none; }
.note-letter::after { /* decorative opening quote */
  content: "\201C"; position: absolute; top: 30px; right: 40px;
  font: 700 110px/1 var(--font-display); color: var(--vm-teal-700); opacity: 0.1; pointer-events: none;
}
.note-letter p { font: 400 19px/1.7 var(--font-body); color: var(--vm-ink); max-width: 58ch; margin: 0 0 20px; }
.note-letter__lead { font-size: 22px !important; line-height: 1.6 !important; color: var(--vm-teal-800) !important; }
.note-letter__kicker { font: 400 19px/1.7 var(--font-body) !important; letter-spacing: 0 !important; color: var(--vm-ink) !important; margin-top: 20px !important; }
.note-sign { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--surface-hairline); font: 500 italic 34px/1 var(--font-display); letter-spacing: -0.02em; color: var(--vm-teal-700); }
.note-sign + .note-sign-role { margin-top: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.55; }
@media (max-width: 560px) { .note-letter { padding: 36px 26px 32px; } .note-letter::after { display: none; } }

/* ============================================================
   SECTION 18 — FINAL CTA + FORM
   ============================================================ */
.final { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-top: 96px; padding-bottom: 120px; }
.final__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 28% 30%, rgba(128,198,198,0.46), rgba(128,198,198,0) 70%),
    radial-gradient(34% 40% at 72% 70%, rgba(255,186,123,0.4), rgba(255,186,123,0) 70%);
}
.final__bg img { display: none; }
.final__title { font: var(--type-display-2); letter-spacing: var(--track-tight); color: var(--vm-teal-700); margin: 0 auto 24px; max-width: 16ch; text-wrap: balance; }
.final__sub { font: var(--type-lead); color: var(--vm-ink); max-width: 36ch; margin: 0 auto 28px; }
.final__body { font: 400 18px/1.6 var(--font-body); color: var(--vm-ink); opacity: 0.8; max-width: 60ch; margin: 0 auto 24px; }
.final__options { list-style: none; margin: 0 auto 40px; padding: 0; max-width: 600px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.final__options li { display: flex; align-items: center; gap: 16px; background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline); border-radius: 12px; padding: 16px 20px; font: 500 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--vm-ink); }
.final__options-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vm-teal-700); color: var(--vm-cream); display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--font-mono); }
@media (max-width: 700px) { .final__title { font-size: 42px; } .final__sub { font-size: 22px; } }

.form-card {
  background: var(--vm-cream-soft); border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-lg); padding: 40px; max-width: 720px; margin: 0 auto;
  text-align: left;
}
.form-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.form-card__title { font: 500 26px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--vm-teal-700); }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 400 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.6; }
.field input {
  font: 400 17px/1.4 var(--font-body); color: var(--vm-ink);
  background: var(--vm-white); border: 1px solid var(--surface-hairline); border-radius: 10px;
  padding: 14px 16px; transition: border-color var(--dur-base);
}
.field input:focus { outline: none; border-color: var(--vm-teal-700); }
.field input::placeholder { color: var(--vm-ink); opacity: 0.35; }
.form-submit { grid-column: 1 / -1; margin-top: 6px; }
.form-foot { margin-top: 22px; text-align: center; font: 400 14px/1.5 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.55; }
.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success.show { display: block; }
.form-success__mk { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,103,120,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.form-success__title { font: 500 30px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--vm-teal-700); margin-bottom: 14px; }
.form-success__body { font: 400 17px/1.55 var(--font-body); color: var(--vm-ink); max-width: 44ch; margin: 0 auto; }
@media (max-width: 560px) { .form-fields { grid-template-columns: 1fr; } .form-card { padding: 28px 22px; } }

/* final CTA card (button opens the apply modal) */
.form-card--cta { text-align: center; }
.form-card--cta .form-card__title { font: var(--type-display-3); letter-spacing: var(--track-tight); color: var(--vm-teal-700); }
.form-card__cta { margin-top: 28px; }
.form-card__cta .btn-apply { width: 100%; justify-content: center; }
.form-card--cta .form-foot { margin-top: 20px; }

/* ============================================================
   APPLY MODAL — stage-one lead capture
   ============================================================ */
.apply-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(51,51,51,0.46);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.apply-scrim.open { opacity: 1; pointer-events: auto; }
.apply-modal {
  position: relative; background: var(--vm-cream-soft); border-radius: var(--radius-lg);
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  padding: 44px 44px 36px;
  box-shadow: 0 28px 90px rgba(13,90,103,0.26);
  transform: translateY(18px) scale(0.98); transition: transform var(--dur-base) var(--ease-out);
}
.apply-scrim.open .apply-modal { transform: none; }
.apply-modal__close {
  position: absolute; top: 22px; right: 22px; width: 42px; height: 42px;
  border: 2px solid var(--vm-ink); border-radius: 50%; background: transparent; cursor: pointer;
  transition: background var(--dur-base);
}
.apply-modal__close:hover { background: rgba(51,51,51,0.06); }
.apply-modal__close::before, .apply-modal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 2px; background: var(--vm-ink); }
.apply-modal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.apply-modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.apply-modal__eyebrow {
  font: var(--type-eyebrow-sm); text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--vm-ink); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.apply-modal__eyebrow::after { content: ""; width: 56px; height: 2px; background: var(--vm-orange-600); }
.apply-modal__title { font: 500 38px/1.0 var(--font-display); letter-spacing: var(--track-tight); color: var(--vm-teal-700); margin: 0 0 10px; max-width: 16ch; }
.apply-modal__sub { font: 400 16px/1.5 var(--font-body); color: var(--vm-ink); opacity: 0.72; margin: 0 0 26px; }
.apply-modal__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apply-modal__form .form-submit { grid-column: 1 / -1; margin-top: 8px; }
.apply-modal__foot { margin-top: 18px; text-align: center; font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--vm-ink); opacity: 0.55; }
@media (max-width: 560px) {
  .apply-modal { padding: 36px 24px 28px; }
  .apply-modal__title { font-size: 30px; }
  .apply-modal__form { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { margin-top: 0; }
.footer__slab {
  background: var(--vm-teal-800); color: var(--vm-cream);
  padding: 56px var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.footer__logo { flex: none; display: inline-flex; align-items: center; }
.footer__logo img { height: 40px; width: auto; display: block; }
.footer__mini { display: flex; align-items: center; gap: 14px; font: 400 13px/1.4 var(--font-mono); letter-spacing: 0.04em; opacity: 0.85; white-space: nowrap; }
.footer__mini a { color: var(--vm-cream); text-decoration: none; transition: color var(--dur-base); }
.footer__mini a:hover { color: var(--vm-orange-300); }
.footer__dot { opacity: 0.5; }
.footer__copy { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; }
@media (max-width: 640px) {
  .footer__slab { gap: 14px; padding: 40px var(--gutter); }
  .footer__mini { flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
}

/* ---------- Scroll reveal (transform-only: content is never opacity:0, so it
   can never be trapped invisible if a transition clock is throttled) ---------- */
.reveal { transform: translateY(22px); transition: transform 0.7s var(--ease-out); }
.reveal.in { transform: none; }

/* ============================================================
   Jon's DS pass — centered heads, stacked split, ledger teal box, offer box
   ============================================================ */
/* generic centered section head */
.center-head .eyebrow-row { justify-content: center; }
.center-head .h-sec { text-align: center; }
.center-head > p { text-align: center; margin-left: auto; margin-right: auto; }

/* Section 6 — stacked boxes in the visual column */
.split--stacked { grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
.split__list--bullets li .mk { display: none; }
.split__list--bullets li::before { content: "\2022"; color: var(--vm-orange-600); font-weight: 700; flex: none; line-height: 1.4; }

/* Section 7 — capacity teal box: ledger left, vision-cap right */
.ledger-wrap {
  margin-top: 48px; background: var(--vm-teal-800); border-radius: var(--radius-lg);
  padding: 44px; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: start;
}
.ledger-wrap .ledger { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; }
.ledger-wrap .lbar { width: 100% !important; min-width: 0; }
.ledger-wrap .ledger__title { color: var(--vm-cream); font: var(--type-display-3); letter-spacing: var(--track-tight); }
.ledger-wrap .ledger__note { color: var(--vm-cream); opacity: 0.78; }
.ledger-wrap .vision-cap { margin: 0; max-width: none; padding: 34px 32px; }
.ledger-wrap .vision-cap .statband { grid-template-columns: 1fr; gap: 28px; }
.ledger-wrap .vision-cap__pull { max-width: none; }
@media (max-width: 900px) { .ledger-wrap { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }

/* Section 8 — offer presented in a contained teal box */
.offer-box {
  background: var(--vm-teal-800); color: var(--vm-cream);
  border-radius: 15px; margin-inline: 40px; padding-inline: 48px; padding-block: 84px;
}
.offer-box .eyebrow-row__label { color: var(--vm-orange-300); }
.offer-box .h-sec { color: var(--vm-cream); }
.offer-box p, .offer-box .checklist__desc { color: var(--vm-cream) !important; }
.offer-box .checklist li { border-bottom-color: rgba(236,232,226,0.18); }
.offer-box .checklist__title { color: var(--vm-cream); }
.offer-box .checklist__mk { color: var(--vm-orange-300); }
.offer-box .reveal-free { color: var(--vm-cream); }
.offer-box .reveal-free b { color: var(--vm-orange-300); }
.offer-box .doc { box-shadow: 0 24px 70px rgba(0,0,0,0.28); }
.offer-box .doc--cover { outline: 1px solid rgba(236,232,226,0.18); }
@media (max-width: 700px) { .offer-box { margin-inline: 14px; padding-inline: 22px; } }

/* ============================================================
   Jon batch 4 — section box, FAQ centering, teal-bg eyebrows
   ============================================================ */
.section-box { background: #F4F4F2; border-radius: 15px; margin-inline: 40px; padding-inline: 48px; padding-block: 80px; }
@media (max-width: 700px) { .section-box { margin-inline: 14px; padding-inline: 22px; } }
.faq--center { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; column-gap: 0; }

/* Section 15 — two soft DS gradient orbs floating behind everything */
.why-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.why-orbs ~ .eyebrow-row, .why-orbs ~ .why-grid { position: relative; z-index: 1; }
.why-orb { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; opacity: 0.55; }
.why-orb--1 { transform: translate(-94%, -50%); }
.why-orb--2 { transform: translate(-6%, -50%); }
@media (max-width: 900px) { .why-orb { width: 360px; height: 360px; } }

/* Section 7 — ledger + vision-cap side by side in a grey box */
.cap-wrap {
  margin-top: 48px; background: #F4F4F2; border-radius: 15px; padding: 40px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: start;
}
.cap-wrap .ledger { margin-top: 0; }
.cap-wrap .vision-cap { margin: 0; max-width: none; padding: 36px 32px; }
.cap-wrap .vision-cap .statband { grid-template-columns: 1fr; gap: 24px; }
.cap-wrap .vision-cap__pull { max-width: none; }
@media (max-width: 900px) { .cap-wrap { grid-template-columns: 1fr; gap: 28px; padding: 26px; } }
.offer-box .eyebrow-row__label,
.catch .eyebrow-row__label {
  background: none; -webkit-text-fill-color: var(--vm-orange-300); color: var(--vm-orange-300);
}
.final .hero__eyebrow {
  background: linear-gradient(90deg, #80C6C6, #0097A7, #006778);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stack__node, .stack__arrow { transform: none !important; }
}