/* ============================================================
   Vision Labs — visionlabs.com/os base stylesheet
   Mirrors the live visionlabs.com design system:
   dark gunmetal header, sans-serif Poppins throughout (bold for
   headings), light body, olive-pill CTAs, dark multi-column footer.
   Mobile-first.
   ============================================================ */

/* ---------- Self-hosted Poppins (latin subset) ---------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/assets/fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/os/assets/fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/os/assets/fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/os/assets/fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/os/assets/fonts/poppins-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Self-hosted Silkscreen (latin subset) ----------
   The bitmap face for Pattern 5 (Overworld). SIL Open Font License, so it
   commits cleanly. Loaded on every page (~3.5KB each, font-display: swap) but
   only ever referenced inside .ow-stage — chrome labels, nameplates, the bag.
   Never a sentence, never an answer, never a claim. See brand doc Pattern 5. */

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/os/assets/fonts/silkscreen-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/os/assets/fonts/silkscreen-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Core palette (brand doc) */
  --vl-teal:        #00665C;
  --vl-olive:       #018979;
  --vl-olive-link:  #038979;
  --vl-lime:        #A3C74C;
  --vl-gunmetal:    #26313B;
  --vl-isabeline:   #F6F3F0;

  /* Section tints */
  --vl-mint-50:     #F6FFFB;
  --vl-cyan-50:     #ECF9F9;
  --vl-mint-whisper:#F9FDFB;
  --vl-cool-off:    #F8FAF9;

  /* Neutrals */
  --vl-white:       #FFFFFF;
  --vl-gray-100:    #FAFAFA;
  --vl-gray-200:    #f2f3f3;
  --vl-gray-300:    #e5e7e8;
  --vl-gray-400:    #d4d6d8;
  --vl-gray-500:    #a9adb1;
  --vl-gray-600:    #6b7480;

  /* Type — Poppins everywhere; live site uses sans-serif for headings too */
  --font-body:    "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Chrome-only bitmap face. Scoped to .ow-stage; see Pattern 5. */
  --font-pixel:   "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, monospace;

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

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-card: 0 4px 12px rgba(38, 49, 59, 0.06);
  --shadow-cta:  0 8px 24px rgba(1, 137, 121, 0.25);

  /* Layout */
  --container-max: 1120px;
  --content-max:   780px;
  --form-max:      640px;
  --header-h:      60px;
  /* The Data OS subnav: 46px of row plus its 1px bottom border. It is what the
     scrolly showcase pins under, now that the mega-menu header above it scrolls
     away instead of sticking. */
  --dos-nav-h:     47px;
}

@media (min-width: 768px) {
  :root { --header-h: 72px; }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--vl-gunmetal);
  background: var(--vl-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--vl-olive-link); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--vl-gunmetal);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.container--narrow {
  max-width: var(--content-max);
}

.section {
  padding-block: clamp(56px, 9vw, 112px);
}

.section__title {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: var(--space-7);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  min-height: 44px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--vl-olive);
  color: var(--vl-white);
}
.btn--primary:hover {
  background: var(--vl-teal);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

.btn--lg {
  padding: 16px 32px;
  font-size: 17px;
  min-height: 54px;
}

.btn--ghost-light {
  background: transparent;
  color: var(--vl-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vl-olive);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.eyebrow--lime { color: var(--vl-lime); }
.eyebrow--white { color: rgba(255, 255, 255, 0.7); }

/* ---------- Sticky header (dark gunmetal, matches visionlabs.com) ---------- */

.site-skip-link {
  position: fixed;
  z-index: 1000;
  top: var(--space-3);
  left: var(--space-3);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  color: var(--vl-white);
  background: var(--vl-teal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-5)));
}

.site-skip-link:focus {
  color: var(--vl-white);
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vl-gunmetal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: var(--header-h);
  color: var(--vl-white);
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}
@media (min-width: 768px) {
  .site-header__inner { padding: 14px var(--space-6); }
}

.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 26px; width: auto; }
@media (min-width: 768px) {
  .site-header__logo img { height: 30px; }
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .site-header__right { gap: var(--space-5); }
}

.site-header__home {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-header__home:hover {
  color: var(--vl-white);
  text-decoration: underline;
}

@media (max-width: 419px) {
  .site-header__home { display: none; }
}

.site-header__cta {
  padding: 10px 18px;
  min-height: 44px;
  font-size: 14px;
  background: var(--vl-olive);
  color: var(--vl-white);
}
.site-header__cta:hover {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .site-header__cta { padding: 12px 22px; font-size: 15px; }
}

/* ---------- Public marketing header ----------
   Used on apex service routes. The live WordPress header is static, not
   sticky, so this variant does not inherit the compact /os header behavior. */

.site-header--public {
  position: relative;
  top: auto;
  z-index: 70;
  min-height: 74px;
  border-bottom: 1px solid #dff5ed;
  color: var(--vl-gunmetal);
  background: var(--vl-white);
}

.site-header--public .site-header__inner {
  position: relative;
  min-height: 74px;
  padding: 10px var(--space-5);
}

.site-header--public .site-header__logo {
  flex: 0 0 auto;
}

.site-header--public .site-header__logo img {
  width: auto;
  height: 34px;
}

.site-header--public .site-nav-shell {
  position: static;
  margin-left: auto;
}

.site-header--public summary {
  color: var(--vl-gunmetal);
  cursor: pointer;
}

.site-header--public .site-nav-toggle {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-pill);
  background: var(--vl-white);
  font-size: 14px;
  font-weight: 700;
}

.site-header--public .site-primary-nav {
  position: absolute;
  z-index: 71;
  top: 100%;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-height: calc(100svh - 74px);
  padding: var(--space-5);
  overflow-y: auto;
  border-top: 1px solid var(--vl-gray-300);
  background: var(--vl-white);
  box-shadow: 0 22px 50px rgba(38, 49, 59, 0.16);
}

.site-header--public .site-nav-shell:not([open]) > .site-primary-nav {
  display: none;
}

.site-header--public .site-primary-nav__list,
.site-header--public .site-primary-nav__actions,
.site-header--public .site-resource-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header--public .site-primary-nav__list {
  display: grid;
  gap: var(--space-2);
}

.site-header--public .site-nav-group > summary {
  min-height: 48px;
  padding: 11px 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  direction: rtl;
  list-style-type: disclosure-open;
}

.site-header--public .site-nav-group > summary > span {
  direction: ltr;
  unicode-bidi: isolate;
}

.site-header--public .site-nav-group[open] > summary {
  color: var(--vl-teal);
}

.site-header--public .site-primary-nav__direct,
.site-header--public .site-primary-nav__login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 8px;
  color: var(--vl-gunmetal);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
}

.site-header--public .site-primary-nav__direct:hover,
.site-header--public .site-primary-nav__login:hover {
  color: var(--vl-teal);
  text-decoration: none;
}

.site-header--public .site-mega-menu {
  display: none;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid rgba(0, 102, 92, 0.12);
  border-radius: var(--r-lg);
  background: var(--vl-mint-50);
}

.site-header--public .site-nav-group[open] > .site-mega-menu {
  display: grid;
}

.site-header--public .site-mega-menu__links {
  display: grid;
  gap: var(--space-2);
}

.site-header--public .site-mega-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 9px;
  border-radius: var(--r-md);
  color: var(--vl-teal);
  text-decoration: none;
}

.site-header--public .site-mega-link:hover,
.site-header--public .site-mega-link[aria-current="page"] {
  color: var(--vl-gunmetal);
  background: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.site-header--public .site-mega-link[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--vl-lime);
}

.site-header--public .site-mega-link__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--vl-teal);
  background: #e3f4ed;
}

.site-header--public .site-mega-link__icon svg {
  width: 22px;
  height: 22px;
}

.site-header--public .site-mega-link__copy,
.site-header--public .site-mega-link__label,
.site-header--public .site-mega-link__description {
  display: block;
  min-width: 0;
}

.site-header--public .site-mega-link__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.site-header--public .site-mega-link__description {
  margin-top: 2px;
  color: var(--vl-gray-600);
  font-size: 12px;
  line-height: 1.45;
}

.site-header--public .site-mega-menu__cta {
  padding: clamp(24px, 5vw, 38px);
  border-radius: var(--r-lg);
  color: var(--vl-gunmetal);
  background: #eaf8f8;
}

.site-header--public .site-mega-menu__cta-title {
  margin: 0 0 var(--space-4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.site-header--public .site-mega-menu__cta p:not(.site-mega-menu__cta-title) {
  margin: 0 0 var(--space-5);
  font-size: 15px;
  line-height: 1.7;
}

.site-header--public .site-mega-menu__cta a,
.site-header--public .site-primary-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  color: var(--vl-white);
  background: var(--vl-olive);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.site-header--public .site-mega-menu__cta a:hover,
.site-header--public .site-primary-nav__cta:hover {
  color: var(--vl-white);
  background: var(--vl-teal);
  text-decoration: none;
}

.site-header--public .site-resource-group {
  min-width: 0;
}

.site-header--public .site-resource-group__label {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(0, 102, 92, 0.14);
  color: var(--vl-teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.site-header--public .site-resource-group li + li {
  margin-top: var(--space-2);
}

.site-header--public .site-resource-group li > a {
  display: block;
  padding: 8px 0;
  color: var(--vl-gunmetal);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.site-header--public .site-resource-group li > a:hover {
  color: var(--vl-teal);
  text-decoration: none;
}

.site-header--public .site-resource-group li > a small {
  display: block;
  margin-top: 3px;
  color: var(--vl-gray-600);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.site-header--public .site-resource-group--academy {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: #eaf8f8;
}

.site-header--public .site-resource-group__academy-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.site-header--public .site-resource-group__academy-heading .site-resource-group__label {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.site-header--public .site-resource-group__academy-heading > a {
  flex: 0 0 auto;
  color: var(--vl-gunmetal);
  font-size: 12px;
  font-weight: 500;
}

.site-header--public .site-academy-link {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.site-header--public .site-academy-link img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.site-header--public .site-academy-link strong,
.site-header--public .site-academy-link small {
  display: block;
}

.site-header--public .site-primary-nav__actions {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--vl-gray-300);
}

.site-header--public .site-primary-nav__login,
.site-header--public .site-primary-nav__cta {
  justify-content: center;
}

.page-fractional-data-team .site-header--public :where(a, summary):focus-visible {
  outline: 3px solid var(--vl-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (min-width: 700px) and (max-width: 1099px) {
  .site-header--public .site-mega-menu__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header--public .site-mega-menu--resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .site-header--public {
    min-height: 92px;
  }

  .site-header--public .site-header__inner {
    min-height: 92px;
    padding: 12px var(--space-5);
  }

  .site-header--public .site-header__logo img {
    height: 48px;
  }

  .site-header--public .site-nav-shell {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    margin-left: clamp(24px, 4vw, 52px);
  }

  .site-header--public .site-nav-toggle {
    display: none;
  }

  .site-header--public .site-nav-shell > .site-primary-nav {
    position: static;
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .site-header--public .site-primary-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-header--public .site-nav-group,
  .site-header--public .site-primary-nav__list > li {
    position: static;
  }

  .site-header--public .site-nav-group > summary,
  .site-header--public .site-primary-nav__direct {
    min-height: 66px;
    padding: 20px 9px;
    font-size: 14px;
    line-height: 26px;
    white-space: nowrap;
  }

  .site-header--public .site-primary-nav__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    border: 0;
  }

  .site-header--public .site-primary-nav__login {
    min-height: 46px;
    padding: 10px 8px;
    color: var(--vl-olive);
    font-size: 14px;
    white-space: nowrap;
  }

  .site-header--public .site-primary-nav__cta {
    min-height: 48px;
    padding-inline: 18px;
    white-space: nowrap;
  }

  .site-header--public .site-mega-menu {
    position: absolute;
    z-index: 72;
    top: calc(100% - 3px);
    left: var(--space-5);
    right: var(--space-5);
    max-height: calc(100vh - 112px);
    margin-top: 0;
    padding: 0;
    overflow-y: auto;
    border-radius: var(--r-lg);
    background: var(--vl-mint-50);
    box-shadow: 0 18px 46px rgba(38, 49, 59, 0.16);
  }

  .site-header--public .site-mega-menu--services,
  .site-header--public .site-mega-menu--audiences {
    grid-template-columns: minmax(0, 2fr) minmax(275px, 0.82fr);
  }

  .site-header--public .site-mega-menu__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px var(--space-3);
    padding: clamp(24px, 3vw, 34px);
  }

  .site-header--public .site-mega-menu__cta {
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
  }

  .site-header--public .site-mega-menu__cta-title {
    font-size: 27px;
  }

  .site-header--public .site-mega-menu--resources {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, 0.95fr);
    gap: clamp(22px, 3vw, 36px);
    padding: clamp(24px, 3vw, 34px);
  }

  .site-header--public .site-resource-group--academy {
    margin: -14px;
  }
}

/* ---------- Hero — Signal Grid (brand Pattern 1) ----------
   Deep Teal surface, white 1px grid @ 0.07 with a slow drift,
   lime glow spotlight top-right. One per page. */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 96px);
  text-align: center;
  background: var(--vl-teal);
  color: var(--vl-white);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -48px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: grid-drift 28s linear infinite;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: clamp(420px, 62vw, 780px);
  height: clamp(420px, 62vw, 780px);
  top: -22%;
  right: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163, 199, 76, 0.20) 0%, rgba(163, 199, 76, 0.06) 45%, transparent 68%);
  pointer-events: none;
}

@keyframes grid-drift {
  to { transform: translate3d(44px, 44px, 0); }
}

.hero > .container { position: relative; z-index: 1; }

.hero .eyebrow {
  margin-bottom: var(--space-5);
  color: var(--vl-lime);
}

.hero__headline {
  font-size: clamp(34px, 6.2vw, 62px);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: var(--space-5);
  max-width: 24ch;
  margin-inline: auto;
  line-height: 1.08;
  color: var(--vl-white);
  text-wrap: balance;
}

/* Support line inside the h1: still display voice, half the size, own line. */
.hero__headline-sub {
  display: block;
  margin-top: var(--space-4);
  font-size: clamp(19px, 0.56em, 29px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

.hero__headline em {
  font-style: normal;
  color: var(--vl-lime);
}

.hero__subheadline {
  font-size: clamp(17px, 2.1vw, 21px);
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto var(--space-7);
  max-width: 58ch;
  line-height: 1.6;
  font-weight: 400;
}

.hero__subheadline strong {
  color: var(--vl-white);
  font-weight: 600;
}

.hero__video {
  margin: 0 auto var(--space-7);
}

.hero .video-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 0 96px rgba(163, 199, 76, 0.12);
}

.hero__video-caption {
  margin-top: var(--space-3);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.hero__cta {
  margin: var(--space-6) 0 0;
}

/* ---------- Hero stat (text-first heroes, e.g. "1 → 5") ---------- */

.hero__stat {
  margin: var(--space-6) auto var(--space-7);
}

.hero__stat-value {
  margin: 0 0 var(--space-4);
  font-size: clamp(72px, 13vw, 148px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--vl-lime);
  text-shadow: 0 0 80px rgba(163, 199, 76, 0.35);
}

.hero__stat-label {
  margin: 0 auto;
  font-size: clamp(17px, 2.1vw, 21px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 44ch;
  line-height: 1.55;
}

/* ---------- Hero image (headshot in the hero media slot) ---------- */

.hero__image {
  margin: 0 auto var(--space-7);
  max-width: 560px;
}

.hero__image img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 0 96px rgba(163, 199, 76, 0.12);
}

.hero__image-caption {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ---------- Hero with above-the-fold form ---------- */

.hero--with-form {
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px);
  text-align: left;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 72px); }
}

.hero--with-form .eyebrow { text-align: left; }
.hero--with-form .hero__headline { margin-inline: 0; max-width: 16ch; }
.hero--with-form .hero__subheadline { margin-inline: 0; max-width: 48ch; }
.hero--with-form .hero__stat {
  margin: var(--space-6) 0 0;
  text-align: left;
}
.hero--with-form .hero__stat-label { margin: 0; max-width: 40ch; }

@media (max-width: 959px) {
  .hero--with-form { text-align: center; }
  .hero--with-form .eyebrow { text-align: center; }
  .hero--with-form .hero__headline,
  .hero--with-form .hero__subheadline { margin-inline: auto; }
  .hero--with-form .hero__stat { text-align: center; }
  .hero--with-form .hero__stat-label { margin-inline: auto; }
}

.hero__form {
  scroll-margin-top: 88px;
}

.hero-form-card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 96px rgba(163, 199, 76, 0.12);
}

/* On small screens the embed needs every pixel: pull the card out to the
   viewport edges (8px gutter) and slim its padding so the GHL iframe gets
   full width. */
@media (max-width: 599px) {
  .hero__form {
    margin-inline: calc(8px - var(--space-5));
  }
  .hero-form-card {
    padding: var(--space-5) var(--space-3);
    border-radius: var(--r-md);
  }
}

.hero-form-card__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vl-gunmetal);
  text-align: center;
}

.hero-form-card .form-frame {
  box-shadow: none;
  border-radius: var(--r-sm);
}

.hero-form-card .cta-note {
  color: var(--vl-gray-500);
}

/* Lime is the primary CTA on dark surfaces (brand rule) */
.hero .btn--primary {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  box-shadow: 0 8px 32px rgba(163, 199, 76, 0.35);
}
.hero .btn--primary:hover {
  background: var(--vl-white);
  color: var(--vl-teal);
  transform: translateY(-2px);
}

/* ---------- Video frame ---------- */

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-gunmetal);
  box-shadow: 0 12px 40px rgba(38, 49, 59, 0.18);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CTA microcopy ---------- */

.cta-note {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--vl-gray-500);
  text-align: center;
}
.hero .cta-note,
.section--statement .cta-note,
.section--final-cta .cta-note {
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Video facade (click-to-play) ---------- */

.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--vl-gunmetal);
  display: block;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--vl-lime);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(163, 199, 76, 0.25);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.video-facade__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--vl-gunmetal);
}
.video-facade:hover .video-facade__btn {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4), 0 0 0 16px rgba(163, 199, 76, 0.3);
}

/* ---------- Logo strip ---------- */

.logo-strip {
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-gray-300);
  padding-block: clamp(28px, 4vw, 44px);
}

.logo-strip__title {
  margin: 0 0 var(--space-5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vl-gray-500);
  text-align: center;
}

.logo-strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 72px);
}

.logo-strip__logo {
  height: clamp(26px, 3.4vw, 38px);
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-strip__logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

.logo-strip__row--names {
  gap: clamp(20px, 4vw, 48px);
  row-gap: var(--space-3);
}

.logo-strip__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vl-gray-500);
  white-space: nowrap;
}

/* ---------- Section: stats ---------- */

.section--stats {
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-gray-300);
}

.stat-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  /* Four stats in a three-up grid orphan the last one. Two-up until there is
     room for a true four-across. */
  .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--vl-mint-50);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
}

.stat-card__value {
  margin: 0 0 var(--space-2);
  font-size: clamp(34px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--vl-teal);
}

.stat-card__label {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--vl-gray-600);
}

/* ---------- Section: steps ---------- */

.section--steps {
  background: var(--vl-cyan-50);
  border-bottom: 1px solid var(--vl-gray-300);
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 720px) {
  .step-list { grid-template-columns: repeat(3, 1fr); }
}

.step-card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.step-card__num {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--vl-white);
  background: var(--vl-olive);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.step-card__title {
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.step-card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

/* ---------- Section: split (We handle / You handle) ---------- */

.section--split {
  background: var(--vl-mint-50);
  border-bottom: 1px solid var(--vl-gray-300);
}

.split-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.split-card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--vl-olive);
}

.split-card--you {
  border-top-color: var(--vl-lime);
}

.split-card__title {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

.split-card--we .split-card__title { color: var(--vl-olive); }
.split-card--you .split-card__title { color: var(--vl-gunmetal); }

.split-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.split-card__list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
}

.split-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--vl-olive);
  box-shadow: 0 0 0 3px rgba(1, 137, 121, 0.15);
}

.split-card--you .split-card__list li::before {
  background: var(--vl-lime);
  box-shadow: 0 0 0 3px rgba(163, 199, 76, 0.2);
}

/* ---------- Section: transform (Before / After) ---------- */

.section--transform {
  background: var(--vl-cool-off);
  border-block: 1px solid var(--vl-gray-300);
}

.split-card--before {
  border-top-color: var(--vl-gray-400);
}
.split-card--before .split-card__title {
  color: var(--vl-gray-600);
}
.split-card--before .split-card__list li {
  color: var(--vl-gray-600);
}
.split-card--before .split-card__list li::before {
  background: var(--vl-gray-400);
  box-shadow: 0 0 0 3px rgba(169, 173, 177, 0.18);
}

.split-card--after {
  background: var(--vl-mint-50);
  border-top-color: var(--vl-lime);
}
.split-card--after .split-card__title {
  color: var(--vl-teal);
}
.split-card--after .split-card__list li::before {
  background: var(--vl-lime);
  box-shadow: 0 0 0 3px rgba(163, 199, 76, 0.2);
}

/* ---------- Section: offer stack (Hormozi component cards) ---------- */

.section--stack {
  background: var(--vl-mint-whisper);
  border-block: 1px solid var(--vl-gray-300);
}

.section__intro {
  margin: calc(-1 * var(--space-5)) auto var(--space-7);
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--vl-gray-600);
  text-align: center;
  max-width: 52ch;
  line-height: 1.6;
}

.stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack-card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.stack-card__num {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--vl-white);
  background: var(--vl-teal);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.stack-card__name {
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.stack-card__what {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.stack-card__value {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-olive);
}

@media (max-width: 520px) {
  .stack-card { flex-direction: column; gap: var(--space-4); }
}

/* ---------- Section: journey (numbered timeline) ---------- */

.section--journey {
  background: var(--vl-white);
}

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.journey::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--vl-teal-200, #DCF1E8);
  background: linear-gradient(var(--vl-olive), var(--vl-lime));
  opacity: 0.35;
}

.journey__step {
  position: relative;
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.journey__num {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--vl-white);
  background: var(--vl-teal);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--vl-white);
}

.journey__body {
  background: var(--vl-cool-off);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  padding: var(--space-5);
  flex: 1;
}

.journey__title {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.journey__title em {
  font-style: normal;
  color: var(--vl-olive);
}

.journey__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.journey__step--highlight .journey__num {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  box-shadow: 0 0 0 4px var(--vl-white), 0 0 24px rgba(163, 199, 76, 0.5);
}

.journey__step--highlight .journey__body {
  background: var(--vl-mint-50);
  border-color: var(--vl-lime);
  border-width: 2px;
}

/* ---------- Section: ongoing options ---------- */

.section--ongoing {
  background: var(--vl-cyan-50);
  border-block: 1px solid var(--vl-gray-300);
}

.ongoing-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 680px) {
  .ongoing-grid { grid-template-columns: 1fr 1fr; }
  /* Three cards in a two-up grid orphan the last one against dead space.
     Stay single-column until there is room for a true three-across. */
  .ongoing-grid--3 { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .ongoing-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1080px;
  }
  /* Centred body copy rags badly in a ~330px column. Two cards get enough
     width to carry it; three do not. */
  .ongoing-grid--3 .ongoing-card { text-align: left; }
}

.ongoing-card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--vl-olive);
  text-align: center;
}
.ongoing-card:last-child { border-top-color: var(--vl-lime); }

.ongoing-card__name {
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.ongoing-card__what {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.ongoing-card__value {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-olive);
}

/* ---------- Section visual (supporting diagram) ---------- */

.section-visual {
  margin: 0 auto var(--space-7);
  max-width: 720px;
}
.section-visual img {
  border-radius: var(--r-md);
  border: 1px solid var(--vl-gray-300);
  box-shadow: var(--shadow-card);
  margin: 0 auto;
}
.section-visual figcaption {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--vl-gray-500);
  text-align: center;
}

/* ---------- Section: showcase (product tour) ---------- */

.section--showcase {
  background: var(--vl-white);
}

.showcase {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-7);
}

.showcase-row {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.browser-frame {
  border-radius: var(--r-md);
  border: 1px solid var(--vl-gray-300);
  background: var(--vl-white);
  box-shadow: 0 16px 44px rgba(38, 49, 59, 0.14);
  overflow: hidden;
}

.browser-frame__bar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 14px;
  background: var(--vl-gray-100);
  border-bottom: 1px solid var(--vl-gray-200);
}

.browser-frame__bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--vl-gray-300);
}

.browser-frame__bar span:first-child {
  background: var(--vl-olive);
  opacity: 0.55;
}

.browser-frame img,
.browser-frame video {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-row__medialink {
  display: block;
}
.showcase-row__medialink .browser-frame {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-row__medialink:hover .browser-frame {
  transform: translateY(-2px);
  box-shadow: 0 20px 56px rgba(38, 49, 59, 0.22);
}

.showcase-row__media figcaption {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--vl-gray-500);
  text-align: center;
}

.showcase-row__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vl-olive);
  margin-bottom: var(--space-2);
}

.showcase-row__title {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.showcase-row__title em {
  font-style: normal;
  color: var(--vl-olive);
}

.showcase-row__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

@media (min-width: 900px) {
  .showcase {
    gap: var(--space-9);
  }
  .showcase-row {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-7);
  }
  .showcase-row:nth-child(even) .showcase-row__media {
    order: 2;
  }
  .showcase-row:nth-child(even) .showcase-row__copy {
    order: 1;
  }
}

/* ---------- Hero chat demo ---------- */

.hero__chat {
  margin: var(--space-6) auto 0;
  max-width: 620px;
}

.chat-demo {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.chat-demo__msg--user {
  justify-self: end;
  max-width: 85%;
}

.chat-demo__msg--assistant {
  justify-self: start;
  max-width: 95%;
}

.chat-demo__bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.55;
}

.chat-demo__msg--user .chat-demo__bubble {
  background: var(--vl-gray-100);
  color: var(--vl-gunmetal);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

.chat-demo__msg--assistant .chat-demo__bubble {
  background: rgba(1, 137, 121, 0.08);
  border: 1px solid rgba(1, 137, 121, 0.18);
  color: var(--vl-gunmetal);
  border-bottom-left-radius: 4px;
}

.chat-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.chat-demo__chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(163, 199, 76, 0.16);
  color: var(--vl-teal);
  border: 1px solid rgba(163, 199, 76, 0.4);
}

.hero__chat-caption {
  margin-top: var(--space-3);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

/* ---------- Dataflow prompt pills ---------- */

.dataflow-prompts {
  margin-top: var(--space-7);
  text-align: center;
}

.dataflow-prompts__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vl-lime);
  margin-bottom: var(--space-4);
}

.dataflow-prompts__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.dataflow-prompt {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.4;
}

.dataflow-prompt::before {
  content: "→ ";
  color: var(--vl-lime);
  font-weight: 700;
}

/* ---------- Page-scoped: system-reporting hero stat as framed card ---------- */

.offer-system-reporting .hero {
  padding: clamp(48px, 7vw, 80px) 0 clamp(48px, 7vw, 80px);
}

.offer-system-reporting .hero__stat {
  display: inline-block;
  padding: var(--space-5) var(--space-7);
  border: 1px solid rgba(163, 199, 76, 0.4);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
}

.offer-system-reporting .hero__stat-value {
  font-size: clamp(40px, 6vw, 64px);
  margin-bottom: var(--space-2);
  text-shadow: 0 0 48px rgba(163, 199, 76, 0.3);
}

.offer-system-reporting .hero__stat-label {
  font-size: 16px;
  max-width: 42ch;
}

/* ---------- Page-scoped: speaking (headshot hero) ---------- */

.offer-speaking .hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 80px);
}

.offer-speaking .hero__image {
  margin-top: var(--space-6);
}

/* ---------- Section: dataflow (animated pipeline band) ---------- */

.section--dataflow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(163, 199, 76, 0.08), transparent),
    linear-gradient(160deg, #22303a 0%, var(--vl-gunmetal) 55%, #1c2a30 100%);
  color: var(--vl-white);
}

.section--dataflow .section__title {
  color: var(--vl-white);
}

.section--dataflow .section__title em {
  font-style: normal;
  color: var(--vl-lime);
}

.section--dataflow .section__intro {
  color: rgba(255, 255, 255, 0.72);
}

.dataflow-figure {
  margin: var(--space-7) auto 0;
  max-width: 960px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dataflow-figure svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
  font-family: var(--font-body);
}

.df-col-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: rgba(255, 255, 255, 0.45);
}

.df-chip {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}

.df-chip-label {
  font-size: 16px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.9);
}

.df-chip-logo {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.df-warehouse {
  fill: rgba(1, 137, 121, 0.16);
  stroke: var(--vl-olive);
  stroke-width: 1.5;
  animation: df-pulse 3.2s ease-in-out infinite;
}

.df-semantic {
  fill: rgba(163, 199, 76, 0.1);
  stroke: rgba(163, 199, 76, 0.55);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.df-node {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
}

.df-node--mcp {
  stroke: var(--vl-lime);
}

.df-node-title {
  font-size: 21px;
  font-weight: 700;
  fill: var(--vl-white);
}

.df-node-title--sm {
  font-size: 19px;
}

.df-node-sub {
  font-size: 13.5px;
  fill: rgba(255, 255, 255, 0.6);
}

.df-semantic-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--vl-lime);
}

.df-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
}

.df-flow {
  fill: none;
  stroke: var(--vl-lime);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1 16;
  animation: df-flow 3s linear infinite;
}

@keyframes df-flow {
  to { stroke-dashoffset: -170; }
}

@keyframes df-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(163, 199, 76, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(163, 199, 76, 0.35)); }
}

@media (prefers-reduced-motion: reduce) {
  .df-flow, .df-warehouse, .own-flow {
    animation: none;
  }
}

.dataflow-steps {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

@media (min-width: 760px) {
  .dataflow-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.dataflow-step__num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vl-lime);
  margin-bottom: var(--space-2);
}

.dataflow-step__title {
  font-size: 19px;
  color: var(--vl-white);
  margin-bottom: var(--space-2);
}

.dataflow-step__body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.dataflow-note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Section: billing ---------- */

.section--billing {
  background: var(--vl-white);
}

.billing-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

@media (min-width: 760px) {
  .billing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.billing-card {
  background: var(--vl-isabeline);
  border: 1px solid var(--vl-gray-200);
  border-radius: var(--r-md);
  padding: var(--space-5);
}

.billing-card__title {
  font-size: 18px;
  margin-bottom: var(--space-2);
}

.billing-card__body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.billing-price {
  margin-top: var(--space-7);
  text-align: center;
  border: 2px solid var(--vl-olive);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
}

.billing-price__badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(163, 199, 76, 0.18);
  color: var(--vl-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.billing-price__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  color: var(--vl-teal);
  line-height: 1.1;
}

.billing-price__period {
  font-size: 22px;
  font-weight: 600;
  color: var(--vl-gray-500);
  margin-left: 4px;
}

.billing-price__note {
  margin-top: var(--space-2);
  font-size: 16px;
  color: var(--vl-gray-600);
}

.billing-price__cta {
  margin-top: var(--space-5);
}

/* ---------- Section: guarantee ---------- */

.section--guarantee {
  background: var(--vl-white);
}

.guarantee-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--vl-mint-50);
  border: 2px solid var(--vl-olive);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}

.guarantee-card__badge {
  display: inline-block;
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 8px 18px;
  margin-bottom: var(--space-5);
}

.guarantee-card__title {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.guarantee-card__title em {
  font-style: normal;
  color: var(--vl-olive);
}

.guarantee-card__body {
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.65;
  color: var(--vl-gray-600);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
}
.guarantee-card__body p { margin: 0 0 var(--space-3); }
.guarantee-card__body p:last-child { margin-bottom: 0; }

.guarantee-card__cta { margin: 0; }

/* ---------- Anchor scrolling ---------- */

.section--final-cta {
  scroll-margin-top: 88px;
}

/* ---------- Section: statement band (brand Pattern 2 — Glow Field) ---------- */

.section--statement {
  position: relative;
  overflow: hidden;
  background: var(--vl-teal);
  color: var(--vl-white);
  text-align: center;
}

.section--statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(163, 199, 76, 0.16), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(163, 199, 76, 0.08), transparent 42%);
  pointer-events: none;
}
.section--statement > * { position: relative; }

.statement__headline {
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--vl-white);
  max-width: 20ch;
  margin: 0 auto var(--space-5);
  text-wrap: balance;
}

.statement__headline em {
  font-style: normal;
  color: var(--vl-lime);
  text-transform: uppercase;
}

.statement__subline {
  font-size: clamp(17px, 2.2vw, 22px);
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
  margin: 0 auto var(--space-6);
  line-height: 1.55;
}

.statement__cta { margin: 0; }

.section--statement .btn--primary {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  box-shadow: 0 8px 32px rgba(163, 199, 76, 0.3);
}
.section--statement .btn--primary:hover {
  background: var(--vl-white);
  color: var(--vl-teal);
  transform: translateY(-2px);
}

/* ---------- Hero: founder variant ---------- */

.hero--founder {
  text-align: left;
  padding: clamp(44px, 6vw, 80px) 0 clamp(44px, 6vw, 72px);
}

.hero-founder {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero--founder .hero__headline,
.hero--founder .hero__subheadline {
  margin-left: 0;
  margin-right: 0;
}

.hero--founder .hero__subheadline { max-width: 56ch; }

.hero-promise {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 0 var(--space-5);
  max-width: 560px;
}

.hero-promise__title {
  font-weight: 700;
  color: var(--vl-white);
  margin: 0 0 12px;
}

.hero-promise__body {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.hero-promise__title + .hero-promise__body { margin-top: -4px; }

.hero-promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hero-promise__list li {
  position: relative;
  padding-left: 34px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}

.hero-promise__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
}

.hero--founder .hero__cta { margin-top: 0; }

.hero-founder__media {
  max-width: 440px;
  justify-self: center;
}

/* Dashboard-context variant: product shot behind, smaller sticker on its corner */
.hero-founder__media--dash {
  position: relative;
  max-width: 560px;
  width: 100%;
  padding-bottom: 34px;
}

.hero-dash {
  margin: 0;
  transform: rotate(1deg);
}

.hero-dash img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

.hero-founder__media--dash .founder__sticker {
  --vl-rot: -7deg;
  position: absolute;
  left: -38px;
  bottom: -14px;
  width: 148px;
  transform: rotate(var(--vl-rot));
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
}

/* Squish-to-drop-a-fact interaction */
.hero-founder__media .founder__sticker { cursor: pointer; }
.hero-founder__media--dash:hover .founder__sticker { animation: none; }

.founder__sticker.is-squished {
  animation: sticker-squish 0.45s cubic-bezier(0.3, 1.6, 0.4, 1) !important;
}

@keyframes sticker-squish {
  0% { transform: scale(1, 1) rotate(var(--vl-rot, -4deg)); }
  35% { transform: scale(1.16, 0.76) rotate(var(--vl-rot, -4deg)); }
  65% { transform: scale(0.92, 1.1) rotate(var(--vl-rot, -4deg)); }
  100% { transform: scale(1, 1) rotate(var(--vl-rot, -4deg)); }
}

.fact-card {
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%) rotate(var(--fr, 2deg));
  background: var(--vl-white);
  color: var(--vl-gunmetal);
  border-radius: 12px;
  border-left: 5px solid var(--vl-lime);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 300px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  animation: fact-drop 0.55s cubic-bezier(0.22, 1.35, 0.36, 1);
  z-index: 3;
}

@keyframes fact-drop {
  0% { opacity: 0; transform: translate(-50%, -150px) rotate(var(--fr, 2deg)) scale(0.8); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(var(--fr, 2deg)) scale(1); }
}

.fact-hint {
  position: absolute;
  left: -40px;
  bottom: -50px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  transform: rotate(-4deg);
  pointer-events: none;
}

.fact-hint__squish { display: none; color: var(--vl-lime); }
.hero-founder__media:hover .fact-hint__default { display: none; }
.hero-founder__media:hover .fact-hint__squish { display: inline; }

.hero-founder__media--dash .founder__nametag {
  right: 6px;
  bottom: -26px;
  width: 116px;
  --vl-rot: 5deg;
  transform: rotate(var(--vl-rot));
}
.hero-founder__media--dash .founder__nametag-hello { font-size: 16px; }

/* Name-tag-as-mascot: hero without the founder sticker. z-index keeps the
   tag clickable above dropped fact cards (z-index 3). */
.hero-founder__media .founder__nametag {
  cursor: pointer;
  z-index: 4;
}
.founder__nametag.is-squished {
  animation: sticker-squish 0.45s cubic-bezier(0.3, 1.6, 0.4, 1) !important;
}
.hero-founder__media--tag-only .founder__nametag {
  width: 148px;
  bottom: -34px;
  right: 12px;
}
.hero-founder__media--tag-only .fact-hint {
  left: auto;
  right: -20px;
  bottom: -76px;
  transform: rotate(4deg);
}
.hero-founder__media--dash .founder__nametag-name { font-size: 24px; padding: 8px 0 10px; }

@media (max-width: 800px) {
  .hero--founder { text-align: center; padding: 28px 0 40px; }
  .hero-founder { grid-template-columns: 1fr; gap: 14px; }
  .hero-founder__media {
    order: -1;
    max-width: none;
    width: auto;
  }
  .hero-founder__media .founder__sticker {
    display: block;
    width: auto;
    max-height: 168px;
    margin-inline: auto;
  }
  .hero-founder__media .founder__nametag {
    width: 72px;
    right: -44px;
    bottom: -2px;
    border-radius: 7px;
  }
  .hero-founder__media .founder__nametag-hello { font-size: 10px; padding-top: 3px; letter-spacing: 0.1em; }
  .hero-founder__media .founder__nametag-sub { font-size: 7px; padding-bottom: 3px; }
  .hero-founder__media .founder__nametag-name { font-size: 15px; padding: 5px 0 6px; }
  .hero-founder__media--dash {
    max-width: 330px;
    width: 100%;
    padding-bottom: 16px;
  }
  .hero-founder__media--dash .founder__sticker {
    position: absolute;
    max-height: none;
    width: 88px;
    left: -8px;
    bottom: -10px;
    margin: 0;
  }
  .hero-founder__media--dash .founder__nametag {
    width: 62px;
    right: 8px;
    bottom: -10px;
  }
  .hero-founder__media--dash .founder__nametag-name { font-size: 13px; padding: 4px 0 5px; }
  /* Fact cards land on the dashboard itself on mobile, not over the copy below. */
  .fact-card { bottom: 22px; max-width: 240px; font-size: 13px; }
  /* No hover on touch — keep the invitation visible above the dashboard. */
  .fact-hint {
    left: auto;
    right: 0;
    bottom: auto;
    top: -10px;
    font-size: 11px;
    transform: rotate(2deg);
  }
  /* The promise card carries the message on mobile — keep the CTA above the fold. */
  .hero--founder .hero__subheadline { display: none; }
  .hero--founder .hero__headline { font-size: clamp(30px, 8.6vw, 36px); margin-bottom: var(--space-4); }
  .hero-promise { text-align: left; margin-inline: auto; padding: 16px 18px; margin-bottom: var(--space-4); }
  .hero-promise__list li { font-size: 15px; }
}

/* ---------- Section: founder ---------- */

.section--founder {
  position: relative;
  overflow: hidden;
  background: var(--vl-teal);
  color: var(--vl-white);
}

.section--founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(163, 199, 76, 0.16), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(163, 199, 76, 0.08), transparent 42%);
  pointer-events: none;
}
.section--founder > * { position: relative; }

.founder-marquee {
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: clamp(28px, 4vw, 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.founder-marquee__track {
  display: inline-block;
  animation: founder-marquee 40s linear infinite;
}

.founder-marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
}

@keyframes founder-marquee {
  to { transform: translateX(-50%); }
}

.founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.founder__media {
  position: relative;
  justify-self: center;
  max-width: 420px;
}

.founder__sticker {
  --vl-rot: -4deg;
  width: 100%;
  height: auto;
  transform: rotate(var(--vl-rot));
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}

.founder__media:hover .founder__sticker {
  animation: founder-wiggle 0.5s ease-in-out;
  transform: rotate(-2deg) scale(1.02);
}

@keyframes founder-wiggle {
  0%, 100% { transform: rotate(-2deg) scale(1.02); }
  30% { transform: rotate(-7deg) scale(1.02); }
  65% { transform: rotate(1deg) scale(1.02); }
}

.founder__nametag {
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: 148px;
  background: var(--vl-white);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transform: rotate(6deg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.founder__nametag-hello {
  display: block;
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.14em;
  padding: 6px 0 2px;
}

.founder__nametag-sub {
  display: block;
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-bottom: 6px;
}

.founder__nametag-name {
  display: block;
  color: var(--vl-gunmetal);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  padding: 10px 0 12px;
}

.eyebrow--founder { color: var(--vl-lime); }

.founder__title {
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--vl-white);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.founder__title em {
  font-style: normal;
  color: var(--vl-lime);
}

.founder__body {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 0 0 var(--space-5);
}

.founder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-6);
}

.founder__chip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.founder__chip:nth-child(odd) { transform: rotate(-1.5deg); }
.founder__chip:nth-child(even) { transform: rotate(1.5deg); }

.founder__cta { margin: 0; }

.section--founder .btn--primary {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  box-shadow: 0 8px 32px rgba(163, 199, 76, 0.3);
}
.section--founder .btn--primary:hover {
  background: var(--vl-white);
  color: var(--vl-teal);
  transform: translateY(-2px);
}

.section--founder .cta-note { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 800px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { max-width: 300px; }
  .founder__copy { text-align: center; }
  .founder__chips { justify-content: center; }
  .founder__nametag { right: -6px; width: 124px; }
  .founder__nametag-name { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .founder-marquee__track { animation: none; }
  .founder__media:hover .founder__sticker { animation: none; }
  .founder__sticker.is-squished,
  .founder__nametag.is-squished { animation: none !important; }
  .fact-card { animation: none; }
}

/* ---------- Proof pills (founder band + final CTA) ---------- */

.proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-6);
}

.section--final-cta .proof-pills {
  justify-content: center;
  margin-bottom: var(--space-5);
}

.proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.proof-pill:nth-child(odd) { transform: rotate(-1.2deg); }
.proof-pill:nth-child(even) { transform: rotate(1.2deg); }

.proof-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(0deg) translateY(-1px);
}

.proof-pill__avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.section--reviews { scroll-margin-top: 88px; }

/* ---------- Section: reviews ---------- */

.section--reviews { background: var(--vl-mint-50, #F6FFFB); }

.reviews__video {
  max-width: 860px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.reviews__video .video-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(38, 49, 59, 0.08);
}

.reviews-grid {
  display: grid;
  /* min(300px, 100%) rather than a bare 300px: at a 320px viewport the container
     leaves 272px, and a hard 300px floor pushed the document 4px wide. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  max-width: 1080px;
  margin: 0 auto;
}

.review-card {
  margin: 0;
  background: var(--vl-white);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(38, 49, 59, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-card__quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gunmetal);
  flex: 1;
}

.review-card__quote::before { content: "“"; color: var(--vl-olive); font-weight: 700; }
.review-card__quote::after { content: "”"; color: var(--vl-olive); font-weight: 700; }

.review-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--vl-teal-100, #DCF1E8);
}

.review-card__who strong {
  display: block;
  font-size: 15px;
  color: var(--vl-gunmetal);
}

.review-card__role {
  display: block;
  font-size: 13px;
  color: var(--vl-gray-500);
}

/* ---------- Section: metrics ---------- */

.section--metrics {
  background: var(--vl-cyan-50);
  border-bottom: 1px solid var(--vl-gray-300);
}

.metric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .metric-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.metric-list__item {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--vl-gunmetal);
  text-align: center;
  letter-spacing: -0.01em;
  padding: var(--space-4);
  border-top: 3px solid var(--vl-lime);
}
@media (min-width: 720px) {
  .metric-list__item { text-align: left; border-top: none; border-left: 3px solid var(--vl-lime); padding: var(--space-2) var(--space-4); }
}

/* ---------- Section: included ---------- */

.section--included {
  background: var(--vl-mint-whisper);
}

.included-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 580px;
}

.included-list__item {
  position: relative;
  font-size: clamp(17px, 1.8vw, 19px);
  font-weight: 500;
  color: var(--vl-gunmetal);
  padding: var(--space-4) 0 var(--space-4) 36px;
  border-bottom: 1px solid var(--vl-gray-300);
}
.included-list__item:last-child { border-bottom: none; }

.included-list__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(var(--space-4) + 8px);
  width: 16px;
  height: 16px;
  background: var(--vl-lime);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(163, 199, 76, 0.15);
}

/* ---------- Section: FAQ ---------- */

.section--faq {
  background: var(--vl-cool-off);
  border-block: 1px solid var(--vl-gray-300);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  background: var(--vl-white);
  border-radius: var(--r-md);
  border: 1px solid var(--vl-gray-300);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item[open] {
  border-color: var(--vl-olive);
  box-shadow: var(--shadow-card);
}

.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  color: var(--vl-gunmetal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--vl-olive);
  transition: transform 0.2s ease, color 0.2s ease;
  flex: 0 0 auto;
}
.faq__item[open] .faq__q::after {
  content: "−";
}

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 16px;
  line-height: 1.7;
  color: var(--vl-gray-600);
}
.faq__a p { margin: 0 0 var(--space-3); }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- Section: final CTA ---------- */

.section--final-cta {
  background: var(--vl-teal);
  color: var(--vl-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section--final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(163, 199, 76, 0.14), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.18), transparent 55%);
  pointer-events: none;
}
.section--final-cta > * { position: relative; }
.section--final-cta .section__title { color: var(--vl-white); }
.section--final-cta .btn--primary {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
}
.section--final-cta .btn--primary:hover {
  background: var(--vl-white);
  color: var(--vl-teal);
}

.section__cta { margin: 0; }

/* ---------- Form embed ---------- */

.form-frame {
  background: var(--vl-white);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: var(--form-max);
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}
.form-frame iframe {
  width: 100%;
  height: var(--form-height, 620px);
  border: 0;
  display: block;
}

/* ---------- Longform body ---------- */

.section--longform {
  background: var(--vl-white);
}
.section--longform .container--narrow > * { max-width: 720px; margin-inline: auto; }
.section--longform p,
.section--longform li {
  font-size: 17px;
  line-height: 1.75;
}
.section--longform h2 {
  font-size: clamp(26px, 3.5vw, 34px);
  margin-top: var(--space-7);
}
.section--longform h3 {
  font-size: clamp(22px, 2.8vw, 28px);
}

/* ---------- Thank-you page ---------- */

.thank-you {
  padding: clamp(72px, 12vw, 144px) 0;
  text-align: center;
  background: var(--vl-white);
}
.thank-you__headline {
  font-size: clamp(32px, 5.5vw, 50px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.thank-you__body {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.7;
  color: var(--vl-gray-600);
  max-width: 58ch;
  margin: 0 auto var(--space-7);
  text-align: left;
}
.thank-you__body p { margin: 0 0 var(--space-4); }
.thank-you__video {
  max-width: 720px;
  margin: 0 auto var(--space-7);
}
.thank-you__cta { margin: 0; }

/* ---------- 404 ---------- */

.not-found {
  padding: clamp(88px, 14vw, 168px) 0;
  text-align: center;
  background: var(--vl-white);
}

/* ---------- Footer (dark gunmetal, multi-column, matches visionlabs.com) ---------- */

.site-footer {
  background: var(--vl-gunmetal);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 40px);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .site-footer__inner { padding-inline: var(--space-6); }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__brand img { height: 28px; width: auto; }
.site-footer__tagline {
  font-family: var(--font-display);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--vl-lime);
  letter-spacing: 0.01em;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (min-width: 600px) {
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 900px) {
  .site-footer__columns { grid-template-columns: repeat(5, 1fr); }
}

.site-footer__col h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vl-white);
  margin: 0 0 var(--space-4);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
.site-footer__col a:hover {
  color: var(--vl-lime);
  text-decoration: none;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__bottom-links {
  display: flex;
  gap: var(--space-5);
}
.site-footer__bottom-links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.site-footer__bottom-links a:hover { color: var(--vl-white); }

.site-footer__copy { margin: 0; }

/* ---------- Minimal footer (landing pages) ---------- */

.site-footer--minimal {
  padding: var(--space-5) 0;
}

.site-footer__bottom--minimal {
  border-top: none;
  padding-top: 0;
}

/* ---------- Trust page (/:slug/trust) ---------- */

.hero--trust {
  padding-bottom: clamp(48px, 6vw, 72px);
}

.trust-back {
  margin: 0;
}
.trust-back a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.trust-back a:hover {
  color: var(--vl-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trust-glance {
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-gray-300);
  padding-block: clamp(28px, 4vw, 44px);
}

.trust-glance__title {
  margin: 0 0 var(--space-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vl-gray-500);
  text-align: center;
}

.trust-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}

.trust-chip {
  padding: 6px 14px;
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-pill);
  background: var(--vl-gray-100);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vl-gunmetal);
  white-space: nowrap;
}

.trust-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  text-align: left;
}

@media (min-width: 760px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.trust-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.trust-card__icon {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: rgba(163, 199, 76, 0.16);
  border: 1px solid rgba(1, 137, 121, 0.25);
  color: var(--vl-teal);
}

.trust-card__title {
  font-size: 19px;
  margin: 0 0 var(--space-2);
}

.trust-card__body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}

.trust-card--link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.trust-card--link:hover {
  text-decoration: none;
  border-color: var(--vl-olive);
  box-shadow: 0 8px 24px rgba(38, 49, 59, 0.1);
  transform: translateY(-2px);
}

.trust-card__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-olive);
}
.trust-card--link:hover .trust-card__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Individual feature pages (/trust/:feature) */

.hero--trust-feature {
  padding-top: clamp(48px, 7vw, 80px);
}

.hero--trust-feature .trust-back {
  margin-bottom: var(--space-6);
}

.trust-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: rgba(163, 199, 76, 0.18);
  border: 1px solid rgba(163, 199, 76, 0.4);
  color: var(--vl-lime);
}

.hero__headline--trust-feature {
  font-size: clamp(30px, 4.6vw, 48px);
}

.section--trust-why {
  background: var(--vl-white);
  text-align: center;
}

.trust-why {
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
  color: var(--vl-gunmetal);
}

.trust-pagenav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.trust-pagenav__link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vl-olive-link);
}
.trust-pagenav__link--next {
  text-align: right;
}

.section--trust-contact {
  background: var(--vl-white);
  text-align: center;
}

.trust-contact {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 48px);
  background: var(--vl-mint-whisper);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.trust-contact__title {
  font-size: clamp(24px, 3vw, 30px);
  margin: 0 0 var(--space-3);
}

.trust-contact__body {
  margin: 0 auto var(--space-6);
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.trust-contact__cta {
  margin: 0;
}

.trust-footnote {
  margin: var(--space-6) auto 0;
  max-width: 60ch;
  font-size: 13px;
  color: var(--vl-gray-500);
  text-align: center;
}

/* Inline "Security & Trust" links on offer pages */

.trust-link {
  text-align: center;
  font-size: 14px;
}
.trust-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dataflow-trust {
  margin-top: var(--space-4);
}
.dataflow-trust a {
  color: rgba(255, 255, 255, 0.65);
}
.dataflow-trust a:hover {
  color: var(--vl-lime);
}

.final-trust {
  margin-top: var(--space-5);
}
.final-trust a {
  color: rgba(255, 255, 255, 0.6);
}
.final-trust a:hover {
  color: var(--vl-white);
}

/* Generic glyph on dataflow input chips without a logo file */

.df-chip-icon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Data OS hub: subnav + /why + /boss ---------- */

/* Pins to the very top, not below --header-h. Every page carrying this subnav
   now wears the public mega-menu header, which is position: relative and
   scrolls away -- offsetting by a header height that is no longer on screen
   would strand the subnav with a gap above it. */
.dos-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #202b34;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dos-nav__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: calc(var(--dos-nav-h) - 1px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dos-nav__inner::-webkit-scrollbar { display: none; }
.dos-nav__brand {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vl-white);
  text-decoration: none;
  white-space: nowrap;
}
.dos-nav__brand:hover { color: var(--vl-lime); text-decoration: none; }
.dos-nav__links {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}
.dos-nav__link {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 2px 10px;
  border-bottom: 2px solid transparent;
}
.dos-nav__link:hover { color: var(--vl-white); text-decoration: none; }
.dos-nav__link--active {
  color: var(--vl-white);
  border-bottom-color: var(--vl-lime);
}

/* Cross-link cards + CTA shared by the hub subpages */

.section--dos-more {
  background: var(--vl-cool-off);
}

/* Copy-paste email card on /data-os/boss */

.boss-email {
  max-width: 680px;
  margin: 0 auto;
  background: var(--vl-gray-100);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  text-align: left;
}
.boss-email__subject {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--vl-gray-300);
}
.boss-email__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vl-gunmetal);
  white-space: pre-wrap;
}
.boss-email__actions {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.boss-email__copied {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vl-olive);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.boss-email__copied.is-on { opacity: 1; }

/* ---------- Ownership calculator (/data-os/own) ---------- */

.hero--own {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.section--own {
  background:
    radial-gradient(ellipse 60% 50% at 45% 35%, rgba(163, 199, 76, 0.08), transparent),
    linear-gradient(160deg, #22303a 0%, var(--vl-gunmetal) 55%, #1c2a30 100%);
  color: var(--vl-white);
  padding-block: clamp(40px, 6vw, 72px);
}

/* Full-bleed wrapper: the board gets the whole viewport, not the 1120px container. */
.own-wrap {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 48px);
}

.own-hint {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.55);
}
.own-hint__tap { display: none; }
@media (max-width: 639px) {
  .own-hint__drag { display: none; }
  .own-hint__tap { display: inline; }
}

.own-board-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.own-board {
  --own-lane-h: clamp(140px, 12.5vw, 172px);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(36px, 4vw, 72px);
  min-width: 1060px;
}

.own-wires {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.own-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}
.own-path--soft {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-dasharray: 4 5;
}
.own-flow {
  fill: none;
  stroke: var(--vl-lime);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1 16;
  animation: df-flow 3s linear infinite;
}

/* Ownership lanes: label column + the five negotiable stages, two lane rows. */
.own-lanes {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 104px repeat(5, minmax(150px, 1fr));
  grid-template-rows: var(--own-lane-h) var(--own-lane-h);
}
.own-lanes::before,
.own-lanes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-radius: var(--r-md);
  pointer-events: none;
}
.own-lanes::before {
  top: 0;
  height: calc(var(--own-lane-h) - 4px);
  background: rgba(163, 199, 76, 0.05);
}
.own-lanes::after {
  top: calc(var(--own-lane-h) + 4px);
  height: calc(var(--own-lane-h) - 4px);
  background: rgba(255, 255, 255, 0.03);
}

.own-lane-label {
  grid-column: 1;
  z-index: 1;
  align-self: center;
  padding-left: 14px;
  padding-right: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.own-lane-label--you { grid-row: 1; color: var(--vl-lime); }
.own-lane-label--vl { grid-row: 2; color: rgba(255, 255, 255, 0.65); }

.own-node {
  position: relative;
  z-index: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: min(calc(100% - 16px), 208px);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  text-align: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.22s ease, border-color 0.18s ease, background 0.18s ease;
}
.own-node:not(.own-node--fixed) { touch-action: none; }
.own-node--you {
  grid-row: 1;
  border-top: 3px solid var(--vl-lime);
}
.own-node--vl {
  grid-row: 2;
  border-bottom: 3px solid var(--vl-olive);
}

.own-node:not(.own-node--fixed):hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
}
.own-node--you:not(.own-node--fixed):hover { border-top-color: var(--vl-lime); }
.own-node--vl:not(.own-node--fixed):hover { border-bottom-color: var(--vl-olive); }
.own-node:focus-visible {
  outline: 2px solid var(--vl-lime);
  outline-offset: 3px;
}
.own-node.is-dragging {
  transition: none;
  cursor: grabbing;
  z-index: 3;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.own-node--fixed {
  cursor: default;
  opacity: 0.78;
}

.own-node__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--vl-white);
  line-height: 1.25;
}
.own-node__owner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}
.own-node--you .own-node__owner {
  color: var(--vl-lime);
  border-color: rgba(163, 199, 76, 0.5);
}
.own-node--vl .own-node__owner,
.own-node--delivery .own-node__owner {
  color: rgba(255, 255, 255, 0.85);
}
.own-node__lock { opacity: 0.7; }

/* Delivery column: always Vision Labs, outside the ownership lanes. */
.own-delivery {
  display: grid;
  grid-template-columns: minmax(170px, 208px) auto;
  grid-template-rows: auto repeat(3, 1fr);
  column-gap: clamp(24px, 2.5vw, 44px);
  row-gap: 12px;
  align-content: center;
}
.own-delivery__label {
  grid-column: 1 / -1;
  align-self: end;
  padding-bottom: 2px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.own-node--delivery {
  grid-column: 1;
  grid-row: auto;
  width: 100%;
  min-height: 66px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}
.own-node--mcp {
  border: 1px dashed rgba(163, 199, 76, 0.55);
}

.own-claude {
  grid-column: 2;
  grid-row: 4;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.own-claude__chip {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  white-space: nowrap;
}

.own-caption {
  margin: var(--space-3) 0 var(--space-5);
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  min-height: 1.55em;
}

/* MCP showcase: copy beside a chat-demo card (reuses .chat-demo styles). */

.own-mcp-demo {
  max-width: 1120px;
  margin: clamp(40px, 5vw, 64px) auto;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .own-mcp-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: clamp(40px, 5vw, 80px);
  }
}
.own-mcp-demo__title {
  color: var(--vl-white);
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 var(--space-4);
}
.own-mcp-demo__title em {
  font-style: normal;
  color: var(--vl-lime);
}
.own-mcp-demo__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* Simple centered CTA under the MCP demo. */

.own-cta {
  margin: clamp(32px, 4vw, 56px) 0 0;
  text-align: center;
}

/* Visually hidden live region announcing flips to screen readers. */
.own-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 639px) {
  .own-board {
    --own-lane-h: 122px;
    gap: 32px;
    min-width: 900px;
  }
  .own-lanes {
    grid-template-columns: 72px repeat(5, minmax(116px, 1fr));
  }
  .own-node { min-height: 70px; }
  .own-node__label { font-size: 13.5px; }
  .own-delivery {
    grid-template-columns: minmax(140px, 170px) auto;
    column-gap: 20px;
  }
  .own-node--delivery { min-height: 58px; }
}

/* Toggle-glyph link to /data-os/own under the dataflow diagram */

.dataflow-own {
  margin-top: var(--space-5);
}
.dataflow-own a {
  color: rgba(255, 255, 255, 0.65);
}
.dataflow-own a:hover {
  color: var(--vl-lime);
}

.billing-card__link {
  margin: var(--space-3) 0 0;
  font-size: 14px;
}
.billing-card__link a {
  font-weight: 600;
}

/* ---------- PostHog packages (/posthog/packages) ---------- */

/* Trimmed like .hero--trust: the chips band sits directly underneath. */
.hero--packages {
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* Outline pill for light backgrounds. btn--ghost-light is the dark-band twin. */
.btn--outline {
  background: transparent;
  color: var(--vl-olive);
  border: 1px solid var(--vl-gray-400);
}
.btn--outline:hover {
  border-color: var(--vl-olive);
  background: var(--vl-mint-50);
  transform: translateY(-1px);
}

.section--packages {
  background: var(--vl-cool-off);
  border-bottom: 1px solid var(--vl-gray-300);
  scroll-margin-top: 88px;
}

.pkg-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: var(--space-6);
}

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-top: 3px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
}

/* Lime as an accent stroke and a pill only. Never a flat fill this size. */
.pkg-card--featured {
  border-color: var(--vl-olive);
  border-top-color: var(--vl-lime);
}

/* Always rendered, empty on non-featured cards, so every card has the same
   six children and the subgrid rows line up. */
.pkg-card__badge-slot {
  margin: 0 0 var(--space-3);
}
.pkg-card__badge-slot:empty {
  display: none;
}

.pkg-card__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(163, 199, 76, 0.18);
  color: var(--vl-teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.pkg-card__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vl-gunmetal);
}

.pkg-card__price {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.pkg-card__price-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--vl-teal);
}

.pkg-card__price-period {
  font-size: 15px;
  font-weight: 600;
  color: var(--vl-gray-500);
}

.pkg-card__for {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--vl-gray-300);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.pkg-card__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}

.pkg-card__list-item {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vl-gunmetal);
}

.pkg-card__list-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vl-lime);
  box-shadow: 0 0 0 3px rgba(163, 199, 76, 0.15);
}

.pkg-card__cta {
  margin: 0;
}
.pkg-card__cta .btn {
  width: 100%;
}

/* Subgrid keeps badge / name / price / blurb / list / CTA on shared baselines
   across all three cards, even though the copy lengths differ. Declared after
   the base card rules so display:grid wins over display:flex. */
@media (min-width: 900px) {
  .pkg-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    /* row-gap would land between the subgrid rows inside each card and
       double up with the elements' own margins. */
    row-gap: 0;
  }
  .pkg-card {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* The empty slot has to hold its row open for the featured card's pill. */
  .pkg-card__badge-slot:empty {
    display: block;
  }
}

.pkg-grid__note {
  margin: var(--space-5) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 15px;
  color: var(--vl-gray-600);
}

.section--pkg-included {
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-gray-300);
}

.section--pkg-compare {
  background: var(--vl-mint-50);
  border-bottom: 1px solid var(--vl-gray-300);
}

/* Wide table scrolls inside its own box so the page body never scrolls. */
.pkg-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-6);
  border-radius: var(--r-md);
  border: 1px solid var(--vl-gray-300);
  background: var(--vl-white);
}

.pkg-compare__table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 15px;
}

.pkg-compare__table th,
.pkg-compare__table td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--vl-gray-200);
}
.pkg-compare__table tbody tr:last-child th,
.pkg-compare__table tbody tr:last-child td {
  border-bottom: none;
}

.pkg-compare__table thead th {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--vl-gunmetal);
  border-bottom: 2px solid var(--vl-gray-300);
  white-space: nowrap;
}

.pkg-compare__price {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-gray-500);
}

/* First column stays put while the tier columns scroll under it. */
.pkg-compare__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--vl-white);
  font-weight: 600;
  color: var(--vl-gunmetal);
  border-right: 1px solid var(--vl-gray-300);
  min-width: 200px;
}

.pkg-compare__table td {
  color: var(--vl-gray-600);
}

.pkg-compare__col--featured {
  background: rgba(163, 199, 76, 0.07);
}

.pkg-compare__hint {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--vl-gray-500);
}
@media (min-width: 760px) {
  .pkg-compare__hint { display: none; }
}

.section--pkg-ongoing {
  background:
    radial-gradient(ellipse 60% 50% at 45% 35%, rgba(163, 199, 76, 0.08), transparent),
    linear-gradient(160deg, #22303a 0%, var(--vl-gunmetal) 55%, #1c2a30 100%);
  color: var(--vl-white);
  text-align: center;
}

/* Colour is explicit: the global h1-h4 rule sets gunmetal and would win
   over the white inherited from .section--pkg-ongoing. */
.pkg-ongoing__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--vl-white);
}
.pkg-ongoing__title em {
  font-style: normal;
  color: var(--vl-lime);
}

.pkg-ongoing__body {
  margin: 0 auto var(--space-4);
  max-width: 620px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.pkg-ongoing__note {
  margin: var(--space-5) 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.pkg-ongoing__cta {
  margin: var(--space-5) 0 0;
}
.pkg-ongoing__cta .btn--primary {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
}
.pkg-ongoing__cta .btn--primary:hover {
  background: #b4d661;
}

/* ---------- 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;
  }
}

/* ---------- Dashboard Library (/data-os/library) ---------- */

/* Body prose used across both library pages. Sits in .container--narrow, so the
   measure is already capped; this only sets rhythm and color. */
.library-lede {
  margin: 0 auto var(--space-4);
  max-width: 66ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.7;
  color: var(--vl-gray-600);
}
.library-lede:last-child { margin-bottom: 0; }
.library-lede strong { color: var(--vl-gunmetal); }
.library-lede a {
  color: var(--vl-olive-link);
  font-weight: 600;
  text-decoration: none;
}
.library-lede a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Chips sitting on a dark hero need the inverse of the light-bg .trust-chip. */
.hero .trust-chips--hero {
  margin-top: var(--space-6);
}
.hero .trust-chips--hero .trust-chip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Library: the archive grid ---------- */

/* The grid sits directly under the hero on the archive, and the point of that
   order is that you can see a card without hunting for it. Full section padding
   plus the grid's own top margin pushed the first row clean past a 900px fold,
   so both are tightened here only. */
.section--library-grid {
  background: var(--vl-white);
  padding-top: clamp(24px, 3vw, 40px);
}
.section--library-grid .library-grid { margin-top: 0; }

.library-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  grid-template-columns: 1fr;
}
/* Tracks are capped rather than 1fr so a card stays card-sized no matter how
   many entries exist. With one entry that centers a single card instead of
   stretching one poster across the full 1120px container. */
@media (min-width: 760px) {
  .library-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    justify-content: center;
  }
}

.library-card {
  display: flex;
  flex-direction: column;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.library-card:hover {
  border-color: var(--vl-olive);
  box-shadow: 0 12px 32px rgba(38, 49, 59, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.library-card:focus-visible {
  outline: 2px solid var(--vl-olive);
  outline-offset: 2px;
}

/* The poster is a wide dashboard screenshot. Crop to a banner so the card stays
   a card, and anchor to the top so the KPI row survives the crop. */
.library-card__shot {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vl-gray-200);
  border-bottom: 1px solid var(--vl-gray-300);
}
.library-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.library-card:hover .library-card__shot img { transform: scale(1.02); }
.library-card__shot img { transition: transform 0.25s ease; }

.library-card__body {
  display: block;
  padding: var(--space-5);
}
.library-card__tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(1, 137, 121, 0.1);
  color: var(--vl-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.library-card__title {
  margin: 0 0 var(--space-3);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vl-gunmetal);
}
.library-card__for {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vl-gray-600);
}
.library-card__for strong { color: var(--vl-gunmetal); }
.library-card__q {
  display: block;
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--vl-lime);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vl-gunmetal);
}
.library-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.library-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--vl-gray-200);
  color: var(--vl-gray-600);
  border: 1px solid var(--vl-gray-300);
}
.library-badge--mcp {
  background: rgba(163, 199, 76, 0.16);
  color: var(--vl-teal);
  border-color: rgba(163, 199, 76, 0.4);
}

.section--library-common { background: var(--vl-cyan-50); }

/* ---------- Library detail: the question callout ---------- */

.section--library-question {
  background: var(--vl-mint-50);
  border-block: 1px solid var(--vl-gray-300);
  text-align: center;
  padding-block: clamp(40px, 6vw, 64px);
}
.library-question {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--vl-teal);
  text-wrap: balance;
}

/* ---------- Library detail: the embed ---------- */

.section--library-embed {
  background: var(--vl-white);
  padding-block: clamp(40px, 6vw, 72px);
}

/* Two states. Before load, the frame is a 16:10 poster so nothing shifts as the
   page settles. After a click, it becomes the tall report. That shift is
   user-initiated, so it costs nothing on CLS. The embed has no auto-resize, so
   --embed-h comes from the dashboard's own embedHeight. */
.embed-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-gray-200);
  border: 1px solid var(--vl-gray-300);
  box-shadow: 0 12px 40px rgba(38, 49, 59, 0.14);
}
.embed-frame:not(.is-live) { aspect-ratio: 16 / 10; }
.embed-frame.is-live { height: 80vh; }
@media (min-width: 768px) {
  .embed-frame.is-live { height: var(--embed-h, 3000px); }
}
.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.embed-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.embed-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.3s ease, filter 0.2s ease;
}
.embed-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(38, 49, 59, 0) 45%, rgba(38, 49, 59, 0.55));
  transition: opacity 0.2s ease;
}
.embed-facade:hover img { transform: scale(1.01); }
.embed-facade:hover::after { opacity: 0.85; }
.embed-facade:focus-visible {
  outline: 3px solid var(--vl-olive);
  outline-offset: -3px;
}
.embed-facade__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vw, 36px);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.embed-facade:hover .embed-facade__cue { transform: translateX(-50%) translateY(-2px); }

.embed-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
}
.embed-note__full {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vl-olive-link);
  text-decoration: none;
  white-space: nowrap;
}
.embed-note__full:hover { text-decoration: underline; text-underline-offset: 3px; }
.embed-note__illustrative {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vl-gray-600);
  max-width: 70ch;
}

/* ---------- Library detail: authored analysis ---------- */

.section--library-reads { background: var(--vl-white); }

.library-read {
  max-width: 66ch;
  margin: 0 auto var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--vl-lime);
}
.library-read:last-child { margin-bottom: 0; }
.library-read__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--vl-gunmetal);
}
.library-read__body {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 17.5px);
  line-height: 1.7;
  color: var(--vl-gray-600);
}

/* .section__title centers itself, so the section must not centre the list too:
   these questions wrap, and centred wrapped lines read badly. */
.section--library-answers { background: var(--vl-mint-whisper); }

/* ---------- Library detail: metric definitions ---------- */

.section--library-defs { background: var(--vl-white); }

.library-defs {
  margin: 0 0 var(--space-6);
  max-width: 66ch;
  margin-inline: auto;
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-gray-100);
}
.library-defs__row {
  display: grid;
  gap: 2px var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--vl-gray-300);
}
.library-defs__row:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .library-defs__row { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; }
}
.library-defs__term {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--vl-teal);
}
.library-defs__def {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}
.library-defs__note {
  max-width: 66ch;
  margin: 0 auto var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--vl-cyan-50);
  font-size: 15px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}
.library-defs__note strong { color: var(--vl-gunmetal); }

/* ---------- Library detail: the MCP band (dark, one per page) ---------- */

/* Deep Teal + Glow Field. .own-mcp-demo__title/__body and .chat-demo are already
   authored for a dark surface, so this section reuses them as-is. */
.section--library-mcp {
  position: relative;
  overflow: hidden;
  background: var(--vl-teal);
  color: var(--vl-white);
}
.section--library-mcp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(163, 199, 76, 0.16), transparent 46%),
    radial-gradient(circle at 6% 94%, rgba(163, 199, 76, 0.1), transparent 42%);
  pointer-events: none;
}
.section--library-mcp > * { position: relative; }
.section--library-mcp .eyebrow { color: var(--vl-lime); text-align: left; }
.section--library-mcp .own-mcp-demo { margin-top: 0; }
.section--library-mcp .own-mcp-demo__body + .own-mcp-demo__body { margin-top: var(--space-4); }

.library-prompts {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.library-prompt {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.library-mcp-foot { margin-top: clamp(32px, 4vw, 48px); }
.library-mcp-foot .library-lede { color: rgba(255, 255, 255, 0.78); }
.library-mcp-foot .library-lede a { color: var(--vl-lime); }

.section--library-sources { background: var(--vl-cool-off); text-align: center; }
.section--library-sources .trust-chips { margin-block: var(--space-5) var(--space-6); }

/* ---------- Library: FAQ ---------- */

.section--library-faq { background: var(--vl-white); }

.library-faq {
  max-width: 66ch;
  margin: 0 auto;
  border-top: 1px solid var(--vl-gray-300);
}
.library-faq__item { border-bottom: 1px solid var(--vl-gray-300); }
.library-faq__q {
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  position: relative;
  cursor: pointer;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--vl-gunmetal);
  list-style: none;
}
.library-faq__q::-webkit-details-marker { display: none; }
.library-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--space-4);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--vl-olive);
}
.library-faq__item[open] .library-faq__q::after { content: "\2013"; }
.library-faq__q:hover { color: var(--vl-teal); }
.library-faq__a {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5) 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--vl-gray-600);
}

/* ---------- Library detail: split hero ---------- */

/* Copy on the left, the actual dashboard on the right. A text-only hero wastes
   the fold on a page whose whole argument is "this thing is real and live". */
.hero--library {
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(40px, 5.5vw, 68px);
  text-align: left;
}

.library-hero {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 980px) {
  .library-hero { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

/* The base .hero rules centre everything and cap the measure with auto margins.
   Undo that for the split column. */
.library-hero__eyebrow,
.library-hero__headline,
.library-hero__sub {
  text-align: left;
  margin-inline: 0;
}
.library-hero__eyebrow { margin-bottom: var(--space-3); }
.library-hero__headline {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 18ch;
  margin-bottom: var(--space-4);
}
.library-hero__sub {
  max-width: 46ch;
  margin-bottom: var(--space-5);
  font-size: clamp(16px, 1.9vw, 18.5px);
}
.hero .library-hero__chips {
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: var(--space-6);
  gap: var(--space-2);
}
/* Slightly tighter than the body chips so all three fit one line in the column. */
.hero .library-hero__chips .trust-chip {
  font-size: 13px;
  padding: 5px 12px;
}

.library-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: 0;
}
.library-hero__alt {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
}
.library-hero__alt:hover { color: var(--vl-white); text-decoration: underline; text-underline-offset: 3px; }

/* Matches the .hero .video-frame treatment (white hairline + lifted shadow +
   lime bloom) so the shot reads as native to the dark hero. */
.library-hero__shot {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-gunmetal);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 0 96px rgba(163, 199, 76, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.library-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
}
.library-hero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(38, 49, 59, 0) 55%, rgba(38, 49, 59, 0.5));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.library-hero__shot:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(163, 199, 76, 0.5),
    0 28px 72px rgba(0, 0, 0, 0.4),
    0 0 110px rgba(163, 199, 76, 0.2);
}
.library-hero__shot:hover::after { opacity: 1; }
.library-hero__shot:focus-visible { outline: 3px solid var(--vl-lime); outline-offset: 3px; }

.library-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%) translateY(6px);
  z-index: 1;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.library-hero__shot:hover .library-hero__cue,
.library-hero__shot:focus-visible .library-hero__cue {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Wide dashboard screenshots lose all detail on a phone. Crop to a banner and
   keep the cue permanently visible, since there is no hover on touch. */
@media (max-width: 979px) {
  .library-hero__shot { aspect-ratio: 16 / 9; }
  .library-hero__shot img { height: 100%; object-fit: cover; object-position: top center; }
  .library-hero__cue { opacity: 1; transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   Mid-page example CTA band
   A run of light sections gets monotonous, and every CTA on the page points at
   a form. This one is Deep Teal (brand doc: the primary dark surface) and it
   points at something the reader can go look at instead.
   --------------------------------------------------------------------------- */

.section--example-cta {
  background: var(--vl-teal);
  color: var(--vl-white);
}

.example-cta {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 860px) {
  .example-cta { grid-template-columns: 1fr auto; gap: var(--space-7); }
}

.example-cta__title {
  font-family: var(--font-display, inherit);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--vl-white);
}
.example-cta__title em { font-style: normal; color: var(--vl-lime); }

.example-cta__body {
  margin: var(--space-3) 0 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.82);
}

.example-cta__action { display: grid; justify-items: start; gap: 10px; }
@media (min-width: 860px) {
  .example-cta__action { justify-items: end; }
}

.example-cta__note {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.btn--lime {
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
}
.btn--lime:hover {
  background: #b4d465;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

/* ============================================================
   Overworld — Pattern 5
   ------------------------------------------------------------
   The interactive-explainer treatment. Late-90s handheld RPG UI
   grammar (dialogue box, typed text, advance arrow, cursor menu,
   nameplate, item bag) rendered entirely in the sanctioned brand
   palette. See brand/vision-labs-brand.md, Pattern 5.

   Three rules this file enforces, all of them load-bearing:

   1. SCOPE. Everything here is nested under .ow-stage. Outside the
      stage nothing changes, which is what makes a fifth pattern
      safe to add to a family of four.
   2. LIME IS AN ACCENT. Cursor, advance arrow, caret, selection
      ring. Never a surface fill. brand doc: "don't use Lime as a
      flat area fill larger than a CTA."
   3. THE PIXEL FACE NEVER SPEAKS. --font-pixel is for chrome only:
      nameplates, menu labels, the bag, counters. Every real
      sentence is Poppins, because the answers carry claims and
      claims have to be readable.

   The retro read comes from hard edges and stepped time, not from
   glow. No scanlines, no CRT bloom, no phosphor, no dither. That
   keeps us clear of image-presets section 5 and it looks better.
   ============================================================ */

/* Everything except the world stays in a readable measure. */
.ow-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: grid;
  gap: var(--ow-px);
}

.ow-stage {
  --ow-px: 4px;
  --ow-ink: var(--vl-gunmetal);
  --ow-paper: var(--vl-isabeline);
  --ow-accent: var(--vl-lime);
  position: relative;
  display: grid;
  gap: var(--ow-px);
}
@media (min-width: 768px) {
  .ow-stage { --ow-px: 5px; }
}

/* ---------- Shared chrome: the double-ruled box ---------- */

/* Gunmetal frame, white rail, gunmetal hairline, cream fill. Shadows paint
   first-listed on top, so the white ring sits over the wider gunmetal one and
   leaves a 1-step hairline showing. That stack is the whole retro frame. */
.ow-bag {
  background: var(--ow-paper);
  border: var(--ow-px) solid var(--ow-ink);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 var(--ow-px) var(--vl-white),
    inset 0 0 0 calc(var(--ow-px) * 1.5) var(--ow-ink);
}

/* ---------- HUD ---------- */

.ow-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--ow-px) * 2.5) calc(var(--ow-px) * 3);
  flex-wrap: wrap;
}

.ow-hud__title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ow-ink);
}
@media (min-width: 768px) {
  .ow-hud__title { font-size: 13px; }
}

.ow-hud__hint {
  margin: 0;
  font-size: 13px;
  color: var(--vl-gray-600);
}

/* ---------- World ---------- */

/* Full width of the page. The 88vh cap only bites on unusually wide or short
   viewports, where it narrows the world rather than producing a game screen
   taller than the screen it is played on. */
.ow-world {
  position: relative;
  width: auto;
  max-width: 100%;
  height: min(88vh, calc(100vw * 176 / 320));
  aspect-ratio: 320 / 176;
  margin: 0 auto;
  border-top: var(--ow-px) solid var(--ow-ink);
  border-bottom: var(--ow-px) solid var(--ow-ink);
  background: var(--vl-teal);
  overflow: hidden;
}

.ow-map {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  /* Decorative scenery. Clicks belong to the world (which advances dialogue)
     and to the beings, never to a tile. */
  pointer-events: none;
}

.ow-world:focus { outline: none; }
.ow-world:focus-visible { outline: var(--ow-px) solid var(--ow-accent); outline-offset: 2px; }

/* The layer spans the whole world, so it must not swallow clicks aimed at the
   world itself (which is what advances dialogue). Only the beings take hits. */
.ow-beings { position: absolute; inset: 0; pointer-events: none; }
.ow-being { pointer-events: auto; }

.ow-being {
  position: absolute;
  width: 6.25%;   /* 20 sprite px / 320 world px */
  height: 12.5%;  /* 22 sprite px / 176 world px */
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: left 0.13s steps(3), top 0.13s steps(3);
}

.ow-being__sprite { display: block; width: 100%; height: 100%; }
.ow-being__sprite svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Name floats above the sprite rather than sitting under it, so it never
   overlaps whoever is standing on the tile below. */
.ow-being__tag {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--vl-white);
  background: rgba(38, 49, 59, 0.72);
  padding: 3px 4px;
  pointer-events: none;
  /* Always legible: with six characters spread over the map, a name that only
     appears on hover leaves the world anonymous on first look. */
  opacity: 0.82;
  transition: none;
}
@media (min-width: 700px) { .ow-being__tag { font-size: 9px; padding: 3px 5px; } }

/* Whoever you are standing next to gets the accent treatment. */
.ow-being:hover .ow-being__tag,
.ow-being:focus-visible .ow-being__tag,
.ow-being.is-near .ow-being__tag {
  opacity: 1;
  background: var(--ow-accent);
  color: var(--vl-gunmetal);
}

.ow-being:hover .ow-being__sprite,
.ow-being:focus-visible .ow-being__sprite {
  outline: 2px solid var(--ow-accent);
  outline-offset: 1px;
}
.ow-being:focus-visible { outline: none; }

.ow-being.is-spent .ow-being__sprite { opacity: 0.5; }

/* Player facing. Three sprites in the DOM, CSS picks one. */
.ow-being--player { cursor: default; z-index: 3; }
.ow-being--player [data-sprite] { display: none; }
.ow-being--player[data-dir="down"] [data-sprite="down"],
.ow-being--player[data-dir="up"] [data-sprite="up"],
.ow-being--player[data-dir="left"] [data-sprite="side"],
.ow-being--player[data-dir="right"] [data-sprite="side"] { display: block; }
.ow-being--player[data-dir="left"] { transform: scaleX(-1); }
.ow-being--player .ow-being__tag { display: none; }

/* Two-frame step. steps(2) is the point: it hops rather than easing, which is
   what makes it read as a sprite walking instead of a div sliding. */
.ow-being--player.is-walking .ow-being__sprite {
  animation: ow-step 0.13s steps(2) 1;
}
@keyframes ow-step {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Hidden until it walks out of the tall grass. */
.ow-stage.is-live .ow-being--dataos { display: none; }
.ow-stage.is-live.has-dataos .ow-being--dataos { display: block; }
.ow-being--dataos.is-arriving { animation: ow-emerge 0.85s steps(5) both; }
@keyframes ow-emerge {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* The "press Enter" nub over whoever you are facing. */
.ow-prompt {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 11px;
  line-height: 1;
  color: var(--vl-gunmetal);
  background: var(--ow-accent);
  border: 2px solid var(--ow-ink);
  padding: 2px 4px;
  pointer-events: none;
  animation: ow-blink 0.9s steps(1) infinite;
  z-index: 4;
}
.ow-prompt[hidden] { display: none; }

/* ---------- HUD ---------- */

.ow-stagewrap { position: relative; }

/* Two modes on purpose. On a phone the world is only ~215px tall, so an
   overlay would cover a quarter of the scene and three of the characters;
   there it is a status bar above the world, and the vertical room is cheap
   because everything already fits. On desktop the world is 700px+ and the
   chrome above it was pushing the on-screen controls under the fold, so it
   overlays the top-left corner instead. */
.ow-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  background: var(--vl-gunmetal);
  border-top: 2px solid var(--vl-gunmetal);
  /* A readout, not a control. Overlaid it spans part of the scene, so leaving
     it hit-testable would eat taps meant for whoever stands under it. */
  pointer-events: none;
}

@media (min-width: 700px) {
  .ow-hud {
    position: absolute;
    z-index: 5;
    top: var(--space-4);
    left: var(--space-4);
    right: auto;
    /* Near-opaque: it lands on the tree border row, and at 55% the label was
       competing with foliage. */
    background: rgba(38, 49, 59, 0.86);
    border: 2px solid var(--vl-gunmetal);
  }
}

.ow-hud__slot, .ow-hud__meter { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.ow-hud__label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  flex: 0 0 auto;
}
@media (min-width: 768px) { .ow-hud__label { font-size: 10px; } }

.ow-hud__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) { .ow-hud__value { font-size: 16px; } }

.ow-hud__pips { display: inline-flex; gap: 4px; }
.ow-pip {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: none;
}
.ow-pip.is-on { background: var(--ow-accent); border-color: var(--ow-accent); }

/* ---------- Controls ---------- */

/* Overlaid on the world, bottom left, like a handheld's controls sitting under
   the screen. Kept out of the dialogue's way, which anchors to a character. */
.ow-pad {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: rgba(38, 49, 59, 0.55);
  border: 2px solid rgba(38, 49, 59, 0.8);
}
@media (min-width: 768px) { .ow-pad { left: var(--space-5); bottom: var(--space-5); } }



.ow-dpad {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}

.ow-dpad__btn {
  position: absolute;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
  color: var(--ow-paper);
  background: var(--vl-gunmetal);
  border: 2px solid var(--ow-ink);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}
/* Holding a direction must not scroll the page on touch. */
.ow-dpad__btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.ow-dpad__btn:hover { background: var(--vl-teal); }
.ow-dpad__btn:active { background: var(--vl-olive); }
.ow-dpad__btn--up    { left: 32px; top: 0; }
.ow-dpad__btn--left  { left: 0; top: 32px; }
.ow-dpad__btn--right { left: 64px; top: 32px; }
.ow-dpad__btn--down  { left: 32px; top: 64px; }
.ow-dpad__hub {
  position: absolute;
  left: 32px; top: 32px;
  width: 32px; height: 32px;
  background: var(--vl-gunmetal);
  border-top: 2px solid var(--ow-ink);
  border-bottom: 2px solid var(--ow-ink);
}

.ow-abtn {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: var(--ow-px) solid var(--ow-ink);
  background: var(--ow-accent);
  color: var(--vl-gunmetal);
  font-family: var(--font-pixel);
  font-size: 14px;
  cursor: pointer;
}
.ow-abtn:active { background: var(--vl-olive); color: var(--vl-white); }

/* On a phone the world is only ~214px tall, so a desktop-sized pad would sit
   on half of it. Shrink the whole control cluster rather than moving it out. */
@media (max-width: 699px) {
  .ow-pad { left: var(--space-2); bottom: var(--space-2); gap: var(--space-2); padding: var(--space-2); }
  .ow-dpad { width: 66px; height: 66px; }
  .ow-dpad__btn { width: 22px; height: 22px; font-size: 7px; }
  .ow-dpad__btn--up    { left: 22px; top: 0; }
  .ow-dpad__btn--left  { left: 0; top: 22px; }
  .ow-dpad__btn--right { left: 44px; top: 22px; }
  .ow-dpad__btn--down  { left: 22px; top: 44px; }
  .ow-dpad__hub { left: 22px; top: 22px; width: 22px; height: 22px; }
  .ow-abtn { width: 40px; height: 40px; font-size: 11px; }
}

.ow-controls__hint {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vl-gray-600);
}
.ow-controls__hint b { color: var(--vl-gunmetal); font-weight: 600; }

/* ---------- Speech bubble ---------- */

/* The dialogue lives in the world now, anchored over whoever is talking, with
   a tail pointing at them. That is stronger than a portrait in a panel below:
   the person you just walked up to is visibly the person speaking. */
.ow-bubble {
  position: absolute;
  z-index: 6;
  width: min(560px, 78%);
  transform: translateX(-50%);
  background: var(--ow-paper);
  border: var(--ow-px) solid var(--ow-ink);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 var(--ow-px) var(--vl-white),
    inset 0 0 0 calc(var(--ow-px) * 1.5) var(--ow-ink),
    0 6px 0 rgba(38, 49, 59, 0.28);
  padding: calc(var(--ow-px) * 3) calc(var(--ow-px) * 3.5);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.ow-bubble[hidden] { display: none; }
@media (min-width: 900px) { .ow-bubble { width: min(620px, 52%); } }

.ow-bubble__speaker {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--vl-teal);
}
.ow-bubble__speaker[hidden] { display: none; }
@media (min-width: 768px) { .ow-bubble__speaker { font-size: 11px; } }

/* Poppins, deliberately. This is where the claims live. */
.ow-bubble__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ow-ink);
}
@media (min-width: 700px) { .ow-bubble__text { font-size: 16px; } }
@media (min-width: 1100px) { .ow-bubble__text { font-size: 17px; } }

.ow-bubble__caret[hidden] { display: none; }
.ow-bubble__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--ow-accent);
}
.ow-stage.is-typing .ow-bubble__caret { animation: ow-blink 0.5s steps(1) infinite; }

.ow-bubble__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ow-bubble__chips:empty { display: none; }

.ow-chip {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--vl-teal);
  background: rgba(1, 137, 121, 0.1);
  border: 2px solid rgba(1, 137, 121, 0.28);
  padding: 3px 7px;
}
@media (min-width: 700px) { .ow-chip { font-size: 12px; padding: 4px 9px; } }

.ow-bubble__arrow {
  position: absolute;
  right: calc(var(--ow-px) * 2.5);
  bottom: calc(var(--ow-px) * 1.5);
  font-size: 12px;
  line-height: 1;
  color: var(--ow-accent);
  animation: ow-blink 0.9s steps(1) infinite;
}
.ow-bubble__arrow[hidden] { display: none; }

/* Tail. Two stacked triangles so the chunky frame carries through it. */
.ow-bubble__tail {
  position: absolute;
  left: var(--tail-x, 50%);
  width: 0;
  height: 0;
}
.ow-bubble__tail::before,
.ow-bubble__tail::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.ow-bubble[data-tail="none"] .ow-bubble__tail { display: none; }

.ow-bubble[data-tail="down"] .ow-bubble__tail { bottom: calc(var(--ow-px) * -1); }
.ow-bubble[data-tail="down"] .ow-bubble__tail::before {
  border-top: 13px solid var(--ow-ink);
  left: -9px;
}
.ow-bubble[data-tail="down"] .ow-bubble__tail::after {
  border-top: 13px solid var(--ow-paper);
  left: -9px;
  top: calc(var(--ow-px) * -1.5);
}

.ow-bubble[data-tail="up"] .ow-bubble__tail { top: calc(var(--ow-px) * -1); }
.ow-bubble[data-tail="up"] .ow-bubble__tail::before {
  border-bottom: 13px solid var(--ow-ink);
  left: -9px;
  top: -13px;
}
.ow-bubble[data-tail="up"] .ow-bubble__tail::after {
  border-bottom: 13px solid var(--ow-paper);
  left: -9px;
  top: calc(-13px + var(--ow-px) * 1.5);
}

/* ---------- Barks ---------- */

/* The attract-mode line. Small, above the head, gone in under three seconds. */
.ow-bark {
  position: absolute;
  left: 50%;
  bottom: 112%;
  transform: translateX(-50%);
  z-index: 7;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--ow-ink);
  background: var(--ow-paper);
  border: 2px solid var(--ow-ink);
  box-shadow: 0 3px 0 rgba(38, 49, 59, 0.3);
  padding: 5px 7px;
  pointer-events: none;
  animation: ow-bark-in 0.18s steps(3) both;
}
@media (max-width: 699px) { .ow-bark { font-size: 9px; padding: 4px 5px; } }

.ow-bark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--ow-ink);
}

@keyframes ow-bark-in {
  from { transform: translate(-50%, 6px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- Bag ---------- */

.ow-bag {
  padding: calc(var(--ow-px) * 2.5) calc(var(--ow-px) * 3);
  display: grid;
  gap: var(--space-3);
}

.ow-bag__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ow-bag__title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ow-ink);
}
@media (min-width: 768px) { .ow-bag__title { font-size: 12px; } }

.ow-bag__count {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--vl-olive);
}
@media (min-width: 768px) { .ow-bag__count { font-size: 12px; } }

.ow-bag__slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ow-px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .ow-bag__slots { grid-template-columns: repeat(4, 1fr); }
}

.ow-bag__slot {
  border: 2px dashed var(--vl-gray-400);
  padding: var(--space-3);
  min-height: 82px;
  display: grid;
  align-content: start;
  gap: 4px;
}
.ow-bag__slot.is-filled {
  border: 2px solid var(--vl-olive);
  background: var(--vl-white);
  animation: ow-drop 0.28s steps(4) both;
}

@keyframes ow-drop {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ow-bag__slot-kind {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.03em;
  color: var(--vl-gray-500);
}
.ow-bag__slot.is-filled .ow-bag__slot-kind { color: var(--vl-olive); }

.ow-bag__slot-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vl-gray-500);
}
.ow-bag__slot.is-filled .ow-bag__slot-name { color: var(--ow-ink); }

.ow-bag__slot-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--vl-gray-600);
}

/* The panel that unlocks once all four documents are in the bag. */
.ow-clear {
  border: var(--ow-px) solid var(--vl-lime);
  background: var(--vl-teal);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.ow-clear[hidden] { display: none; }
.ow-clear__title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--vl-lime);
}
@media (min-width: 768px) { .ow-clear__title { font-size: 14px; } }
.ow-clear__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- Progressive enhancement ---------- */

/* The stage ships every question, every answer, and every deflection as plain
   HTML. JS sets .is-live and swaps to the game. A page arguing that AI should
   be able to read your business had better be readable without JS. */
.ow-fallback { display: grid; gap: var(--space-5); }
.ow-stage.is-live .ow-fallback { display: none; }
.ow-stage:not(.is-live) .ow-game { display: none; }

.ow-game { display: grid; gap: var(--ow-px); }

/* While someone is talking the world is inert, so it steps back visually too.
   Nameplates go with it: the bubble already names the speaker, and its tail
   would otherwise land straight on top of their plate. */
.ow-stage.is-talking .ow-map { filter: saturate(0.7) brightness(0.86); }
.ow-stage.is-talking .ow-being__tag,
.ow-being.is-barking .ow-being__tag { opacity: 0; }
.ow-stage.is-talking .ow-being { pointer-events: none; }
.ow-stage.is-talking .ow-dpad__btn { opacity: 0.5; }

.ow-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ow-caption {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vl-gray-600);
}

/* ---------- Reduced motion ---------- */

/* The fourth such block in this file. Everything Overworld animates is
   decorative, so all of it stops. The cursor still moves, because that is
   navigation rather than motion, and the loop stays completable. */
@media (prefers-reduced-motion: reduce) {
  .ow-being--player.is-walking .ow-being__sprite,
  .ow-being--dataos.is-arriving,
  .ow-prompt,
  .ow-bubble__arrow,
  .ow-bark,
  .ow-stage.is-typing .ow-bubble__caret,
  .ow-bag__slot.is-filled {
    animation: none;
  }
  .ow-bubble__arrow, .ow-prompt { opacity: 1; }
  /* The step glide needs no rule here: the global reduced-motion block earlier
     in this file already flattens every transition with !important. */
}

/* ---------- Page-scoped: /mcp ---------- */

.section--mcp-hero {
  background: var(--vl-gunmetal);
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}

.mcp-hero__headline {
  margin: var(--space-3) 0 var(--space-5);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vl-white);
}
@media (min-width: 768px) { .mcp-hero__headline { font-size: 46px; } }
.mcp-hero__headline em { font-style: normal; color: var(--vl-lime); }

.mcp-hero__sub {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) { .mcp-hero__sub { font-size: 19px; } }

.mcp-hero__cta { margin: var(--space-5) 0 0; }

/* No horizontal padding and no .container inside: the world is meant to run
   the full width of the page, and .ow-inner re-establishes a readable measure
   for the HUD, menu and bag. */
.section--mcp-stage {
  background: var(--vl-isabeline);
  padding: var(--space-6) 0 var(--space-7);
}

.section--mcp-gate { background: var(--vl-white); }
/* .section--mcp-connect takes its background from .section--statement (Deep
   Teal + glow field). A page-scoped background here would override it. */
.section--mcp-trust { background: var(--vl-cyan-50); }
.section--mcp-faq { background: var(--vl-white); }

.mcp-links {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 760px) { .mcp-links { grid-template-columns: 1fr 1fr; } }

/* ---------- /mcp no-JS layer ---------- */

.mcp-deflections {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .mcp-deflections { grid-template-columns: 1fr 1fr; } }

.mcp-deflection {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--vl-white);
  border: 2px solid var(--vl-gray-300);
  padding: var(--space-4);
}

.mcp-deflection__sprite {
  flex: 0 0 auto;
  width: 44px;
  height: auto;
  image-rendering: pixelated;
}

.mcp-deflection__name {
  margin: 0 0 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--vl-teal);
}

.mcp-deflection__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vl-gunmetal);
}

.mcp-answers {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0 0 0 var(--space-5);
}

.mcp-answer { background: var(--vl-white); border: 2px solid var(--vl-gray-300); padding: var(--space-5); }

.mcp-answer__q {
  margin: 0 0 var(--space-3);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--vl-teal);
}

.mcp-answer__p {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  line-height: 1.65;
  color: var(--vl-gunmetal);
}

.mcp-answer__doc {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vl-gray-600);
}
.mcp-answer__doc strong { color: var(--vl-olive); font-weight: 600; }

/* ---------- Narrow-phone button wrap (pre-existing, found via /lp) ----------
   .btn is `white-space: nowrap`, so a long label renders as one unbreakable
   line: "Book a Custom Strategy Call" in ctaSection() is 311px, which pushes
   the page sideways at 320px. Measured scrollWidth 369 vs clientWidth 320 on
   /lp, /lp/:slug/thank-you, /data-os/why, /data-os/library, and /data-os/boss
   (same element, same numbers), so this is not a /lp regression.

   Scoped below 360px, which is narrower than every common phone in use, so
   nothing changes anywhere the current labels already fit. */
@media (max-width: 359px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    text-wrap: balance;
  }
}

/* ---------- Lead magnets (/lp): form controls ----------
   These are the first form controls in this stylesheet. Everything before now
   was a GHL iframe, which brings its own CSS, so none of the usual input
   groundwork exists. Four things here are load-bearing rather than cosmetic:
   font: inherit (controls do not inherit font-family), 16px minimum (below it
   iOS zooms the page on focus), a visible focus ring, and the autofill
   override (Chrome's yellow otherwise blows out the white card).

   The form lives in the white .lp-rail__card, which is what lets one input
   skin work against the teal hero behind it. */

.lp-form {
  display: grid;
  gap: var(--space-3);
}

.lp-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-form__input {
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid var(--vl-gray-400);
  border-radius: var(--r-pill);
  background: var(--vl-white);
  color: var(--vl-gunmetal);
  text-align: center;
  transition: border-color 0.15s ease;
}
.lp-form__input::placeholder { color: var(--vl-gray-500); }
.lp-form__input:focus-visible {
  outline: 2px solid var(--vl-olive);
  outline-offset: 2px;
  border-color: var(--vl-olive);
}
@supports selector(:user-invalid) {
  .lp-form__input:user-invalid { border-color: #c0392b; }
}
/* Chrome paints autofilled inputs yellow, which reads as broken on the card. */
.lp-form__input:-webkit-autofill,
.lp-form__input:-webkit-autofill:hover,
.lp-form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vl-gunmetal);
  box-shadow: 0 0 0 1000px var(--vl-white) inset;
}

.lp-form__submit { width: 100%; }
.lp-form.is-sent .lp-form__submit { opacity: 0.6; pointer-events: none; }

/* Nameless input, so it is never submitted on the no-JS GET fallback. */
.lp-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The reassurance line directly under the CTA, so it has to be readable:
   gray-500 would be ~2.3:1 on white and fail AA. */
.lp-form__note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vl-gray-600);
}

/* .hero .btn--primary forces lime-on-gunmetal for dark surfaces. The submit
   button sits inside a white card inside the hero, so it has to come back to
   olive or lime lands on white and breaks the brand rule. */
.lp-rail__card .btn--primary {
  background: var(--vl-olive);
  color: var(--vl-white);
  box-shadow: none;
}
.lp-rail__card .btn--primary:hover {
  background: var(--vl-teal);
  color: var(--vl-white);
  transform: translateY(-1px);
}


/* ---------- Lead magnets: archive (/lp) ---------- */

.section--lp-grid { background: var(--vl-mint-50); }

.lp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(38, 49, 59, 0.14);
}
.lp-card:focus-visible {
  outline: 2px solid var(--vl-olive);
  outline-offset: 3px;
}

/* The shots are 4:5 portrait. Capping the height keeps three of them in a row
   without the cards turning into columns. */
.lp-card__shot {
  display: block;
  background: var(--vl-isabeline);
  border-bottom: 1px solid var(--vl-gray-300);
}
.lp-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  object-position: top center;
}

.lp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

/* The door label. The reader's situation in their voice, not the asset name. */
.lp-card__situation {
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--vl-gunmetal);
  padding-left: var(--space-4);
  border-left: 3px solid var(--vl-lime);
}

.lp-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vl-olive);
}

.lp-card__summary {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}

.lp-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ---------- Lead magnets: the five gaps ---------- */

.section--lp-gaps { background: var(--vl-cyan-50); }

.lp-gaps {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 760px) { .lp-gaps { grid-template-columns: repeat(2, 1fr); } }

.lp-gap {
  padding: var(--space-5);
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
}

.lp-gap__name {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  font-weight: 700;
  color: var(--vl-gunmetal);
}

/* The buyer's sentence. Quoted, because it is theirs and not ours. */
.lp-gap__says {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: var(--vl-olive);
}
.lp-gap__says::before { content: "\201C"; }
.lp-gap__says::after  { content: "\201D"; }

.lp-gap__gloss {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}

/* ---------- Lead magnets: squeeze page (/lp/:slug) ----------
   One screen, two columns. Main column carries title, subtitle, and bullets.
   The right rail carries the ask and the funnel, and is the only thing on the
   page you can act on. Nothing below the fold. */

.lp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1000px) {
  .lp-hero__grid {
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: clamp(40px, 5vw, 80px);
  }
}

/* Fill the viewport minus the chrome, so the whole offer is one screen with
   nothing to scroll past.

   Both chrome heights come out, not just the header: subtracting only
   --header-h left every desktop viewport exactly 69px over, which is the
   minimal footer. That footer stays (ad platforms want a reachable privacy
   link on a paid landing page) so it is budgeted for rather than removed.

   svh rather than vh: on mobile Safari vh counts the collapsing URL bar, which
   would push the form under the fold on first paint. Height is a minimum,
   never a cap, so long copy pushes the page taller rather than clipping. */
@media (min-width: 1000px) {
  .lp-hero--squeeze {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-h, 72px) - var(--lp-footer-h, 69px));
    padding-block: clamp(20px, 2.4vw, 40px);
  }
  .lp-hero--squeeze > .container { width: 100%; }
}

/* --- main column --- */

.lp-hero .hero__headline {
  margin-inline: 0;
  margin-bottom: var(--space-4);
  max-width: 15ch;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
}
.lp-hero .hero__subheadline {
  margin-inline: 0;
  margin-bottom: var(--space-6);
  max-width: 46ch;
  font-size: clamp(16px, 1.8vw, 18.5px);
}
.lp-hero .trust-back { margin-bottom: var(--space-2); }

/* .hero--trust centers everything. The two-column layout needs the main column
   ragged-right instead, or the bullets center away from their own markers. */
@media (min-width: 1000px) {
  .lp-main { text-align: left; }
  .lp-hero .eyebrow { text-align: left; margin-bottom: var(--space-4); }
}
@media (max-width: 999px) {
  .lp-hero { text-align: center; }
  .lp-hero .eyebrow { text-align: center; margin-bottom: var(--space-4); }
  .lp-hero .hero__headline,
  .lp-hero .hero__subheadline { margin-inline: auto; }
}

/* One line each. If a bullet wraps it is too long, so these are sized to make
   that obvious in review rather than to accommodate it. */
.lp-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 46ch;
}
@media (max-width: 999px) {
  .lp-bullets { margin-inline: auto; text-align: left; }
}
.lp-bullets__item {
  position: relative;
  padding-left: 30px;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}
.lp-bullets__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vl-lime);
  box-shadow: 0 0 0 4px rgba(163, 199, 76, 0.18);
}

/* --- the right rail --- */

.lp-rail {
  display: grid;
  gap: var(--space-5);
  scroll-margin-top: 88px;
}
@media (min-width: 1000px) {
  /* Sticky so the ask survives if long copy ever pushes the page past one
     screen. At the intended height it never actually travels. */
  .lp-rail { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
}
@media (max-width: 999px) {
  .lp-rail { max-width: 420px; margin-inline: auto; width: 100%; }
}

.lp-rail__card {
  background: var(--vl-white);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* The priority claim, above the offer. Olive rather than lime: lime is the
   accent for dark surfaces, and this sits on the white card. */
.lp-rail__kicker {
  margin: 0 0 var(--space-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vl-olive);
  text-align: center;
}

.lp-rail__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vl-gunmetal);
  text-align: center;
}

/* --- the funnel --- */

.lp-rail__proof {
  padding: 0 var(--space-2);
  text-align: center;
}

.lp-rail__stat {
  margin: 0 0 var(--space-4);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Three tiers, each narrower than the last. The taper is the whole message,
   so it is real geometry rather than three bars: clip-path pulls each tier in
   toward the next, and the widths do the rest. Lime lands only on "Acted",
   which is the one the reader is being asked to join. */
.lp-funnel {
  display: grid;
  gap: 3px;
  justify-items: center;
  margin-bottom: var(--space-4);
}
.lp-funnel__tier {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Each tier's bottom edge is cut to the next tier's width, so the three read
   as one continuous taper rather than three stacked bars. Change a width and
   its clip-path has to move with it: 13% inset on a 100% tier lands at 74%,
   which is exactly the width of the tier below it. */
.lp-funnel__tier--seen {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 87% 100%, 13% 100%);
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}
.lp-funnel__tier--took {
  width: 74%;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  background: rgba(255, 255, 255, 0.32);
  color: var(--vl-white);
}
/* The one the reader is being asked to join, so it is the only lime element
   in the rail and the only one that is not tapering away. */
.lp-funnel__tier--acted {
  width: 47%;
  background: var(--vl-lime);
  color: var(--vl-gunmetal);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.lp-rail__ask {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  color: var(--vl-lime);
}

/* Short laptops (1366x768 is still the most common one in the wild) leave only
   ~626px after chrome, which the longest headline overruns. Tighten rather
   than let the page scroll, since the whole point is one screen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .lp-hero--squeeze { padding-block: 16px; }
  .lp-hero .hero__headline { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: var(--space-3); }
  .lp-hero .hero__subheadline { font-size: 16px; margin-bottom: var(--space-5); }
  .lp-hero .eyebrow { margin-bottom: var(--space-3); }
  .lp-bullets { gap: var(--space-2); }
  .lp-rail__card { padding: var(--space-5); }
  .lp-funnel__tier { height: 34px; }
}

/* Phones cannot fit one screen and do not try, but the ask still has to be
   reachable without hunting for it. Measured: the button sat 24px under an
   844px fold, so the type and the gaps come in until it clears. */
@media (max-width: 999px) {
  .lp-hero__grid { gap: var(--space-5); }
  .lp-hero .hero__headline {
    font-size: clamp(26px, 7vw, 36px);
    margin-bottom: var(--space-3);
  }
  .lp-hero .hero__subheadline { margin-bottom: var(--space-5); }
  .lp-bullets { gap: var(--space-2); }
  .lp-rail__card { padding: var(--space-5); }
}


/* ---------- Lead magnets: thank-you (/lp/:slug/thank-you) ----------
   Both lines ship in the HTML and CSS picks one, so a no-JS visitor or a bare
   URL with no ?e= still reads correctly. */

[data-lp-ty]:not(.is-personalized) .lp-ty__personal { display: none; }
[data-lp-ty].is-personalized .lp-ty__generic { display: none; }

.lp-ty__email {
  font-weight: 600;
  color: var(--vl-lime);
  word-break: break-all;
}

/* Three cards in a two-column grid orphans the third. Scoped by count so the
   nine-card trust hub and the six-card keepGoing rail stay exactly as they are;
   same approach as .stat-grid--4 and .ongoing-grid--3. */
@media (min-width: 900px) {
  .trust-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* .trust-card is a horizontal icon-beside-copy row, which works at half
     width and collapses into a ribbon of 2-word lines at a third. Stack it. */
  .trust-grid--3 .trust-card { display: block; }
  /* flex: 0 0 48px sized it in the row; as a block it needs a real width. */
  .trust-grid--3 .trust-card__icon { width: 48px; margin-bottom: var(--space-4); }
}

/* ---------- /mcp: points on the statement band ---------- */

/* .included-list is styled for gunmetal-on-light and cannot ride a Deep Teal
   band. Same idea, inverted, and two-up so the band stays a band. */
.mcp-points {
  display: grid;
  gap: var(--space-4);
  max-width: 900px;
  margin: var(--space-7) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (min-width: 820px) { .mcp-points { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.mcp-point {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.mcp-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--vl-lime);
  border-radius: 50%;
}

/* ---------- /mcp: proof ---------- */

.section--mcp-proof { background: var(--vl-mint-whisper); }

.mcp-quote { margin: 0; text-align: center; }

.mcp-quote__text {
  margin: 0 0 var(--space-5);
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--vl-gunmetal);
  text-wrap: balance;
}
.mcp-quote__text::before { content: "\201C"; color: var(--vl-olive); }
.mcp-quote__text::after  { content: "\201D"; color: var(--vl-olive); }

.mcp-quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: 15px;
  color: var(--vl-gray-600);
}
.mcp-quote__by b { display: block; color: var(--vl-gunmetal); font-weight: 600; }
.mcp-quote__avatar { border-radius: 50%; flex: 0 0 auto; }
.mcp-quote__role { display: block; font-size: 14px; }

/* ---------- /mcp: the glossary ---------- */

/* The page asserts on every screen that definitions are the gate, so it had
   better show one. These are the same four terms the DefinedTermSet JSON-LD
   publishes and the same four the live dashboard reads, which is what makes
   the demo checkable instead of decorative. */
.mcp-defs {
  max-width: 900px;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  background: var(--vl-isabeline);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
}

.mcp-defs__title {
  margin: 0 0 var(--space-2);
  font-size: 20px;
  font-weight: 700;
  color: var(--vl-gunmetal);
}

.mcp-defs__intro {
  margin: 0 0 var(--space-5);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.mcp-defs__list { margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .mcp-defs__list { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.mcp-def {
  padding-top: var(--space-4);
  border-top: 1px solid var(--vl-gray-300);
}

.mcp-def__term {
  margin: 0 0 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--vl-teal);
}

.mcp-def__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gunmetal);
}

/* ---------- /mcp: lede above the game ---------- */

/* No hero. The game is the argument, so it starts as high on the page as the
   header allows and the copy above it is one sentence explaining why it exists.
   Gunmetal so the header, the subnav and this read as one block that hands
   straight off to the world. */
.section--mcp-lede {
  background: var(--vl-gunmetal);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  text-align: center;
}

.mcp-lede__h1 {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vl-white);
  text-wrap: balance;
}
@media (min-width: 768px) { .mcp-lede__h1 { font-size: 32px; } }
.mcp-lede__h1 em { font-style: normal; color: var(--vl-lime); }

.mcp-lede__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
@media (min-width: 768px) { .mcp-lede__sub { font-size: 17px; } }

/* The stage sits directly under the lede, so it loses its own top padding. */
.section--mcp-stage { padding-top: 0; }

/* ---------- /mcp: the beat after the demo ---------- */

.section--mcp-after { background: var(--vl-isabeline); text-align: center; }

.mcp-after__lead {
  margin: 0 0 var(--space-5);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--vl-gunmetal);
  text-wrap: balance;
}

.mcp-after__cta { margin: 0; }

/* ---------- The Profit Skill (/lp/skill) ----------
   Shaped after hqforwork.com/packs/ask-hormozi: name, cover shot of the actual
   output, then two access paths side by side. Not a one-screen squeeze like the
   magnet pages, so it scrolls and it has its own template. */

.skill-hero .hero__headline { max-width: 20ch; }

.section--skill-cover { background: var(--vl-mint-50); padding-block: clamp(32px, 5vw, 56px); }

.skill-cover {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--vl-gray-300);
  box-shadow: var(--shadow-card);
  background: var(--vl-isabeline);
}
.skill-cover img { display: block; width: 100%; height: auto; }

.skill-cover__caption {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}
.skill-cover__caption strong { color: var(--vl-gunmetal); }

.section--skill-install { background: var(--vl-white); }

.skill-paths {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 860px) { .skill-paths { grid-template-columns: repeat(2, 1fr); } }

/* min-width: 0 because a grid item defaults to min-width: auto, which resolves
   to the min-content of the nowrap command block and refuses to shrink. Without
   it the card is 346px wide inside a 320px viewport. */
.skill-path {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  background: var(--vl-gray-100);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
}
/* The path most visitors are on gets the accent edge, so the page has an
   obvious default rather than two equal-weight choices. */
.skill-path--gate {
  background: var(--vl-mint-whisper);
  border-color: var(--vl-teal-300, var(--vl-gray-300));
  box-shadow: var(--shadow-card);
}

.skill-path__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vl-olive);
}

.skill-path__title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--vl-gunmetal);
}

.skill-path__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}

.skill-path__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vl-gray-600);
}
.skill-path__note code,
.skill-unlocked code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.94em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--vl-gray-200);
  color: var(--vl-gunmetal);
}

/* The copyable invocation. First monospace surface in this stylesheet. */
.skill-cmd {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--vl-gunmetal);
  border-radius: var(--r-md);
}

.skill-cmd__code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 15px;
  color: var(--vl-lime);
}

.skill-cmd__copy {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--vl-white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.skill-cmd__copy:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.skill-cmd__copy:focus-visible { outline: 2px solid var(--vl-lime); outline-offset: 2px; }

.skill-cmd__done {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vl-lime);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.skill-cmd__done.is-on { opacity: 1; }

.skill-form { margin-top: auto; }

/* Revealed in place when the email lands, replacing the form rather than
   navigating away, because "unlock" is a promise better kept on the same screen. */
.skill-unlocked {
  margin-top: auto;
  padding: var(--space-5);
  background: var(--vl-white);
  border: 1px solid var(--vl-olive);
  border-radius: var(--r-md);
}
.skill-unlocked[hidden] { display: none; }
.skill-unlocked:focus-visible { outline: 2px solid var(--vl-olive); outline-offset: 3px; }

.skill-unlocked__label {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vl-olive);
}

.skill-unlocked__link {
  margin: 0 0 var(--space-3);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 15px;
  word-break: break-all;
}
.skill-unlocked__link a { color: var(--vl-olive-link); }

/* ============================================================
   /pricing and /compare/* : sourced cost stacks, citations, and
   the pull-quote failure modes. Everything else on both pages
   reuses .pkg-* and .included-list unchanged.
   ============================================================ */

.section--cost { background: var(--vl-cool-off); }

.cost-stack {
  list-style: none;
  margin: var(--space-6) auto 0;
  padding: 0;
  max-width: 680px;
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  background: var(--vl-white);
  overflow: hidden;
}

.cost-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--vl-gray-300);
}
.cost-line:last-child { border-bottom: 0; }

.cost-line__label {
  flex: 1 1 200px;
  font-weight: 600;
  color: var(--vl-gunmetal);
}

/* Qualifier under the label ("half time", "per user"). Kept on its own line so
   the figure column stays aligned down the stack. */
.cost-line__note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--vl-gray-500);
}

.cost-line__figure {
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--vl-teal);
  text-align: right;
}

/* Superscript citation marker. Absent markers are the visible tell that a line
   states the shape of a cost rather than a sourced number: see cost-sources.ts. */
.cost-line__ref {
  font-size: 11px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 3px;
  color: var(--vl-olive);
  text-decoration: none;
}
.cost-line__ref::before { content: "["; }
.cost-line__ref::after  { content: "]"; }
.cost-line__ref:hover { text-decoration: underline; }

.cost-stack__note {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vl-gray-500);
}

.section--sources { background: var(--vl-white); }

.source-list {
  max-width: 680px;
  margin: var(--space-6) auto 0;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 1.6;
}
.source-list__item { margin-bottom: var(--space-3); }
.source-list__item a {
  color: var(--vl-olive-link);
  word-break: break-word;
}
.source-list__checked {
  display: block;
  font-size: 13px;
  color: var(--vl-gray-500);
}

/* Verbatim call quotes on /pricing. Anonymized per claims.md. */
.failure-mode {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--vl-lime);
}
.failure-mode__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--vl-gunmetal);
}
.failure-mode__attribution {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  color: var(--vl-gray-500);
}
.failure-mode__body {
  margin: var(--space-4) 0 0;
  line-height: 1.7;
}

.compare-intro > p {
  margin: 0 0 var(--space-4);
  line-height: 1.75;
}
.compare-intro > p:last-child { margin-bottom: 0; }

/* ============================================================================
   /lp/vsl
   ----------------------------------------------------------------------------
   A paid-traffic VSL, so everything below is tuned for one job: get the video
   watched, then get the call booked. All of it is scoped to .offer-vsl or to
   classes only that page emits, so /data-os and the other offers are untouched.

   Design notes, since several choices here deliberately depart from the default
   offer look. The reference (webris.org/more-cases) earns its conversion with
   four things we did not have: a heavy condensed uppercase display face, hairline
   borders instead of drop shadows, two-tier list rows with icon tiles, and a
   background that means something rather than decorating. We take all four, in
   our own palette and with Poppins doing the condensed work, because adding a
   display face like Anton would break the type system for one page.
   ============================================================================ */

/* ---------- Logo / name ticker ----------
   The track holds the set twice and slides exactly -50%, so the duplicate is in
   place at the instant the first set wraps. Same mechanic as .founder-marquee,
   kept separate so it does not inherit that band's 40s timing or display type. */

.logo-marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* width: max-content is load-bearing. As an inline-flex box the track was capped
   at the container width, so the contents flex-shrank to fit instead of
   overflowing, which both squashed them and defeated the point of a marquee. */
.logo-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: logo-marquee 34s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}

.logo-marquee__set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

@keyframes logo-marquee {
  to { transform: translateX(-50%); }
}

/* Image variant: fixed box rather than width:auto, because these marks have very
   different aspect ratios and intrinsic widths made a uniform gap read as uneven
   pairs. object-fit keeps each mark whole. */
.logo-marquee__logo {
  flex: 0 0 auto;
  height: clamp(27px, 3.1vw, 36px);
  width: clamp(50px, 5vw, 62px);
  object-fit: contain;
  opacity: 0.9;
  margin-right: clamp(22px, 3.2vw, 44px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.logo-marquee__logo:hover { opacity: 1; transform: translateY(-2px); }

/* Name variant: letter-spaced caps with a small accent dot between each. */
.tick {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(18px, 2.4vw, 30px);
}
.tick__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vl-olive);
  flex: 0 0 auto;
}
.tick__name {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vl-gray-600);
  white-space: nowrap;
}

/* The global reduced-motion rule flattens the slide to 0.01ms, which lands the
   track back at translateX(0) and leaves a half-visible duplicate clipped on the
   right. Collapse to a centered wrapping row and drop the duplicate instead. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow: visible;
    white-space: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-marquee__track { display: block; width: auto; animation: none; }
  .logo-marquee__set {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-4);
  }
  .logo-marquee__set[aria-hidden="true"] { display: none; }
  .logo-marquee__logo { margin-right: 0; }
}

/* ---------- Pill eyebrow ----------
   The reference sets its audience call-out in a solid pill rather than as bare
   letter-spaced text, which is what makes "ATTN: LAW FIRMS" read as a label
   aimed at someone instead of a decorative kicker. */
.eyebrow--pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(1, 137, 121, 0.1);
  color: var(--vl-olive);
  letter-spacing: 0.12em;
}
.hero .eyebrow--pill,
.section--statement .eyebrow--pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(163, 199, 76, 0.16);
  color: var(--vl-lime);
  letter-spacing: 0.12em;
}

/* ---------- VSL hero ----------
   Tuned to put the player in view on a 900px-tall laptop rather than to give the
   headline room to breathe. Default hero type (62px headline, 120px top padding)
   pushed the frame to y=744, leaving a 156px sliver of a 403px player. */

.offer-vsl .hero {
  padding: clamp(30px, 4vw, 48px) 0 clamp(36px, 5vw, 60px);
}

/* Wider than container--narrow's 780px: a bigger player is the whole point, and
   the copy above it is short enough that the extra measure costs no lines. */
.offer-vsl .hero > .container--narrow {
  max-width: 880px;
}

/* An ascending line with vertex dots, layered over the Pattern 1 grid that
   .hero::before already draws, plus the standard Glow Field radial. A hero
   background that states the outcome beats one that just fills space, and it is
   the single strongest idea in the reference. Lime stays an accent: the line is
   2px and the fill tops out at 7% alpha. */
.offer-vsl .hero::after {
  /* The default .hero::after is a positioned lime circle (clamped width/height,
     top -22%, right -14%, radius 50%). The chart has to be full bleed, so the
     circle geometry is reset here before the layers are restacked. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' fill='none' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='600' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='rgba(163,199,76,0)'/%3E%3Cstop offset='1' stop-color='rgba(163,199,76,0.07)'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1200' y2='0'%3E%3Cstop offset='0' stop-color='rgba(163,199,76,0)'/%3E%3Cstop offset='0.22' stop-color='rgba(163,199,76,0.62)'/%3E%3Cstop offset='0.8' stop-color='rgba(163,199,76,0.62)'/%3E%3Cstop offset='1' stop-color='rgba(163,199,76,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 520 L150 486 L300 494 L450 442 L600 408 L750 344 L900 276 L1050 196 L1200 118 L1200 600 L0 600Z' fill='url(%23f)'/%3E%3Cpath d='M0 520 L150 486 L300 494 L450 442 L600 408 L750 344 L900 276 L1050 196 L1200 118' stroke='url(%23s)' stroke-width='2'/%3E%3Cg fill='rgba(163,199,76,0.55)'%3E%3Ccircle cx='300' cy='494' r='3'/%3E%3Ccircle cx='450' cy='442' r='3'/%3E%3Ccircle cx='600' cy='408' r='3'/%3E%3Ccircle cx='750' cy='344' r='3.5'/%3E%3Ccircle cx='900' cy='276' r='4'/%3E%3Ccircle cx='1050' cy='196' r='4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(163, 199, 76, 0.18), transparent 70%);
  background-repeat: no-repeat, no-repeat;
  /* Full height, not anchored to the bottom. The player is opaque and centered,
     so a short chart along the bottom edge is almost entirely occluded by it.
     Stretched, the line rises through the left margin and exits through the
     right, which is the only area actually left visible. */
  background-size: 100% 100%, 100% 100%;
  background-position: center, top center;
}

/* The default 44px grid at 0.07 alpha competes with the chart line. Halving it
   keeps Pattern 1 present as texture while letting the line read as the subject. */
.offer-vsl .hero::before { opacity: 0.45; }

/* Condensed poster type. Poppins 800 in caps with negative tracking gets the
   reference's display weight without adding a fourth font to the system. */
.offer-vsl .hero__headline,
.offer-vsl .section__title,
.offer-vsl .statement__headline {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.offer-vsl .hero__headline {
  font-size: clamp(27px, 3.5vw, 44px);
  line-height: 1.05;
  margin-bottom: var(--space-4);
  max-width: 26ch;
}

/* Underline rather than a colour swap. A lime word inside a white headline
   fragments the line; an underline keeps the sentence one object and still
   marks the promise. */
.offer-vsl .hero__headline em {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--vl-lime);
  text-decoration-thickness: 5px;
  text-underline-offset: 8px;
}

.offer-vsl .hero__subheadline {
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.55;
  max-width: 72ch;
  margin-bottom: var(--space-5);
  color: rgba(255, 255, 255, 0.76);
}
.offer-vsl .hero__video { margin-bottom: var(--space-5); }

.offer-vsl .section__title {
  font-size: clamp(24px, 3.2vw, 38px);
  margin-bottom: var(--space-4);
}
.offer-vsl .section__intro { margin-bottom: var(--space-7); }

.offer-vsl .statement__headline {
  font-size: clamp(26px, 4vw, 44px);
}

/* ---------- Section: inline booking ----------
   Benefits card beside a live calendar. The reference puts the ask above the FAQ
   rather than below it, so objections get answered after the reader has already
   seen the times. Owns the #book anchor. */

.section--booking {
  background: var(--vl-white);
  scroll-margin-top: 88px;
}

.booking-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-7);
}
.booking-header .eyebrow--pill { margin-bottom: var(--space-4); }
.booking-header .section__title { margin-bottom: var(--space-3); }
.booking-header__sub {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--vl-gray-600);
}

.booking-grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .booking-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-6);
  }
}

/* Hairline border, no drop shadow. Stacked shadowed cards are the strongest
   tell of a generated layout; a 1px rule at low alpha reads as drawn. */
.booking-card,
.booking-cal {
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
}

.booking-card { padding: clamp(22px, 3vw, 32px); }

.booking-card__title {
  margin: 0 0 var(--space-5);
  font-size: 19px;
  font-weight: 700;
  color: var(--vl-gunmetal);
}

.booking-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

/* Two-tier rows: an icon tile, a bold claim, then the detail underneath. One
   flat line per benefit is faster to write and much weaker to read. */
.booking-card__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.booking-card__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(1, 137, 121, 0.09);
  color: var(--vl-olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.booking-card__icon svg { display: block; }

.booking-card__text { display: block; }
.booking-card__h {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vl-gunmetal);
  margin-bottom: 3px;
}
.booking-card__b {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vl-gray-600);
}

.booking-card .proof-pills {
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--vl-gray-300);
}
/* .proof-pill is built for the dark founder band and the teal final CTA: white
   text on a white-alpha fill. On this white card it was invisible. */
.booking-card .proof-pill {
  background: var(--vl-mint-50);
  border-color: var(--vl-gray-300);
  color: var(--vl-gunmetal);
  min-height: 44px;
}
.booking-card .proof-pill:hover { background: var(--vl-cyan-50); transform: none; }
/* The sticker tilt (.proof-pill:nth-child(odd) rotate) belongs on the playful
   founder band. Against a hairline card it reads as a rendering mistake. */
.booking-card .proof-pill,
.booking-card .proof-pill:nth-child(odd),
.booking-card .proof-pill:nth-child(even) { transform: none; }
.booking-card .proof-pill__avatar { border-color: var(--vl-gray-400); }

.booking-cal { overflow: hidden; }
.booking-cal iframe { display: block; width: 100%; border: 0; }

.booking__note {
  margin-top: var(--space-5);
  text-align: center;
}

/* ---------- VSL: the alternatives band ----------
   Four options the reader is actually weighing, so the design has to make them
   comparable at a glance. Left-aligned hairline rows with the cost pulled out as
   a tag beat four centered shadowed cards, which read as equal-weight features
   rather than as a list of things that will cost you. */

.offer-vsl .section--ongoing { background: var(--vl-isabeline); }

.offer-vsl .ongoing-grid {
  max-width: 900px;
  gap: 0;
  border-top: 1px solid var(--vl-gray-300);
}
@media (min-width: 680px) {
  .offer-vsl .ongoing-grid { grid-template-columns: 1fr; }
}

.offer-vsl .ongoing-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vl-gray-300);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  padding: clamp(20px, 2.6vw, 28px) 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  transition: background 0.18s ease;
}
.offer-vsl .ongoing-card:last-child { border-top-color: var(--vl-gray-300); }

@media (min-width: 760px) {
  .offer-vsl .ongoing-card {
    grid-template-columns: 200px 1fr;
    column-gap: var(--space-6);
    align-items: start;
  }
  /* The cost tag sits under the name in the left rail, so the eye can run the
     column of names and the column of costs independently. */
  .offer-vsl .ongoing-card__value { grid-column: 1; }
  .offer-vsl .ongoing-card__what { grid-column: 2; grid-row: 1 / span 2; }
}

.offer-vsl .ongoing-card__name {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vl-gunmetal);
}

.offer-vsl .ongoing-card__what {
  margin: 0;
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.62;
  color: var(--vl-gray-600);
}

/* Reads as the price of that option, not as a benefit, so it is deliberately not
   lime. A left rule rather than a pill: these labels run to two lines, and a
   999px radius on a wrapped box renders as two offset rounded rects. */
.offer-vsl .ongoing-card__value {
  margin: 0;
  align-self: start;
  justify-self: start;
  max-width: 200px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--vl-gray-600);
  background: none;
  border-radius: 0;
  border-left: 3px solid var(--vl-gray-400);
  padding: 1px 0 1px 10px;
}

/* ---------- VSL: FAQ ----------
   Flat separator list rather than a stack of bordered boxes. Ten boxed cards in
   a column is visual noise; a ruled list lets the questions themselves carry it,
   which is what the reference does. */

.offer-vsl .section--faq { background: var(--vl-white); }

.offer-vsl .faq {
  gap: 0;
  border-top: 1px solid var(--vl-gray-300);
}

.offer-vsl .faq__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vl-gray-300);
  border-radius: 0;
  box-shadow: none;
}
.offer-vsl .faq__item[open] {
  border-color: transparent transparent var(--vl-gray-300);
  box-shadow: none;
}

.offer-vsl .faq__q {
  padding: var(--space-5) 0;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 600;
}
.offer-vsl .faq__a { padding: 0 0 var(--space-5); }

/* The play button is a fixed 84px, which is right on a 780px-wide desktop frame
   and far too heavy on a 342px phone frame, where it covers the poster art. */
@media (max-width: 600px) {
  .offer-vsl .video-facade__btn {
    width: 60px;
    height: 60px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(163, 199, 76, 0.25);
  }
  .offer-vsl .video-facade__btn::after {
    border-width: 11px 0 11px 18px;
  }
}

/* ---------- VSL: the statement band ----------
   This is the agitate beat and it leads the page body, so it gets more width than
   the default 20ch/48ch measure and the contradictions get named rather than only
   described. Keywords are marked inline; the claim-versus-reality rows underneath
   turn "data driven becomes gut driven" from a clause into a visible pairing. */

.offer-vsl .statement__eyebrow {
  margin: 0 auto var(--space-5);
}

.offer-vsl .statement__headline {
  max-width: 34ch;
  font-size: clamp(25px, 3.6vw, 42px);
  line-height: 1.08;
}

.offer-vsl .statement__subline {
  max-width: 76ch;
  font-size: clamp(15.5px, 1.7vw, 19px);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-7);
}

/* Called-out keywords. A bottom rule rather than a lime fill: half a dozen lime
   words inside one paragraph turns the paragraph into confetti, whereas an
   underline lets the eye pick them up without breaking the reading line. */
.offer-vsl .statement__subline em {
  font-style: normal;
  font-weight: 600;
  color: var(--vl-white);
  box-shadow: inset 0 -2px 0 rgba(163, 199, 76, 0.75);
}

.contrasts {
  list-style: none;
  margin: 0 auto var(--space-7);
  padding: 0;
  max-width: 1000px;
  display: grid;
  gap: var(--space-3);
  text-align: left;
}
@media (min-width: 760px) {
  .contrasts { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
}

/* Translucent gunmetal over Deep Teal rather than a new colour, per the brand
   rule on darker surfaces inside a teal panel. */
.contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(38, 49, 59, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Struck through, because the point is that this description is not true. */
.contrast__claim {
  font-size: clamp(13px, 1.3vw, 14.5px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.contrast__arrow {
  width: 16px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--vl-lime);
  opacity: 0.85;
  /* Arrow drawn with a clip-path so it needs no glyph and no icon file. */
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}

.contrast__reality {
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--vl-white);
}

/* ---------- VSL: reviews, four across ----------
   The shared .reviews-grid auto-fits at a 300px floor, which lands on three at
   1120px and orphans the fourth. Four named operators reads as a wall; three plus
   a straggler reads as an accident. */

.offer-vsl .section--reviews { background: var(--vl-isabeline); }

@media (min-width: 1040px) {
  .offer-vsl .reviews-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1280px;
  }
}

/* A four-up column is ~290px, so the quote has to give up some size to stay
   readable rather than ragging. */
@media (min-width: 1040px) {
  .offer-vsl .review-card__quote { font-size: 14.5px; line-height: 1.6; }
}

/* ---------- Section: showcase scrolly (pinned product tour) ---------- */

/* The media panel pins under the Data OS subnav while scroll swaps the active
   item. The subnav is the only thing still on screen once you scroll -- the
   mega-menu header above it is position: relative and leaves -- so this offsets
   by --dos-nav-h, not --header-h. Desktop-only: mobile and no-JS get the stacked
   fallback below (the pin is gated behind the JS-added .scrolly--js class). */

.section--showcase-scrolly {
  --scrolly-pin-top: calc(var(--dos-nav-h) + 12px);
  --scrolly-step: 80vh;
  padding-block: clamp(40px, 6vw, 72px);
}

.scrolly__head {
  text-align: center;
}
.scrolly__head .section__intro { margin-bottom: 0; }

.scrolly {
  position: relative;
}

/* Stacked fallback: mirrors the classic showcase rhythm. */
.scrolly__rail,
.scrolly__track {
  display: none;
}

.scrolly__items {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-7);
}

.scrolly-item {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

/* Soft pill buttons: tinted icon badge + sentence-case label + index number.
   Weight, color, and elevation carry the state — no caps, no letter-spacing. */
.scrolly__rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-pill);
  padding: 9px 16px 9px 9px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--vl-gray-600);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 49, 59, 0.05);
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.scrolly__rail-item:hover {
  color: var(--vl-gunmetal);
  border-color: var(--vl-gray-400);
  box-shadow: 0 6px 16px rgba(38, 49, 59, 0.1);
}
.scrolly__rail-item:focus-visible {
  outline: 2px solid var(--vl-olive);
  outline-offset: 2px;
}
.scrolly__rail-item.is-active {
  color: var(--vl-gunmetal);
  font-weight: 600;
  border-color: rgba(1, 137, 121, 0.35);
  box-shadow: 0 12px 26px rgba(38, 49, 59, 0.13), 0 3px 8px rgba(38, 49, 59, 0.07);
  transform: translateX(4px);
}

.scrolly__rail-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rail-tint, #E3F2EE);
  color: var(--rail-ink, var(--vl-teal));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.85), inset 0 -2px 4px rgba(38, 49, 59, 0.08);
}
.scrolly__rail-icon svg { width: 19px; height: 19px; }

/* Brand-adjacent tint cycle for the badges. */
.scrolly__rail-item:nth-child(6n + 1) .scrolly__rail-icon { --rail-tint: #E3F2EE; --rail-ink: #00665C; }
.scrolly__rail-item:nth-child(6n + 2) .scrolly__rail-icon { --rail-tint: #EFF5DC; --rail-ink: #66801F; }
.scrolly__rail-item:nth-child(6n + 3) .scrolly__rail-icon { --rail-tint: #E4F1F5; --rail-ink: #0F6E86; }
.scrolly__rail-item:nth-child(6n + 4) .scrolly__rail-icon { --rail-tint: #F3EEE5; --rail-ink: #8A6F42; }
.scrolly__rail-item:nth-child(6n + 5) .scrolly__rail-icon { --rail-tint: #ECEFF1; --rail-ink: #46545F; }
.scrolly__rail-item:nth-child(6n + 6) .scrolly__rail-icon { --rail-tint: #E9F7E9; --rail-ink: #2E7D4F; }

.scrolly__rail-label { flex: 1 1 auto; }

.scrolly__rail-num {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--vl-gray-500);
  transition: color 0.3s ease;
}
.scrolly__rail-item.is-active .scrolly__rail-num { color: var(--vl-olive); }

@media (min-width: 900px) {
  .section--showcase-scrolly { padding-block: 0; }

  /* Head on top, stage centered in the remaining height — one pinned unit. */
  .scrolly--js .scrolly__pin {
    position: sticky;
    top: var(--scrolly-pin-top);
    height: calc(100vh - var(--scrolly-pin-top));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 3.5vh, 40px);
    padding-top: clamp(16px, 3vh, 32px);
  }
  .scrolly--js .scrolly__head { flex: none; }
  .scrolly--js .scrolly__head .section__title { margin-bottom: var(--space-4); }

  .scrolly--js .scrolly__track { display: block; }
  .scrolly--js .scrolly__step { height: var(--scrolly-step); }

  /* The scrolly breaks out of the 1120px container: the media is the
     main character, so the stage gets more canvas. */
  .scrolly--js .scrolly__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    width: 100%;
    max-width: 1360px;
  }

  .scrolly--js .scrolly__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Every item occupies the same two cells; the active one fades in. */
  .scrolly--js .scrolly__items {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--space-6);
    align-items: center;
    margin-top: 0;
  }

  .scrolly--js .scrolly-item { display: contents; }

  .scrolly--js .scrolly-item__media {
    grid-column: 1;
    grid-row: 1;
  }

  .scrolly--js .scrolly-item__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .scrolly--js .scrolly-item__media,
  .scrolly--js .scrolly-item__copy {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  }
  .scrolly--js .scrolly-item__media { transform: translateY(18px) scale(0.985); }
  .scrolly--js .scrolly-item__copy { transform: translateY(14px); }

  .scrolly--js .scrolly-item.is-active .scrolly-item__media,
  .scrolly--js .scrolly-item.is-active .scrolly-item__copy {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
  }

  /* The rail already names the item, so the in-copy eyebrow is redundant. */
  .scrolly--js .scrolly-item__eyebrow { display: none; }

  /* Keep tall screenshots inside the pinned viewport. */
  .scrolly--js .scrolly-item__media .browser-frame img,
  .scrolly--js .scrolly-item__media .browser-frame video {
    width: 100%;
    max-height: calc(100vh - var(--scrolly-pin-top) - 280px);
    object-fit: contain;
  }

  /* Scroll-driven entrance: the frame zooms from 86% to full size as the
     section docks into its pin (JS sets --scrolly-zoom on .scrolly). */
  .scrolly--js .scrolly-item__media .browser-frame {
    transform: scale(var(--scrolly-zoom, 1));
    transform-origin: 50% 60%;
    will-change: transform;
    box-shadow: 0 24px 64px rgba(38, 49, 59, 0.18);
  }
}

/* Sentence-case eyebrow in the stacked fallback: no caps, no letter-spacing. */
.scrolly-item__eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .scrolly--js .scrolly-item__media,
  .scrolly--js .scrolly-item__copy {
    transition: none;
    transform: none;
  }
  .scrolly--js .scrolly-item__media .browser-frame { transform: none; }
}

/* ---------- Section: early booking band (pitch + form under the hero) ---------- */

.section--book {
  background: var(--vl-mint-whisper);
  border-bottom: 1px solid var(--vl-gray-200);
}

.book-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.book-copy__title {
  font-size: 28px;
  line-height: 1.22;
  margin: 0 0 var(--space-4);
}
.book-copy__title em {
  font-style: normal;
  color: var(--vl-olive);
}

.book-copy__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--vl-gray-600);
  margin: 0 0 var(--space-5);
}

/* Proof pills sit on a light band here, not the dark final CTA. */
.section--book .proof-pill {
  background: var(--vl-white);
  border-color: var(--vl-gray-300);
  color: var(--vl-gunmetal);
}
.section--book .proof-pill:hover { background: var(--vl-gray-100); }

.section--book .trust-link { text-align: left; }

.book-form {
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(38, 49, 59, 0.1);
  padding: var(--space-4);
}

@media (min-width: 900px) {
  .book-grid {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: var(--space-8);
    align-items: center;
  }
  .book-copy__title { font-size: 34px; }
}

/* ---------- Hero: split style (calm dark canvas + full-bleed panel) ---------- */

/* Merges with the header and Data OS subnav into one dark canvas; the visual
   lives on a full-bleed light panel so the screenshot carries the color. */
.hero--split {
  background: #202b34;
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
}
.hero--split::before { display: none; }

.hero--split .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--vl-lime);
  text-align: left;
  margin-bottom: var(--space-4);
}

.hero--split .hero__headline {
  font-size: clamp(32px, 4.1vw, 52px);
  line-height: 1.06;
}
.hero--split .hero__subheadline { color: rgba(255, 255, 255, 0.72); }

.hero--split .hero__cta .btn::after {
  content: "→";
  display: inline-block;
  margin-left: 9px;
  transition: transform 0.2s ease;
}
.hero--split .hero__cta .btn:hover::after { transform: translateX(3px); }

/* Divider + avatar proof row, GrowthX-style */
.hero--split .hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-trust__avatars { display: flex; }
.hero-trust__avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #202b34;
  object-fit: cover;
}
.hero-trust__avatars img + img { margin-left: -10px; }
.hero-trust__label {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

/* The visual panel: light gradient card, flush to the viewport's right edge. */
.hero--split .hero-founder__media--dash {
  max-width: none;
  width: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(50% - 50vw);
  background: radial-gradient(120% 90% at 18% 8%, #ECF9F9 0%, #DFF2EC 48%, #CBE7D6 100%);
  border-radius: 28px 0 0 28px;
  padding: clamp(32px, 4vw, 60px) clamp(24px, 3.5vw, 52px) clamp(56px, 6vw, 88px);
  min-height: 460px;
}

.hero--split .hero-dash {
  transform: none;
  width: 100%;
  max-width: 660px;
}
.hero--split .hero-dash img {
  border: 1px solid rgba(38, 49, 59, 0.12);
  box-shadow: 0 30px 60px rgba(11, 63, 56, 0.24);
}

/* Name tag + fact hint move inside the light panel */
.hero--split .hero-founder__media--dash .founder__nametag {
  right: clamp(16px, 3vw, 44px);
  bottom: 30px;
}
.hero--split .fact-hint {
  left: clamp(24px, 4vw, 56px);
  bottom: 22px;
  color: rgba(38, 49, 59, 0.6);
}
.hero--split .fact-hint__squish { color: var(--vl-olive); }
.hero--split .fact-card { bottom: 6px; }

@media (min-width: 900px) {
  .hero--split .hero-founder {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    gap: clamp(32px, 4.5vw, 72px);
  }
}

@media (max-width: 899px) {
  .hero--split .hero-founder__media--dash {
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    min-height: 0;
  }
}

/* ---------- Rotating word in a section title ---------- */

.word-rotator {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: nowrap;
  transition: width 0.4s cubic-bezier(0.3, 0.8, 0.4, 1);
}
.word-rotator__word {
  display: inline-block;
  font-style: normal;
}
.word-rotator__word.is-leaving {
  position: absolute;
  left: 0;
  top: 0;
  animation: word-out 0.45s cubic-bezier(0.55, 0, 0.55, 1) forwards;
}
.word-rotator__word.is-entering {
  animation: word-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes word-out {
  to { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(0.5em); }
}
@media (prefers-reduced-motion: reduce) {
  .word-rotator { transition: none; }
  .word-rotator__word { animation: none !important; }
}

/* ---------- Talk scene: chat + the system behind it ---------- */

/* Tella-style rounded light panel on the dark dataflow band. */
.talk-scene {
  max-width: 1040px;
  margin: var(--space-7) auto;
}

.talk-panel {
  position: relative;
  display: grid;
  gap: var(--space-6);
  background: linear-gradient(165deg, #ffffff 0%, #f4fbf8 55%, #e9f6f0 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: clamp(24px, 3.5vw, 48px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

@media (min-width: 760px) {
  .talk-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    min-height: 440px;
  }
}

/* Chat column */
.talk-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.talk-msg--user {
  align-self: flex-end;
  max-width: 92%;
  background: var(--vl-gunmetal);
  color: var(--vl-white);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  min-height: 45px;
}

.talk-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--vl-lime);
  opacity: 0;
}
.talk-caret.is-typing {
  opacity: 1;
  animation: talk-blink 0.85s steps(2) infinite;
}
@keyframes talk-blink { 50% { opacity: 0; } }

.talk-status {
  margin: 0;
  font-size: 13px;
  color: var(--vl-gray-600);
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.talk-status.is-on { opacity: 1; }
.talk-status span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vl-olive);
  animation: talk-dot 1.1s ease-in-out infinite;
}
.talk-status span:nth-child(2) { animation-delay: 0.18s; }
.talk-status span:nth-child(3) { animation-delay: 0.36s; margin-right: 6px; }
@keyframes talk-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }

/* Answer card */
.talk-msg--ans {
  align-self: stretch;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 12px 32px rgba(38, 49, 59, 0.1);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.talk-msg--ans.is-on { opacity: 1; transform: none; }

.talk-ans__label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vl-gray-600);
}
.talk-ans__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.talk-ans__value {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: var(--vl-gunmetal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.talk-ans__delta {
  background: rgba(163, 199, 76, 0.2);
  color: #5c7a17;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.talk-ans__spark { width: 100%; height: auto; display: block; }
.talk-spark__area { fill: rgba(1, 137, 121, 0.1); }
.talk-spark__line {
  fill: none;
  stroke: var(--vl-olive);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.talk-spark__dot { fill: var(--vl-olive); stroke: #fff; stroke-width: 2; }
.talk-ans__note {
  margin: 10px 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vl-gray-600);
}
.talk-ans__def {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vl-olive);
}
.talk-ans__def svg { flex: 0 0 auto; }

/* System column: sources -> warehouse, wires + pulses */
.talk-system {
  position: relative;
  aspect-ratio: 520 / 440;
  min-width: 0;
}
.talk-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.talk-wire {
  fill: none;
  stroke: rgba(1, 137, 121, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.talk-pulse { fill: var(--vl-olive); opacity: 0; }

.talk-src {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vl-white);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vl-gunmetal);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(38, 49, 59, 0.08);
}
.talk-src img { display: block; }

.talk-wh {
  position: absolute;
  left: 29.8%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--vl-white);
  border: 1.5px solid rgba(1, 137, 121, 0.45);
  border-radius: 16px;
  padding: 14px 18px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(1, 137, 121, 0.18);
}
.talk-wh__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--vl-gunmetal);
}
.talk-wh__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--vl-gray-600);
  white-space: nowrap;
}

/* Person bubble, Tella camera style */
.talk-avatar {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: clamp(56px, 7vw, 80px);
  height: auto;
  background: var(--vl-white);
  border: 3px solid var(--vl-white);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(38, 49, 59, 0.28);
}

@media (max-width: 759px) {
  .talk-system { display: none; }
  .talk-avatar { width: 56px; border-radius: 16px; right: 14px; bottom: 14px; }
  .talk-msg--user { max-width: 100%; }
}

/* ---------- Tool logos inside the dataflow narrative (talk scene mode) ---------- */

.dataflow-stack {
  margin: var(--space-7) auto 0;
  max-width: 1040px;
  text-align: center;
}
.dataflow-stack__title {
  margin: 0 0 var(--space-5);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.dataflow-stack__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.dataflow-stack__row img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.dataflow-stack__row img:hover { opacity: 0.9; }

/* ---------- Section: problem-framing narrative ---------- */

.section--narrative { background: var(--vl-white); }
.narrative {
  max-width: 580px;
  margin: 0 auto;
}
.narrative__kicker {
  margin: 0 0 var(--space-5);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vl-olive);
}
.narrative__p {
  margin: 0 0 var(--space-6);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--vl-gunmetal);
}
.narrative__p em {
  font-style: normal;
  font-weight: 600;
  color: var(--vl-olive);
}
.narrative__p:last-child {
  margin-bottom: 0;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.4;
}
/* Scroll fill: words start faint and ink in as you read down. */
.narrative--fill .narrative__w {
  transition: opacity 0.15s linear;
}

/* Outcome line on review cards: scan the results, find yourself. */
.review-card__takeaway {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vl-olive);
}

/* The shared .split-card wears a 4px colour-coded top border (olive / gray /
   lime). Two stacked cards capped in contrasting slabs is the single loudest
   generated-layout tell, and it fights this page's hairline-not-shadow rule, so
   the transform cards under "My team can build this." drop the cap entirely.
   The before/after read is already carried by the tinted panel, the title
   colour and the bullet dots. Scoped to .offer-vsl — /southern and
   /system-reporting still use the bordered original. */
.offer-vsl .split-card {
  border-top: 0;
}

/* The /lp/vsl poster is a photograph of JJ holding a lime play button, so the
   thumbnail already carries the play affordance. Drawing our own 84px lime
   button on top of it gives the frame two play buttons, the second landing
   across his forearm. The facade stays a real focusable button; only its
   decorative glyph is hidden. */
.offer-vsl .video-facade__btn { display: none; }
.offer-vsl .video-facade:hover img,
.offer-vsl .video-facade:focus-visible img {
  transform: scale(1.015);
  transition: transform 0.25s ease;
}
.offer-vsl .video-facade img { transition: transform 0.25s ease; }
.offer-vsl .video-facade:focus-visible {
  outline: 3px solid var(--vl-lime);
  outline-offset: 3px;
}

/* ---------- Fractional Data Team service page ----------
   Public route: /services/fractional-data-team/
   The route is served through the OS worker, but the page carries its own
   semantic service-page layout and keeps every critical answer server-rendered. */

.page-fractional-data-team {
  background: var(--vl-white);
  overflow-x: clip;
}

.page-fractional-data-team main {
  overflow: hidden;
}

.page-fractional-data-team .fdt-narrow {
  max-width: 820px;
}

.page-fractional-data-team .fdt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 6vw, 72px);
  color: var(--vl-white);
  background:
    radial-gradient(circle at 82% 16%, rgba(163, 199, 76, 0.2), transparent 34%),
    var(--vl-gunmetal);
}

.page-fractional-data-team .fdt-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.page-fractional-data-team .fdt-hero__inner {
  max-width: 1200px;
  text-align: center;
}

.page-fractional-data-team .fdt-hero__layout {
  display: grid;
  gap: clamp(44px, 7vw, 76px);
  align-items: center;
}

.page-fractional-data-team .fdt-breadcrumb {
  margin: 0 auto var(--space-5);
}

.page-fractional-data-team .fdt-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.page-fractional-data-team .fdt-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: rgba(255, 255, 255, 0.32);
}

.page-fractional-data-team .fdt-breadcrumb a {
  color: rgba(255, 255, 255, 0.76);
}

.page-fractional-data-team .fdt-eyebrow,
.page-fractional-data-team .fdt-section__kicker {
  margin: 0 0 var(--space-4);
  color: var(--vl-olive);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-fractional-data-team .fdt-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 16px;
  border: 1px solid rgba(163, 199, 76, 0.5);
  border-radius: var(--r-pill);
  color: var(--vl-lime);
  background: rgba(163, 199, 76, 0.08);
}

.page-fractional-data-team .fdt-hero h1 {
  max-width: 18ch;
  margin: 0 auto var(--space-5);
  color: var(--vl-white);
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.page-fractional-data-team .fdt-hero__lede {
  max-width: 72ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
  text-wrap: pretty;
}

.page-fractional-data-team .fdt-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-6) auto 0;
  max-width: 390px;
}

.page-fractional-data-team .fdt-hero__actions .btn {
  width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

.page-fractional-data-team .fdt-hero-visual {
  width: min(100%, 340px);
  margin: 0 auto;
}

.page-fractional-data-team .fdt-hero-orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(163, 199, 76, 0.2), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.055), transparent 68%);
}

.page-fractional-data-team .fdt-hero-orbit::before,
.page-fractional-data-team .fdt-hero-orbit::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  background: rgba(163, 199, 76, 0.35);
  transform: translate(-50%, -50%);
}

.page-fractional-data-team .fdt-hero-orbit::before {
  width: 76%;
  height: 1px;
}

.page-fractional-data-team .fdt-hero-orbit::after {
  width: 1px;
  height: 76%;
}

.page-fractional-data-team .fdt-hero-orbit__ring {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.page-fractional-data-team .fdt-hero-orbit__ring--outer {
  inset: 8%;
}

.page-fractional-data-team .fdt-hero-orbit__ring--inner {
  inset: 25%;
  border-color: rgba(163, 199, 76, 0.34);
}

.page-fractional-data-team .fdt-hero-orbit__core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 47%;
  aspect-ratio: 1;
  padding: var(--space-4);
  border: 1px solid rgba(163, 199, 76, 0.7);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.66);
  background: rgba(0, 102, 92, 0.92);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.3);
  text-align: center;
  transform: translate(-50%, -50%);
}

.page-fractional-data-team .fdt-hero-orbit__core-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  color: var(--vl-gunmetal);
  background: var(--vl-lime);
}

.page-fractional-data-team .fdt-hero-orbit__core-icon svg {
  width: 20px;
  height: 20px;
}

.page-fractional-data-team .fdt-hero-orbit__core > span:not(.fdt-hero-orbit__core-icon) {
  font-size: 10px;
  font-weight: 600;
}

.page-fractional-data-team .fdt-hero-orbit__core strong {
  max-width: 12ch;
  margin-block: 3px;
  color: var(--vl-white);
  font-size: clamp(13px, 4vw, 18px);
  line-height: 1.16;
}

.page-fractional-data-team .fdt-hero-orbit__core small {
  max-width: 18ch;
  font-size: 8px;
  line-height: 1.3;
}

.page-fractional-data-team .fdt-hero-orbit__node {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  color: var(--vl-gunmetal);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.page-fractional-data-team .fdt-hero-orbit__node svg {
  width: 17px;
  height: 17px;
  color: var(--vl-teal);
}

.page-fractional-data-team .fdt-hero-orbit__node--marketing {
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.page-fractional-data-team .fdt-hero-orbit__node--crm {
  top: 27%;
  right: 1%;
}

.page-fractional-data-team .fdt-hero-orbit__node--product {
  right: 8%;
  bottom: 13%;
}

.page-fractional-data-team .fdt-hero-orbit__node--operations {
  bottom: 4%;
  left: 15%;
}

.page-fractional-data-team .fdt-hero-orbit__node--revenue {
  top: 35%;
  left: 0;
}

.page-fractional-data-team .fdt-hero-visual figcaption {
  max-width: 40ch;
  margin: var(--space-4) auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.page-fractional-data-team .fdt-hero .btn--primary,
.page-fractional-data-team .fdt-mid-cta .btn--primary {
  color: var(--vl-gunmetal);
  background: var(--vl-lime);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.page-fractional-data-team .fdt-hero .btn--primary:hover,
.page-fractional-data-team .fdt-mid-cta .btn--primary:hover {
  color: var(--vl-teal);
  background: var(--vl-white);
}

.page-fractional-data-team .fdt-proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  max-width: 900px;
  margin: var(--space-7) auto 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.page-fractional-data-team .fdt-proof-strip li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.page-fractional-data-team .fdt-jump-nav {
  border-bottom: 1px solid var(--vl-gray-300);
  background: var(--vl-white);
}

.page-fractional-data-team .fdt-jump-nav__inner {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-3);
  scrollbar-width: thin;
}

.page-fractional-data-team .fdt-jump-nav a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--vl-gunmetal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.page-fractional-data-team .fdt-jump-nav a:hover {
  color: var(--vl-teal);
  background: var(--vl-mint-50);
}

.page-fractional-data-team .fdt-section {
  padding-block: clamp(64px, 9vw, 112px);
  scroll-margin-top: 88px;
}

.page-fractional-data-team .fdt-section--tint {
  background: var(--vl-mint-50);
}

.page-fractional-data-team .fdt-section--dark {
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 12% 2%, rgba(163, 199, 76, 0.1), transparent 34%),
    var(--vl-gunmetal);
}

.page-fractional-data-team .fdt-section--proof {
  background: var(--vl-cyan-50);
}

.page-fractional-data-team .fdt-section--pricing {
  background: var(--vl-isabeline);
}

.page-fractional-data-team .fdt-section--faq {
  background: var(--vl-cool-off);
}

.page-fractional-data-team .fdt-section--apply {
  background:
    radial-gradient(circle at 90% 5%, rgba(163, 199, 76, 0.12), transparent 30%),
    var(--vl-teal);
  color: rgba(255, 255, 255, 0.84);
}

.page-fractional-data-team .fdt-section h2,
.page-fractional-data-team .fdt-mid-cta h2 {
  margin-bottom: var(--space-5);
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.page-fractional-data-team .fdt-section h3 {
  margin-top: var(--space-7);
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.25;
}

.page-fractional-data-team .fdt-section p {
  margin: 0 0 var(--space-5);
}

.page-fractional-data-team .fdt-section p:last-child {
  margin-bottom: 0;
}

.page-fractional-data-team .fdt-lead {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 500;
  line-height: 1.6;
}

.page-fractional-data-team .fdt-heading-block {
  max-width: 820px;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.page-fractional-data-team .fdt-heading-block > p:last-child {
  margin-inline: auto;
  max-width: 68ch;
  color: var(--vl-gray-600);
  font-size: 18px;
}

.page-fractional-data-team .fdt-heading-block--light h2,
.page-fractional-data-team .fdt-heading-block--light .fdt-section__kicker,
.page-fractional-data-team .fdt-section--apply h2,
.page-fractional-data-team .fdt-section--apply h3 {
  color: var(--vl-white);
}

.page-fractional-data-team .fdt-heading-block--light .fdt-section__kicker,
.page-fractional-data-team .fdt-section--apply .fdt-section__kicker {
  color: var(--vl-lime);
}

.page-fractional-data-team .fdt-heading-block--light > p:last-child {
  color: rgba(255, 255, 255, 0.74);
}

.page-fractional-data-team .fdt-definition-copy {
  margin-inline: auto;
}

.page-fractional-data-team .fdt-symptom-grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.page-fractional-data-team .fdt-symptom-grid li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  background: var(--vl-white);
  box-shadow: var(--shadow-card);
  font-size: 15px;
  line-height: 1.6;
}

.page-fractional-data-team .fdt-symptom-grid li:nth-child(2),
.page-fractional-data-team .fdt-symptom-grid li:nth-child(6) {
  background: var(--vl-mint-whisper);
}

.page-fractional-data-team .fdt-symptom-grid li:nth-child(3) {
  background: var(--vl-cyan-50);
}

.page-fractional-data-team .fdt-symptom-grid li:nth-child(4) {
  background: var(--vl-isabeline);
}

.page-fractional-data-team .fdt-visual-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--vl-teal);
  background: var(--vl-cyan-50);
}

.page-fractional-data-team .fdt-visual-icon--peach {
  color: #934217;
  background: #ffe8d8;
}

.page-fractional-data-team .fdt-visual-icon--mint {
  color: var(--vl-teal);
  background: #dff5ed;
}

.page-fractional-data-team .fdt-visual-icon--blue {
  color: #176675;
  background: #dff2f6;
}

.page-fractional-data-team .fdt-visual-icon--lime {
  color: var(--vl-gunmetal);
  background: rgba(163, 199, 76, 0.38);
}

.page-fractional-data-team .fdt-check-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.page-fractional-data-team .fdt-check-list li {
  position: relative;
  padding-left: 30px;
}

.page-fractional-data-team .fdt-check-list li::before {
  content: "✓";
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: var(--vl-teal);
  background: rgba(163, 199, 76, 0.34);
  font-size: 12px;
  font-weight: 800;
}

.page-fractional-data-team .fdt-check-list--panel {
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  background: var(--vl-mint-whisper);
}

.page-fractional-data-team .fdt-callout {
  margin-top: var(--space-7) !important;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--vl-lime);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--vl-cyan-50);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
}

.page-fractional-data-team .fdt-system-figure {
  margin: 0 0 var(--space-8);
}

.page-fractional-data-team .fdt-system {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  padding: clamp(20px, 4vw, 38px);
  border-radius: var(--r-lg);
  color: var(--vl-white);
  background: var(--vl-gunmetal);
  box-shadow: 0 22px 54px rgba(38, 49, 59, 0.14);
}

.page-fractional-data-team .fdt-system__group,
.page-fractional-data-team .fdt-system__core {
  min-width: 0;
  border-radius: var(--r-md);
}

.page-fractional-data-team .fdt-system__group {
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.page-fractional-data-team .fdt-system__label {
  display: block;
  margin-bottom: var(--space-3);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-fractional-data-team .fdt-system__group ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-fractional-data-team .fdt-system__group li {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
}

.page-fractional-data-team .fdt-system__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-5);
  border: 1px solid rgba(163, 199, 76, 0.68);
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 102, 92, 0.6);
  text-align: center;
}

.page-fractional-data-team .fdt-system__core strong {
  color: var(--vl-white);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
}

.page-fractional-data-team .fdt-system__core span {
  font-size: 12px;
  font-weight: 600;
}

.page-fractional-data-team .fdt-system__connector {
  display: grid;
  place-items: center;
  color: var(--vl-lime);
  font-size: 30px;
  font-weight: 700;
  transform: rotate(90deg);
}

.page-fractional-data-team .fdt-system-figure figcaption {
  max-width: 70ch;
  margin: var(--space-4) auto 0;
  color: var(--vl-gray-600);
  font-size: 14px;
  text-align: center;
}

.page-fractional-data-team .fdt-layer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.page-fractional-data-team .fdt-layer-card {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  background: var(--vl-white);
  box-shadow: var(--shadow-card);
}

.page-fractional-data-team .fdt-layer-card__visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-fractional-data-team .fdt-layer-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 30px;
  padding-inline: 9px;
  border: 1px solid rgba(0, 102, 92, 0.15);
  border-radius: var(--r-pill);
  color: var(--vl-olive);
  background: var(--vl-mint-50);
  font-size: 13px;
  font-weight: 800;
}

.page-fractional-data-team .fdt-layer-card h3,
.page-fractional-data-team .fdt-scope-note h3,
.page-fractional-data-team .fdt-comparison-card h3,
.page-fractional-data-team .fdt-process-list h3,
.page-fractional-data-team .fdt-proof-card h3,
.page-fractional-data-team .fdt-fit-card h3,
.page-fractional-data-team .fdt-form-card h3 {
  margin-top: 0;
}

.page-fractional-data-team .fdt-layer-card p {
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-layer-card a,
.page-fractional-data-team .fdt-proof-card a,
.page-fractional-data-team .fdt-proof-note a,
.page-fractional-data-team .fdt-text-link a {
  font-weight: 600;
}

.page-fractional-data-team .fdt-scope-grid,
.page-fractional-data-team .fdt-two-column,
.page-fractional-data-team .fdt-fit-grid,
.page-fractional-data-team .fdt-pricing,
.page-fractional-data-team .fdt-apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.page-fractional-data-team .fdt-scope-note {
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, 0.8);
  background: var(--vl-teal);
}

.page-fractional-data-team .fdt-scope-note h3,
.page-fractional-data-team .fdt-scope-note a {
  color: var(--vl-white);
}

.page-fractional-data-team .fdt-scope-note a {
  font-weight: 600;
}

.page-fractional-data-team .fdt-comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.page-fractional-data-team .fdt-comparison-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.055);
}

.page-fractional-data-team .fdt-comparison-card--featured {
  border-color: rgba(163, 199, 76, 0.76);
  background: rgba(0, 102, 92, 0.5);
  box-shadow: 0 0 0 1px rgba(163, 199, 76, 0.12);
}

.page-fractional-data-team .fdt-comparison-card__badge {
  display: inline-flex;
  margin-bottom: var(--space-4);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: var(--vl-gunmetal);
  background: var(--vl-lime);
  font-size: 11px;
  font-weight: 800;
}

.page-fractional-data-team .fdt-comparison-card h3 {
  color: var(--vl-white);
  font-size: 22px;
}

.page-fractional-data-team .fdt-comparison-card dl {
  margin: var(--space-5) 0 0;
}

.page-fractional-data-team .fdt-comparison-card dl > div {
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-fractional-data-team .fdt-comparison-card dt {
  margin-bottom: var(--space-2);
  color: var(--vl-lime);
  font-size: 12px;
  font-weight: 700;
}

.page-fractional-data-team .fdt-comparison-card dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.6;
}

.page-fractional-data-team .fdt-proof-note {
  max-width: 880px;
  margin: var(--space-7) auto 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(163, 199, 76, 0.32);
  border-radius: var(--r-lg);
  background: rgba(163, 199, 76, 0.06);
}

.page-fractional-data-team .fdt-proof-note p:last-child {
  margin-bottom: 0;
}

.page-fractional-data-team .fdt-proof-note a {
  color: var(--vl-lime);
}

.page-fractional-data-team .fdt-two-column {
  align-items: start;
}

.page-fractional-data-team .fdt-body-stack {
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-process-list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-fractional-data-team .fdt-process-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  background: var(--vl-white);
}

.page-fractional-data-team .fdt-process-list__visual {
  position: relative;
  align-self: start;
  width: 58px;
  height: 64px;
  padding-bottom: 8px;
}

.page-fractional-data-team .fdt-process-list__visual .fdt-visual-icon {
  width: 56px;
  height: 56px;
}

.page-fractional-data-team .fdt-process-list__number {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--vl-white);
  border-radius: 50%;
  color: var(--vl-gunmetal);
  background: var(--vl-lime);
  font-size: 11px;
  font-weight: 800;
}

.page-fractional-data-team .fdt-process-list h3 {
  margin-bottom: var(--space-3);
  font-size: 22px;
}

.page-fractional-data-team .fdt-process-list p {
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.page-fractional-data-team .fdt-proof-card {
  min-width: 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(0, 102, 92, 0.16);
  border-radius: var(--r-lg);
  background: var(--vl-white);
  box-shadow: var(--shadow-card);
}

.page-fractional-data-team .fdt-proof-card p {
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-quote {
  max-width: 760px;
  margin: var(--space-8) auto var(--space-5);
  padding: 0;
  border: 0;
  text-align: center;
}

.page-fractional-data-team .fdt-quote p {
  margin: 0 0 var(--space-4);
  color: var(--vl-teal);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.page-fractional-data-team .fdt-quote footer {
  color: var(--vl-gray-600);
  font-size: 14px;
  font-weight: 600;
}

.page-fractional-data-team .fdt-text-link {
  margin: 0;
  text-align: center;
}

.page-fractional-data-team .fdt-mid-cta {
  padding-block: clamp(48px, 7vw, 80px);
  color: rgba(255, 255, 255, 0.82);
  background: var(--vl-teal);
}

.page-fractional-data-team .fdt-mid-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.page-fractional-data-team .fdt-mid-cta h2 {
  max-width: 22ch;
  color: var(--vl-white);
}

.page-fractional-data-team .fdt-mid-cta p {
  max-width: 64ch;
  margin: 0;
}

.page-fractional-data-team .fdt-mid-cta .btn {
  width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

.page-fractional-data-team .fdt-fit-card {
  min-width: 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-lg);
  background: var(--vl-mint-50);
}

.page-fractional-data-team .fdt-fit-card--muted {
  background: var(--vl-isabeline);
}

.page-fractional-data-team .fdt-fit-card p {
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-pricing {
  align-items: start;
}

.page-fractional-data-team .fdt-pricing__card {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(0, 102, 92, 0.18);
  border-radius: var(--r-lg);
  background: var(--vl-white);
  box-shadow: var(--shadow-card);
}

.page-fractional-data-team .fdt-pricing__amount {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--vl-gray-300);
  color: var(--vl-teal);
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.35;
}

.page-fractional-data-team .fdt-faq {
  margin-top: var(--space-7);
  border-top: 1px solid var(--vl-gray-300);
}

.page-fractional-data-team .fdt-faq__item {
  border-bottom: 1px solid var(--vl-gray-300);
}

.page-fractional-data-team .fdt-faq__item summary {
  position: relative;
  display: block;
  padding: var(--space-5) 46px var(--space-5) 0;
  color: var(--vl-gunmetal);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

.page-fractional-data-team .fdt-faq__item summary::-webkit-details-marker {
  display: none;
}

.page-fractional-data-team .fdt-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--vl-teal);
  background: var(--vl-teal-100, #dcf1e8);
  font-size: 22px;
  font-weight: 500;
  transform: translateY(-50%);
}

.page-fractional-data-team .fdt-faq__item[open] summary::after {
  content: "−";
}

.page-fractional-data-team .fdt-faq__item > div {
  padding: 0 46px var(--space-5) 0;
  color: var(--vl-gray-600);
}

.page-fractional-data-team .fdt-apply-grid {
  align-items: start;
}

.page-fractional-data-team .fdt-apply-copy > p {
  max-width: 62ch;
}

.page-fractional-data-team .fdt-apply-steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  counter-reset: apply-step;
}

.page-fractional-data-team .fdt-apply-steps li {
  position: relative;
  padding-left: 54px;
  counter-increment: apply-step;
}

.page-fractional-data-team .fdt-apply-steps li::before {
  content: counter(apply-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(163, 199, 76, 0.64);
  border-radius: 50%;
  color: var(--vl-gunmetal);
  background: var(--vl-lime);
  font-size: 14px;
  font-weight: 800;
}

.page-fractional-data-team .fdt-apply-steps strong {
  display: block;
  color: var(--vl-white);
}

.page-fractional-data-team .fdt-form-card {
  min-width: 0;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  color: var(--vl-gray-600);
  background: var(--vl-white);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
}

.page-fractional-data-team .fdt-form-card h3 {
  margin-bottom: var(--space-3);
  color: var(--vl-gunmetal);
}

.page-fractional-data-team .fdt-form-card > p {
  margin-bottom: var(--space-5);
}

.page-fractional-data-team .fdt-form-frame {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
}

.page-fractional-data-team .fdt-form-frame iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.page-fractional-data-team .fdt-form-missing {
  padding: var(--space-5);
  border: 2px dashed #b45309;
  border-radius: var(--r-md);
  color: #7c2d12;
  background: #fff7ed;
}

.page-fractional-data-team .fdt-form-missing strong {
  display: block;
  margin-bottom: var(--space-2);
}

.page-fractional-data-team .fdt-form-missing p {
  margin: 0;
  color: inherit;
}

.page-fractional-data-team :where(a, button, summary):focus-visible {
  outline: 3px solid var(--vl-lime);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-fractional-data-team :where(p, li, dd, figcaption, a) {
  overflow-wrap: break-word;
}

@media (min-width: 620px) {
  .page-fractional-data-team .fdt-hero__actions {
    flex-direction: row;
    align-items: center;
    max-width: none;
  }

  .page-fractional-data-team .fdt-hero__actions .btn {
    width: auto;
  }

  .page-fractional-data-team .fdt-layer-grid,
  .page-fractional-data-team .fdt-comparison-grid,
  .page-fractional-data-team .fdt-proof-grid,
  .page-fractional-data-team .fdt-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-fractional-data-team .fdt-symptom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-fractional-data-team .fdt-system {
    grid-template-columns: minmax(0, 1fr) auto minmax(260px, 1.1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .page-fractional-data-team .fdt-system__connector {
    transform: none;
  }

  .page-fractional-data-team .fdt-scope-grid,
  .page-fractional-data-team .fdt-two-column,
  .page-fractional-data-team .fdt-pricing,
  .page-fractional-data-team .fdt-apply-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 6vw, 72px);
  }

  .page-fractional-data-team .fdt-mid-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-fractional-data-team .fdt-mid-cta .btn {
    width: auto;
    max-width: 310px;
  }
}

@media (min-width: 960px) {
  .page-fractional-data-team .fdt-hero__layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
    gap: clamp(44px, 5vw, 72px);
  }

  .page-fractional-data-team .fdt-hero__copy {
    text-align: left;
  }

  .page-fractional-data-team .fdt-breadcrumb {
    margin-inline: 0;
  }

  .page-fractional-data-team .fdt-breadcrumb ol {
    justify-content: flex-start;
  }

  .page-fractional-data-team .fdt-hero h1,
  .page-fractional-data-team .fdt-hero__lede,
  .page-fractional-data-team .fdt-hero__actions {
    margin-inline: 0;
  }

  .page-fractional-data-team .fdt-hero h1 {
    max-width: 15ch;
  }

  .page-fractional-data-team .fdt-hero__lede {
    max-width: 61ch;
  }

  .page-fractional-data-team .fdt-hero__actions {
    justify-content: flex-start;
  }

  .page-fractional-data-team .fdt-hero-visual {
    width: min(100%, 460px);
  }

  .page-fractional-data-team .fdt-hero-orbit__node {
    min-height: 40px;
    padding: 7px 11px;
    font-size: 11px;
  }

  .page-fractional-data-team .fdt-hero-orbit__node svg {
    width: 19px;
    height: 19px;
  }

  .page-fractional-data-team .fdt-layer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-fractional-data-team .fdt-layer-card {
    grid-column: span 2;
  }

  .page-fractional-data-team .fdt-layer-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .page-fractional-data-team .fdt-layer-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .page-fractional-data-team .fdt-process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-fractional-data-team .fdt-process-list > li {
    display: block;
  }

  .page-fractional-data-team .fdt-process-list__visual {
    margin-bottom: var(--space-5);
  }
}

@media (min-width: 1100px) {
  .page-fractional-data-team .fdt-comparison-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 419px) {
  .page-fractional-data-team .fdt-hero h1 {
    font-size: clamp(34px, 10.5vw, 43px);
  }

  .page-fractional-data-team .fdt-proof-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .page-fractional-data-team .fdt-proof-strip li {
    justify-content: center;
    white-space: normal;
  }

  .page-fractional-data-team .fdt-form-card {
    padding-inline: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-fractional-data-team,
  .page-fractional-data-team * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── /services index ──────────────────────────────────────────────────────
   Reuses .pkg-grid and .pkg-card so the services row reads as the same object
   as the package row. Two things have to be undone: the 900px subgrid rule
   assumes a card with six specific children including an empty badge slot, and
   these cards are whole-card links rather than static panels. */
.pkg-grid--services {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.svc-card {
  text-decoration: none;
  color: inherit;
  border-top-color: var(--vl-olive);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (min-width: 900px) {
  /* Out of the packages subgrid: these cards do not share its row structure. */
  .pkg-grid--services .svc-card {
    grid-row: auto;
    display: flex;
  }
}

.svc-card:hover,
.svc-card:focus-visible {
  transform: translateY(-2px);
  border-top-color: var(--vl-lime);
  box-shadow: 0 8px 24px rgba(38, 49, 59, .1);
}

.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--r-sm);
  background: var(--vl-cool-off);
  color: var(--vl-olive);
}

.svc-card__summary {
  margin: 0 0 var(--space-5);
  font-size: 15px;
  line-height: 1.65;
  color: var(--vl-gray-600);
}

/* Pushed to the bottom so cards of different heights still line their CTA up. */
.svc-card__more {
  margin-top: auto;
  font-weight: 600;
  font-size: 15px;
  color: var(--vl-olive);
}

.svc-card:hover .svc-card__more {
  text-decoration: underline;
}

/* ── /services academy band ───────────────────────────────────────────────
   Ported from the WordPress page this URL replaced: two collection CTAs and
   the workshop grid. Posters are still served by WordPress from /wp-content/. */
.section--academy {
  background: var(--vl-white);
  border-bottom: 1px solid var(--vl-gray-300);
}

.svc-collections {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

@media (min-width: 800px) {
  .svc-collections { grid-template-columns: 1fr 1fr; }
}

.svc-collection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  background: var(--vl-cool-off);
}

.svc-collection__copy { flex: 1; }

.svc-collection__name {
  margin: 0 0 var(--space-3);
  font-size: 19px;
}

.svc-collection__blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

/* Two up, not auto-fill: four posters land as a clean 2x2 instead of 3 + 1
   orphan, and a 16:9 still is legible at half the container. */
.svc-workshops {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

@media (min-width: 700px) {
  .svc-workshops { grid-template-columns: 1fr 1fr; }
}

.svc-workshop {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vl-gray-300);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-white);
}

.svc-workshop__poster { display: block; }

.svc-workshop__poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 538;
  object-fit: cover;
  border-bottom: 1px solid var(--vl-gray-300);
}

.svc-workshop__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.svc-workshop__title {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  line-height: 1.35;
}

.svc-workshop__title a {
  color: inherit;
  text-decoration: none;
}

.svc-workshop__title a:hover { text-decoration: underline; }

.svc-workshop__excerpt {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 1.6;
  color: var(--vl-gray-600);
}

/* Bottom-aligned so cards with different excerpt lengths still line up. */
.svc-workshop__guest {
  margin: auto 0 0;
  font-size: 14px;
  color: var(--vl-gray-600);
}

.svc-workshop__guest a {
  color: var(--vl-olive);
  font-weight: 600;
}