/* =========================================================
   JLS Sales Academy — jlssa.signalwealth.ai
   Fonts: Open Sans + Fira Sans | Brand blues from jlssa.com
   ========================================================= */

:root {
  --navy-950: #0f1621;
  --navy-900: #161e2a;
  --navy-800: #1c2a3d;
  --navy-700: #203668;
  --blue-700: #2c557f;
  --blue-600: #2980b9;
  --blue-500: #0072ef;
  --blue-400: #2e91fc;
  --slate-700: #2c3e50;
  --slate-500: #595959;
  --slate-400: #888888;
  --slate-200: #ecf0f1;
  --slate-100: #f4f6f8;
  --white: #ffffff;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fira Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --max: 1140px;
  --gutter: 1.25rem;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 14px 40px rgba(15, 22, 33, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 22, 33, 0.18);
  --header-h: 60px;           /* the bar itself */
  --header-h-min: 46px;
  --header-pad: 0.55rem;      /* breathing room around the bar */
  --header-outer: calc(var(--header-h) + var(--header-pad) * 2);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--slate-700);
  background: var(--slate-100);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
body.page-enter { opacity: 1; transform: none; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, .btn, .nav-cta, .brand-text strong, .kicker, .eyebrow {
  font-family: var(--font-display);
}
h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(1.85rem, 1rem + 3.2vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 0.95rem + 2.2vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* The injection target must not become the sticky containing block: it is
   only as tall as the header itself, which left `position: sticky` with zero
   travel and scrolled the nav off the page. `display: contents` drops the
   wrapper from layout so the header sticks against the viewport instead. */
#site-header { display: contents; }

/* Header / nav — collapses smoothly on scroll */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The bar is the inner element, not this — so the nav reads as a contained
     object floating on the film rather than a full-bleed band across it. */
  background: transparent;
  padding: var(--header-pad) 0;
  overflow: visible;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 0.75rem;
  flex-wrap: nowrap;
  /* the contained bar */
  background: rgba(15, 22, 33, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(126, 196, 255, 0.28);
  border-radius: 999px;
  padding-inline: 1.15rem;
  /* never let it squeeze narrower than the nav can survive */
  min-width: min(100%, 320px);
  box-shadow:
    0 1px 0 rgba(126, 196, 255, 0.14),
    0 10px 26px -10px rgba(46, 145, 252, 0.42),
    0 18px 40px -22px rgba(6, 10, 18, 0.7);
  transition: min-height 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-condensed .header-inner {
  min-height: var(--header-h-min);
  background: rgba(12, 18, 28, 0.95);
  backdrop-filter: blur(18px) saturate(1.2);
  border-color: rgba(126, 196, 255, 0.46);
  box-shadow:
    0 1px 0 rgba(126, 196, 255, 0.2),
    0 12px 30px -10px rgba(46, 145, 252, 0.5),
    0 20px 44px -20px rgba(6, 10, 18, 0.75);
}

.brand {
  display: flex; align-items: center; gap: 0.7rem; color: var(--white);
  transition: gap 0.4s var(--ease);
}
.brand-mark {
  width: 36px; height: auto; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 114, 239, 0.25);
  transition: width 0.4s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.4s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); }
.site-header.is-condensed .brand-mark {
  width: 28px;
  box-shadow: 0 3px 10px rgba(0, 114, 239, 0.35);
}
.site-header.is-condensed .brand { gap: 0.55rem; }

.brand-text {
  display: flex; flex-direction: column; line-height: 1.1;
  transition: transform 0.4s var(--ease);
}
.brand-text strong {
  font-size: 1rem; letter-spacing: 0.04em;
  transition: font-size 0.4s var(--ease);
}
.site-header.is-condensed .brand-text strong { font-size: 0.92rem; }
/* the descriptor line folds away as the header condenses */
.brand-text span {
  font-size: 0.66rem; color: rgba(255,255,255,0.65);
  text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body);
  max-height: 1.4em; opacity: 1; overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.site-header.is-condensed .brand-text span { max-height: 0; opacity: 0; }
.site-nav {
  display: flex; align-items: center; gap: 0.1rem 0.85rem;
  flex-wrap: nowrap; flex: 1;
  /* items ride the whole bar evenly rather than bunching against the right
     edge — the gap stays as a floor so they never touch as the header
     condenses and the type shrinks */
  justify-content: space-evenly;
}
.site-nav a.nav-link, .nav-parent {
  color: rgba(255,255,255,0.82);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.55rem 0.15rem; white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: font-size 0.4s var(--ease), color 0.2s;
}
.site-header.is-condensed .site-nav a.nav-link,
.site-header.is-condensed .nav-parent { font-size: 0.74rem; }
.site-header.is-condensed .nav-cta { padding: 0.45rem 0.85rem !important; }
.site-nav a.nav-link:hover, .nav-parent:hover, .nav-item.open .nav-parent { color: #fff; }
.nav-parent i { font-size: 0.6rem; opacity: 0.7; transition: transform 0.2s; }
.nav-item:hover .nav-parent i, .nav-item.open .nav-parent i { transform: rotate(180deg); }
.nav-item { position: relative; flex-shrink: 0; }
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); min-width: 250px; background: #fff;
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.45rem; z-index: 80;
  border: 1px solid rgba(15,22,33,0.08);
}
.nav-item:hover > .dropdown, .nav-item.open > .dropdown {
  display: block; animation: dropIn 0.18s var(--ease);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dropdown-link {
  display: block; padding: 0.65rem 0.85rem; border-radius: 8px;
  color: var(--navy-800) !important; font-size: 0.88rem !important;
  font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.dropdown-link:hover, .dropdown-link.is-active {
  background: rgba(0,114,239,0.08); color: var(--blue-500) !important;
}
.nav-cta {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400)) !important;
  color: #fff !important; padding: 0.55rem 1rem !important; border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(0,114,239,0.35);
}
.nav-link.is-active { color: #fff; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; background: transparent; padding: 10px;
  flex-direction: column; justify-content: space-between; cursor: pointer;
}
/* explicit width — relying on flex stretch left these bars at 0px wide */
.nav-toggle span {
  display: block; width: 100%; height: 2px;
  background: #fff; border-radius: 2px; flex: 0 0 2px;
}

/* =========================================================
   Hero — looping film, scroll-driven panels.
   The stage is tall; the panel inside sticks. Scroll progress
   through the stage drives video.currentTime, so the footage
   advances on scroll down and rewinds on scroll up.
   ========================================================= */
.hero-stage {
  position: relative;
  height: 320vh;              /* runway — two panels need dwell time each */
  /* Slide up under the (translucent, blurred) nav so the sticky panel is flush
     with the viewport from scroll 0. Without this the panel starts one header
     lower and the press strip on its bottom edge sits below the fold. */
  margin-top: calc(-1 * var(--header-outer));
  background: var(--navy-950);
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  /* single cell: both hero panels occupy it and cross-fade in place */
  display: grid;
  grid-template: 1fr / 1fr;
  align-items: center;
  /* clear the nav above and the press strip below, so the panels centre in
     what is actually visible; both release as the strip collapses */
  padding-top: var(--header-outer);
  padding-bottom: calc(var(--press-h, 116px) * (1 - var(--press-collapse, 0)));
  color: #fff;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
  transform: scale(1.06);
  will-change: transform;
}
/* Legibility, weighted left where the copy sits. Tuned against the golden-hour
   aerial: heavy enough to hold white type over lit rooftops, light enough on
   the right that the warm low sun still reads as warm rather than grey. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(8, 13, 22, 0.82) 0%,
      rgba(10, 16, 27, 0.66) 42%,
      rgba(12, 20, 34, 0.34) 72%,
      rgba(14, 22, 34, 0.18) 100%),
    linear-gradient(180deg,
      rgba(8, 13, 22, 0.5) 0%,
      rgba(8, 13, 22, 0.04) 30%,
      rgba(8, 13, 22, 0.06) 62%,
      rgba(8, 13, 22, 0.66) 100%);
}
/* faint engineered grid — ties the hero to the "system" idea */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(126, 196, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 196, 255, 0.07) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(120% 90% at 20% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 50%, #000 20%, transparent 75%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  /* padding-block only — the shorthand would wipe .container's inline gutter
     and push the type flush against the screen edge on phones */
  padding-block: 0;
}
/* Panel A runs the full container width, edge to edge — no measure cap.
   The headline sets its own breaks off the type scale. */
.hero-panel-a h1,
.hero-panel-a .hero-sub,
.hero-panel-a .hero-actions { max-width: none; }
/* the copy is wide now, so give the two lines a touch more air */
.hero-panel-a .hero-sub { line-height: 1.6; }

/* =========================================================
   Hero panel sequence
   Both panels are stacked in the same sticky frame and moved
   by --hero-shift (-1 → offscreen left, 0 → resting,
   1 → offscreen right), which site.js drives off scroll
   progress. Opacity is a separate var so a panel can be
   sliding and fading on different curves.
   ========================================================= */
.hero-panel {
  grid-area: 1 / 1;
  transition: none;                       /* position is scroll-driven, not timed */
  will-change: transform, opacity;
}
.hero-panel-a {
  transform: translate3d(calc(var(--a-shift, 0) * 12vw), 0, 0);
  opacity: var(--a-fade, 1);
  pointer-events: var(--a-events, auto);
}
.hero-panel-b {
  transform: translate3d(calc(var(--b-shift, -1) * 12vw), 0, 0);
  opacity: var(--b-fade, 0);
  pointer-events: var(--b-events, none);
}

.hero-b-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.hero-b-copy h2 {
  color: #fff; margin-bottom: 1.05rem; letter-spacing: -0.02em;
  /* capped so "Every household is a deck." holds one line in this column */
  font-size: clamp(1.4rem, 0.6rem + 1.85vw, 2rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.hero-b-copy .hero-sub { margin-bottom: 1.3rem; font-size: 1rem; }

/* the one number, stated plainly */
.hero-metric {
  /* stacked, not inline: the number and its label then share the same left
     edge as the eyebrow, headline and body above them */
  display: block;
  margin: 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(126, 196, 255, 0.28);
}
.hero-metric strong {
  font-family: var(--font-display); font-weight: 700; color: #7ec4ff;
  font-size: clamp(1.9rem, 1rem + 2.1vw, 2.75rem); line-height: 1;
  letter-spacing: -0.02em; display: block; margin-bottom: 0.25rem;
  text-shadow: 0 2px 24px rgba(0, 80, 170, 0.55);
}
.hero-metric span {
  display: block;
  color: rgba(255, 255, 255, 0.76); font-size: 0.95rem; max-width: 34ch;
}

/* Board runs the full column width along the top so the cards actually read,
   with the AI answer overlapping its lower half. Both sit flush to the
   column's left edge and the board sets the right — no ragged edge between
   them. The modal stays the in-flow element so it sets the block height;
   sizing off the board instead made it overflow upward into the nav. */
.hero-b-shot { position: relative; }
.hero-shot-board {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 56px rgba(4, 8, 16, 0.58);
  /* the crop ends mid-card; fade it out rather than showing a hard cut */
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
.hero-shot-modal {
  position: relative; z-index: 1;
  display: block; width: 82%; margin-top: 24%; height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 68px rgba(4, 8, 16, 0.8);
  /* arrives a beat after the board so the answer reads as a response */
  transform: translate3d(0, calc((1 - var(--b-modal-fade, 0)) * 26px), 0);
  opacity: var(--b-modal-fade, 0);
}

/* "reveal more" arrow — fades in once panel B has settled */
.hero-more {
  position: absolute; z-index: 3; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  opacity: var(--more-fade, 0);
  pointer-events: var(--more-events, none);
}
.hero-more i { font-size: 0.8rem; animation: cueBob 2.1s ease-in-out infinite; }
.hero-more:hover { color: #fff; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 1; }
}
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
  margin-bottom: 1rem; padding: 0.4rem 0.75rem; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; background: rgba(255,255,255,0.05);
}
.hero-sticky h1 {
  color: #fff; margin-bottom: 1.15rem; letter-spacing: -0.02em;
  font-size: clamp(2rem, 1rem + 3.6vw, 3.5rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.hero-accent {
  display: block; margin-top: 0.3rem; color: #7ec4ff;
  text-shadow: 0 2px 26px rgba(0, 80, 170, 0.5);
}
.hero-sub {
  color: rgba(255,255,255,0.84); font-size: 1.08rem; margin-bottom: 1.9rem;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero-sticky .reveal, .page-hero .reveal { opacity: 1; transform: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.02em; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400)); color: #fff;
  box-shadow: 0 10px 28px rgba(0,114,239,0.35); position: relative;
}
.btn-primary:hover { box-shadow: 0 14px 34px rgba(0,114,239,0.45); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.btn-light { background: #fff; color: var(--navy-900); box-shadow: var(--shadow); }
.btn-dark {
  background: var(--navy-800); color: #fff; border-radius: 10px;
  padding: 0.75rem 1.1rem; font-size: 0.88rem;
}
.btn-dark:hover { background: var(--blue-700); }

/* As seen on */
/* Press band. Rides directly under the nav — site.js publishes the live header
   height because the header condenses — then empties and collapses on scroll,
   timed against the hero panel handoff so the two read as one movement.
   Collapsing height (not just opacity) is what lets the hero rise into the
   space it vacates. */
.as-seen {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: #fff;
  padding: calc(1.35rem * (1 - var(--press-collapse, 0))) 0
           calc(1.45rem * (1 - var(--press-collapse, 0)));
  max-height: calc(var(--press-h, 108px) * (1 - var(--press-collapse, 0)));
  overflow: hidden;
  /* White meeting the dark film head-on is a hard seam. A brand-blue hairline
     with a little bloom above it carries the eye across the change instead —
     the glow points up because the film is what sits on that side. */
  border-top: 1px solid rgba(126, 196, 255, 0.5);
  box-shadow:
    0 -1px 0 rgba(126, 196, 255, 0.28),
    0 -6px 16px -4px rgba(46, 145, 252, 0.42),
    0 -16px 38px -18px rgba(46, 145, 252, 0.55);
}
/* The strip itself stays opaque and closes like a shutter; only its contents
   travel off to the left and fade, so the collapse is actually visible. */
.as-seen .as-seen-inner {
  transform: translate3d(calc(var(--press-shift, 0) * -62%), 0, 0);
  opacity: var(--press-fade, 1);
  will-change: transform, opacity;
}
.as-seen .container, .as-seen .as-seen-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 1.75rem 3rem;
}
.as-seen-label {
  color: var(--slate-400); font-size: 0.95rem; font-weight: 600;
  font-style: italic; white-space: nowrap;
}
.as-seen-logos {
  display: flex;
  align-items: center; /* vertical center-align all marks */
  flex-wrap: nowrap;
  gap: 2rem 3.4rem;
  justify-content: center;
  /* shared optical center line for mixed aspect logos */
  min-height: 78px;
}
.press-logo {
  display: block;
  height: 58px;
  width: auto;
  max-width: 275px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.2s var(--ease);
}
.press-logo:hover { transform: translateY(-2px) scale(1.03); }
/* Per-mark heights, each +10% vs previous, still vertically centered in the row */
.press-nbc { height: 53px; max-width: 315px; }
.press-newsnet { height: 63px; max-width: 121px; }
.press-cbs { height: 48px; max-width: 242px; }
.press-fox { height: 68px; max-width: 109px; }
.press-bn {
  height: 70px;
  max-width: 182px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Sections */
.section { padding: 4.75rem 0; }
/* Heads run the full column width, left-aligned — no narrow centred blocks. */
.section-head,
.section-head-left,
.section-head-right {
  text-align: left; max-width: none; width: 100%;
  margin: 0 0 2.75rem;
}
.section-head.tight { margin-bottom: 1.5rem; }
.section-head .lede,
.section-head-left .lede,
.section-head-right .lede { max-width: 46rem; width: 100%; }
/* Big statement heads get room to breathe but stay left */
.section-head-left h2 { max-width: 30ch; }
.kicker {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-500); margin: 0 0 0.65rem;
}
.kicker.light { color: #8ec5ff; }
.lede { color: var(--slate-500); font-size: 1.05rem; margin: 0; }

/* Why + video cards */
.why { background: var(--slate-100); }
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.card {
  background: #fff; border-radius: var(--radius); padding: 1.6rem 1.45rem 1.4rem;
  box-shadow: var(--shadow); border: 1px solid rgba(15,22,33,0.04);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
  display: flex; flex-direction: column; min-height: 100%;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.video-card {
  min-height: 280px; padding: 0; color: #fff; isolation: isolate;
  opacity: 1; transform: none;
  animation: cardIn 0.55s var(--ease) both;
}
.video-card-grid .video-card:nth-child(1) { animation-delay: 0.05s; }
.video-card-grid .video-card:nth-child(2) { animation-delay: 0.1s; }
.video-card-grid .video-card:nth-child(3) { animation-delay: 0.15s; }
.video-card-grid .video-card:nth-child(4) { animation-delay: 0.2s; }
.video-card-grid .video-card:nth-child(5) { animation-delay: 0.25s; }
.video-card-grid .video-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.video-card .card-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; background: #0f1621;
}
.video-card .card-video {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.04);
  filter: saturate(1.05) brightness(0.95);
  transition: filter 0.45s var(--ease), transform 0.6s var(--ease);
}
.video-card .card-media-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,20,0.25) 0%, rgba(8,12,20,0.35) 40%, rgba(8,12,20,0.55) 100%);
}
.video-card.is-active .card-video,
.video-card.is-hover .card-video {
  filter: saturate(1.12) brightness(1.05); transform: scale(1.08);
}
.video-card.is-active .card-media-scrim,
.video-card.is-hover .card-media-scrim {
  background: linear-gradient(180deg, rgba(8,12,20,0.18) 0%, rgba(8,12,20,0.28) 40%, rgba(8,12,20,0.48) 100%);
}
.video-card.is-active, .video-card.is-hover {
  border-color: rgba(46,145,252,0.55);
  box-shadow: 0 18px 48px rgba(0,114,239,0.28);
}
.video-card .card-body {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  flex: 1; min-height: 280px; padding: 1.45rem 1.35rem 1.25rem;
}
.card-title-row {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.65rem;
}
.card-title-row h3 { margin: 0; flex: 1; line-height: 1.2; }
.video-card h3, .video-card .card-title-row h3 {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.75), 0 0 1px #000;
}
.video-card p, .video-card .card-body p {
  color: #fff !important; flex: 1; font-size: 0.98rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.7), 0 0 1px #000;
}
.video-card .card-link {
  color: #fff !important; margin-top: auto; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem;
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: none; color: #7ec4ff; font-size: 1.35rem; line-height: 1;
}
.card-icon.glow, .video-card .card-icon {
  color: #fff;
  filter: drop-shadow(0 0 4px rgba(46,145,252,0.85)) drop-shadow(0 0 12px rgba(0,114,239,0.55));
  animation: iconGlow 2.8s ease-in-out infinite alternate;
}
@keyframes iconGlow {
  from { filter: drop-shadow(0 0 3px rgba(46,145,252,0.55)) drop-shadow(0 0 8px rgba(0,114,239,0.35)); }
  to { filter: drop-shadow(0 0 6px rgba(126,196,255,0.9)) drop-shadow(0 0 16px rgba(46,145,252,0.65)); }
}
.card-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--blue-500); font-weight: 700; font-size: 0.92rem; margin-top: 0.5rem;
}
.card-link i { font-size: 0.75rem; transition: transform 0.2s; }
.card:hover .card-link i { transform: translateX(3px); }

/* Events */
.events {
  position: relative; color: #fff; padding: 3.5rem 0;
  background:
    linear-gradient(120deg, rgba(15,22,33,0.88), rgba(32,54,104,0.88)),
    url("/images/section-bg.jpg") center / cover no-repeat;
}
.events h2 { color: #fff; }
.events p { color: rgba(255,255,255,0.82); margin-bottom: 0; }
.events-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

/* Checkmate */
.checkmate {
  position: relative; isolation: isolate; overflow: hidden;
  /* stays as the base layer: it is what shows before the film loads, on
     phones, and for reduced-motion */
  background: linear-gradient(135deg, var(--blue-600), var(--navy-700)); color: #fff;
}
.checkmate-media { position: absolute; inset: 0; z-index: 0; }
.checkmate .section-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the board should read as a board — translucent, but not a rumour */
  opacity: 0.55;
}
.checkmate-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Weighted left, where the copy sits: heavy enough there to hold white
     type, and thin on the right so the board stays legible under the cover. */
  background: linear-gradient(115deg,
    rgba(10, 40, 92, 0.78) 0%,
    rgba(12, 32, 70, 0.5) 45%,
    rgba(8, 20, 44, 0.4) 100%);
}
.checkmate h2 { color: #fff; }
.checkmate-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; align-items: center;
}
.checkmate .lead { font-size: 1.1rem; color: rgba(255,255,255,0.92); }
.checkmate p { color: rgba(255,255,255,0.86); }
.checkmate blockquote {
  margin: 1.5rem 0 1.75rem; padding: 1rem 1.25rem;
  border-left: 3px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.15); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: #fff;
}
.checkmate cite {
  display: block; margin-top: 0.55rem; font-style: normal; font-weight: 700;
  font-size: 0.9rem; opacity: 0.9;
}
.checkmate-cover img {
  border-radius: 12px; box-shadow: var(--shadow-lg);
  margin-inline: auto; max-width: 320px;
}

/* Programs split */
.programs { background: #fff; }
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.feature-list {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem;
}
/* Hanging indent, not flex/grid: the <i>, <strong> and the trailing text are
   separate siblings, so any container layout would break them onto their own
   tracks. Inline flow keeps the sentence together and wraps normally. */
.feature-list li {
  display: block;
  padding-left: 1.85rem;
  text-indent: -1.85rem;
  font-weight: 400; color: var(--slate-700); line-height: 1.55;
}
.feature-list li strong { color: var(--navy-900); font-weight: 700; }
.feature-list i {
  display: inline-block; width: 1.15rem; margin-right: 0.6rem;
  text-indent: 0; color: var(--blue-500); text-align: center;
}

/* Podcast */
.podcast { background: var(--slate-100); padding: 3.25rem 0; }
.podcast-links {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
}

/* Final CTA */
.final-cta {
  background: linear-gradient(135deg, var(--navy-800), var(--blue-700)); color: #fff;
}
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.86); }
.final-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: center;
}
.final-media img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  background: #fff; padding: 0.5rem;
}
/* block, not flex — otherwise trailing punctuation becomes its own flex item */
.open-365 {
  display: block;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 1.25rem 0 1.5rem;
}
.open-365 i { margin-right: 0.55rem; color: #8ec5ff; }

/* Footer */
.site-footer {
  background: var(--navy-950); color: rgba(255,255,255,0.72);
  padding: 2rem 0 1.5rem; font-size: 0.9rem;
}
/* brand and links share one row; copy line sits underneath */
.footer-inner { display: grid; gap: 1.1rem; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.footer-brand img { width: 36px; border-radius: 6px; }
.footer-brand strong {
  display: block; color: #fff; font-family: var(--font-display);
}
.footer-brand span { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.35rem;
  justify-content: flex-end; flex: 1; min-width: 260px;
}
.footer-links a {
  font-size: 0.86rem; font-weight: 600;
  transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }
.footer-copy {
  margin: 0; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 3.5rem 0 3rem;
  background:
    linear-gradient(115deg, rgba(15,22,33,0.92) 0%, rgba(32,54,104,0.88) 55%, rgba(0,114,239,0.55) 100%),
    url("/images/background.jpg") center / cover no-repeat;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 0.65rem; max-width: none; }
.page-hero .lede { color: rgba(255,255,255,0.85); max-width: 40rem; margin: 0; }
.page-hero .breadcrumb, .page-hero .breadcrumb a, .page-hero .breadcrumb span {
  color: rgba(255,255,255,0.78);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  font-size: 0.82rem; margin-bottom: 1rem;
}
.breadcrumb i { font-size: 0.6rem; opacity: 0.6; }

/* Content pages */
.content-section { padding: 3.5rem 0; background: #fff; }
.content-section.alt { background: var(--slate-100); }
.content-section.dark {
  background: linear-gradient(135deg, var(--navy-800), var(--blue-700)); color: #fff;
}
.content-section.dark h2, .content-section.dark h3 { color: #fff; }
.prose { max-width: 720px; }
.prose p { color: var(--slate-500); font-size: 1.05rem; }
.prose.wide { max-width: 860px; }
.stack-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.stack-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: #fff; border: 1px solid rgba(15,22,33,0.06); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.stack-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stack-num {
  width: 42px; min-width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  box-shadow: 0 8px 18px rgba(0,114,239,0.3);
}
.stack-item h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.stack-item p { margin: 0; color: var(--slate-500); font-size: 0.95rem; }
.program-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem;
}
.program-card {
  background: #fff; border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid rgba(15,22,33,0.06); box-shadow: var(--shadow);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.program-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.program-card h3 { margin-bottom: 0.5rem; }
.program-card p { color: var(--slate-500); flex: 1; font-size: 0.95rem; }
.price-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  color: var(--navy-900); margin: 0.75rem 0;
}
.price-tag small {
  font-size: 0.75rem; color: var(--slate-400); font-weight: 600; display: block; margin-top: 0.15rem;
}
.two-col {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center;
}
.two-col.flip > :first-child { order: 2; }
.media-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--slate-100);
}
.bullet-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1.25rem;
  margin: 1.25rem 0; padding: 0; list-style: none;
}
.bullet-grid li {
  display: flex; gap: 0.55rem; align-items: flex-start;
  color: var(--slate-700); font-weight: 600; font-size: 0.95rem;
}
.bullet-grid li i { color: var(--blue-500); margin-top: 0.2rem; }
.form-card {
  background: #fff; border-radius: var(--radius); padding: 1.75rem;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(15,22,33,0.06);
}
.form-grid { display: grid; gap: 0.9rem; }
.form-grid label {
  display: grid; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--navy-800);
}
.form-grid input, .form-grid select, .form-grid textarea {
  font: inherit; padding: 0.75rem 0.9rem; border-radius: 10px;
  border: 1px solid rgba(15,22,33,0.12); background: var(--slate-100);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46,145,252,0.2); background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.contact-points { display: grid; gap: 1rem; margin-top: 1.5rem; }
.contact-point { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-point i {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(0,114,239,0.1); color: var(--blue-500);
}
.contact-point strong { display: block; font-family: var(--font-display); color: var(--navy-900); }
.contact-point span { color: var(--slate-500); font-size: 0.92rem; }
.cta-band {
  padding: 3.25rem 0; background: linear-gradient(135deg, var(--blue-600), var(--navy-700));
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 0.75rem; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 36rem; margin: 0 auto 1.35rem; }
.trainer-hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center;
}
.trainer-avatar {
  width: 200px; height: 200px; border-radius: 24px;
  background: linear-gradient(135deg, var(--blue-500), var(--navy-700));
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  box-shadow: var(--shadow-lg);
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.gallery-tile {
  border-radius: var(--radius); min-height: 160px; padding: 1.25rem;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(160deg, var(--blue-700), var(--navy-900));
  box-shadow: var(--shadow); transition: transform 0.25s var(--ease);
}
.gallery-tile:hover { transform: translateY(-4px) scale(1.01); }
.gallery-tile h3 { color: #fff; font-size: 1rem; margin: 0; }
.gallery-tile p { margin: 0.35rem 0 0; font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* Reveal */
.reveal, .reveal-stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.is-visible, .reveal-stagger > *.is-visible { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-28px); }
.reveal-left.is-visible { transform: none; }
.reveal-right { transform: translateX(28px); }
.reveal-right.is-visible { transform: none; }
.reveal-scale { transform: scale(0.96); }
.reveal-scale.is-visible { transform: none; }
/* Phone-only reveal channel. These elements are choreographed by the hero
   scroll sequence on desktop, so the class has to be completely inert here —
   it only grows a transition inside the phone breakpoint, where the sequence
   is switched off and the copy would otherwise arrive dead still. */
.reveal-sm, .reveal-sm-stagger > * { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .as-seen .container, .as-seen .as-seen-inner, .as-seen-logos { flex-wrap: wrap; }
  .as-seen-label { width: 100%; text-align: center; }
}
@media (max-width: 960px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
  .checkmate-grid, .split, .final-grid, .two-col, .two-col.flip,
  .trainer-hero, .form-row, .bullet-grid { grid-template-columns: 1fr; }
  .two-col.flip > :first-child { order: 0; }
  .checkmate-cover { order: -1; }
  .checkmate-cover img { max-width: 260px; }
  .hero-overlay { clip-path: polygon(70% 0, 100% 0, 100% 100%, 55% 100%); opacity: 0.55; }
  .trainer-avatar { width: 140px; height: 140px; font-size: 2.2rem; }
}
@media (max-width: 760px) {
  :root { --gutter: 1rem; }
  .nav-toggle { display: flex; }
  /* The bar is a floating pill on desktop; at this width the container is the
     full screen, so inset it by hand or the rounded ends run off both edges. */
  .header-inner {
    position: relative;   /* the drawer below hangs off the pill */
    /* width:auto, not the inherited .container width:100% — otherwise the
       margin pushes a full-viewport-wide pill off the right edge */
    width: auto;
    margin-inline: 0.75rem; padding-inline: 0.9rem;
  }
  .site-nav {
    /* anchored to the pill, not to the sticky header's padding box */
    position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0;
    background: var(--navy-950); flex-direction: column; align-items: stretch;
    padding: 0.5rem 1rem 1rem; gap: 0; display: none;
    border: 1px solid rgba(126, 196, 255, 0.28);
    border-radius: 18px;
    box-shadow: 0 20px 44px -18px rgba(6, 10, 18, 0.85);
    max-height: calc(100vh - var(--header-outer) - 1.5rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { display: flex; }
  .site-nav .nav-item { width: 100%; }
  .site-nav .nav-parent {
    width: 100%; justify-content: space-between;
    padding: 0.85rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .dropdown {
    position: static; display: none; transform: none; background: rgba(255,255,255,0.04);
    box-shadow: none; border: 0; min-width: 0; padding: 0.25rem 0.5rem 0.75rem; left: 0;
  }
  .nav-item:hover > .dropdown { display: none; }
  .nav-item.open > .dropdown { display: block; animation: none; }
  .dropdown-link { color: rgba(255,255,255,0.85) !important; }
  .dropdown-link:hover, .dropdown-link.is-active {
    background: rgba(255,255,255,0.08); color: #fff !important;
  }
  .site-nav a.nav-link {
    padding: 0.85rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-cta { text-align: center; margin-top: 0.5rem; }
  .card-grid { grid-template-columns: 1fr; }
  /* padding-block only: the shorthand here used to zero out .container's
     inline gutter and push hero type flush to the screen edge */
  .hero-content { padding-block: 0; }
  .hero-actions .btn { width: 100%; }
  .as-seen-logos { gap: 1rem 1.4rem; min-height: 56px; }
  .press-logo { height: 40px; }
  .press-nbc { height: 37px; }
  .press-newsnet { height: 44px; }
  .press-cbs { height: 36px; }
  .press-fox { height: 46px; }
  .press-bn { height: 48px; }
  .events-inner { flex-direction: column; align-items: flex-start; }
  .page-hero { padding: 2.5rem 0 2rem; }
  .section-head-right { text-align: left; }
}
@media (min-width: 1200px) {
  :root { --gutter: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body { opacity: 1; transform: none; }
  .reveal, .reveal-stagger > *, .video-card { opacity: 1; transform: none; animation: none; }
  .card-icon.glow { animation: none; }
}

/* =========================================================
   AI Scenario Training offering + charts
   ========================================================= */
.ai-training {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 114, 239, 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 20%, rgba(46, 145, 252, 0.08), transparent 50%),
    var(--white);
  padding: 4.75rem 0 4rem;
}
.ai-head {
  /* runs the full column width — no narrow centred measure */
  max-width: none;
  margin: 0 0 2.5rem;
}
.ai-head .lede {
  margin-top: 0.85rem;
  max-width: none;
  color: var(--slate-500);
  font-size: 1.1rem;
  line-height: 1.62;
}
.ai-head .lede strong { color: var(--navy-900); }
.ai-head .lede em { color: var(--blue-500); font-style: normal; font-weight: 700; }

.ai-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-bottom: 2.75rem;
}
.ai-pillar {
  background: var(--slate-100);
  border: 1px solid rgba(15, 22, 33, 0.06);
  border-radius: var(--radius);
  padding: 1.4rem 1.35rem 1.35rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ai-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ai-pillar-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--blue-500);
  margin-bottom: 0.55rem;
}
.ai-pillar h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}
.ai-pillar p {
  margin: 0;
  color: var(--slate-500);
  font-size: 0.95rem;
}

.ai-proof {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.25rem;
  align-items: start;
  margin-bottom: 2rem;
}
.ai-proof-copy h3 {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
  margin-bottom: 0.75rem;
}
.ai-proof-copy .feature-list {
  margin: 1.25rem 0 1.5rem;
}
.ai-ghost {
  color: var(--navy-900) !important;
  border-color: rgba(15, 22, 33, 0.2) !important;
  margin-left: 0.5rem;
}
.ai-ghost:hover {
  background: rgba(0, 114, 239, 0.06) !important;
  border-color: var(--blue-500) !important;
  color: var(--blue-500) !important;
}

.ai-charts {
  display: grid;
  gap: 1.15rem;
}
.chart-card {
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.chart-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
}
.chart-unit {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
}
.chart-bars {
  display: grid;
  gap: 0.95rem;
}
.chart-row {
  display: grid;
  grid-template-columns: 8.4rem 1fr 4.8rem;
  gap: 0.75rem;
  align-items: center;
}
.chart-name {
  font-size: 0.88rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}
.chart-name small {
  display: block;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
  font-weight: 500;
}
.chart-track {
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.chart-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  animation: barGrow 1.35s var(--ease) forwards;
  animation-delay: 0.2s;
  position: relative;
}
.chart-fill::after {
  content: attr(data-value);
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  opacity: 0;
  animation: fadeIn 0.4s ease 1.1s forwards;
}
@keyframes barGrow {
  from { width: 0; }
  to { width: var(--w); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
.chart-fill-bad {
  background: linear-gradient(90deg, #5a6472, #8b95a3);
}
.chart-fill-mid {
  background: linear-gradient(90deg, #2c557f, #4a7fb0);
}
.chart-fill-win {
  background: linear-gradient(90deg, #0072ef, #2e91fc 55%, #5eb0ff);
  box-shadow: 0 0 18px rgba(46, 145, 252, 0.45);
}
.chart-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  text-align: right;
  color: rgba(255, 255, 255, 0.75);
}
.chart-val-win {
  color: #7ec4ff;
  font-size: 1.05rem;
}
.chart-row-win .chart-name {
  color: #fff;
  font-weight: 700;
}
.chart-caption {
  margin: 1rem 0 0;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.5;
}
.chart-caption strong {
  color: #7ec4ff;
}

.ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy-800), var(--blue-700));
  color: #fff;
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow);
}
.ai-banner strong { color: #fff; }
.ai-banner em { color: #9fd0ff; font-style: normal; font-weight: 700; }
.ai-banner > div { flex: 1; min-width: 240px; font-size: 1rem; line-height: 1.5; }

@media (max-width: 960px) {
  .ai-pillars { grid-template-columns: 1fr; }
  .ai-proof { grid-template-columns: 1fr; }
  .chart-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .chart-val { text-align: left; }
  .chart-fill::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-fill {
    animation: none;
    width: var(--w);
  }
  .chart-fill::after { opacity: 1; animation: none; }
}

/* =========================================================
   Layout helpers
   ========================================================= */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }

/* =========================================================
   Thesis — the three-step argument
   ========================================================= */
.thesis { background: #fff; }
.thesis-head { margin-bottom: 2.75rem; }
.thesis-head h2 {
  font-size: clamp(1.5rem, 0.9rem + 2.1vw, 2.3rem);
  max-width: 34ch;
  line-height: 1.2;
}
.thesis-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(15, 22, 33, 0.1);
}
.thesis-item {
  padding: 1.9rem 1.75rem 1.75rem 0;
  border-right: 1px solid rgba(15, 22, 33, 0.1);
  position: relative;
  display: flex; flex-direction: column;   /* so the links bottom-align */
}
.thesis-item .card-link { margin-top: auto; }
.thesis-item:not(:first-child) { padding-left: 1.75rem; }
.thesis-item:last-child { border-right: 0; padding-right: 0; }
.thesis-item::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
  transition: width 0.5s var(--ease);
}
.thesis-item:hover::before { width: 100%; }
.thesis-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.16em; color: var(--blue-500);
  margin-bottom: 0.8rem;
}
.thesis-item h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.thesis-item p { color: var(--slate-500); font-size: 0.98rem; margin-bottom: 0.9rem; }

/* =========================================================
   Who it's for
   ========================================================= */
.who { background: var(--slate-100); }
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; }
.who-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  border: 1px solid rgba(15, 22, 33, 0.07);
  padding: 1.5rem 1.4rem 1.35rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.who-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-lg);
  border-color: rgba(46, 145, 252, 0.4);
}
.who-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(0,114,239,0.12), rgba(46,145,252,0.06));
  color: var(--blue-500); font-size: 1.15rem;
}
.who-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.who-card p { color: var(--slate-500); font-size: 0.94rem; flex: 1; margin-bottom: 0.85rem; }
.who-card .card-link { margin-top: auto; }
.who-card:hover .card-link i { transform: translateX(3px); }

/* =========================================================
   AI proof panel — the real product screenshot
   ========================================================= */
.ai-proof-panel {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 2.5rem; align-items: center;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, #16305c 100%);
  border-radius: 20px;
  padding: 2.5rem 2.5rem 2.4rem;
  margin-bottom: 3rem;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.ai-proof-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 340px at 88% 8%, rgba(46,145,252,0.20), transparent 62%);
}
.proof-copy { position: relative; z-index: 1; }
.proof-copy h3 {
  color: #fff; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); margin-bottom: 0.8rem;
}
.proof-copy > p { color: rgba(255,255,255,0.76); font-size: 0.99rem; }
.proof-copy .kicker { color: #7ec4ff; }

.proof-chat { display: grid; gap: 0.45rem; margin: 1.6rem 0 1.1rem; }
.proof-bubble {
  border-radius: 12px; padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.12);
}
.proof-role {
  display: block; font-family: var(--font-display); font-size: 0.64rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.proof-bubble p { margin: 0; font-size: 0.97rem; line-height: 1.5; }
.proof-user { background: rgba(255,255,255,0.06); }
.proof-user .proof-role { color: rgba(255,255,255,0.5); }
.proof-user p { color: #fff; font-style: italic; }
.proof-ai {
  background: rgba(0,114,239,0.16);
  border-color: rgba(46,145,252,0.42);
}
.proof-ai .proof-role { color: #7ec4ff; }
.proof-ai p { color: rgba(255,255,255,0.92); }
.proof-arrow { text-align: center; color: rgba(126,196,255,0.5); font-size: 0.8rem; }
.proof-note {
  margin: 0; font-size: 0.78rem; line-height: 1.5;
  color: rgba(255,255,255,0.45);
  display: flex; align-items: flex-start; gap: 0.45rem;
}
.proof-note i { flex: 0 0 auto; margin-top: 0.25em; }

.proof-shot { margin: 0; position: relative; z-index: 1; }
.proof-frame {
  display: block;
  border-radius: 12px; overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.proof-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 36px 80px rgba(0,0,0,0.58);
}
.proof-tap { display: none; }
.proof-chrome {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: #e9edf2; border-bottom: 1px solid rgba(15,22,33,0.09);
}
.proof-chrome span {
  width: 10px; height: 10px; border-radius: 50%; background: #c7ced8;
}
.proof-chrome span:nth-child(1) { background: #ff5f57; }
.proof-chrome span:nth-child(2) { background: #febc2e; }
.proof-chrome span:nth-child(3) { background: #28c840; }
.proof-frame img { width: 100%; height: auto; display: block; }
.proof-shot figcaption {
  margin-top: 0.85rem; font-size: 0.8rem; color: rgba(255,255,255,0.5);
  text-align: right;
}

/* =========================================================
   Podcast strip — left aligned, links to the right
   ========================================================= */
.podcast-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
}
.podcast-inner .lede { margin: 0; }
.podcast-links { justify-content: flex-end; }

/* =========================================================
   Responsive — hero + new blocks
   ========================================================= */
@media (max-width: 1100px) {
  .who-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .ai-proof-panel { grid-template-columns: 1fr; padding: 2rem 1.6rem; gap: 1.9rem; }
  .proof-shot figcaption { text-align: left; }
  .thesis-grid { grid-template-columns: 1fr; border-top: 0; }
  .thesis-item {
    padding: 1.5rem 0; border-right: 0;
    border-top: 1px solid rgba(15, 22, 33, 0.1);
  }
  .thesis-item:not(:first-child) { padding-left: 0; }
  .podcast-links { justify-content: flex-start; }
}
@media (max-width: 760px) {
  /* No runway on phones: the hero becomes a normal poster panel. */
  .hero-stage { height: auto; }
  .hero-sticky {
    position: relative; height: auto; min-height: 0;
    /* .hero-stage still carries the negative margin that tucks the film under
       the translucent bar, so the top pad has to buy that height back or the
       eyebrow lands on top of the nav. Shorthand padding here is what used to
       drop it. */
    padding: calc(var(--header-outer) + 1.5rem) 0 3.75rem;
  }
  .hero-content h1, .hero-content .hero-sub, .hero-content .hero-actions { max-width: none; }
  .hero-panel-a h1, .hero-panel-a .hero-sub { max-width: none; }
  .hero-grid { display: none; }
  /* panels stop overlapping and become two stacked blocks */
  .hero-panel { grid-area: auto; transform: none !important; opacity: 1 !important; }
  .hero-panel-b { pointer-events: auto; margin-top: 3rem; }
  .hero-b-grid { grid-template-columns: 1fr; }
  .hero-b-copy h2 { font-size: clamp(1.5rem, 1rem + 3.4vw, 2rem); }
  /* no room to overlap at this width — board and answer simply stack */
  .hero-shot-board {
    position: static; width: 100%; margin: 0;
    mask-image: none; -webkit-mask-image: none;
  }
  .hero-shot-modal {
    width: 100%; margin: 0.85rem 0 0;
    transform: none !important; opacity: 1 !important;
  }
  /* the strip is already short here; pinning it would eat the viewport */
  .as-seen {
    position: static; max-height: none;
    padding: 1.5rem 0 1.6rem;
  }
  .as-seen .as-seen-inner { transform: none !important; opacity: 1 !important; }
  .hero-more { display: none; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(8,13,22,0.86) 0%, rgba(10,16,27,0.78) 45%, rgba(8,13,22,0.92) 100%);
  }

  /* --- motion, phone edition ------------------------------------------
     The desktop hero is a scroll sequence; that is the one thing a phone
     should not be asked to do. What it can do cheaply is fade copy up as it
     arrives and let the film loop underneath, so the page still moves.
     -------------------------------------------------------------------- */
  .reveal-sm, .reveal-sm-stagger > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .reveal-sm.is-visible, .reveal-sm-stagger > *.is-visible {
    opacity: 1; transform: none;
  }

  .who-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-top { gap: 1rem; }
  /* the screenshot is texture at this size — point people at the full one */
  .proof-tap {
    display: block; margin-top: 0.3rem;
    color: #7ec4ff; font-weight: 700;
  }
  .proof-shot figcaption { text-align: left; }
}
/* When the film is off — Data Saver, a slow link, blocked autoplay — the
   poster drifts instead, so the hero is never a flat still. Kept out of the
   block above so reduced-motion never sees it: the global duration clamp
   would turn an infinite alternate into a flicker rather than stopping it. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-stage.is-poster-only .hero-media {
    animation: heroDrift 26s ease-in-out infinite alternate;
  }
  @keyframes heroDrift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.1) translate3d(-2.5%, -1.5%, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto !important; }
  /* same reason as the phone rule: the stage is still tucked under the bar */
  .hero-sticky {
    position: relative; height: auto; min-height: 0;
    padding: calc(var(--header-outer) + 2rem) 0 4rem;
  }
  /* no scroll sequence, so everything settles into its resting state */
  .hero-panel { grid-area: auto; transform: none !important; opacity: 1 !important; }
  .hero-panel-b { pointer-events: auto; margin-top: 3.5rem; }
  .hero-shot-modal { transform: none !important; opacity: 1 !important; }
  .as-seen { position: static; max-height: none; }
  .as-seen .as-seen-inner { transform: none !important; opacity: 1 !important; }
  .hero-more { display: none; }
  .hero-more i { animation: none; }
  .site-header, .header-inner, .brand-mark, .brand-text strong, .brand-text span {
    transition: none !important;
  }
}

/* =========================================================
   Capability ramp curve
   ========================================================= */
.ramp-card {
  margin: 0 0 2rem;
  background: linear-gradient(150deg, #101a28 0%, var(--navy-900) 55%, #16233a 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 2rem 2.1rem 1.6rem;
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.ramp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem 2.5rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.ramp-head h3 {
  color: #fff; font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.55rem); margin-bottom: 0.6rem;
}
.ramp-head .kicker { color: #7ec4ff; }
.ramp-sub {
  margin: 0; color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem; max-width: 52ch;
}
.ramp-legend {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  display: grid; gap: 0.5rem; flex-shrink: 0;
}
.ramp-legend li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.swatch { width: 22px; height: 3px; border-radius: 999px; flex-shrink: 0; }
.swatch-jls { background: #2e91fc; }
.swatch-trad {
  background: repeating-linear-gradient(90deg, #b08968 0 7px, transparent 7px 11px);
}
.ramp-plot { width: 100%; overflow-x: auto; }
.ramp-plot svg { width: 100%; min-width: 520px; height: auto; display: block; }
.ramp-note {
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem; line-height: 1.55; color: rgba(255, 255, 255, 0.52);
  max-width: 78ch;
}
.ramp-note strong { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 760px) {
  .ramp-card { padding: 1.5rem 1.1rem 1.2rem; border-radius: 16px; }
  .ramp-legend { grid-template-columns: 1fr; }
}