/* ============================================================
   1752vc - Stripe-inspired design system
   ============================================================ */
:root {
  --navy: #0a2540;
  --ink: #0a2540;
  --slate: #425466;
  --muted: #6b7c93;
  --bg: #ffffff;
  --bg-soft: #f6f9fc;
  --purple: #635bff;
  --purple-dark: #5851ec;
  --cyan: #00d4ff;
  --pink: #ff5996;
  --amber: #ffb23e;
  --violet: #a960ee;
  --red: #ff333d;
  --sky: #90e0ff;
  --gold: #ffcb57;
  --radius: 16px;
  --shadow-sm: 0 2px 5px -1px rgba(50,50,93,.12), 0 1px 3px -1px rgba(0,0,0,.15);
  --shadow-md: 0 13px 27px -5px rgba(50,50,93,.18), 0 8px 16px -8px rgba(0,0,0,.22);
  --shadow-lg: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; }
a { color: var(--purple); text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.display {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
}
.h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.h3 { font-size: 1.35rem; }
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 16px;
}
.lead { font-size: 1.18rem; color: var(--slate); max-width: 640px; }
.gradient-text {
  background: linear-gradient(90deg, var(--violet), var(--purple) 30%, var(--pink) 65%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 20px;
  border-radius: 100px;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .18s ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #1a3a5c; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--purple); color: #fff; }
.btn-accent:hover { background: var(--purple-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { color: var(--navy); background: transparent; }
.btn-ghost:hover { color: var(--purple); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(10,37,64,.08);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px; height: 64px;
}
.nav-logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; color: var(--navy); margin-right: 12px; }
.nav-logo span { color: var(--purple); }
.nav.on-hero:not(.scrolled) .nav-logo,
.nav.on-hero:not(.scrolled) .nav-link { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  font-size: .92rem; font-weight: 600; color: var(--navy);
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  background: none; border: none; font-family: var(--font);
}
.nav-link:hover { opacity: .7; }
.nav-link .chev { font-size: .6rem; transition: transform .2s; }
.nav-item.open .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 230px; background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s ease;
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--navy); font-size: .92rem; font-weight: 500;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--purple); }
.dropdown .dd-note { font-size: .72rem; color: var(--muted); display: block; }
.nav-cta { margin-left: auto; }
.nav-burger { display: none; margin-left: auto; background: none; border: none; font-size: 1.5rem; color: var(--navy); cursor: pointer; }

@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  /* The open menu is fixed to the viewport. A backdrop-filter on .nav makes the
     bar a containing block for fixed descendants, which collapsed this panel to
     the height of the bar and hid the links behind the page. .nav.menu-open
     below drops the filter so the panel can fill the screen. */
  .nav-links {
    display: none; position: fixed; top: 64px; right: 0; bottom: 0; left: 0;
    z-index: 99; background: #fff; flex-direction: column; align-items: stretch;
    padding: 20px; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; gap: 4px;
  }
  .nav-links.mobile-open { display: flex; }
  .nav.menu-open {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.nav-locked { overflow: hidden; }
  .nav-cta { margin-left: 0; margin-top: 12px; justify-content: center; }
  .nav-burger { display: block; }
  .nav.on-hero:not(.scrolled) .nav-burger { color: #fff; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: 20px; }
  .nav-item.open .dropdown { display: block; }
  .nav-links .nav-link { width: 100%; justify-content: space-between; font-size: 1.05rem; color: var(--navy) !important; }
  /* On desktop these rows open on hover, so the affordance is obvious. In the
     stacked mobile menu an expandable row is indistinguishable from a plain
     link without a glyph; .chev ships empty, so give it one here only. */
  .nav-links .nav-link .chev { font-size: .85rem; line-height: 1; opacity: .55; }
  .nav-links .nav-link .chev::before { content: "\25BE"; }
}

/* ---------- Hero with animated gradient ---------- */
.hero {
  position: relative;
  padding: 128px 0 92px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-base, var(--navy));
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 640px;
}
.hero .container { width: 100%; }
.hero-light { background: var(--bg-soft); }
.hero.skewed {
  /* Keep the single diagonal edge above the tucked section below. */
  z-index: 1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
}
.gradient-bg {
  position: absolute; inset: -20%;
  z-index: -1;
  background: var(--hero-base, var(--navy));
}
.gradient-bg .blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: .55;
  will-change: transform;
}
.blob-1 { width: 55vw; height: 55vw; background: var(--violet); top: -15%; left: -10%; animation: drift1 5s ease-in-out infinite; }
.blob-2 { width: 45vw; height: 45vw; background: var(--purple); top: 10%; right: -5%; animation: drift2 6s ease-in-out infinite; }
.blob-3 { width: 40vw; height: 40vw; background: var(--pink); bottom: -10%; left: 25%; animation: drift3 5.5s ease-in-out infinite; }
.blob-4 { width: 30vw; height: 30vw; background: var(--cyan); bottom: 5%; right: 20%; opacity: .5; animation: drift1 7s ease-in-out infinite reverse; }
.blob-5 { width: 25vw; height: 25vw; background: var(--gold); top: 40%; left: 5%; opacity: .45; animation: drift2 6.5s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(14%,16%) scale(1.22); } 66% { transform: translate(-11%,7%) scale(.9); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-17%,13%) scale(1.18); } 70% { transform: translate(9%,-11%) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(17%,-14%) scale(1.2); } }
.hero .lead { color: rgba(255,255,255,.92); }
.hero h1, .hero .lead, .hero .pill { text-shadow: 0 1px 24px rgba(10,37,64,.55), 0 1px 3px rgba(10,37,64,.4); }
/* Gradient text uses transparent fill - a shadow shows through and darkens it */
.hero .gradient-text { text-shadow: none; }
.hero-light { color: var(--navy); }
.hero-light .gradient-bg { background: var(--bg-soft); }
.hero-light .blob { opacity: .35; filter: blur(110px); }
.hero-light .lead { color: var(--slate); }

/* ---------- Animated gradient ribbon (very top of page) ---------- */
.top-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 200;
  background: linear-gradient(90deg, var(--violet), var(--purple), var(--pink), var(--amber), var(--cyan), var(--violet));
  background-size: 300% 100%;
  animation: ribbonFlow 8s linear infinite;
}
@keyframes ribbonFlow { from { background-position: 0% 0; } to { background-position: 300% 0; } }

/* ---------- Hero canvas (Stripe-style flowing gradient) ---------- */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
}
.hero .gradient-bg { z-index: -1; }
.hero .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .top-ribbon { animation: none; } }

/* <picture> is a semantic wrapper for format fallback only. display:contents keeps
   the <img> as the laid-out box, so every existing rule and measurement that
   assumed a bare <img> child still resolves against the same element. */
picture { display: contents; }
/* The width/height attributes on the inner img exist to reserve the right box and
   stop layout shift. The height attribute is also a presentational px height, so
   wherever CSS only constrains width it would win and stretch the image to its
   full pixel height. Handing height back to auto restores the intrinsic ratio;
   any rule that sets a real height is a class selector and still outranks this. */
picture > img { height: auto; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section-soft { background: var(--bg-soft); }
.section + .section-soft, .section-soft + .section, .hero-media + .section-soft { border-top: 1px solid #e8e8f2; }
/* Testimonial pages use a consistent light-gray divider surface around their
   branded CTA card instead of fading back to white at the section edges. */
body[class*="theme-"] > section.section-soft.testimonial-cta {
  background: var(--bg-soft) !important;
  border-top: 1px solid #dfe3ee !important;
}
.section-dark { position: relative; isolation: isolate; background: linear-gradient(135deg, #0a1f3d 0%, var(--navy) 45%, #16224a 100%); color: #fff; }
/* dot-grid texture on dark surfaces */
.section-dark::before, .footer::before, .cta-band::after, .tband-gloss::after, .tband-ai::after, .vf-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.11) 1.4px, transparent 1.4px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
}
.footer { position: relative; isolation: isolate; }
.cta-band::after { z-index: 0; opacity: .5; }
.cta-band > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .section-dark::before { animation: dotDrift 26s ease-in-out infinite alternate; }
}
@keyframes dotDrift { from { background-position: 0 0; } to { background-position: 46px 23px; } }
.section-dark .lead, .section-dark p { color: rgba(255,255,255,.78); }
.section-head { max-width: 720px; margin-bottom: 48px; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.vf-written-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Keep one stable carousel height for every pair. The longest written quotes
   need extra room for their wrapped lines plus the attribution row. */
.vf-written-slot { min-width: 0; position: relative; display: grid; align-items: stretch; height: 400px; }
.vf-written-slot > .card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.vf-written-slot > .card.vf-written-inactive {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(12px);
}
.vf-written-slot > .card.vf-written-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
.vf-written-instructions,
.vf-written-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vf-written-carousel:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 55%, white); outline-offset: -8px; }
.vf-written-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
/* display:flex above outranks the UA's [hidden] rule, so a carousel with a
   single pair would keep showing dead prev/next buttons without this. */
.vf-written-controls[hidden] { display: none; }
.vf-written-arrow {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 700 1.35rem/1 var(--font);
  cursor: pointer;
  box-shadow: 0 8px 18px -12px rgba(10,37,64,.45);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vf-written-arrow:hover,
.vf-written-arrow:focus-visible {
  border-color: #cfd5dc;
  background: #fff;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.vf-written-page {
  min-width: 42px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.section-dark .vf-written-arrow {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.04);
  color: #fff;
  box-shadow: none;
}
.section-dark .vf-written-arrow:hover,
.section-dark .vf-written-arrow:focus-visible {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: none;
}
.section-dark .vf-written-page { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .vf-written-slot > .card { transition: none; }
  .vf-written-arrow { transition: none; }
}
@media (max-width: 700px) {
  .vf-written-grid { grid-template-columns: 1fr; }
  .vf-written-slot { height: 480px; }
  /* One testimonial at a time on a phone. Stacking both slots put two full
     quote cards on screen at once, which is close to two screens of section.
     The script derives its page count from the slots that actually render, so
     hiding the extras is all that is needed to repage the rotation. */
  .vf-written-slot:nth-child(n + 2) { display: none; }
}
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card .h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: .96rem; }
.card-topline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: linear-gradient(180deg, var(--violet), var(--purple), var(--pink), var(--amber));
}
/* accent runs down the left edge, so it never competes with the horizontal
   flow-bar dividers or glance toplines. Extra left padding clears the icon chip. */
.card-topline { padding-left: 38px; }
.acc-benefits > .card-topline { padding-left: 26px; }
@media (max-width: 640px) { .card-topline { padding-left: 26px; } }
.section-dark .card { background: rgba(255,255,255,.06); box-shadow: none; border: 1px solid rgba(255,255,255,.12); }
.section-dark .card p { color: rgba(255,255,255,.72); }
.section-dark .card .h3 { color: #fff; }

.icon-chip {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 13%, transparent),
              color-mix(in srgb, var(--pink) 13%, transparent));
}

/* ---------- Stats ---------- */
.stat { text-align: left; }
/* Sized against the card, not the viewport: these sit 2-across in narrow
   grids, where a vw-based size overflows and .card's overflow:hidden
   clips the trailing glyph (e.g. the + in $300M+). */
.stat { container-type: inline-size; }
.stat-value {
  font-size: clamp(1.6rem, 19cqi, 2.9rem); font-weight: 800; letter-spacing: -.03em;
  /* Body leading is 1.6, which is right for prose and far too loose for a
     display figure: at the 2.9rem ceiling it wrapped every number in a 74px
     line box, so an eight-stat block wasted ~180px of pure leading on phones.
     Kept slightly above 1 so the $ glyph, which rides above and below the
     digits, is not clipped by the background-clip:text paint box. */
  line-height: 1.12;
  white-space: nowrap; min-width: 0;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--slate); font-size: .92rem; margin-top: 4px; }
.section-dark .stat-label, .hero .stat-label { color: rgba(255,255,255,.7); }
.hero .stat-value, .section-dark .stat-value {
  background: linear-gradient(90deg, var(--sky), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Stat grids stay 2-up on phones instead of collapsing to one column with the
   other grids. A full-width row per figure pushed an eight-stat block to about
   one and a half screens. The figures are sized in cqi against their own cell,
   so halving the cell scales them down to suit without overflowing the nowrap.
   :has() outranks the plain .grid-* collapse rule, so order here does not matter. */
@media (max-width: 620px) {
  .grid-2:has(> .stat), .grid-3:has(> .stat), .grid-4:has(> .stat) {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }
  /* Where a record block is split into two stacked stat grids, the pages author
     the separation as an inline margin-top:56px sized for desktop. Once the rule
     above packs the figures 2-up, that 56px is wider than the gap between the
     rows inside either grid, so the halves read as two unrelated blocks with a
     band of empty tint between them. 22px matches the row gap above and the
     value the gold record section already uses. !important is unavoidable here:
     the margin it has to beat is an inline style. */
  .grid:has(> .stat) + .grid:has(> .stat) { margin-top: 22px !important; }
}

/* ---------- Steps / syllabus ---------- */
/* Scoped away from the tool pages. The equity calculator has its own unrelated
   stepper reusing these class names, and once the tools started loading this
   sheet the 64px flex-basis below landed on a *column* flex item, reserving
   64px of height for a 13px label and opening a dead band above every step
   name. Every real use of this component pairs .step-row with .step-body, and
   no tool page uses .step-body, so excluding the tools is safe.
   :where() keeps the original (0,1,0) specificity, so no other rule shifts. */
:where(body:not(.tools-chrome)) .step-row {
  display: flex; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid rgba(10,37,64,.08);
  align-items: baseline;
}
:where(body:not(.tools-chrome)) .step-num {
  flex: 0 0 64px; font-weight: 800; font-size: .8rem; letter-spacing: .08em;
  color: var(--purple); text-transform: uppercase;
}
.step-body strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.step-body p { color: var(--slate); font-size: .95rem; }

/* ---------- Quote / testimonial ---------- */
.quote {
  border-left: 3px solid var(--purple);
  padding: 8px 0 8px 24px; margin: 0;
  font-size: 1.12rem; color: var(--navy); font-weight: 500;
}
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--muted); font-weight: 600; }
.quote-big { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; border: none; padding: 0; }

/* ---------- Person / testimonial cards ---------- */
.person-card {
  background: #fff; border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.person-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.person-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: 14px;
}
.person-card strong { display: block; font-size: 1.02rem; }
.person-card span { color: var(--muted); font-size: .88rem; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid rgba(10,37,64,.1); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font); font-size: 1.02rem; font-weight: 600; color: var(--navy);
  padding: 20px 40px 20px 0; cursor: pointer; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--purple); font-weight: 400; transition: transform .25s;
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; color: var(--slate); }
.faq-a p { padding-bottom: 20px; }
.faq-item.open .faq-a { max-height: 400px; }

/* ---------- Marquee ---------- */
/* Real testimonial covers (YouTube thumbnails) inside the 9:16 frame */
.yt-cover { position: relative; overflow: hidden; padding: 0; display: block; }
.yt-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-cover .play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; }
.yt-cover:hover img { transform: scale(1.03); transition: transform .35s; }

.marquee { overflow: hidden; position: relative; padding: 8px 0; }
.marquee-track { display: flex; gap: 34px; width: max-content; animation: marquee 40s linear infinite; align-items: center; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mq-shift, 50%))); } }
.marquee-item { font-weight: 700; font-size: 1.05rem; color: var(--muted); white-space: nowrap; letter-spacing: .02em; }

/* ---- Phone marquee budget ----
   A marquee is a compositor animation that never stops on its own, and this
   site puts up to four of them on one page. Below 768px, pause every track
   that is off screen and only promote the ones actually moving: will-change is
   a standing request for a layer, so leaving it on a paused track costs memory
   for motion that is not happening. The .mq-run / .mq-idle classes are added by
   script only under this breakpoint, so desktop keeps its previous behaviour. */
@media (max-width: 768px) {
  .marquee-track { will-change: auto; animation-name: marqueePhone; }
  .marquee-track.mq-run { will-change: transform; }
  .marquee-track.mq-idle { animation-play-state: paused; }

  /* ---- Phone decor budget ----
     The rules above only cover marquee tracks. The pages also run drifting
     blobs, dot fields, rim spins, sheens, grain and glow loops, every one of
     them infinite and none of them stopping when its section scrolls away. On a
     long page that adds up: learn-venture held over a hundred running
     compositor animations at once mid-scroll, nearly all of them off screen,
     which is what exhausts memory and kills the tab on a phone. Any off-screen
     section gets .anim-idle from the observer in site.js and everything inside
     it stops until it comes back. Only CSS animations pause, so entrance
     transitions and the reveal observer are untouched. */
  .anim-idle, .anim-idle *,
  .anim-idle::before, .anim-idle::after,
  .anim-idle *::before, .anim-idle *::after { animation-play-state: paused !important; }
  /* will-change is a standing request for a compositor layer, so a paused
     section must not keep asking for one. */
  .anim-idle, .anim-idle * { will-change: auto !important; }
  /* translate3d keeps each track on its own compositor layer. The distance
     stays a custom property because one set is NOT half the track: the flex
     gap between the two sets is inside the track's width but not inside the
     stride, so a flat -50% would jump by half a gap once per cycle. */
  @keyframes marqueePhone {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--mq-shift, 50%)), 0, 0); }
  }
}
.partner-logo-marquee .marquee-track { gap: 64px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--hero-base, var(--navy)); border-radius: 24px; padding: 72px 48px; color: #fff; text-align: center; }
.cta-band .gradient-bg { inset: -40%; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 30px; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.75); padding: 72px 0 40px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
/* The four link groups are wrapped so they can be re-flowed as a set on narrow
   screens. At full width the wrapper must disappear completely, otherwise it
   becomes a single grid item and the five-column footer collapses to two. */
.footer-cols { display: contents; }

/* Below 860px the groups were a 2x2 grid, which sizes every row to its tallest
   column: Startups has six links against Investors' four, so a block of empty
   navy opened under Investors, and another under Company. Flowing the four
   groups through two balanced columns instead lets each column pack
   continuously, so the holes close and the footer gets shorter. */
@media (max-width: 860px) {
  .footer-grid { display: block; }
  .footer-grid > :first-child { margin-bottom: 40px; }
  .footer-cols { display: block; columns: 2; column-gap: 40px; }
  .footer-cols > div { break-inside: avoid; margin-bottom: 36px; }
}
.footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer a { display: block; color: rgba(255,255,255,.65); font-size: .92rem; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer-brand { font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: 12px; }
.footer-brand span { color: var(--sky); }
.footer-tag { font-size: .95rem; max-width: 280px; }
/* Brand marks, not words. Five spelled-out names wrapped onto a second line on
   a phone and left "X" sitting alone under them; a logo says the same thing in
   a fraction of the width. The accessible name moves to the link's aria-label,
   because this stylesheet has no visually-hidden utility that could keep the
   text in the DOM while hiding it, and loose text would simply render. */
.footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 20px; }
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  color: rgba(255,255,255,.6);
  transition: color .2s ease, background-color .2s ease;
}
.footer-socials a:hover { color: #fff; background: rgba(255,255,255,.08); }
.footer-socials a svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding: 28px 0; margin-bottom: 28px; }
.footer-newsletter-copy { display: flex; flex-direction: column; gap: 3px; }
.footer-newsletter-label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-newsletter-tagline { font-size: .97rem; color: rgba(255,255,255,.85); font-weight: 500; }
.footer-newsletter .btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; flex: none; }
.footer-newsletter .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.45); }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
/* The entrance animation is an enhancement for wider screens only. On phones a fast
   scroll outran the observer and left whole sections blank, so below 768px - and for
   anyone who asks for reduced motion - content renders exactly as authored, with no
   opacity or transform to recover from. `.reveal.visible` is listed next to `.reveal`
   because it outranks a bare `.reveal`, and the stagger delays are zeroed so nothing
   waits out a transition it no longer runs. */
@media (max-width: 768px) {
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s; }
  .blob, .gradient-text, .marquee-track { animation: none !important; }
}

/* ---------- Misc ---------- */
.pill {
  display: inline-block; padding: 5px 14px; border-radius: 100px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(99,91,255,.1); color: var(--purple); margin-bottom: 18px;
}
.hero .pill {
  background: none; border: none; border-radius: 0; padding: 0;
  backdrop-filter: none;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.hero .pill::before, .hero .pill::after {
  content: ""; width: 36px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
}
.check-list { list-style: none; }
.check-list li { padding: 8px 0 8px 32px; position: relative; color: var(--slate); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
.tag-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-grid span {
  padding: 8px 16px; background: #fff; border-radius: 100px; font-size: .88rem;
  font-weight: 600; color: var(--slate); box-shadow: var(--shadow-sm);
  transition: transform .2s, color .2s;
}
.tag-grid span:hover { transform: translateY(-2px); color: var(--purple); }
.name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 24px; }
.name-grid span { font-size: .9rem; color: var(--slate); padding: 5px 0; border-bottom: 1px solid rgba(10,37,64,.05); }
/* ---------- Image placeholders (swap with real assets) ---------- */
.ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border: 2px dashed rgba(10,37,64,.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(99,91,255,.06), rgba(255,89,150,.06) 50%, rgba(0,212,255,.07)),
    repeating-linear-gradient(45deg, rgba(10,37,64,.025) 0 12px, transparent 12px 24px);
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  transition: border-color .2s, background-color .2s;
}
.ph:hover { border-color: var(--purple); }
.ph .ph-icon { font-size: 1.6rem; opacity: .55; }
.ph .ph-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 16px; }
.ph .ph-hint { font-size: .7rem; color: rgba(107,124,147,.75); }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-portrait { aspect-ratio: 3 / 4; max-width: 340px; }
.ph-banner { aspect-ratio: 21 / 9; }
.ph-logo {
  aspect-ratio: auto; width: 150px; height: 56px; flex-direction: row; gap: 6px;
  border-radius: 10px; flex-shrink: 0;
}
.ph-logo .ph-icon { font-size: 1rem; }
.ph-logo .ph-label { font-size: .62rem; padding: 0 8px; }
.ph-thumb { aspect-ratio: 16 / 9; margin-bottom: 16px; border-radius: 10px; }
.ph-avatar {
  width: 64px; height: 64px; aspect-ratio: 1/1; border-radius: 50%;
  margin-bottom: 14px; gap: 0;
}
.ph-avatar .ph-icon { font-size: 1.2rem; }
.ph-avatar .ph-label { font-size: .5rem; padding: 0 4px; }
.hero .ph, .section-dark .ph {
  border-color: rgba(255,255,255,.35);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
  color: rgba(255,255,255,.75);
}
.ph-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---- Video placeholder (swap with YouTube/Vimeo iframe or <video>) ---- */
.ph-video {
  aspect-ratio: 16 / 9;
  border-style: solid;
  border-color: rgba(255,255,255,.25);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(169,96,238,.35), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(255,89,150,.3), transparent 55%),
    #0a2540;
  color: rgba(255,255,255,.85);
  cursor: pointer;
}
.ph-video .play-badge, .vt-thumb .play-badge {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 18px 44px -10px rgba(99,91,255,.65);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.ph-video .play-badge::before, .vt-thumb .play-badge::before {
  content: ""; display: block;
  border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  margin-left: 5px;
}
.ph-video:hover .play-badge, .vt-card:hover .play-badge { transform: scale(1.12); box-shadow: 0 24px 60px -8px rgba(255,89,150,.7); }
.ph-video .ph-label { color: #fff; font-size: .88rem; margin-top: 4px; }
.ph-video .ph-hint { color: rgba(255,255,255,.55); }
.ph-video::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: videoSheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes videoSheen { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

/* ---- Vertical testimonial video (9:16 reels-style) ---- */
.ph-vertical {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 18px;
  border-radius: 18px;
}
.ph-vertical .play-badge { width: 56px; height: 56px; }
.ph-vertical .play-badge::before {
  border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px;
}
.ph-vertical .ph-label { font-size: .8rem; }
.ph-vertical .ph-hint { font-size: .62rem; }
.person-card { text-align: center; }
.person-card .person-avatar { display: none; }

/* ============================================================
   Page themes - each program gets its own color world.
   Same components, different palette. Add the class to <body>.
   ============================================================ */

/* Ignite - fire & momentum */
.theme-ignite { --hero-base:#8a0e05;  --violet:#ff4d10; --purple:#c4230a; --pink:#f2600f; --cyan:#ff8a1e; --amber:#ffa733; --sky:#ffbc57; --gold:#ffd694; --purple-dark:#6d0a03; }

/* Ignite DTC - pink & purple */
.theme-dtc { --hero-base:#2d0b2b; --violet:#e76ae0; --purple:#b62baa; --pink:#dd4bd8; --cyan:#eb8ee8; --amber:#f4b9f3; --sky:#f9d7f8; --gold:#fdedfd; --purple-dark:#77186d; }

/* Accelerate - premium deep purple */
.theme-accelerate { --hero-base:#4438d8; --violet:#8b5cf6; --purple:#6d28d9; --pink:#a855f7; --cyan:#c4b5fd; --amber:#e879f9; --sky:#d6c9ff; --gold:#f0abfc; --purple-dark:#5b21b6; }

/* Launchpad - deep-space blue, liftoff */
.theme-launchpad { --hero-base:#4b79dd;  --violet:#00d4ff; --purple:#2563eb; --pink:#7c3aed; --cyan:#67e8f9; --amber:#a5f3fc; --sky:#8be4ff; --gold:#c9f1ff; --purple-dark:#1d4ed8; }

/* GTM - revenue green */
.theme-gtm { --hero-base:#05090b;  --violet:#00c48c; --purple:#0d9488; --pink:#84cc16; --cyan:#5eead4; --amber:#d9f99d; --sky:#7ef0cf; --gold:#e6ffb0; --purple-dark:#0b7d73; }

/* Lightning Round - electric storm */
.theme-lightning { --hero-base:#070b22; --violet:#2b6bff; --purple:#123ce0; --pink:#4aa8f5; --cyan:#8fd4ff; --amber:#dbeeff; --sky:#7cc6fb; --gold:#eaf5ff; --purple-dark:#0a1f8a; }

/* Emerging Angels - gold & champagne */
.theme-angels { --hero-base:#14100a; --violet:#f7e3a5; --purple:#d4af37; --pink:#e8c766; --cyan:#fdf3d5; --amber:#c9962e; --sky:#eed896; --gold:#fbf0d0; --purple-dark:#b8912a; }

/* Ember - indigo night sky over a gold wave crest (partnering page) */
.theme-ember { --hero-base:#150f52; --violet:#8b5cf6; --purple:#a21caf; --pink:#e11d48; --cyan:#4338ca; --amber:#f19c4a; --sky:#fbc06b; --gold:#fde3b0; --purple-dark:#86185e; }

/* Venture Fellow - indigo, academic */
.theme-fellow { --hero-base:#221f66;  --violet:#818cf8; --purple:#4f46e5; --pink:#a960ee; --cyan:#93c5fd; --amber:#c7d2fe; --sky:#a8c8ff; --gold:#d9e2ff; --purple-dark:#4338ca; }

/* Admin dashboard - warm orange / coral workspace */
.theme-adminorange {
  --hero-base:#ff873e; --violet:#ff9f39; --purple:#ff713f; --pink:#ff9977;
  --cyan:#ffc36a; --amber:#ffad64; --sky:#ffd29b; --gold:#ffe1b2; --purple-dark:#c85029;
}

/* Investing / LP - sky & gold, institutional */
.theme-investing { --hero-base:#1e63b8; --violet:#90e0ff; --purple:#0284c7; --pink:#7dd3fc; --cyan:#38bdf8; --amber:#bae6fd; --sky:#a8e6ff; --gold:#e0f2fe; --purple-dark:#0369a1; }

/* Mentors - iris: violet-plum with a periwinkle crest.

   Two earlier attempts are worth knowing about. The page first used
   theme-investing verbatim, so its banner was pixel-identical to the LP page's.
   The replacement was petrol teal with a brass counterpoint, and it was
   rejected on sight: even confined to the additive ribbon, the warm stop
   dragged the cool field toward olive and the hero read as a murky green-brown.
   The lesson is not "put the warmth somewhere else" but "do not introduce a
   second hue family here at all". This ramp is one family end to end.

   Why violet specifically, when the site is already full of blue and purple:
   the taken ground is electric blue-leaning indigo (accelerate #4438d8), deep
   indigo with periwinkle (fellow #221f66), near-black navy (lightning), and
   three straight blues (launchpad, investing, bluecurtain). dtc owns magenta.
   Nothing sits at a true violet around hue 270, red-leaning rather than
   blue-leaning, so that is the gap this fills. It reads as purple next to the
   blues and as blue next to dtc's magenta, which is what keeps it distinct.

   Blob-3 is a 40vw disc blurred 100px sitting directly behind the copy column,
   so whatever colour it carries is effectively a second background. Keep it
   inside the violet family (--pink) and let the ribbon carry the brightness.

   --purple is a deep violet because it lands as eyebrow text on white, where it
   measures well past AA. The bright tokens --cyan/--sky/--gold are lilacs and
   only ever appear on dark surfaces. */
.theme-mentors { --hero-base:#37205e; --violet:#8b62e8; --purple:#6d28a8; --pink:#7a5ae0; --cyan:#b49bff; --amber:#cbb6ff; --sky:#a88fff; --gold:#e4dbff; --purple-dark:#24123f; }

/* ---- Hero media section (video/banner just below hero) ---- */
.hero-media { padding: 72px 0; }
.media-head { text-align: center; margin-bottom: 34px; }
.media-rule { display: flex; align-items: center; gap: 18px; max-width: 620px; margin: 0 auto 16px; }
.media-rule::before, .media-rule::after { content: ""; flex: 1; height: 1.5px; }
.media-rule::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--purple) 40%, transparent)); }
.media-rule::after { background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--purple) 40%, transparent)); }
.media-rule .eyebrow { margin: 0; }
.media-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.hero-media .ph { width: 100%; }

/* ---- Hero layout variants ---- */
.hero-center .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center .lead { margin-left: auto; margin-right: auto; }
.hero-tight { padding: 128px 0 92px; min-height: 640px; }

/* ============================================================
   Interactive components v2
   ============================================================ */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--violet), var(--purple), var(--pink), var(--amber));
  z-index: 200; transition: width .1s linear;
}

/* ---- 3D tilt cards (JS sets --rx / --ry) ---- */
.card, .person-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
}
.card:hover, .person-card:hover { --lift: -6px; }

/* ---- Tabs ---- */
.tabs { }
.tab-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.tab-btn {
  padding: 10px 22px; border-radius: 100px; border: 1px solid rgba(10,37,64,.15);
  background: #fff; font-family: var(--font); font-weight: 600; font-size: .92rem;
  color: var(--slate); cursor: pointer; transition: all .2s;
}
.tab-btn:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }
.tab-btn.active {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(99,91,255,.5);
}
.tab-panel { display: none; animation: tabIn .4s cubic-bezier(.16,1,.3,1); }
.tab-panel.active { display: block; }
@keyframes tabIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Journey - ascending growth staircase, one color world per program ---- */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; align-items: start; }
.journey-step {
  position: relative; text-align: left;
  background: #fff; border-radius: var(--radius);
  padding: 46px 24px 26px;
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  border-top: 4px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, var(--jc1), var(--jc2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.journey-step:nth-child(1) { --jc1:#38bdf8; --jc2:#1d4ed8; margin-top: 90px; }
.journey-step:nth-child(2) { --jc1:#ff8a1e; --jc2:#c4230a; margin-top: 60px; } /* Ignite - matches theme-ignite's --cyan/--purple */
.journey-step:nth-child(3) { --jc1:#34d399; --jc2:#0f766e; margin-top: 30px; }
.journey-step:nth-child(4) { --jc1:#8b9cf8; --jc2:#5b4be0; margin-top: 0; }
.journey-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
/* arrow connectors between steps */
.journey-step:not(:last-child)::after {
  content: "→";
  position: absolute; top: 50%; right: -24px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--jc2); font-weight: 800; font-size: .95rem;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.j-dot {
  position: absolute; top: -28px; left: 24px;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--jc1), var(--jc2));
  border: 4px solid #fff;
  font-weight: 800; color: #fff; font-size: 1.1rem; letter-spacing: -.02em;
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--jc2) 55%, transparent);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  z-index: 1;
}
.journey-step:hover .j-dot { transform: scale(1.1) rotate(-4deg); }
.journey-step .j-stage {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jc2);
  background: color-mix(in srgb, var(--jc2) 10%, #fff);
  padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
}
.journey-step strong { display: block; font-size: 1.12rem; letter-spacing: -.01em; }
.journey-step .j-sub { display: block; font-size: .84rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.journey-step .j-go {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; font-size: .85rem; font-weight: 700; color: var(--jc2);
  opacity: 0; transform: translateX(-4px); transition: all .25s;
}
.journey-step:hover .j-go { opacity: 1; transform: none; }
/* Flagship finale - Accelerate filled with the brand gradient */
.journey-step:nth-child(4) {
  background-image: linear-gradient(135deg, #5b4be0 0%, #7c6af2 45%, #a78bfa 80%, #c4b5fd 115%), linear-gradient(90deg, var(--jc1), var(--jc2));
  color: #fff;
  box-shadow: 0 24px 50px -16px rgba(91,75,224,.5);
}
.journey-step:nth-child(4):hover { box-shadow: 0 30px 60px -14px rgba(124,106,242,.6); }
.journey-step:nth-child(4) strong { color: #fff; }
.journey-step:nth-child(4) .j-sub { color: rgba(255,255,255,.85); }
.journey-step:nth-child(4) .j-stage { background: rgba(255,255,255,.18); color: #fff; }
.journey-step:nth-child(4) .j-dot {
  background: linear-gradient(135deg, var(--jc1), var(--jc2));
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 12px 26px -8px rgba(109,40,217,.5);
}
.journey-step:nth-child(4) .j-go { color: #fff; }

/* Ignite DTC - parallel specialty track, branching off the path */
.journey-branch {
  /* Matches theme-dtc's --violet / --purple. Literal hexes because index.html
     carries no theme class. */
  --jc1: #e76ae0; --jc2: #b62baa;
  position: relative;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 56px; padding: 28px 32px;
  background: #fff; border-radius: var(--radius);
  border: 2px dashed color-mix(in srgb, var(--jc2) 45%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.journey-branch:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-style: solid; border-color: var(--jc2); }
.journey-branch::before {
  content: ""; position: absolute; top: -38px; left: 44px; height: 38px;
  border-left: 2px dashed color-mix(in srgb, var(--jc2) 55%, transparent);
}
.jb-dot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--jc1), var(--jc2));
  color: #fff; font-weight: 800; font-size: 1.35rem;
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--jc2) 45%, transparent);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.journey-branch:hover .jb-dot { transform: scale(1.1) rotate(-4deg); }
.jb-body { flex: 1 1 300px; }
.journey-branch .j-stage { color: var(--jc2); background: color-mix(in srgb, var(--jc2) 9%, #fff); margin-bottom: 8px; display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; }
.journey-branch strong { display: block; font-size: 1.12rem; letter-spacing: -.01em; }
.journey-branch .j-sub { display: block; font-size: .84rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.journey-branch .j-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .85rem; font-weight: 700; color: var(--jc2);
  opacity: 0; transform: translateX(-4px); transition: all .25s;
}
.journey-branch:hover .j-go { opacity: 1; transform: none; }
@media (max-width: 860px) { .journey-branch::before { display: none; } }
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr 1fr; gap: 44px 16px; }
  .journey-step { margin-top: 30px !important; }
  .journey-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) { .journey { grid-template-columns: 1fr; } }

/* ---- Animated charts ---- */
.chart-card { overflow: visible; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .c-line {
  fill: none; stroke: url(#gradLine); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s;
}
.chart .c-area { opacity: 0; transition: opacity 1s ease .9s; }
.chart .c-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.chart .c-dot { opacity: 0; transition: opacity .4s ease 1.6s; }
.chart.chart-go .c-line { stroke-dashoffset: 0; }
.chart.chart-go .c-area { opacity: 1; }
.chart.chart-go .c-bar { transform: scaleY(1); }
.chart.chart-go .c-dot { opacity: 1; }
.chart .c-bar:nth-of-type(2) { transition-delay: .12s; }
.chart .c-bar:nth-of-type(3) { transition-delay: .24s; }
.chart .c-bar:nth-of-type(4) { transition-delay: .36s; }
.chart .c-bar:nth-of-type(5) { transition-delay: .48s; }
.chart .c-label { font-family: var(--font); font-size: 12px; fill: var(--muted); font-weight: 600; }
.section-dark .chart .c-label { fill: rgba(255,255,255,.55); }
.chart .c-val { font-family: var(--font); font-size: 13px; font-weight: 800; fill: var(--navy); }
.section-dark .chart .c-val { fill: #fff; }
.chart .c-grid { stroke: rgba(10,37,64,.07); stroke-width: 1; }
.section-dark .chart .c-grid { stroke: rgba(255,255,255,.08); }
.chart .c-axis { stroke: rgba(10,37,64,.18); stroke-width: 1.5; }
.section-dark .chart .c-axis { stroke: rgba(255,255,255,.22); }

/* ---- Gauge (radial stat) ---- */
.gauge { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.gauge svg { transform: rotate(-90deg); }
.gauge .g-bg { fill: none; stroke: rgba(10,37,64,.08); stroke-width: 11; }
.section-dark .gauge .g-bg { stroke: rgba(255,255,255,.12); }
.gauge .g-fg {
  fill: none; stroke: url(#gradGauge); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 408; stroke-dashoffset: 408;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s;
}
.gauge.chart-go .g-fg { stroke-dashoffset: var(--gauge-off, 100); }
.gauge .g-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.gauge .g-val small { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.section-dark .gauge .g-val { color: #fff; }

/* ---- Ticker band (light, minimal) ---- */
.ticker-band {
  background: #fff;
  padding: 22px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(10,37,64,.06);
}
.ticker-band .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-band .marquee-track { animation-duration: 55s; gap: 72px; }
.ticker-band .marquee-item {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
}
.ticker-band .marquee-item b {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ticker-band .tick-sep { display: none; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
.sticky-col { position: sticky; top: 100px; }
@media (max-width: 860px) { .sticky-col { position: static; } }

/* ---- Global founders map ---- */
.map-panel {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(99,91,255,.14), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(255,89,150,.1), transparent 50%),
    #051426;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.6);
}
.world-map { position: relative; width: 100%; }
.world-map svg { width: 100%; height: auto; display: block; }
.wm-dot { fill: rgba(255,255,255,.16); }
.wm-founder { fill: url(#wmGrad); }
.wm-ring {
  fill: none; stroke: #ff5996; stroke-width: 1;
  opacity: 0; transform-origin: center; transform-box: fill-box;
  animation: wmPing 3.2s ease-out infinite;
}
@keyframes wmPing {
  0% { opacity: .9; transform: scale(.4); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
.wm-hub { fill: #fff; }
.wm-hub-glow { fill: #ff5996; opacity: .35; animation: hubGlow 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hubGlow { 0%,100% { transform: scale(1); opacity:.35; } 50% { transform: scale(1.7); opacity:.12; } }
.wm-label {
  position: absolute; transform: translate(-50%, -130%);
  background: #fff; color: var(--navy);
  font-size: .74rem; font-weight: 700; padding: 5px 12px; border-radius: 100px;
  box-shadow: var(--shadow-md); pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity .15s;
  z-index: 5;
}
.wm-label.show { opacity: 1; }

/* ---- Photo mosaic ---- */
.mosaic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; }
.mosaic .ph { height: 100%; margin: 0; }
.mosaic > :first-child { grid-row: span 2; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .mosaic > :first-child { grid-row: auto; grid-column: span 2; height: 240px; } .mosaic .ph { height: 160px; } }

/* ---- Clickable weekly syllabus ---- */
.wk-item .faq-q { display: flex; align-items: baseline; gap: 20px; padding-right: 44px; }
.wk-item .faq-q > span:last-child { font-size: 1.05rem; }
.wk-item .faq-a p { padding-left: 84px; }
@media (max-width: 620px) { .wk-item .faq-a p { padding-left: 0; } }


/* ---- Photo marquee (scrolling photo strip) ---- */
.photo-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.photo-marquee .marquee-track { gap: 18px; animation-duration: 58s; align-items: stretch; }
.pm-frame {
  position: relative; width: 320px; height: 212px; flex: 0 0 auto;
  border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--purple) 45%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--purple) 6%, transparent) 0 14px, color-mix(in srgb, var(--purple) 12%, transparent) 14px 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 14px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s;
}
.pm-frame:hover { transform: translateY(-6px) scale(1.02); border-color: var(--purple); box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--purple) 55%, transparent); }
.pm-frame.pm-tall { width: 160px; }
.pm-frame.pm-wide { width: 500px; }
.pm-frame .pm-icon { font-size: 1.55rem; }
.pm-frame .pm-label { font-weight: 700; font-size: .85rem; color: var(--ink); line-height: 1.3; }
.pm-frame .pm-hint { font-size: .72rem; color: var(--muted); }
.section-dark .pm-frame { border-color: rgba(255,255,255,.3); background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.1) 14px 28px); }
.section-dark .pm-frame:hover { border-color: #fff; box-shadow: 0 18px 44px -18px rgba(255,255,255,.35); }
.section-dark .pm-frame .pm-label { color: #fff; }
.section-dark .pm-frame .pm-hint { color: rgba(255,255,255,.55); }

/* ---- Play badge idle pulse ---- */
.ph-video .play-badge { position: relative; }
.ph-video .play-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: playPulse 2.6s ease-out infinite;
}
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.38); }
  70% { box-shadow: 0 0 0 24px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---- Icon chips lift when their card is hovered ---- */
.icon-chip { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.card:hover .icon-chip { transform: translateY(-5px) rotate(-5deg); }


/* ---- World map legend ---- */
.wm-legend {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.75);
}
.wm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wm-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }


/* ---- Testimonial carousel ---- */
.tcar { position: relative; margin-bottom: 28px; }
.tcar-vp { overflow: hidden; padding: 12px 12px 34px; margin: -12px -12px -34px; }
.tcar-track { display: flex; gap: 28px; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.tcar-item { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) { .tcar-item { flex: 0 0 calc((100% - 28px)/2); } }
@media (min-width: 980px) { .tcar-item { flex: 0 0 calc((100% - 56px)/3); } }
.tcar .person-card { height: 100%; box-sizing: border-box; }
.tcar .person-card .ph-vertical { max-width: 260px; }
.tcar-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
.tcar-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--ink); font-size: 1.35rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -12px rgba(10,37,64,.45);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tcar-btn:hover {
  transform: translateY(-2px);
  border-color: #cfd5dc;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.tcar-btn:active { transform: translateY(0); }
.tcar-next { animation: none; }
.section-dark .tcar-btn {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.04);
  color: #fff;
  box-shadow: none;
}
.section-dark .tcar-btn:hover {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: none;
}
.tcar-count { font-weight: 800; font-size: .95rem; color: var(--ink); min-width: 56px; text-align: center; }
.section-dark .tcar-count { color: #fff; }

/* ---- Graduates headshot wall ---- */
.grad-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.grad-search {
  flex: 1; min-width: 240px; max-width: 380px;
  padding: 13px 20px; border-radius: 999px; border: 1.5px solid #e2e2ef;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.grad-search:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 15%, transparent); }
.grad-count { font-weight: 700; font-size: .88rem; color: var(--muted); }
.grad-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 22px 12px; margin-top: 34px; }
.grad { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.grad-ava {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: .02em;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.3), 0 6px 16px -8px rgba(20,20,60,.35);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  cursor: default;
}
.grad:hover .grad-ava { transform: scale(1.16) rotate(-5deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 14px 28px -10px rgba(20,20,60,.5); }
.grad span { font-size: .72rem; font-weight: 600; color: var(--slate); line-height: 1.25; }
.g0 { background: linear-gradient(135deg, #635bff, #8b5cf6); }
.g1 { background: linear-gradient(135deg, #ff5996, #f472b6); }
.g2 { background: linear-gradient(135deg, #0299cc, #22d3ee); }
.g3 { background: linear-gradient(135deg, #d97706, #fbbf24); }
.g4 { background: linear-gradient(135deg, #059669, #34d399); }
.g5 { background: linear-gradient(135deg, #7c3aed, #c084fc); }


/* ---- Inline SVG icons (replace emojis) ---- */
.icon-chip { color: var(--purple); }
.icon-chip svg { width: 25px; height: 25px; display: block; }
.section-dark .spot-card .icon-chip { color: #c084fc; }
.pm-frame .pm-icon { color: var(--purple); display: block; }
.pm-frame .pm-icon svg { width: 26px; height: 26px; }
.section-dark .pm-frame .pm-icon { color: rgba(255,255,255,.85); }
.ph-icon { color: var(--muted); display: inline-flex; }
.ph-icon svg { width: 28px; height: 28px; }
.step-num svg { width: 17px; height: 17px; vertical-align: -3px; }
.nc-icon { color: var(--purple); display: inline-flex; }
.nc-icon svg { width: 26px; height: 26px; }


/* ---- Light gradient stat sections (per-theme color direction) ---- */
.stats-tint { background: linear-gradient(160deg, #ffffff 0%, var(--tintA, #eef2ff) 45%, var(--tintB, #e0e7ff) 100%); }
.stats-tint .stat-value {
  background: linear-gradient(90deg, var(--sg1, #4f46e5), var(--sg2, #8b5cf6) 55%, var(--sg3, #ff5996));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stats-tint .eyebrow { color: var(--sg1, #4f46e5) !important; }
.stats-tint .stat-label, .stats-tint .lead, .stats-tint p { color: var(--slate); }
.stats-tint .h2, .stats-tint h2, .stats-tint h3 { color: var(--ink); }

.theme-launchpad { --tintA:#eff6ff; --tintB:#dbeafe; --sg1:#1d4ed8; --sg2:#3b82f6; --sg3:#38bdf8; }
.theme-ignite    { --tintA:#fff4e9; --tintB:#ffdfcf; --sg1:#6d0a03; --sg2:#c4230a; --sg3:#ff8a1e; }
.theme-dtc       { --tintA:#fcf3fc; --tintB:#f7def7; --sg1:#77186d; --sg2:#b62baa; --sg3:#dd4bd8; }
.theme-gtm       { --tintA:#ecfdf5; --tintB:#d1fae5; --sg1:#0f766e; --sg2:#00c48c; --sg3:#65a30d; }
.theme-accelerate{ --tintA:#f5f3ff; --tintB:#ede9fe; --sg1:#6d28d9; --sg2:#8b5cf6; --sg3:#d946ef; }
.theme-angels    { --tintA:#fffbeb; --tintB:#fef3c7; --sg1:#b8912a; --sg2:#d4af37; --sg3:#e8c766; }
.theme-ember     { --tintA:#fbf3f0; --tintB:#f8e2da; --sg1:#86185e; --sg2:#a21caf; --sg3:#f19c4a; }
.theme-fellow    { --tintA:#eef2ff; --tintB:#e0e7ff; --sg1:#4338ca; --sg2:#6366f1; --sg3:#818cf8; }
.theme-lightning { --tintA:#eef2ff; --tintB:#e0e7ff; --sg1:#3730a3; --sg2:#4f46e5; --sg3:#38bdf8; }
.theme-investing { --tintA:#f0f9ff; --tintB:#e0f2fe; --sg1:#0369a1; --sg2:#0284c7; --sg3:#38bdf8; }
.theme-mentors   { --tintA:#f7f4ff; --tintB:#e8e0ff; --sg1:#3d1470; --sg2:#7b45d8; --sg3:#9a7cf0; }


/* ---- Quote attribution: circle logo/headshot frame ---- */
.quote-src { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 20px; }
.card:has(> .quote) { display: flex; flex-direction: column; }
.card > .quote { margin-bottom: 0; }
.q-ava {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px dashed color-mix(in srgb, var(--purple) 55%, transparent);
  background: color-mix(in srgb, var(--purple) 8%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .78rem; letter-spacing: .03em; color: var(--purple);
}
.quote-src cite { font-style: normal; font-weight: 600; color: var(--slate); font-size: .9rem; line-height: 1.35; }
.section-dark .q-ava { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; }
.section-dark .quote-src cite { color: rgba(255,255,255,.72); }


/* ---- Polaroid photo stacks ---- */
.pola-row { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; padding-top: 12px; }
.pola {
  background: #fff; padding: 12px 12px 0; width: 228px; border-radius: 4px; position: relative;
  box-shadow: 0 16px 34px -14px rgba(20,20,60,.35);
  transform: rotate(var(--rot, -3deg));
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.pola:nth-child(2n) { --rot: 2.5deg; }
.pola:nth-child(3n) { --rot: -1.5deg; }
.pola:nth-child(4n) { --rot: 3.5deg; }
.pola:hover { transform: rotate(0deg) scale(1.07) translateY(-6px); box-shadow: 0 26px 50px -18px rgba(20,20,60,.45); z-index: 2; }
.pola::before {
  content: ""; position: absolute; top: -11px; left: 50%; margin-left: -38px;
  width: 76px; height: 22px; transform: rotate(-2deg);
  background: color-mix(in srgb, var(--purple) 22%, #fffdf5); opacity: .75; border-radius: 2px;
}
.pola-ph {
  aspect-ratio: 1 / 1; border-radius: 2px;
  border: 1.5px dashed color-mix(in srgb, var(--purple) 40%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--purple) 5%, transparent) 0 12px, color-mix(in srgb, var(--purple) 10%, transparent) 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; color: var(--muted); font-size: .74rem; text-align: center; padding: 10px;
}
.pola-ph svg { width: 24px; height: 24px; color: var(--purple); }
.pola-cap { padding: 12px 4px 14px; text-align: center; font-weight: 700; font-size: .88rem; color: var(--ink); }

/* ---- Region chip cloud ---- */
.region-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 860px; margin: 0 auto; }
.region-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px;
  border-radius: 999px; background: #fff; border: 1.5px solid #e2e2ef;
  font-weight: 700; font-size: .95rem; color: var(--ink);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
}
.region-chip svg { width: 17px; height: 17px; color: var(--purple); }
.region-chip:hover {
  border-color: var(--purple); transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--purple) 55%, transparent);
}


/* ---- Brand logo image ---- */
.nav-logo, .footer-brand { display: inline-flex; align-items: baseline; gap: 3px; }
.brand-img { height: 20px; width: auto; display: inline-block; align-self: center; }
.brand-img-lg { height: 24px; }
.nav.scrolled .brand-img { filter: invert(1) brightness(.25); }


/* ---- Themed hero ribbons (all pages) ---- */
.hero-aurora {
  position: absolute; top: -48%; right: -22%; width: 105%; height: 200%;
  z-index: 0; pointer-events: none; opacity: .6;
  transform: translateZ(0) rotate(-22deg);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 38%, #000 86%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 4%, #000 38%, #000 86%, transparent 100%);
}
.hero .container { position: relative; z-index: 1; }
@media (max-width: 820px) { .hero-aurora { right: -40%; width: 130%; opacity: .35; } }


/* ---- Tuck a tinted section under the hero diagonal (no white wedge) ---- */
.tuck {
  margin-top: -6vw;
  /* The hero owns the diagonal. Keeping a second coincident clip here can
     flatten the edge in some Chromium rendering paths. */
  padding-top: calc(64px + 6vw) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tintB, #e0e7ff) 92%, #fff) 0%, var(--tintA, #eef2ff) 50%, #ffffff 100%);
}

/* When a tucked section sits directly under a skewed hero, the HERO ALONE draws
   the diagonal: it is lifted above the tucked section, and the tucked section's
   own clip is dropped.

   Two clips on one line is fragile. The tucked section is opaque and is pulled
   up by exactly the wedge height, so if its clip is ever not applied, its flat
   top covers the wedge and the banner reads as a straight horizontal line. That
   was reported in Chrome a second or two after load and does not reproduce in a
   headless run, so it is a paint-time failure rather than a computed-style one:
   the clip cannot be trusted, only removed. The hero's clip is enough on its
   own, because the wedge it cuts away reveals the tucked section behind it.

   This also fixes a standing cosmetic defect. Two independently antialiased
   edges on one line do not have coverages that sum to 1, so the page background
   leaked through the join by a different amount per column and the edge read as
   jagged. One clip, one edge, no leak.

   Scoped to the adjacent-sibling case on purpose: lightning-round tucks under a
   plain wash div rather than a hero, and still needs its own clip. */
.hero.skewed { z-index: 1; }
.hero.skewed + .tuck {
  -webkit-clip-path: none;
  clip-path: none;
}

/* Testimonial video intros sit directly beneath their colored hero. Keep the
   content canvas flat white so the hero diagonal and video artwork provide the
   only color at the top of these application-process pages. */
body.theme-fellow > section.vintro-sec.testimonial-video-intro.tuck,
body.theme-dtc > section.vintro-sec.testimonial-video-intro.tuck,
body.theme-launchpad > section.vintro-sec.testimonial-video-intro.tuck,
body.theme-gtm > section.vintro-sec.testimonial-video-intro.tuck,
body.theme-ignite > section.vintro-sec.testimonial-video-intro.tuck {
  background: #ffffff !important;
  background-image: none !important;
}


/* ---- Hero texture: film grain + drifting dot grid ---- */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27280%27%20height%3D%27280%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.5%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: .07; mix-blend-mode: overlay;
}
.hero:not(.home-hero)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1.2px, transparent 1.2px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(85% 110% at 72% 28%, #000 15%, transparent 80%);
  mask-image: radial-gradient(85% 110% at 72% 28%, #000 15%, transparent 80%);
  animation: heroDots 24s linear infinite;
}
@keyframes heroDots { from { background-position: 0 0; } to { background-position: 60px 30px; } }
@media (prefers-reduced-motion: reduce) { .hero:not(.home-hero)::after { animation: none; } }


/* ---- Flowing gradient divider bars ---- */
.flow-bar {
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--violet), var(--purple), var(--pink), var(--cyan), var(--violet));
  background-size: 280% 100%;
  animation: flowBar 9s linear infinite;
}
.flow-bar-glow { height: 5px; box-shadow: 0 0 24px 1px color-mix(in srgb, var(--purple) 45%, transparent); }
@keyframes flowBar { to { background-position: -280% 0; } }
@media (prefers-reduced-motion: reduce) { .flow-bar { animation: none; } }



/* ---- Magnetic buttons + ripple ---- */
.btn-primary, .btn-accent, .btn-light { position: relative; overflow: hidden; will-change: transform; }
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .25; transform: scale(0);
  animation: btnRipple .55s ease-out forwards;
}
@keyframes btnRipple { to { transform: scale(3); opacity: 0; } }

/* ---- Curriculum scroll progress line ---- */
.wk-track { position: relative; padding-left: 30px; }
.wk-line {
  position: absolute; left: 8px; top: 10px; bottom: 10px; width: 3px;
  background: color-mix(in srgb, var(--purple) 14%, transparent); border-radius: 3px;
}
.wk-line-fill {
  display: block; width: 100%; height: var(--wkp, 0%);
  background: linear-gradient(180deg, var(--violet), var(--purple), var(--pink));
  border-radius: 3px;
}

/* ---- Program finder quiz ---- */
.quiz { padding: 36px; }
.quiz-q { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; color: var(--ink); }
.quiz-opts { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.quiz-opt {
  padding: 17px 18px; border: 1.5px solid #e2e2ef; border-radius: 14px; background: #fff;
  font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.quiz-opt:hover {
  border-color: var(--purple); transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--purple) 55%, transparent);
}
.quiz-step { animation: qIn .35s ease both; }
@keyframes qIn { from { opacity: 0; transform: translateX(26px); } }
.quiz-dots { display: flex; gap: 8px; margin-top: 26px; }
.quiz-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e2ef; transition: background .3s, transform .3s; }
.quiz-dot.on { background: var(--purple); transform: scale(1.25); }
.quiz-result { animation: qPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes qPop { from { opacity: 0; transform: scale(.92); } }
.quiz-res-name {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--finder-color-start, var(--violet)), var(--finder-color-end, var(--pink)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.quiz-restart { background: none; border: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; margin-top: 18px; padding: 0; }
.quiz-restart:hover { color: var(--purple); }


/* ---- Program finder: spotlight moment ---- */
#finder {
  background:
    radial-gradient(55% 70% at 50% 0%, rgba(99,91,255,.28), transparent 65%),
    radial-gradient(40% 55% at 85% 100%, rgba(255,89,150,.14), transparent 60%),
    var(--navy);
}
#finder .quiz {
  border: 1.5px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, var(--finder-color-start, var(--violet)), var(--finder-color-end, var(--pink)));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 55px -8px color-mix(in srgb, var(--finder-color-end, var(--purple)) 55%, transparent), 0 24px 60px -20px rgba(6,20,38,.7);
  animation: quizGlow 4s ease-in-out infinite;
}
@keyframes quizGlow {
  0%, 100% { box-shadow: 0 0 55px -8px color-mix(in srgb, var(--finder-color-end, var(--purple)) 55%, transparent), 0 24px 60px -20px rgba(6,20,38,.7); }
  50% { box-shadow: 0 0 75px -4px color-mix(in srgb, var(--finder-color-start, var(--violet)) 60%, transparent), 0 24px 60px -20px rgba(6,20,38,.7); }
}
#finder .quiz::after { display: none; }
/* the card is white - force dark-section text rules back to ink inside it */
#finder .quiz { background-color: #fff; color: var(--ink); }
#finder .quiz p { color: var(--slate); }
#finder .quiz .quiz-q { color: var(--ink); }
#finder .quiz .eyebrow { color: var(--finder-color-end, var(--purple)); }
#finder .quiz .quiz-opt { background: #fff; color: var(--ink); }
#finder .quiz .quiz-restart { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { #finder .quiz { animation: none; } }


/* GTM - light-beam hero */
.theme-gtm .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-gtm .hero .blob { opacity: .12; }
/* The CTA band reuses .gradient-bg but has no aurora canvas, so its blobs are
   the only light in it - they carry the full default .55. The hero's ribbon
   runs mint -> emerald (--cyan/--violet at boost 1.75) over near-black, so the
   band's blobs point at that same end. Default slots included --pink (#84cc16
   lime), which composited to olive and matched nothing on the page. */
.theme-gtm .cta-band .blob-1 { background: var(--cyan); }
.theme-gtm .cta-band .blob-2 { background: var(--violet); }
.theme-gtm .cta-band .blob-3 { background: var(--sky); opacity: .45; }


/* Investing - airy sky-silk hero */
.theme-investing .hero .gradient-text {
  background-image: linear-gradient(95deg, #ffffff, #d6efff 55%, #90e0ff);
  filter: drop-shadow(0 2px 3px rgba(10,37,64,.55)) drop-shadow(0 10px 28px rgba(10,37,64,.4));
}

.theme-investing .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-investing .hero .blob { opacity: .3; }


/* Mentors - violet-plum silk with a periwinkle crest */
.theme-mentors .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
/* The violet base is darker than the investing blue, so the blobs read stronger
   at the same alpha. Held slightly under the .3 the other silk heroes use. */
.theme-mentors .hero .blob { opacity: .26; }


/* Accelerate - blue-violet silk hero */
.theme-accelerate .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-accelerate .hero .blob { opacity: .3; }


/* Emerging Angels - glowing dark gold foil (per reference photo).
   The whole field is gold - darkest corners ~29% lightness, never black.
   One soft diagonal bloom + a corner glint carry the "lit metal" read;
   the hero's built-in film grain supplies the foil texture.
   A gentle dark pool sits under the headline for contrast: the canvas
   aurora composites additively and cannot darken, so it must live here. */
.theme-angels .hero .gradient-bg {
  background:
    radial-gradient(72% 56% at 50% 40%, rgba(24,17,5,.60), rgba(24,17,5,.22) 58%, transparent 74%),
    radial-gradient(56% 46% at 33% 84%, rgba(244,234,152,.9), rgba(244,234,152,.32) 42%, transparent 68%),
    radial-gradient(30% 26% at 91% 26%, rgba(236,216,124,.5), transparent 70%),
    linear-gradient(160deg, #91722a 0%, #c49e3e 26%, #d9b452 52%, #b08c33 74%, #7a6023 100%);
}
.theme-angels .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
/* Near accelerate's .3 - the drifting motion needs to be visible, but gold
   blobs over a gold field haze faster than violet over indigo. */
.theme-angels .hero .blob { opacity: .22; }

/* Launchpad - powder-blue silk hero */
.theme-launchpad .hero .gradient-text {
  background-image: linear-gradient(95deg, #eafcff, #9fe8ff 55%, #67e8f9);
  filter: drop-shadow(0 2px 3px rgba(7,26,56,.55)) drop-shadow(0 10px 26px rgba(7,26,56,.35));
}

.theme-launchpad .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-launchpad .hero .blob { opacity: .3; }


/* Ignite DTC - dreamy periwinkle cloud hero */
.theme-dtc .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
/* Blobs carry more weight now that the base is a dark aubergine - at .25 they
   vanished into it. Gradient-text shadow moved off the old indigo to plum. */
.theme-dtc .hero .blob { opacity: .38; }
.theme-dtc .hero .gradient-text {
  background-image: linear-gradient(95deg, #ffffff, #fbe4ff 55%, #f0abfc);
  filter: drop-shadow(0 2px 3px rgba(26,5,24,.6)) drop-shadow(0 10px 26px rgba(26,5,24,.45));
}


/* Ignite - flame red silk */
.theme-ignite .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-ignite .hero .blob { opacity: .42; }
/* Faster drift than the shared defaults so the fire reads as alive.
   Durations stay mutually prime-ish - matching them would sync the blobs
   into a single pulsing mass. Reduced-motion kills these globally. */
.theme-ignite .hero .blob-1 { animation-duration: 3.7s; }
.theme-ignite .hero .blob-2 { animation-duration: 4.6s; }
.theme-ignite .hero .blob-3 { animation-duration: 4.1s; }
.theme-ignite .hero .blob-4 { animation-duration: 5.3s; }
.theme-ignite .hero .gradient-text {
  background-image: linear-gradient(95deg, #ffe4be, #ff9c3e 55%, #ff5a1c);
  filter: drop-shadow(0 2px 3px rgba(60,5,2,.55)) drop-shadow(0 10px 26px rgba(60,5,2,.4));
}


/* Sunset hero, dusk version - same hue story as the reference (blue top-left,
   lilac/violet left, coral-pink center, hot pink / orange / amber right) but
   at dark-hero depth so the type runs white like every other program hero.
   White verified >=4.4:1 on every glow. */
.sunset-hero .hero .gradient-bg {
  background:
    radial-gradient(30% 34% at 6% 4%, rgba(59,130,246,.75), transparent 66%),
    radial-gradient(38% 46% at 4% 42%, rgba(124,58,237,.7), transparent 64%),
    radial-gradient(42% 48% at 16% 92%, rgba(199,185,239,.35), transparent 66%),
    radial-gradient(46% 54% at 52% 70%, rgba(236,72,153,.6), transparent 66%),
    radial-gradient(46% 54% at 84% 58%, rgba(236,72,153,.75), transparent 64%),
    radial-gradient(34% 40% at 74% 94%, rgba(249,115,22,.7), transparent 64%),
    radial-gradient(28% 32% at 96% 4%, rgba(245,158,11,.75), transparent 66%),
    linear-gradient(120deg, #2c1e6e 0%, #4a1f66 55%, #58260f 100%);
}
.sunset-hero .hero .blob-1 { background: #3b82f6; }
.sunset-hero .hero .blob-2 { background: #ec4899; }
.sunset-hero .hero .blob-3 { background: #f59e0b; }
.sunset-hero .hero .blob { opacity: .4; }

/* Ember - indigo sky falling to black, gold wave crest (per reference art).
   The crest itself is the aurora canvas - a bright ridge on dark is the one
   thing additive compositing draws natively. The sky and glows live here. */
.theme-ember .hero .gradient-bg {
  background:
    radial-gradient(60% 55% at 55% 0%, rgba(21,17,114,.9), transparent 70%),
    radial-gradient(46% 50% at 62% 30%, rgba(62,18,147,.8), transparent 66%),
    radial-gradient(40% 44% at 70% 52%, rgba(119,21,153,.65), transparent 66%),
    radial-gradient(36% 46% at 6% 38%, rgba(130,24,45,.7), transparent 64%),
    linear-gradient(180deg, #1d1148 0%, #140a30 55%, #030108 100%);
}
.theme-ember .hero-aurora {
  opacity: 1;
  top: -12%; right: -18%; width: 135%; height: 165%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-ember .hero .blob { opacity: .26; }

/* Cobalt hero - cyan / royal blue / magenta mesh over deep navy (per
   reference art), same page-modifier pattern as .spectrum-hero. The
   reference's bright cyan sits where this page's headline goes, so the
   bloom is moved to the bottom-left corner; the royal-blue text zone
   holds 5.7:1. */
.cobalt-hero .hero .gradient-bg {
  background:
    radial-gradient(40% 50% at 4% 92%, rgba(89,195,244,.85), transparent 60%),
    radial-gradient(30% 38% at 8% 24%, rgba(70,155,212,.45), transparent 62%),
    radial-gradient(56% 66% at 45% 42%, rgba(64,105,246,.80), rgba(64,105,246,.25) 58%, transparent 78%),
    radial-gradient(36% 44% at 95% 6%, rgba(165,44,246,.85), transparent 62%),
    radial-gradient(44% 56% at 90% 52%, rgba(129,26,241,.7), transparent 64%),
    radial-gradient(50% 44% at 68% 100%, rgba(5,21,110,.9), transparent 70%),
    linear-gradient(120deg, #20317e 0%, #182474 55%, #0a1560 100%);
}
.cobalt-hero .hero .blob-1 { background: #59c3f4; }
.cobalt-hero .hero .blob-2 { background: #4069f6; }
.cobalt-hero .hero .blob-3 { background: #a52cf6; }
.cobalt-hero .hero .blob-4 { background: #2f17b0; }
.cobalt-hero .hero .blob { opacity: .3; }

/* Spectrum hero - vivid multi-hue mesh (orange / hot pink / purple / indigo /
   cyan, per reference art). A page-scoped modifier on top of a theme class so
   sibling pages sharing the theme keep their own hero. Bright corners stay
   away from the headline zone; the purple core under the text holds 8.7:1. */
.spectrum-hero .hero .gradient-bg {
  background:
    radial-gradient(46% 60% at 8% 12%, rgba(240,91,23,.85), transparent 62%),
    radial-gradient(40% 52% at 10% 96%, rgba(252,23,90,.72), transparent 58%),
    radial-gradient(34% 44% at 94% 4%, rgba(50,150,202,.85), transparent 62%),
    radial-gradient(52% 64% at 88% 58%, rgba(58,57,150,.9), transparent 66%),
    radial-gradient(58% 72% at 50% 55%, rgba(133,0,169,.85), rgba(133,0,169,.30) 55%, transparent 78%),
    linear-gradient(120deg, #4a2286 0%, #372a84 100%);
}
.spectrum-hero .hero .blob-1 { background: #ff7a2b; }
.spectrum-hero .hero .blob-2 { background: #ff2e6e; }
.spectrum-hero .hero .blob-3 { background: #a12ce0; }
.spectrum-hero .hero .blob-4 { background: #22b1ff; }
.spectrum-hero .hero .blob { opacity: .3; }

/* Venture Fellow - indigo-violet silk hero */
.theme-fellow .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-fellow .hero .blob { opacity: .25; }
.theme-fellow .hero .gradient-text {
  background-image: linear-gradient(95deg, #dbe4ff, #a5b4fc 55%, #c084fc);
  filter: drop-shadow(0 2px 3px rgba(12,10,50,.55)) drop-shadow(0 10px 26px rgba(12,10,50,.4));
}

/* Admin dashboard - bright citrus base with a warm coral edge. */
.theme-adminorange .hero .gradient-bg {
  background:
    radial-gradient(48% 70% at 4% 10%, rgba(255,207,91,.78), transparent 66%),
    radial-gradient(32% 45% at 16% 68%, rgba(255,216,102,.72), transparent 66%),
    radial-gradient(42% 60% at 96% 40%, rgba(255,145,70,.78), transparent 70%),
    radial-gradient(35% 50% at 72% 18%, rgba(255,176,35,.48), transparent 68%),
    radial-gradient(56% 72% at 52% 104%, rgba(255,183,102,.86), transparent 72%),
    linear-gradient(145deg, #ffb83e 0%, #ff8231 48%, #ff986d 100%);
}
.theme-adminorange .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-adminorange .hero .blob { opacity: .36; }
.theme-adminorange .hero h1,
.theme-adminorange .hero .lead,
.theme-adminorange .hero .pill {
  text-shadow: 0 2px 24px rgba(111,35,5,.58), 0 1px 3px rgba(111,35,5,.48);
}
.theme-adminorange .hero .pill::before,
.theme-adminorange .hero .pill::after {
  background: linear-gradient(90deg, #ff5996, #d85ccf);
  box-shadow: 0 0 12px rgba(216,92,207,.42);
}


/* Founder testimonials - cerulean silk */
/* Founders - mint wave / magenta blooms over deep indigo (per reference art).
   The mint crest is bright (~2:1 vs white) so it stays pinned to the bottom
   edge, below the headline; the indigo field carries the text at ~16:1. */
.theme-founders { --hero-base:#1c0d6b; --violet:#78e9cf; --purple:#7c3aed; --pink:#cd2c91; --cyan:#5eead4; --amber:#f0abfc; --sky:#a7f3e6; --gold:#defcf5; --purple-dark:#5b21b6;
  --tintA:#f0fdf9; --tintB:#d9f7ee; --sg1:#5b21b6; --sg2:#cd2c91; --sg3:#34d399; }
.theme-founders .hero .gradient-bg {
  background:
    radial-gradient(34% 40% at 8% 12%, rgba(5,1,33,.9), transparent 64%),
    radial-gradient(40% 44% at 46% 6%, rgba(205,44,145,.75), transparent 62%),
    radial-gradient(36% 40% at 54% 62%, rgba(191,40,136,.5), transparent 60%),
    radial-gradient(60% 34% at 30% 104%, rgba(120,233,207,.9), transparent 66%),
    radial-gradient(34% 40% at 92% 78%, rgba(94,234,212,.35), transparent 66%),
    linear-gradient(150deg, #241076 0%, #1c0d6b 55%, #2a0a5e 100%);
}
.theme-founders .hero-aurora {
  opacity: 1;
  top: -35%; right: -18%; width: 135%; height: 175%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}
.theme-founders .hero .blob-1 { background: #78e9cf; }
.theme-founders .hero .blob-2 { background: #cd2c91; }
.theme-founders .hero .blob-3 { background: #6d28d9; }
.theme-founders .hero .blob-4 { background: #1e0379; }
.theme-founders .hero .blob { opacity: .3; }
.theme-founders .hero .gradient-text {
  background-image: linear-gradient(95deg, #ffffff, #d9f7ee 55%, #78e9cf);
  filter: drop-shadow(0 2px 3px rgba(8,4,40,.55)) drop-shadow(0 10px 26px rgba(8,4,40,.4));
}


/* ---- Fellow gallery band (photo wall) ---- */
.face-band { padding: 0; background: #0e0d33; }
.face-wall { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.face-tile {
  aspect-ratio: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  filter: brightness(.8) saturate(.9);
  transition: filter .35s, transform .35s;
}
.face-tile:nth-child(4n+1) { background: linear-gradient(160deg, #232156, #161443); }
.face-tile:nth-child(4n+2) { background: linear-gradient(160deg, #1d2a5e, #131c48); }
.face-tile:nth-child(4n+3) { background: linear-gradient(160deg, #2a1e5c, #1a1245); }
.face-tile:nth-child(4n)   { background: linear-gradient(160deg, #1c2350, #12173e); }
.face-tile svg { width: 34%; height: 34%; opacity: .8; }
.face-tile em {
  position: absolute; bottom: 7px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: .58rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}
.face-tile:hover { filter: brightness(1.2) saturate(1.1); z-index: 1; }
@media (max-width: 820px) { .face-wall { grid-template-columns: repeat(5, 1fr); } .face-tile:nth-child(n+16) { display: none; } }


/* Region chips on dark map sections */
.section-dark .region-chip {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff;
  cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
}
.section-dark .region-chip:hover, .section-dark .region-chip.on {
  border-color: var(--violet); background: rgba(129,140,248,.16);
  box-shadow: 0 10px 26px -14px rgba(129,140,248,.6);
}


/* ---- Real video embeds ---- */
.video-embed {
  aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(10,37,64,.5);
  background: #0a0f1e;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.fi-video-placeholder {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; overflow: hidden; isolation: isolate; cursor: pointer;
  background: linear-gradient(135deg, #071126 0%, #0b2840 48%, #14254e 100%);
}
.fi-video-thumb {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
/* The AVIF/WebP <picture> wrapper would otherwise count as a flex item inside
   .fi-video-placeholder and nudge the centred play button. Pull it out of flow
   so the thumb keeps behaving exactly like the bare <img> it replaced. */
.fi-video-thumb-pic { position: absolute; inset: 0; z-index: -1; display: block; }
.fi-thumb-video .pvt-stage { display: none !important; }
.fi-video-placeholder::before {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  opacity: .85; mix-blend-mode: screen;
  background:
    radial-gradient(35% 45% at 22% 24%, rgba(126,92,255,.72), transparent 70%),
    radial-gradient(38% 46% at 82% 78%, rgba(54,205,218,.46), transparent 72%);
  animation: fiVideoDrift 18s ease-in-out infinite alternate;
}
.fi-video-placeholder::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 28px 28px;
}
.fi-video-placeholder-content {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 11px; padding: 22px; text-align: center; color: #fff;
}
.fi-video-placeholder-kicker {
  color: rgba(255,255,255,.68); font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.fi-video-placeholder-title { font-size: clamp(1.35rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.045em; }
.fi-video-placeholder-note { color: rgba(255,255,255,.68); font-size: .86rem; font-weight: 600; }
/* The cover art for these pages bakes its own centred wordmark into the image,
   so a centred disc lands straight on top of the type and splits the word.
   Park it in the lower-right corner instead, the way the hand-built programme
   covers do. Insets are percentages so the disc keeps the same visual margin
   as the 16/9 box scales. */
.fi-video-placeholder-play {
  position: absolute; right: 5.5%; bottom: 7.5%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border: 3px solid rgba(255,255,255,.92);
  border-radius: 50%; background: linear-gradient(135deg, var(--violet, #8b5cf6), var(--purple, #6d5dfc));
  box-shadow: 0 18px 42px -14px rgba(95,76,255,.85), 0 0 0 12px rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fi-video-placeholder-play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
@media (max-width: 700px) {
  /* The box is only ~185px tall here, so the full-size disc would crowd the
     corner and its outer ring would touch the edges. */
  .fi-video-placeholder-play {
    width: 50px; height: 50px; border-width: 2px;
    /* Floor the insets: at 320px the box is only ~153px tall, and a bare
       percentage leaves too little room for the halo, which the box clips. */
    right: max(16px, 5.5%); bottom: max(18px, 7.5%);
    box-shadow: 0 12px 28px -10px rgba(95,76,255,.85), 0 0 0 8px rgba(255,255,255,.08);
  }
  .fi-video-placeholder:hover .fi-video-placeholder-play,
  .fi-video-placeholder:focus-visible .fi-video-placeholder-play {
    box-shadow: 0 14px 32px -10px rgba(95,76,255,.95), 0 0 0 10px rgba(255,255,255,.1);
  }
  .fi-video-placeholder-play::before {
    margin-left: 4px;
    border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px;
  }
}
.fi-video-placeholder:hover .fi-video-placeholder-play,
.fi-video-placeholder:focus-visible .fi-video-placeholder-play {
  transform: scale(1.08); box-shadow: 0 22px 48px -14px rgba(95,76,255,.95), 0 0 0 15px rgba(255,255,255,.1);
}
.fi-video-placeholder:focus-visible { outline: 3px solid var(--sky, #90e0ff); outline-offset: -4px; }
@keyframes fiVideoDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(3%,-3%,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .fi-video-placeholder::before { animation: none; } }


/* ---- Read-more expanders (text preserved, clamped by default) ---- */
.clamp3 { /* clamp removed - full text always shown */ }
.xmore-btn {
  background: none; border: none; padding: 0; margin-top: 8px; cursor: pointer;
  font: 700 .84rem Inter, sans-serif; color: var(--purple); display: inline-flex; align-items: center; gap: 5px;
}
.xmore-btn:hover { text-decoration: underline; }
.section-dark .xmore-btn { color: var(--sky, #90e0ff); }

/* ---------- Video testimonial grid + inline modal ---------- */
.vt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 18px; margin-top: 32px; align-items: start; }
@media (max-width: 1020px) { .vt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .vt-grid { grid-template-columns: repeat(2, 1fr); } }
.vt-card.vt-off { display: none; }
.vt-nav .tcar-btn[disabled] { opacity: .35; cursor: default; transform: none; filter: none; }
.vt-card { display: flex; flex-direction: column; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; height: 100%; }
.vt-thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #e9edf5, #f6f9fc); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.vt-card:hover .vt-thumb, .vt-card:focus-visible .vt-thumb { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vt-card:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 14px; }
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Badge sits low in the 9:16 frame so it never lands on the subject's face */
.vt-thumb .play-badge { position: absolute; left: 50%; top: auto; bottom: 16px; transform: translateX(-50%); z-index: 1; width: 54px; height: 54px; }
.vt-thumb .play-badge::before { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
.vt-card:hover .play-badge { transform: translateX(-50%) scale(1.12); }
.vt-cap { display: block; margin-top: 10px; line-height: 1.35; }
.vt-cap strong { display: block; font-size: .95rem; }
.vt-cap span { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.section-dark .vt-cap, .section-dark .vt-cap strong { color: #fff; }
.section-dark .vt-cap span { color: rgba(255,255,255,.65); }
.vt-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.vt-modal.open { display: block; }
.vt-backdrop { position: absolute; inset: 0; background: rgba(10,37,64,.78); backdrop-filter: blur(6px); }
.vt-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: min(88vh, 165vw); aspect-ratio: 9 / 16; background: #000; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.vt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vt-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,37,64,.55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.vt-close:hover { background: rgba(10,37,64,.8); }
@media (max-width: 640px) {
  .vt-grid { grid-template-columns: 1fr; }
  .vt-frame { width: 100vw; height: 100dvh; max-width: none; aspect-ratio: auto; left: 0; top: 0; transform: none; border-radius: 0; }
  .vt-close { top: 12px; right: 12px; }
}

/* ---- Program video facade: animated thumbnail, click to play ---- */
.pvt-fit { position: relative; width: 100%; height: 100%; cursor: pointer; }
.pvt-stage { transform-origin: top left; }
.pvt-fit:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; }
@keyframes driftA { 0%{transform:translate(0,0) scale(1)} 30%{transform:translate(14%,10%) scale(1.18)} 62%{transform:translate(-9%,-7%) scale(.94)} 100%{transform:translate(0,0) scale(1)} }
@keyframes driftB { 0%{transform:translate(0,0) scale(1.05)} 35%{transform:translate(-13%,-9%) scale(.9)} 70%{transform:translate(10%,7%) scale(1.22)} 100%{transform:translate(0,0) scale(1.05)} }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.video-embed [data-thumb] { cursor:pointer; transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease }
.video-embed [data-thumb]:hover { transform:translateY(-8px) }
.video-embed [data-play] { transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease }
.video-embed [data-thumb]:hover [data-play] { transform:scale(1.1) }
.video-embed [data-thumb]:hover [data-rim] { opacity:1; animation-duration:3.2s }
@keyframes sheen { 0%{background-position:120% 0} 100%{background-position:-40% 0} }
@keyframes pulseRing { 0%{transform:scale(1); opacity:.55} 100%{transform:scale(1.6); opacity:0} }
@keyframes rimSpin { to { --ang: 360deg } }
@keyframes rimPulse { 0%,100%{opacity:.75} 50%{opacity:1} }
@keyframes texShift { to { background-position:100px 60px } }
@keyframes grainMove { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
@keyframes driftC { 0%{transform:translate(0,0) scale(.95)} 45%{transform:translate(9%,-12%) scale(1.25)} 75%{transform:translate(-11%,6%) scale(1)} 100%{transform:translate(0,0) scale(.95)} }

/* ---- Real event photos (replacing placeholders) ---- */
.evt-img { display: block; width: 100%; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow-sm); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.evt-img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.evt-img.ph-4x3 { aspect-ratio: 4 / 3; }
.evt-img.ph-16x9 { aspect-ratio: 16 / 9; }
.evt-img.ph-banner { aspect-ratio: 21 / 9; }
.evt-img.ph-portrait { aspect-ratio: 3 / 4; }

/* ---- Life at 1752: real photos in the marquee ---- */
.pm-frame.pm-photo { border: 0; padding: 0; overflow: hidden; background: #0a2540; display: block; box-shadow: 0 18px 40px -22px rgba(10,37,64,.6); }
.pm-frame.pm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
/* bottom: -1px for the same reason as .fgal figcaption above: a gradient that
   ends exactly on the frame's clip leaves a pale hairline once hover promotes
   the frame to its own layer. */
.pm-frame.pm-photo .pm-cap {
  position: absolute; left: 0; right: 0; bottom: -1px; padding: 26px 14px 13px;
  font-size: .8rem; font-weight: 700; color: #fff; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(10,37,64,.85));
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.pm-frame.pm-photo:hover img { transform: scale(1.07); }
.pm-frame.pm-photo:hover .pm-cap { opacity: 1; transform: none; }
/* Hovering a photo raises its caption and nothing else. Pausing the whole row
   to read one title froze the band around the pointer, and with the strip
   running at ~29px/s the caption is perfectly readable in motion. The photo
   galleries on the programme pages behave the same way. */
.section-dark .pm-frame.pm-photo { border: 0; background: #0a2540; }
/* A white glow on a dark band is the same mistake as a tinted shadow: it reads
   as a pale panel sliding out from behind the photo rather than as lift. Same
   dark shadow as the gallery figures on dark sections. */
.section-dark .pm-frame.pm-photo:hover { box-shadow: 0 22px 44px -24px rgba(0,0,0,.85); }

/* ---- Founders in action: photo gallery (masonry, no cropping) ---- */
.fgal { columns: 4; column-gap: 14px; margin-top: 34px; }
.fgal figure {
  break-inside: avoid; margin: 0 0 14px; position: relative;
  border-radius: 16px; overflow: hidden; background: #0a2540;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.fgal img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.fgal figure:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.fgal figure:hover img { transform: scale(1.05); }
/* bottom: -1px, not 0, and the padding carries the same 1px back so the text
   does not move. The frame clips this away, and it is there to stop a pale
   hairline along the bottom edge on hover. Flush at `bottom: 0` the caption's
   gradient and the frame's clip end on the same fractional pixel; once the
   hover transform puts the figure on its own compositor layer they round apart,
   and the last device row is left showing bare photo instead of photo under
   85% navy. On a shot with a light floor that is a jump from rgb(39,63,85) to
   rgb(172,185,183), which reads as a white line drawn under the picture. */
.fgal figcaption {
  position: absolute; left: 0; right: 0; bottom: -1px; padding: 30px 14px 13px;
  font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.3;
  background: linear-gradient(180deg, transparent, rgba(10,37,64,.85));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.fgal figure:hover figcaption { opacity: 1; transform: none; }
/* The shared shadows are tinted rgba(50,50,93,...), which is lighter than a
   dark section, so on those pages they do not read as depth at all: they paint
   a pale rectangle of fog around the photo that looks like a panel sliding out
   from behind it, most obvious on hover when the shadow grows. A shadow has to
   be darker than the surface it falls on, so on dark sections it becomes black
   at low opacity. The lift itself is unchanged. */
.section-dark .fgal figure { box-shadow: 0 10px 24px -18px rgba(0,0,0,.8); }
.section-dark .fgal figure:hover { box-shadow: 0 22px 40px -22px rgba(0,0,0,.85); }
@media (max-width: 900px) { .fgal { columns: 2; } }
@media (max-width: 520px) { .fgal { columns: 1; } }

.tband-gloss::after, .tband-ai::after { z-index: 0; opacity: .7; }

/* ---- Instructor video cover (uses the vt-modal player) ---- */
.instr-card { max-width: 320px; margin-top: 26px; }
.instr-card .vt-thumb { aspect-ratio: 9 / 16; border-radius: 18px; }
.instr-card .play-badge { width: 68px; height: 68px; }
.instr-card .play-badge::before { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
.section-dark .instr-card .vt-thumb { box-shadow: 0 24px 60px -22px rgba(0,0,0,.6); }

/* ---- Partnership logo row ---- */
.plogos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 38px 64px; }
.plogo img { height: 96px; width: auto; display: block; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.plogo:hover img { transform: translateY(-3px) scale(1.04); }
@media (max-width: 640px) { .plogos { gap: 26px 34px; } .plogo img { height: 64px; } }

/* second photo strip scrolls the opposite way */
.photo-marquee.pm-rev .marquee-track { animation-direction: reverse; animation-duration: 70s; }

/* ============================================================
   Data viz: shared chart primitives
   ============================================================ */
.fchart { position: relative; }
.fchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fchart .fx-axis { fill: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.fchart .fx-grid { stroke: rgba(10,37,64,.07); stroke-width: 1; }
.section-dark .fchart .fx-axis { fill: rgba(255,255,255,.6); }
.section-dark .fchart .fx-grid { stroke: rgba(255,255,255,.10); }
.fx-note { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.section-dark .fx-note { color: rgba(255,255,255,.55); }
.fx-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%,-100%) translateY(-12px);
  background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; padding: 9px 13px; white-space: nowrap;
  box-shadow: 0 14px 34px -12px rgba(76,29,149,.35); transition: opacity .16s ease; z-index: 4;
}
.fx-tip.on { opacity: 1; }
.fx-tip b { display: block; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-tip span { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --- Funnel --- */
.funnel-band { transform-origin: 50% 50%; transform: scaleX(.15); opacity: 0; transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.fchart.go .funnel-band { transform: none; opacity: 1; }
.fchart.go .funnel-band:nth-of-type(2) { transition-delay: .12s; }
.fchart.go .funnel-band:nth-of-type(3) { transition-delay: .24s; }
.fchart.go .funnel-band:nth-of-type(4) { transition-delay: .36s; }
.funnel-band path { transition: filter .35s ease; }
.funnel-row:hover .funnel-band path { filter: brightness(1.12) saturate(1.25); }
.funnel-label { font-weight: 800; letter-spacing: -.01em; }
.funnel-val { font-variant-numeric: tabular-nums; font-weight: 800; }

/* --- Line / area charts --- */
.fx-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-area { opacity: 0; transition: opacity 1s ease .5s; }
.fchart.go .fx-area { opacity: 1; }
.fx-proj { fill: none; stroke-width: 3; stroke-dasharray: 7 8; opacity: 0; transition: opacity .6s ease 1.1s; }
.fchart.go .fx-proj { opacity: 1; }
.fx-band { opacity: 0; transition: opacity .8s ease .3s; }
.fchart.go .fx-band { opacity: 1; }
.fx-end { opacity: 0; transition: opacity .5s ease 1.3s; }
.fchart.go .fx-end { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fchart.go .fx-end circle.pulse { animation: fxPulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .fchart.go .fx-line { animation: fxGlow 5.5s ease-in-out 1.4s infinite; }
}
@keyframes fxPulse { 0% { r: 7; opacity: .7; } 100% { r: 22; opacity: 0; } }
@keyframes fxGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(99,91,255,.45)); }
  50% { filter: drop-shadow(0 0 13px rgba(217,70,239,.75)); }
}
@media (prefers-reduced-motion: reduce) {
  .funnel-band, .fx-area, .fx-proj, .fx-band, .fx-end { transition: none !important; transform: none !important; opacity: 1 !important; }
}
/* --- Power-law explorer --- */
.plaw-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; }
@media (max-width: 860px) { .plaw-wrap { grid-template-columns: 1fr; } }
.plaw-readout { text-align: left; }
.plaw-num {
  font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(96deg, #635bff 0%, #a960ee 35%, #ff5996 70%, #ffb23e 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .plaw-num { animation: fxNumFlow 6s ease-in-out infinite alternate; } }
@keyframes fxNumFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.plaw-sub { color: var(--slate); margin-top: 10px; font-size: 1.02rem; line-height: 1.55; }
.plaw-ctl { margin-top: 26px; }
.plaw-ctl label { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plaw-ctl label b { font-size: 1.35rem; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plaw-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 12px; background: transparent; cursor: ew-resize; }
.plaw-ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #635bff 0%, #ff5996 var(--pct,40%), #e6e8f2 var(--pct,40%)); }
.plaw-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); margin-top: -7px; box-shadow: 0 0 0 5px rgba(99,91,255,.16), 0 2px 8px rgba(15,23,42,.18); transition: transform .18s ease; }
.plaw-ctl input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.plaw-ctl input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: #e6e8f2; }
.plaw-ctl input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); box-shadow: 0 0 0 5px rgba(99,91,255,.16); }

/* ============================================================
   Kokonut-style motion: beams, border light, spotlight, reveals
   ============================================================ */

/* --- Network beams --- */
.net-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.net-beams .beam-base { stroke: rgba(99,91,255,.16); stroke-width: 1; fill: none; }
.net-beams .beam-pulse { stroke: url(#beamGrad); stroke-width: 2.4; fill: none; stroke-linecap: round; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .net-beams .beam-pulse { opacity: 1; animation: beamRun var(--bdur, 3.2s) linear var(--bdelay, 0s) infinite; }
}
@keyframes beamRun { from { stroke-dashoffset: var(--blen, 400); } to { stroke-dashoffset: 0; } }
.network-field .net-circle { z-index: 1; }

/* --- Border beam (light travelling around a card edge) --- */
.beam-card { position: relative; isolation: isolate; }
.beam-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), transparent 0turn .62turn, #635bff .72turn, #ff5996 .82turn, #ffb23e .9turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s ease;
}
.beam-card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .beam-card::before { animation: beamSpin 4.5s linear infinite; }
  .beam-card.beam-always::before { opacity: .85; }
}
@keyframes beamSpin { to { --ang: 1turn; } }

/* --- Cursor spotlight --- */
.spot-card { position: relative; overflow: hidden; }
.spot-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--purple) 16%, transparent),
              color-mix(in srgb, var(--pink) 9%, transparent) 38%, transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.spot-card:hover::after { opacity: 1; }
.section-dark .spot-card::after, .vault.spot-card::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,203,87,.16), rgba(255,89,150,.08) 40%, transparent 65%);
}
.spot-card > * { position: relative; z-index: 2; }

/* --- Word-by-word headline reveal --- */
.wr-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wr .wr-word { opacity: 0; filter: blur(8px); transform: translateY(14px); }
  .wr.wr-go .wr-word {
    opacity: 1; filter: blur(0); transform: none;
    transition: opacity .55s ease, filter .55s ease, transform .6s cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--i, 0) * 42ms);
  }
}
/* The script above never arms these below 768px, so this is the safety net for
   a viewport that crosses the breakpoint after a heading was already armed: the
   hidden state must never be the last word on a phone, or a resize leaves real
   headlines invisible. */
@media (max-width: 768px) {
  .wr .wr-word, .wr.wr-go .wr-word {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}

/* marquee photos keep their own aspect: uniform height, width set per image, so nothing crops */
.pm-frame.pm-photo { width: auto; }
.pm-frame.pm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- Testimonial cards: uniform, aligned, no ragged captions ---- */
.vt-thumb { flex: none; }
.vt-card.vt-nocover .vt-thumb::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, #1b2a52, #0a2540 60%, #2a1e5c);
}
.vt-cap { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; min-height: 3.4em; }
.vt-cap strong {
  font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.vt-cap span {
  font-size: .8rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* quote cards sit flush with each other */
.grid-2 > .card:has(.quote), .grid-3 > .card:has(.quote) { display: flex; flex-direction: column; }
.card > .quote { flex: 1; }
.quote-src { margin-top: auto; padding-top: 18px; }

/* ---- Centered chip band (evenly wrapped, not ragged) ---- */
.chip-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }
.chip-band span {
  padding: 11px 20px; background: #fff; border: 1px solid #e6e8f2; border-radius: 100px;
  font-size: .92rem; font-weight: 700; color: var(--slate); box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.16,1,.3,1), color .25s, border-color .25s, box-shadow .25s;
}
.chip-band span:hover { transform: translateY(-3px); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); box-shadow: var(--shadow-md); }

/* ============================================================
   Program pages: at-a-glance strip + visual curriculum track
   ============================================================ */
.glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 900px) { .glance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .glance { grid-template-columns: 1fr; } }
.glance-item {
  position: relative; overflow: hidden; background: #fff; border: 1px solid #e6e8f2; border-radius: 16px;
  padding: 20px 18px; box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.glance-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.glance-ico {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 13%, transparent),
              color-mix(in srgb, var(--pink) 13%, transparent)); color: var(--purple); margin-bottom: 12px;
}
.glance-ico svg { width: 17px; height: 17px; }
.glance-v { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.glance-k { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* --- Curriculum track: two columns, weeks 1-6 | 7-12 --- */
.trk {
  list-style: none; margin: 34px 0 0; padding: 0; position: relative;
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 6), auto);
  grid-template-columns: 1fr 1fr; column-gap: 46px;
}
.trk-item { position: relative; margin: 0; border-bottom: 1px solid #edeff6; }
.trk-item::before {                      /* connector rail, per item, so it works in both columns */
  content: ""; position: absolute; left: 27px; top: 52px; bottom: -1px; width: 2px;
  background: linear-gradient(180deg, var(--purple), var(--violet));
  opacity: .22;
}
.trk-item:last-child::before { display: none; }
.trk-item:last-child { border-bottom: 0; }
@media (min-width: 901px) {
  /* Six-row curriculum grids split after week 6. Keep the divider and rail
     from continuing below the final item in the first desktop column. */
  .trk-item:nth-child(6)::before { display: none; }
  .trk-item:nth-child(6) { border-bottom: 0; }
}
.trk-head {
  display: grid; grid-template-columns: 56px 24px 1fr 20px; align-items: center; gap: 12px;
  width: 100%; padding: 14px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.trk-node {
  width: 50px; height: 50px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: var(--purple);
  background: #fff; border: 2px solid #e6e8f2; box-shadow: 0 4px 14px -6px rgba(99,91,255,.35);
  transition: color .3s, border-color .3s, background .3s, transform .35s cubic-bezier(.16,1,.3,1);
  position: relative; z-index: 1;
}
.trk-node i { font-style: normal; font-size: .5rem; font-weight: 800; letter-spacing: .14em; opacity: .65; margin-bottom: 1px; }
.trk-ico { width: 20px; height: 20px; color: var(--muted); transition: color .3s, transform .3s; }
.trk-title { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.trk-chev { justify-self: end; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s, border-color .3s; }
.trk-head:hover .trk-node, .trk-item.open .trk-node {
  color: #fff; border-color: transparent; transform: scale(1.06);
  background: linear-gradient(135deg, var(--purple), var(--violet) 55%, var(--pink));
}
.trk-head:hover .trk-ico, .trk-item.open .trk-ico { color: var(--purple); transform: scale(1.1); }
.trk-head:hover .trk-chev { border-color: var(--purple); }
.trk-item.open .trk-chev { transform: rotate(-135deg); border-color: var(--purple); }
.trk-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.trk-item.open .trk-body { max-height: 520px; }
.trk-body p { color: var(--slate); font-size: .93rem; line-height: 1.65; margin: 0; padding: 0 12px 18px 68px; }
@media (max-width: 900px) {
  .trk { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; column-gap: 0; }
  .trk-item::before { display: block; }
  .trk-item:last-child::before { display: none; }
  /* Keep mobile disclosure reliable even when long pages defer offscreen
     rendering. A paused max-height transition can otherwise leave an item
     aria-expanded while its description is still visually height zero. */
  .trk-body { transition: none; }
}
@media (max-width: 620px) {
  .trk-head { grid-template-columns: 42px 1fr 18px; gap: 10px; }
  .trk-ico { display: none; }
  .trk-node { width: 40px; height: 40px; font-size: .82rem; }
  .trk-item::before { left: 22px; top: 46px; }
  .trk-body p { padding-left: 52px; padding-right: 8px; }
}

/* --- Curriculum detail panel (desktop) ---
   The list stays fixed while the selected week's existing description is shown
   below it. Mobile intentionally keeps the inline accordion above. */
@media (min-width: 901px) {
  .section-dark, .gtm-track, .lp-dark {
    --trkd-accent: var(--sky, #90e0ff);
    --trkd-fill: rgba(255,255,255,.055);
    --trkd-title: #fff;
    --trkd-body: rgba(255,255,255,.78);
  }
  .trk-item.open .trk-body { max-height: 0; }
  .trk-chev { display: none; }
  .trk-item.trk-colend { border-bottom: 0; }
  .trk-item.trk-colend::before { display: none; }
  .trk-item.sel .trk-node {
    color: #fff; border: 0; background-clip: border-box; transform: scale(1.06);
    background: var(--trkd-node-grad, linear-gradient(135deg, var(--purple,#635bff), var(--violet,#a960ee) 55%, var(--pink,#ff5996)));
  }
  .trk-item.sel .trk-title { color: var(--trkd-accent, var(--purple,#635bff)); }
  .trk-detail {
    position: relative; margin-top: 26px; padding: 24px 28px; border-radius: 14px;
    box-sizing: border-box; background: var(--trkd-fill, rgba(120,132,166,.08));
    box-shadow:
      0 0 42px -16px color-mix(in srgb, var(--trkd-glow-a, var(--pink,#ff5996)) 45%, transparent),
      0 0 22px -12px color-mix(in srgb, var(--trkd-glow-b, var(--trkd-accent, var(--purple,#635bff))) 35%, transparent);
  }
  .trk-detail::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--trkd-grad, linear-gradient(120deg, var(--purple,#635bff), var(--violet,#a960ee) 30%, var(--pink,#ff5996) 60%, var(--trkd-accent, var(--purple,#635bff)) 85%, var(--purple,#635bff)));
    background-size: 320% 320%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: trkEmber 9s linear infinite; pointer-events: none;
  }
  @keyframes trkEmber {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .trk-detail-wk {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--trkd-accent, var(--purple,#635bff)); margin-bottom: 6px;
  }
  .trk-detail-title {
    font-size: 1.15rem; font-weight: 800; color: var(--trkd-title, var(--ink,#171a26));
    margin: 0 0 10px; line-height: 1.3;
  }
  .trk-detail-body p {
    font-size: .95rem; line-height: 1.7; color: var(--trkd-body, var(--slate,#4d5468)); margin: 0;
  }
  .trk-detail-inner { animation: trkFade .3s ease both; }
  @keyframes trkFade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .trk-detail::before, .trk-detail-inner { animation: none; }
  }
}

/* --- Pull quote --- */
.pullq { max-width: 880px; margin: 46px auto; text-align: center; }
.pullq p {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); font-weight: 700; line-height: 1.45; letter-spacing: -.02em;
  background-image: linear-gradient(96deg, #635bff 0%, #a960ee 40%, #ff5996 75%, #ffb23e 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .pullq p { animation: fxNumFlow 7s ease-in-out infinite alternate; } }
.pullq cite { display: block; margin-top: 16px; font-style: normal; font-size: .9rem; font-weight: 700; color: var(--muted); }

/* nav safety: never light-on-light */
.nav.scrolled .nav-logo, .nav.scrolled .nav-link { color: var(--navy) !important; }
.nav:not(.on-hero):not(.scrolled) .nav-logo, .nav:not(.on-hero):not(.scrolled) .nav-link { color: var(--navy); }
.nav.scrolled .nav-logo span { color: var(--purple) !important; }

/* gradient text must stay legible even if a child element breaks the clip */
.gradient-text > * { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- DTC brand wall ---- */
.brandwall { display: block; width: 100%; max-width: 1040px; margin: 0 auto; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .brandwall { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .brandwall:hover { transform: scale(1.01); }
}

/* brand-coloured focus ring on curriculum rows (replaces the default orange) */
.trk-head:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; border-radius: 12px; }
.trk-head:focus { outline: none; }

/* ============================================================
   Ignite DTC: video + copy intro, gradient stat band
   ============================================================ */
.vintro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .vintro { grid-template-columns: 1fr; gap: 30px; } }
.vintro-video { max-width: 520px; width: 100%; }
/* The video facade lays out a full 1920px stage and only scales it with a
   transform, so without this the grid item's automatic minimum size is the
   stage width. On phones that widened the whole document, which stretched the
   fixed nav past the screen and pushed the burger out of reach. */
.vintro-copy, .vintro-video { min-width: 0; }
.vintro-video .video-embed { max-width: 100%; margin: 0; }
.pvt-fit { overflow: hidden; }
.vintro-copy h2 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); letter-spacing: -.03em; }
.vintro-copy .eyebrow { margin-bottom: 10px; }
.vintro-sec:nth-of-type(even) .vintro { direction: rtl; }        /* alternate sides down the site */
.vintro-sec:nth-of-type(even) .vintro > * { direction: ltr; }

/* Testimonial pages introduce the programme before the alumni stories. Their
   video always belongs on the right, while the left column gives it enough
   context to feel intentional rather than like a full-width interruption. */
.vintro-sec.testimonial-video-intro { padding-bottom: 64px !important; }
.vintro-sec.testimonial-video-intro .container { max-width: 1180px !important; }
.vintro-sec.testimonial-video-intro .vintro {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 76px);
  direction: ltr;
}
.vintro-sec.testimonial-video-intro .vintro > * { direction: ltr; }
.vintro-sec.testimonial-video-intro .vintro-copy,
.vintro-sec.testimonial-video-intro .vintro-video { min-width: 0; }
.vintro-sec.testimonial-video-intro .vintro-copy { max-width: 470px; }
.vintro-sec.testimonial-video-intro .vintro-copy h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.05;
}
.vintro-sec.testimonial-video-intro .vintro-copy .lead { color: var(--slate); margin-top: 18px; }
.vintro-sec.testimonial-video-intro .vintro-note {
  margin: 22px 0 0;
  color: var(--purple);
  font-size: 1rem;
  font-weight: 800;
}
.vintro-sec.testimonial-video-intro .vintro-video { max-width: none; }
.vintro-sec.testimonial-video-intro .video-embed {
  border-radius: 20px;
  box-shadow: 0 26px 58px -28px rgba(10,37,64,.48);
}
@media (max-width: 900px) {
  .vintro-sec.testimonial-video-intro .vintro { grid-template-columns: 1fr; gap: 30px; }
  .vintro-sec.testimonial-video-intro .vintro-copy { max-width: 620px; }
  .vintro-sec.testimonial-video-intro .vintro-video { max-width: 680px; }
}

/* stat band: soft gaussian blobs in the page's own orchid/plum palette */
.dtc-stats {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 72px 0; margin-top: 10px;
  background: linear-gradient(160deg, #1b0b2e 0%, #2a0e3f 48%, #14061f 100%);
}
.dtc-stats::before {
  content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 28%, rgba(231,106,224,.55), transparent 62%),
    radial-gradient(34% 42% at 82% 34%, rgba(139,92,246,.5), transparent 62%),
    radial-gradient(40% 44% at 52% 88%, rgba(255,89,150,.42), transparent 64%);
  filter: blur(48px);
}
@media (prefers-reduced-motion: no-preference) {
  .dtc-stats::before { animation: dtcBlobs 22s ease-in-out infinite alternate; }
}
@keyframes dtcBlobs {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.1); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.04); }
}
.dtc-stats::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 46px 46px;
}
.dtc-statgrid .stat {
  background: rgba(255,255,255,.96); border-radius: 16px; padding: 26px 22px; text-align: center;
  box-shadow: 0 20px 44px -24px rgba(20,6,31,.75);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.dtc-statgrid .stat:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -22px rgba(20,6,31,.8); }
.dtc-statgrid .stat-value {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em;
  background-image: linear-gradient(96deg, var(--purple), var(--violet) 45%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dtc-statgrid .stat-label { color: var(--slate); font-size: .92rem; margin-top: 6px; line-height: 1.4; }
@media (max-width: 900px) { .dtc-stats { padding: 52px 0; } }

/* ---- Written testimonials: prominent headshot, cleaner attribution ---- */
.quote-src { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 22px; }
.q-ava {
  width: 84px !important; height: 84px !important; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--violet) 55%, var(--pink));
  border: 3px solid #fff;
  box-shadow: 0 12px 30px -12px rgba(99,91,255,.55), 0 0 0 1px rgba(10,37,64,.06);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
img.q-ava { object-fit: cover; padding: 0; background: #eef1f8; }
/* The rule above only matches the three `<img class="q-ava">` avatars. The other
   ~80 are `<span class="q-ava"><img></span>`, and .q-ava is a flex circle
   authored for text initials, so a nested image gets no sizing from it at all:
   as a flex item it shrinks along the main axis to the circle's width while
   keeping its own intrinsic height, which squashes the face horizontally. It
   stayed hidden because the markup asks for 84px and the circle is 84px, so it
   only bites below 520px where the circle drops to 64px. Roughly ten pages had
   each patched this with their own theme-scoped copy; this is the shared rule
   so a page without one cannot inherit the bug. Placeholder avatars hold
   initials rather than an image and are untouched. */
.q-ava > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; flex: none; }
.card:hover .q-ava { transform: scale(1.06); box-shadow: 0 16px 38px -12px rgba(99,91,255,.65), 0 0 0 1px rgba(10,37,64,.06); }
.quote-src cite {
  font-style: normal; font-weight: 800; font-size: 1.02rem; color: var(--ink); line-height: 1.35;
}
.quote-src cite::before { content: ""; }
@media (max-width: 520px) { .q-ava { width: 64px !important; height: 64px !important; font-size: 1.1rem; } }

/* ==========================================================================
   PROGRAM PAGE DESIGN SYSTEM  (added 2026-08-18)
   Shared rhythm + surface treatment for the five program pages. Every colour
   is drawn from the page's own theme-* block, so each programme keeps its own
   palette while the structure stays identical. Scoped to the theme classes so
   no non-programme page is affected.
   ========================================================================== */
.theme-ignite, .theme-dtc, .theme-launchpad, .theme-gtm, .theme-accelerate { --prog: 1; }

/* Final interview forms are hosted inside HubSpot's embedded frame. The
   default frame height is shorter than the multi-step form, which can clip
   the next/submit control at the bottom of the card. Give every final page
   the same responsive viewport and let the surrounding section grow with it. */
body.theme-ignite .fi-questions .fi-form-card,
body.theme-dtc .fi-questions .fi-form-card,
body.theme-launchpad .fi-questions .fi-form-card,
body.theme-gtm .fi-questions .fi-form-card,
body.theme-angels .fi-questions .fi-form-card,
body.theme-fellow .fi-questions .fi-form-card {
  overflow: visible;
}
body.theme-ignite .fi-questions .fi-form-card .hs-form-frame,
body.theme-dtc .fi-questions .fi-form-card .hs-form-frame,
body.theme-launchpad .fi-questions .fi-form-card .hs-form-frame,
body.theme-gtm .fi-questions .fi-form-card .hs-form-frame,
body.theme-angels .fi-questions .fi-form-card .hs-form-frame,
body.theme-fellow .fi-questions .fi-form-card .hs-form-frame {
  min-height: 780px;
  height: auto;
  overflow: visible;
}
body.theme-ignite .fi-questions .fi-form-card .hs-form-frame iframe,
body.theme-dtc .fi-questions .fi-form-card .hs-form-frame iframe,
body.theme-launchpad .fi-questions .fi-form-card .hs-form-frame iframe,
body.theme-gtm .fi-questions .fi-form-card .hs-form-frame iframe,
body.theme-angels .fi-questions .fi-form-card .hs-form-frame iframe,
body.theme-fellow .fi-questions .fi-form-card .hs-form-frame iframe {
  display: block;
  width: 100% !important;
  min-height: 780px !important;
  height: 780px !important;
  border: 0;
}
body.theme-ignite .fi-expect .btn-light,
body.theme-dtc .fi-expect .btn-light,
body.theme-launchpad .fi-expect .btn-light,
body.theme-gtm .fi-expect .btn-light,
body.theme-angels .fi-expect .btn-light,
body.theme-fellow .fi-expect .btn-light {
  box-shadow: var(--shadow-md);
}
body.theme-ignite .fi-expect .btn-light:hover,
body.theme-dtc .fi-expect .btn-light:hover,
body.theme-launchpad .fi-expect .btn-light:hover,
body.theme-gtm .fi-expect .btn-light:hover,
body.theme-angels .fi-expect .btn-light:hover,
body.theme-fellow .fi-expect .btn-light:hover {
  box-shadow: var(--shadow-lg);
}
@media (max-width: 760px) {
  body.theme-ignite .fi-questions .fi-form-card .hs-form-frame,
  body.theme-dtc .fi-questions .fi-form-card .hs-form-frame,
  body.theme-launchpad .fi-questions .fi-form-card .hs-form-frame,
  body.theme-gtm .fi-questions .fi-form-card .hs-form-frame,
  body.theme-angels .fi-questions .fi-form-card .hs-form-frame,
  body.theme-fellow .fi-questions .fi-form-card .hs-form-frame {
    min-height: 940px;
  }
  body.theme-ignite .fi-questions .fi-form-card .hs-form-frame iframe,
  body.theme-dtc .fi-questions .fi-form-card .hs-form-frame iframe,
  body.theme-launchpad .fi-questions .fi-form-card .hs-form-frame iframe,
  body.theme-gtm .fi-questions .fi-form-card .hs-form-frame iframe,
  body.theme-angels .fi-questions .fi-form-card .hs-form-frame iframe,
  body.theme-fellow .fi-questions .fi-form-card .hs-form-frame iframe {
    min-height: 940px !important;
    height: 940px !important;
  }
}

/* 1. Vertical rhythm - sitewide .section is 80px/80px, which stacks to a 160px
      gap between every section and reads as loose on these long pages. */
body.theme-ignite > section.section , body.theme-dtc > section.section , body.theme-launchpad > section.section , body.theme-gtm > section.section , body.theme-accelerate > section.section { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 760px) {
  body.theme-ignite > section.section , body.theme-dtc > section.section , body.theme-launchpad > section.section , body.theme-gtm > section.section , body.theme-accelerate > section.section { padding-top: 40px; padding-bottom: 40px; }
}

/* 2. Soft sections fade in and out rather than slabbing. A flat --bg-soft block
      butts into white with a visible seam at both edges; fading the first and
      last 14% removes it. The sitewide 1px hairline goes too, since with both
      sides white it would show as a line exactly where the seam used to be. */
body.theme-ignite > section.section-soft , body.theme-dtc > section.section-soft , body.theme-launchpad > section.section-soft , body.theme-gtm > section.section-soft , body.theme-accelerate > section.section-soft {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 14%,
              var(--bg-soft) 86%, #ffffff 100%);
}
body.theme-ignite > section.section + section.section-soft, body.theme-dtc > section.section + section.section-soft, body.theme-launchpad > section.section + section.section-soft, body.theme-gtm > section.section + section.section-soft, body.theme-accelerate > section.section + section.section-soft,
body.theme-ignite > section.section-soft + section.section , body.theme-dtc > section.section-soft + section.section , body.theme-launchpad > section.section-soft + section.section , body.theme-gtm > section.section-soft + section.section , body.theme-accelerate > section.section-soft + section.section { border-top: 0; }

/* 3. Closing CTA: depth + motion. The default band is a flat --hero-base with
      55vw blobs blurred 100px inside a ~220px-tall box, so the blobs average
      out to one flat colour. Smaller, tighter, screen-blended glows plus a
      conic rim and a sheen sweep give it dimension. */
body.theme-ignite .cta-band , body.theme-dtc .cta-band , body.theme-launchpad .cta-band , body.theme-gtm .cta-band , body.theme-accelerate .cta-band {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--hero-base) 82%, #000) 0%,
              var(--purple-dark, var(--purple)) 40%,
              var(--purple) 70%, var(--violet) 100%);
  box-shadow: 0 44px 100px -46px color-mix(in srgb, var(--purple) 80%, transparent);
}
body.theme-ignite .cta-band .gradient-bg , body.theme-dtc .cta-band .gradient-bg , body.theme-launchpad .cta-band .gradient-bg , body.theme-gtm .cta-band .gradient-bg , body.theme-accelerate .cta-band .gradient-bg { inset: -12%; background: transparent; }
body.theme-ignite .cta-band .blob , body.theme-dtc .cta-band .blob , body.theme-launchpad .cta-band .blob , body.theme-gtm .cta-band .blob , body.theme-accelerate .cta-band .blob { filter: blur(64px); opacity: .5; mix-blend-mode: screen; }
body.theme-ignite .cta-band .blob-1 , body.theme-dtc .cta-band .blob-1 , body.theme-launchpad .cta-band .blob-1 , body.theme-gtm .cta-band .blob-1 , body.theme-accelerate .cta-band .blob-1 { width: 30vw; height: 30vw; background: var(--violet); top: -38%; left: -6%; }
body.theme-ignite .cta-band .blob-2 , body.theme-dtc .cta-band .blob-2 , body.theme-launchpad .cta-band .blob-2 , body.theme-gtm .cta-band .blob-2 , body.theme-accelerate .cta-band .blob-2 { width: 24vw; height: 24vw; background: var(--amber);  top: 6%;   right: -4%; }
body.theme-ignite .cta-band .blob-3 , body.theme-dtc .cta-band .blob-3 , body.theme-launchpad .cta-band .blob-3 , body.theme-gtm .cta-band .blob-3 , body.theme-accelerate .cta-band .blob-3 { width: 22vw; height: 22vw; background: var(--pink);   bottom: -34%; left: 34%; }
body.theme-ignite .cta-band > span.cta-sheen , body.theme-dtc .cta-band > span.cta-sheen , body.theme-launchpad .cta-band > span.cta-sheen , body.theme-gtm .cta-band > span.cta-sheen , body.theme-accelerate .cta-band > span.cta-sheen {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.10) 48%, transparent 62%);
  background-size: 260% 100%; animation: progSheen 10s ease-in-out infinite;
}
@keyframes progSheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { body.theme-ignite .cta-band > span.cta-sheen , body.theme-dtc .cta-band > span.cta-sheen , body.theme-launchpad .cta-band > span.cta-sheen , body.theme-gtm .cta-band > span.cta-sheen , body.theme-accelerate .cta-band > span.cta-sheen { animation: none; } }

/* 4. Last step in a track carries no trailing rule - it has nothing below it
      to separate from. */
body.theme-ignite .step-row:last-child , body.theme-dtc .step-row:last-child , body.theme-launchpad .step-row:last-child , body.theme-gtm .step-row:last-child , body.theme-accelerate .step-row:last-child { border-bottom: 0; }

/* 3b. CTA decorative layers - markup adds three spans (.cta-rim/.cta-sheen/.cta-dots).
       .cta-band > * is position:relative z-index:1 sitewide, so these need the
       matching specificity to stay absolutely positioned behind the content. */
body.theme-ignite .cta-band > span.cta-rim, body.theme-dtc .cta-band > span.cta-rim, body.theme-launchpad .cta-band > span.cta-rim, body.theme-gtm .cta-band > span.cta-rim, body.theme-accelerate .cta-band > span.cta-rim, body.theme-ignite .cta-band > span.cta-sheen, body.theme-dtc .cta-band > span.cta-sheen, body.theme-launchpad .cta-band > span.cta-sheen, body.theme-gtm .cta-band > span.cta-sheen, body.theme-accelerate .cta-band > span.cta-sheen, body.theme-ignite .cta-band > span.cta-dots, body.theme-dtc .cta-band > span.cta-dots, body.theme-launchpad .cta-band > span.cta-dots, body.theme-gtm .cta-band > span.cta-dots, body.theme-accelerate .cta-band > span.cta-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 24px;
}
body.theme-ignite .cta-band > span.cta-rim, body.theme-dtc .cta-band > span.cta-rim, body.theme-launchpad .cta-band > span.cta-rim, body.theme-gtm .cta-band > span.cta-rim, body.theme-accelerate .cta-band > span.cta-rim {
  overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 88%);
  mask-image: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 88%);
}
body.theme-ignite .cta-band > span.cta-rim::before, body.theme-dtc .cta-band > span.cta-rim::before, body.theme-launchpad .cta-band > span.cta-rim::before, body.theme-gtm .cta-band > span.cta-rim::before, body.theme-accelerate .cta-band > span.cta-rim::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 200%; padding-bottom: 200%; margin: -100% 0 0 -100%;
  background: conic-gradient(var(--violet), var(--pink) 24%, var(--amber) 48%, var(--purple) 72%, var(--violet));
  filter: blur(30px); animation: progRim 14s linear infinite;
}
body.theme-ignite .cta-band > span.cta-dots, body.theme-dtc .cta-band > span.cta-dots, body.theme-launchpad .cta-band > span.cta-dots, body.theme-gtm .cta-band > span.cta-dots, body.theme-accelerate .cta-band > span.cta-dots {
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.6px);
  background-size: 12px 12px; opacity: .06;
}
@keyframes progRim { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.theme-ignite .cta-band > span.cta-rim::before, body.theme-dtc .cta-band > span.cta-rim::before, body.theme-launchpad .cta-band > span.cta-rim::before, body.theme-gtm .cta-band > span.cta-rim::before, body.theme-accelerate .cta-band > span.cta-rim::before { animation: none; } }

/* 5. Video -> at-a-glance gap. The tuck clips the section, so the card's shadow
      must finish inside it or it gets sliced into a hard line. Pulling the shadow
      in (reach 76px -> 50px) lets the padding drop from 92px to 64px. */
body.theme-ignite .vintro-sec .video-embed, body.theme-dtc .vintro-sec .video-embed, body.theme-launchpad .vintro-sec .video-embed, body.theme-gtm .vintro-sec .video-embed, body.theme-accelerate .vintro-sec .video-embed { box-shadow: 0 22px 50px -22px rgba(10,37,64,.45); }

/* 6. The section directly after the at-a-glance chips carries a tinted band.
      It is the only separator there - no divider - and the colour comes from each
      theme's own --tintB, so every programme gets its own hue. Anchored at full
      strength on the top edge so the break is visible, resolving to white below. */
body.theme-ignite > section.prog-band, body.theme-dtc > section.prog-band, body.theme-launchpad > section.prog-band, body.theme-gtm > section.prog-band, body.theme-accelerate > section.prog-band {
  background: linear-gradient(180deg,
      var(--tintB) 0%, color-mix(in srgb, var(--tintB) 62%, #fff) 34%,
      color-mix(in srgb, var(--tintB) 26%, #fff) 68%, #ffffff 100%);
  border-top: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
  padding-top: 44px; padding-bottom: 72px;
}

/* ============================================================
   Team roster tiles
   ============================================================ */

/* Roster tiles. The whole tile is one control: a <button> that opens the bio
   dialog on team.html (the per-person pages were retired). team.html strips the
   UA button chrome page-scoped, so everything below can stay presentational.
   Name and role sit on a scrim so they stay legible over any headshot, and over
   the dashed placeholder that stands in until real photos arrive. */
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 1040px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tm-card {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 16px; background: var(--bg-soft); text-decoration: none;
  box-shadow: 0 16px 38px -22px rgba(10,37,64,.55);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.tm-card:hover, .tm-card:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 54px -22px rgba(10,37,64,.6); }
.tm-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.tm-card:hover img { transform: scale(1.05); }
/* the author's dashed headshot placeholder, stretched to fill the tile */
.tm-card .ph { width: 100%; height: 100%; margin: 0; border-radius: 0; }
.tm-card .ph-hint { display: none; }
/* bottom: -1px with the 1px carried back into the padding, as on the gallery
   and marquee captions above: the tile clips and scales on hover, so a gradient
   ending exactly on the clip leaves a pale row of bare headshot behind. */
.tm-meta {
  position: absolute; left: 0; right: 0; bottom: -1px; padding: 46px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(10,37,64,.88));
  pointer-events: none;
}
.tm-name { display: block; color: #fff; font-weight: 800; font-size: .98rem; line-height: 1.25; }
.tm-role { display: block; margin-top: 4px; color: rgba(255,255,255,.75); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tm-arrow {
  position: absolute; top: 11px; right: 11px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--navy);
  transition: background .3s, color .3s, transform .3s;
}
.tm-arrow svg { width: 13px; height: 13px; }
.tm-card:hover .tm-arrow { background: var(--purple); color: #fff; transform: translate(2px, -2px); }


/* ============================================================
   Mobile refinements (<= 640px) - LOCAL EDIT, not upstream.
   From a phone layout audit at 375px and 390px: 44px minimum tap
   targets, a 13px type floor with 16px body copy, single-column
   grids on a 24px rhythm, and section padding cut back from the
   desktop 80px. Logged in replit.md; re-apply after a bundle drop.
   ============================================================ */

/* Marquee tracks are deliberately far wider than the screen. `clip` clips
   exactly like `hidden` but does NOT create a scroll container, so it cannot
   contribute a horizontal scrollbar and does not trap sticky descendants.
   The html/body guard is deliberately global: any horizontal overflow widens
   the layout viewport on a phone and pushes the fixed nav's burger off-screen. */
.marquee { overflow: clip; }
html, body { overflow-x: clip; }

@media (max-width: 640px) {
  /* ---- Section rhythm. 80px reads as dead space on a 375px screen. ---- */
  .section { padding-top: 60px; padding-bottom: 60px; }
  .section-head { margin-bottom: 32px; }
  .hero { padding-top: 104px; padding-bottom: 64px; }
  .cta-band { padding: 44px 22px; }
  .footer { padding-top: 56px; padding-bottom: 32px; }
  .footer-newsletter { padding: 22px 0; margin-bottom: 22px; }
  .footer-bottom { padding-top: 22px; }

  /* ---- Cards ---- */
  .card { padding: 20px; }
  .card-topline { padding-left: 24px; }
  .spot-feature { padding: 20px; }

  /* ---- Single column on a consistent 24px rhythm ---- */
  .grid { gap: 24px; }
  /* Four link groups stacked in a single column ran the footer to 1750px, over
     two full phone screens, with the grid alone at 1370px. Two columns halves
     that without shrinking any 44px tap target. The brand block keeps the full
     width: its five social links are 44px-wide targets that wrap badly in a
     half-width column. */
  .footer-grid { margin-bottom: 32px; }
  .footer-grid > :first-child { margin-bottom: 24px; }
  .footer-cols { column-gap: 18px; }
  .footer-cols > div { margin-bottom: 24px; }
  .footer h4 { margin-bottom: 10px; }
  .journey { grid-template-columns: 1fr; gap: 24px; }

  /* ---- Type floor: nothing under 13px, body copy at 16px ---- */
  .card p { font-size: 1rem; }
  .eyebrow { font-size: 13px; margin-bottom: 12px; }
  /* !important is load-bearing here only: the article template gives every blog
     file its own <style> block that re-declares .article-back smaller, and a
     page-level block outranks this sheet. This holds the phone type floor across
     ~150 authored article files without codemodding a single one. */
  .article-back {
    font-size: 13px !important;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* !important is load-bearing here: one authored pill carries an inline
     style="font-size:.72rem", and inline styles outrank every selector.
     Scoped to the phone query, so desktop keeps its authored sizes. */
  .pill { font-size: 13px !important; margin-bottom: 14px; }
  .journey-step .j-stage,
  .journey-branch .j-stage { font-size: 13px; }
  .dropdown .dd-note { font-size: 13px; }
  .ticker-band .marquee-item { font-size: 13px; }
  .footer-newsletter-label { font-size: 13px; }
  .footer-newsletter-tagline { font-size: 1rem; }
  .footer-tag { font-size: 1rem; max-width: none; }
  .footer-bottom { font-size: 13px; }

  /* ---- Tap targets: 44px minimum ---- */
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: 8px; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  .btn { min-height: 44px; }
  .footer a { font-size: 1rem; padding-top: 12px; padding-bottom: 12px; }
/* 18px between five 44px targets needs 292px, which overflows a 320px phone
   and wraps the fifth icon onto its own line: exactly the fault the icons
   were meant to cure. 8px keeps the row at 252px and still clears 320px. */
  .footer-socials { gap: 0 8px; }
  .footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  .pm-frame.pm-photo .pm-cap { font-size: 13px; }
  .chart .c-label { font-size: 13px; }

  /* ---- Hamburger menu: full screen, 48px rows ---- */
  .nav-links { padding: 8px 20px 28px; gap: 0; }
  .nav-links .nav-link { min-height: 48px; }
  .nav-links .dropdown { padding-left: 12px; }
  .nav-links .dropdown a {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 48px; font-size: 1rem;
  }
  .nav-cta .btn { min-height: 48px; width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Photo galleries are self-scrolling photo strips at every width

   They used to be a 4-column masonry on desktop and, briefly, a manual swipe
   rail with an arrows-and-counter cluster on phones. They now move on their
   own at both, the way the Life at 1752 strips on the home page do: the script
   clones one extra set of figures, measures one set, and the track translates
   by exactly that distance forever. Nothing to press, and no photo that can be
   missed because its control was overlooked.

   Hovering a photo raises its caption and nothing else. It deliberately does
   NOT pause the strip: with several photos on screen at desktop widths,
   stopping the whole row to read one title freezes the section around it, and
   the caption is legible in motion anyway.

   Every rule here is scoped to `.fgal-roll >`, so the moving layout only exists
   once the script has built the wrapper and cloned the second set. Without
   that, a width:max-content row would have nothing clipping it and would scroll
   the whole page sideways, which on this site also pushes the fixed header's
   menu button off screen. Unenhanced, the gallery stays the authored masonry
   above and a single column below: taller, but complete and readable.

   Several pages carry their own inline override, which is why these selectors
   are qualified with `body` and forced.
   --------------------------------------------------------------------------- */
.fgal-roll {
  display: block;
  overflow: hidden;
  /* The same edge fade the home page strips use: it reads as a row that
     continues rather than one that ends at the container. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
body .fgal-roll > .fgal {
  columns: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px;
  margin-top: 34px;
  width: max-content;
  /* The hover lift and its shadow have to land inside the wrapper's clip, so
     the track carries the room for them rather than the wrapper. */
  padding: 8px 0 20px;
  /* --fgal-shift is the measured width of one set, and --fgal-dur is derived
     from it so a seven-photo gallery and a fourteen-photo one travel at the
     same speed. Both are set per gallery by script; the fallbacks only cover
     the moment before that pass runs. */
  animation: fgalRoll var(--fgal-dur, 90s) linear infinite;
  will-change: auto;
}
/* will-change is a standing request for a compositor layer, so only the strip
   actually on screen gets one. Both classes come from the shared phone
   marquee budget observer, which is why they only appear on small screens. */
body .fgal-roll > .fgal.mq-run { will-change: transform; }
body .fgal-roll > .fgal.mq-idle { animation-play-state: paused; }
@keyframes fgalRoll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--fgal-shift, 50%)), 0, 0); }
}

/* Uniform height, natural width: every photo keeps its own shape, so nothing is
   cropped here and the row gets its rhythm from the mix of portrait and
   landscape rather than from a grid. This depends on the width/height
   attributes in the markup, which give the browser the ratio before the file
   arrives; without them a lazy image would have no width until it loaded and
   the frames would snap wider one by one as the strip slid along.
   `max-width: none` undoes the global `img { max-width: 100% }`, which would
   otherwise fight the height-driven width and squash the wider photos. */
body .fgal-roll > .fgal figure {
  flex: 0 0 auto;
  height: 240px;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
}
body .fgal-roll > .fgal img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  /* One photo at a time on a phone, so the frames become a uniform 4/3 crop.
     Four pages tune object-position per photo against exactly this frame, so
     altering its ratio would silently re-cut those faces. */
  body .fgal-roll > .fgal {
    gap: 12px;
    margin-top: 24px;
    padding: 4px 0 12px;
  }
  body .fgal-roll > .fgal figure {
    flex: 0 0 78vw;
    height: auto;
    width: auto;
    max-width: 320px;
    aspect-ratio: 4 / 3;
  }
  /* Bias the crop toward the top of the frame. These galleries mix portrait
     phone shots (as tall as 0.56:1) with landscape ones, and a *centred* crop
     into this 4/3 frame cuts heads off: it took the foreheads off a 0.79:1
     photo and the presenter's entire head off a 0.58:1 one. The subject of a
     people photo sits above the middle, so 20% keeps faces while still leaving
     enough headroom below to avoid shaving chins. Images at or wider than 4/3
     crop horizontally instead, so this leaves them untouched. */
  body .fgal-roll > .fgal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
  body .fgal-roll > .fgal figcaption { opacity: 1; transform: none; }

  /* The controls sit right under their component on a phone. .tcar-nav's
     desktop 40px top margin reads as a disconnected gap at this width. */
  body .vt-nav { margin-top: 16px; }

  /* Video testimonials deliberately do NOT become a moving strip or a swipe
     rail here, unlike .fgal above. At 62vw per card no testimonial was ever
     fully on screen: the row showed one card plus a sliver of the next, which
     reads as a clipped row rather than a scrollable one, and the portrait
     faces were the part that got cut. A photo tolerates being half on screen
     because it is a scene; a face does not. Left as a grid, the script's pager
     takes over and shows one whole 9/16 card at a time with the arrows and
     counter beneath, which is how the standalone application pages have always
     presented them. The single column itself comes from the 640px rule further
     up, so between 641 and 760px this still pages two cards at a time. */
}

/* Reduced motion: the strip must not move, so it has to be scrollable again.
   There are no arrows any more, which leaves the scrollbar as the only
   affordance, so it stays visible here rather than being suppressed. The
   clones go with the animation: without the loop they are just every photo a
   second time. Applies at every width, because the strip does. */
@media (prefers-reduced-motion: reduce) {
  .fgal-roll { -webkit-mask-image: none; mask-image: none; }
  body .fgal-roll > .fgal {
    width: auto;
    animation: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body .fgal-roll > .fgal figure { scroll-snap-align: start; }
  body .fgal-roll > .fgal .fgal-clone { display: none; }
}

/* ---------------------------------------------------------------------------
   Mobile: the /tools mini-calculator call to action must not be clipped.
   The card sets `overflow: hidden`, so a single-line 373px label inside a 327px
   card lost its last word and the arrow entirely.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .tool-mini-cta {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    height: auto;
    line-height: 1.35;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Desktop nav: keep every label on one line down to the hamburger breakpoint.
   Between ~960px and ~1100px the bar was still in desktop mode while
   "Pitch Deck Analyzer" and "Learn Venture" wrapped onto two and three lines and
   shoved the Apply button out of the bar.
   --------------------------------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1120px) {
  .nav-links { gap: 0; }
  .nav-link { white-space: nowrap; font-size: .82rem; padding-left: 9px; padding-right: 9px; }
  .nav-cta { white-space: nowrap; font-size: .82rem; padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   Mobile: the testimonial filter chips scroll horizontally with no visual cue
   that there is more to the right.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fw-filters {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   Mobile: application and final-interview forms need their horizontal budget back.

   These forms are HubSpot embeds nested inside .container (24px) -> the card
   (up to 44px) -> HubSpot's own inner padding. At 375px that left the frame at
   279px on /apply pages and 249px on *-final pages, and the inputs inside it
   around 157px. The cards are styled per page, so these are qualified with
   `body` to outrank the page-level rule regardless of source order. The
   negative inline margin reclaims the container gutter for the card only; the
   rest of the page keeps its normal 24px.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body .apply-card,
  body .fi-form-card {
    padding: 12px;
    margin-left: -12px;
    margin-right: -12px;
  }
  body .fi-form-card .hs-form-frame { padding: 0; }
}

/* ---------------------------------------------------------------------------
   /tools/* calculator pages: shared chrome.

   These pages are hand-built and carry their own complete stylesheet, so they
   only borrow the nav and footer from here. The back link used to be a fixed
   pill at z-index 99999, which sat on top of the chart's y-axis labels on
   mobile; it is a normal inline link in the flow now, directly under the bar.
   --------------------------------------------------------------------------- */
.tool-back-bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 24px 0;
}
a.tool-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: color .18s ease;
}
a.tool-back:hover { color: var(--purple, #8B5CF6); }
a.tool-back:focus-visible { outline: 2px solid var(--purple, #8B5CF6); outline-offset: 3px; border-radius: 4px; }

/* The tool pages have no dark site hero sitting behind the bar, so the bar can
   never borrow one for contrast: unstyled, the white logo lands on white. Pin
   them to the solid treatment the rest of the site only gets once scrolled. */
body.tools-chrome .nav {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(10,37,64,.08);
}
/* ...but that blur makes .nav a containing block for fixed descendants, so the
   open mobile menu (position: fixed; top: 64px; bottom: 0) resolved bottom:0
   against the 64px bar and collapsed to its own padding, ~36px tall, with the
   links scrolled out of sight. The shared `.nav.menu-open` rule already drops
   the filter for this reason, but it is the same specificity (0,2,0) and comes
   earlier, so the tools rule above won. Re-assert it at (0,3,0). */
body.tools-chrome .nav.menu-open {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.tools-chrome .nav .brand-img { filter: invert(1) brightness(.25); }
body.tools-chrome .nav .nav-logo,
body.tools-chrome .nav .nav-link { color: var(--navy) !important; }
body.tools-chrome .nav .nav-logo span { color: var(--purple) !important; }
body.tools-chrome .nav-burger { color: var(--navy) !important; }

/* ---- tool pages: keep the shared hero out of their own layout ----
   The /tools/* pages load this stylesheet only for the nav and footer. Several
   of them use the class name .hero for their own light, centred page header,
   declaring nothing but text-align and padding. Without this reset they also
   inherit the shared hero's flex row, 640px min-height and navy fill, which
   turns that header into a tall empty navy panel with the eyebrow and the lead
   paragraph overlapping on one line.

   The scope is wrapped in :where() so it adds no specificity: this stays at
   (0,1,0), which is enough to override the shared .hero earlier in this file,
   but still loses to each page's own header.hero (0,1,1) rules. So a tool page
   keeps everything it actually declares and drops only what leaked. */
:where(body.tools-chrome) .hero {
  display: block;
  position: static;
  min-height: 0;
  padding: 0;
  background: none;
  color: inherit;
  align-items: initial;
  justify-content: initial;
  text-align: inherit;
  overflow: visible;
}
/* Decorative canvas belonging to the shared hero. No tool page styles or wants
   it, and unpositioned it renders as a stray ribbon across the page. */
:where(body.tools-chrome) .hero-aurora { display: none; }

/* ---------------------------------------------------------------------------
   Fold-class widths (~280px): even 8px gaps push five 44px targets past the
   content box and wrap the last icon onto its own line, which is the exact
   fault the icons replaced. Close the gaps and let the row distribute itself
   rather than shrink the targets below the 44px minimum.
   --------------------------------------------------------------------------- */
@media (max-width: 330px) {
  .footer-socials { gap: 0; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Phone compositing budget.

   A `filter: blur(R)` layer is allocated at roughly (box + 6R) on each axis,
   multiplied by the square of the device pixel ratio. At 390px on a DPR-3
   phone the hero blobs plus the decor baked into .pvt-stage were asking for
   ~280MB of backing store on the application pages. That is past the ceiling
   an in-app WKWebView (a link opened inside another app) allows before it
   kills the tab, which surfaces as Safari's "A problem repeatedly occurred".
   Desktop keeps the original treatment; only small screens are simplified.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* A solid disc under a 100px blur reads the same as a soft-edged disc at
     this size, and a mask is allocated at the element box rather than the
     inflated blur buffer. Keeps each theme's own blob colour untouched. */
  /* !important is load-bearing: the per-theme `body.theme-x .cta-band .blob`
     rules are more specific than this one, so without it the three closing
     CTA blobs keep their blur(64px) and roughly 25MB of it survives. */
  .gradient-bg .blob {
    filter: none !important;
    will-change: auto !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 10%, rgba(0,0,0,.6) 46%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 10%, rgba(0,0,0,.6) 46%, transparent 100%);
  }
  .hero-light .blob { filter: none !important; }

  /* The video poster is authored at 1920x1080 and scaled down to roughly a
     third of a phone's width. Its glow layers are already radial gradients
     that fade to transparent, so the blur stacked on top is invisible at
     that scale and buys nothing but memory. The filter is set inline on
     each div, so overriding it needs !important. */
  .pvt-stage [style*="blur("] {
    filter: none !important;
    will-change: auto !important;
  }

  /* The poster is authored at 1920x1080 and a deferred script scales it to fit
     its container on DOMContentLoaded. Until that runs the browser lays out and
     paints it at full size, and each drifting child is promoted to its own layer
     at that scale, which measured ~370MB on the programme pages. That window is
     precisely the "loads for a second, then the screen goes white" report, and
     it is worse on a slow phone because the window is longer. Starting the
     poster near its final size costs nothing: the script still writes the exact
     scale as an inline style straight after, which outranks this. Note the
     unpatched pre-script state was not merely expensive but wrong-looking, a
     full-size poster clipped to its frame shows only its zoomed top-left
     corner, so this is also what a browser with JS disabled should have had. */
  .pvt-stage { transform: scale(.27); }

  /* At roughly a third of the screen wide this drift is imperceptible, and
     stopping it keeps the poster's children off the compositor altogether,
     before and after the fit script runs. */
  .pvt-stage,
  .pvt-stage * {
    animation: none !important;
    will-change: auto !important;
  }

  /* Decorative washes that are already built from soft gradients, so the blur
     stacked on top is close to invisible while costing the full inflated
     buffer. .tband is two per card and was the whole cost of the tools page. */
  .tband::before,
  .tband::after,
  .dtc-stats::before { filter: none !important; }

  /* Only a 1.4px blur, but a filtered layer cannot be tiled the way a plain
     one can, so it forces the entire overscanned 1630x1880 box into a single
     buffer. Dropping it is imperceptible and reclaims about 106MB. */
  .hero-beams { filter: none !important; }

  /* The hero canvas stops animating on phones, so holding a compositing
     promotion for it just reserves memory nothing is going to move. */
  canvas.hero-aurora { will-change: auto !important; }
}

/* The poster container is the viewport minus page padding until it reaches its
   cap, which is 520px on the programme pages and 680px on the testimonial and
   application pages, so a single pre-script scale cannot serve the whole range.
   Phones proper sit well below either cap and need the smaller value. Both
   steps deliberately land slightly under the container rather than over it,
   because .pvt-fit clips and overshooting would shave the poster's headline and
   play button off the right edge.
   The frame is the viewport minus 48px of page padding right up to its cap, so
   each step is sized against the NARROWEST frame in its own band: .27 fits the
   521px frame at 569px, .18 fits the 353px frame at 401px, and .14 fits the
   272px frame at 320px. That guarantees the poster never overflows and gets
   cropped, at the cost of sitting a little small at the top of each band. */
@media (max-width: 568px) {
  .pvt-stage { transform: scale(.18); }
}
@media (max-width: 400px) {
  .pvt-stage { transform: scale(.14); }
}