/* ==============================================================
   POLARIS PATHWAYS — THEME LAYOUT CSS
   Mobile-first. Layers on top of polaris-design-system.css.
   Tokens come from :root in the design system file.
   ============================================================== */

/* ─── GLOBAL RESET ──────────────────────────────────────────────
   The design-system file (Softr-era) doesn't include a reset, so
   every browser default leaks through. Two defaults caused real
   bugs: (1) box-sizing: content-box made min-height: 100dvh apply
   only to the content area, so any padded full-viewport section
   overflowed by its padding total — that's why the Career AI hero
   was 1037px on a 900px viewport and the footer fell below the
   fold. (2) body's default 8px margin offset every section by 8px
   from the viewport edge. Border-box + zero body margin matches
   modern reset conventions (normalize.css, Tailwind preflight). */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}

/* ─── ACCESSIBILITY HELPERS ─────────────────────────────────── */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-modal);
  background: var(--brand-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  top: 0;
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
}

/* ─── PAGE BACKGROUND ───────────────────────────────────────── */

html,
body {
  background: var(--color-background);
  /* Inter for all body copy. The design-system file scopes this to
     [data-block-id] (Softr leftover), so we set it on body here as the
     real default — picked up by every <p>, <span>, <li>, <a>, etc. */
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-main {
  display: block;
}

/* ─── SECTION WRAPPERS ──────────────────────────────────────── */

.section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-5);
}
.section-inner--narrow {
  /* Widened 2026-05-12 from 760 → 1000. Same rationale as
     .hero__inner--narrow — the narrow column was reading "stranded
     in the middle" on /about. 1000px keeps line-length readable for
     body text while better filling the canvas. */
  max-width: 1000px;
}

@media (min-width: 768px) {
  .section-inner {
    padding: var(--space-16) var(--space-8);
  }
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}
.section-heading--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 0 var(--space-8);
}

.eyebrow--center {
  display: block;
  text-align: center;
  margin-bottom: var(--space-3);
}
.eyebrow--on-dark {
  color: rgba(255, 255, 255, 0.8);
}

/* ─── BUTTON EXTENSIONS ─────────────────────────────────────── */

.btn--lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--text-base);
}
.btn--sm {
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
.btn--link-light {
  background: transparent;
  color: #fff;
  padding: 0 var(--space-2);
  text-decoration: none;
  font-weight: 600;
  transition: opacity var(--transition-fast);
}
.btn--link-light:hover {
  opacity: 0.85;
  text-decoration: underline;
}
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   SITE HEADER (NAV)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Header ────────────────────────────────────────────────────
   Sticky, glass-effect, scroll-elevated. Three states:
     default     — at top of page, mostly transparent backdrop
     is-scrolled — past 8px scroll, solid white + drop shadow
     is-mobile-open — drawer is showing, force solid bg + lock body
   Header height is also live-measured into --site-header-h by nav.js. */

/* Default state: TRANSPARENT — header blends into the hero below it.
   Past 8px scroll: solid white + soft shadow ("turns into a bar").
   Two flavors of the transparent state, decided by body class:
     body.has-dark-hero  → home / employers (dark green hero):
                           use the white p-mark + white nav text
     body (default)      → light hero pages (Career AI, About):
                           use the full black-greenstar logo + dark nav text
   When .is-scrolled is applied (or the mobile drawer is open),
   both flavors converge to the solid-white "bar" state.
   Header height live-measured into --site-header-h by nav.js. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}
.site-header.is-scrolled,
.site-header.is-mobile-open {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  /* Symmetrical padding + min-height that comfortably contains the 32px
     logo image without clipping. Was 56px → bumped so the rendered
     wordmark never bleeds outside the header bar. */
  padding: 12px var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
}
@media (min-width: 768px) {
  .site-header__inner {
    padding: 12px var(--space-8);
  }
}

/* ─── Logo ─────────────────────────────────────────────────────── */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity 150ms ease;
}
.site-header__logo:hover {
  opacity: 0.85;
  text-decoration: none;
}
.site-header__logo:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Two logo variants, only one visible per state — both are the full
   longform wordmark at the same aspect ratio so the swap between
   states never shifts layout.
     --dark   = black wordmark + green star (light backgrounds)
     --light  = white wordmark              (dark hero, top of scroll) */
.site-header__logo-img {
  display: block;
  height: 32px;
  width: auto;
  user-select: none;
}
.site-header__logo-img--dark {
  display: block;
}
.site-header__logo-img--light {
  display: none;
}
/* Visually hidden a11y wordmark — read aloud if both images fail. */
.site-header__logo-wordmark {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* On dark-hero pages, before scroll, swap to the light P-mark. */
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__logo-img--dark {
  display: none;
}
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__logo-img--light {
  display: block;
}

/* ─── Desktop nav ──────────────────────────────────────────────── */
.site-nav {
  display: none;
  margin-left: auto;
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition:
    color 150ms ease,
    background 150ms ease;
}
.site-nav__link:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.04);
  text-decoration: none;
}
.site-nav__link.is-active {
  color: var(--brand-primary);
  background: var(--brand-primary-ghost);
  font-weight: 600;
}

/* On dark-hero pages, before scroll, nav links go white. */
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-nav__link {
  color: rgba(255, 255, 255, 0.85);
}
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-nav__link.is-active {
  color: var(--brand-highlight);
  background: rgba(255, 173, 1, 0.14);
}
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__toggle-bars
  span {
  background: #fff;
}
/* CTA button on dark hero: white-on-transparent outline so it pops without
   competing visually with the green hero. Becomes the regular green CTA
   once the header turns into the solid bar. */
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__cta.btn--primary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__cta.btn--primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ─── Right side: CTA + mobile toggle ──────────────────────────── */
.site-header__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-left: auto;
}
@media (min-width: 768px) {
  .site-header__actions {
    margin-left: 0;
  }
}
.site-header__cta {
  display: none;
}
@media (min-width: 768px) {
  .site-header__cta {
    display: inline-flex;
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
  }
}

/* Quiet text link to LMS — sits next to the primary CTA without competing.
   Hidden on mobile (the same link is duplicated into the mobile drawer). */
.site-header__login {
  display: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Use --text-primary (the design system token) — `--color-text` was
     never defined and CSS fell through to the user-agent :link color
     (the bright blue underline). */
  color: var(--text-primary, #181817);
  text-decoration: none;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  /* Keep "My Courses" on a single line — at 768-960px the nav is
     tight and a 2-word label would otherwise wrap awkwardly between
     "My" and "Courses". The other nav labels are single-word so this
     only affects the logged-in account link. */
  white-space: nowrap;
  transition: color 150ms ease;
}
.site-header__login:hover,
.site-header__login:focus-visible {
  color: var(--color-accent, #499c57);
}
@media (min-width: 768px) {
  .site-header__login {
    display: inline-flex;
    align-items: center;
  }
}
/* On dark hero, lift to white so the quiet link stays legible. */
body.has-dark-hero
  .site-header:not(.is-scrolled):not(.is-mobile-open)
  .site-header__login {
  color: #fff;
}

.site-header__toggle {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.site-header__toggle:hover {
  background: rgba(15, 23, 42, 0.04);
}
.site-header__toggle:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.site-header__toggle-bars {
  display: inline-block;
  width: 22px;
  height: 16px;
  position: relative;
}
.site-header__toggle-bars span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition:
    transform 200ms var(--ease-out),
    opacity 150ms ease;
}
.site-header__toggle-bars span:nth-child(1) {
  top: 0;
}
.site-header__toggle-bars span:nth-child(2) {
  top: 7px;
}
.site-header__toggle-bars span:nth-child(3) {
  top: 14px;
}
.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-bars
  span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-bars
  span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-bars
  span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile drawer ────────────────────────────────────────────── */
.site-nav-mobile {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6) var(--space-6);
  animation: site-nav-mobile-slide 200ms var(--ease-out) both;
}
.site-nav-mobile[hidden] {
  display: none;
}
.site-nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-nav-mobile__link {
  display: block;
  padding: var(--space-4) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  transition:
    background 150ms ease,
    color 150ms ease;
}
.site-nav-mobile__link:hover {
  background: rgba(15, 23, 42, 0.04);
  text-decoration: none;
}
.site-nav-mobile__link.is-active {
  color: var(--brand-primary);
  background: var(--brand-primary-ghost);
}
.site-nav-mobile__cta {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: var(--brand-primary);
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-primary);
}

@keyframes site-nav-mobile-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-mobile {
    animation: none;
  }
}

@media (min-width: 768px) {
  .site-nav {
    display: block;
  }
  .site-header__toggle {
    display: none;
  }
  .site-nav-mobile {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  /* Pull the hero up UNDER the header so its background fills the area
     behind the transparent nav. Without this, the body's beige bg would
     show through above the hero. The header still sits in flow but with
     a negative margin on the next sibling, the hero visually starts at
     the very top of the viewport. */
  margin-top: calc(-1 * var(--site-header-h));
}

.hero--home,
.hero--employers {
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 50%
    ),
    linear-gradient(135deg, #499c57 0%, #3a7d46 60%, #2d6337 100%);
}
.hero--home::before,
.hero--employers::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}

/* About hero: editorial trust pattern. Soft beige-to-surface gradient
   keeps it warm + understated. A subtle brand-color radial glow in the
   upper-right adds intention without competing with the heading. */
.hero--about {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--neutral-50) 0%,
    var(--color-background) 100%
  );
  color: var(--text-primary);
  overflow: hidden;
}
.hero--about::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle at center,
    rgba(73, 156, 87, 0.1) 0%,
    rgba(73, 156, 87, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero--about .hero__inner {
  position: relative;
  z-index: 1;
}
/* Highlighted accent on the second line of the heading reads as a
   "this is the thesis" treatment — supports the trust style by making
   the value-prop visually claim authority. */
.hero--about .hero__heading-accent {
  color: var(--brand-primary);
  display: block;
  margin-top: var(--space-2);
}

.hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* Top padding compensates for the header overlap; remaining padding
     is the visual breathing room above the heading. */
  padding: calc(clamp(4rem, 6vw, 6rem) + var(--site-header-h)) var(--space-5)
    clamp(4rem, 6vw, 6rem);
  display: grid;
  gap: var(--space-10);
}
.hero__inner--narrow {
  /* Widened 2026-05-12 from 820 → 1100. The 820px column read as
     "stranded in the middle of the canvas" on wide displays. 1100px
     still keeps body copy at a readable line-length while using more
     of the page width. If a right-side hero asset lands later, we
     can revisit and split this into a two-column grid. */
  max-width: 1100px;
  text-align: left;
}

/* Reserve enough vertical space that the typewriter cycling cannot
   collapse the hero (heading goes from "Pathways to Certification"
   to "Pathways to Support" — significant width delta). */
.hero--home {
  min-height: clamp(620px, 78vh, 820px);
  display: flex;
  align-items: center;
}
.hero--home .hero__inner {
  width: 100%;
}

@media (min-width: 768px) {
  .hero__inner {
    padding: calc(clamp(5rem, 7vw, 8rem) + var(--site-header-h)) var(--space-8)
      clamp(5rem, 7vw, 8rem);
    gap: var(--space-12);
  }
  .hero--home .hero__inner {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

.hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-4);
  color: #fff;
}
.hero__heading--dark {
  color: var(--text-primary);
}

.hero__subhead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--space-6);
  max-width: 560px;
}
.hero__subhead--dark {
  color: var(--text-secondary);
}

.hero__stats {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 480px) {
  .hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.hero__stat-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__stat-pill strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: -0.025em;
  color: var(--brand-highlight);
  line-height: 1;
}
.hero__stat-pill span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.08em;
}

/* Hero CTA buttons — beefier than the global default */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-2);
}
.hero__actions .btn--lg {
  height: 56px;
  padding: 0 var(--space-8);
  font-size: var(--text-base);
  letter-spacing: -0.005em;
}
.hero__actions .btn--primary {
  background: #fff;
  color: var(--brand-primary-dark);
  border-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.hero__actions .btn--primary:hover {
  background: var(--brand-highlight);
  color: var(--neutral-900);
  border-color: var(--brand-highlight);
  box-shadow: 0 12px 32px rgba(255, 173, 1, 0.4);
  transform: translateY(-2px);
}
.hero__actions .btn--outline-light {
  height: 56px;
  padding: 0 var(--space-8);
}

/* ─── Hero heading stack ────────────────────────────────────────
   "Pathways to" sits on its own line; the cycling word lives on a
   second line below it. This makes the layout fully stable: the
   typewriter cycling through different word lengths can never
   reflow the prefix or push it onto a new line of its own. */
.hero__heading--typed {
  display: block;
}
.hero__heading-prefix {
  display: block;
  /* Slightly de-emphasized vs the cycling word so the brand-highlight
     accent below feels like the focal point. */
  color: rgba(255, 255, 255, 0.92);
}
.hero__heading-rotator {
  display: block;
  /* Reserve a min-height so when typewriter is at "" between phrases
     the line doesn't visually collapse. 1.05 matches heading line-height. */
  min-height: 1.05em;
  line-height: 1.05;
}
.typewriter--hero {
  display: inline-block;
  min-width: 4ch;
  text-align: left;
  vertical-align: baseline;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.hero__compound-impact {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* Temporary hero visual — static certificate mockup standing in for
   the explainer video. No frame, no shadow, no tilt: the artwork
   already carries its own border and color story. */
.hero__cert {
  margin: 0;
  width: 100%;
  max-width: 560px;
}
.hero__cert img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   DUAL-AUDIENCE SPLIT
   ═══════════════════════════════════════════════════════════════ */

.dual-split {
  background: var(--color-background);
}
.dual-split .section-inner {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .dual-split .section-inner {
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
  }
}

.dual-split__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dual-split__card h3 {
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  margin: 0;
}
.dual-split__card p {
  color: var(--text-secondary);
  flex-grow: 1;
}
.dual-split__card .btn {
  align-self: flex-start;
  margin-top: var(--space-3);
}

.dual-split__card--primary {
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--brand-primary-subtle) 100%
  );
  border-top: 3px solid var(--brand-primary);
}
.dual-split__card--secondary {
  background: var(--color-surface-alt);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE GRID (6 up for Home, 3 up for Employers/About)
   ═══════════════════════════════════════════════════════════════ */

.feature-grid {
  background: var(--color-background);
}
.feature-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .feature-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .feature-grid__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.feature-card__icon svg {
  width: 24px;
  height: 24px;
}
.feature-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.feature-card p {
  color: var(--text-secondary);
  margin: 0;
}
.feature-card__stat {
  margin-top: var(--space-3) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════
   WHY STATEMENT — Aya-inspired authority section.
   One bold claim, three supporting cards, one closing line.
   Used on Home in place of the prior 6-card feature grid.
   ═══════════════════════════════════════════════════════════════ */

.why-statement {
  background: var(--color-background);
}
.why-statement__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(4rem, 3rem + 5vw, 8rem) var(--space-5);
  text-align: center;
}
@media (min-width: 768px) {
  .why-statement__inner {
    padding: clamp(5rem, 3rem + 6vw, 9rem) var(--space-8);
  }
}

.why-statement__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 22ch;
  margin: 0 auto var(--space-12);
}
.why-statement__heading-accent {
  color: var(--brand-primary-dark);
}

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

.why-statement__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}
.why-statement__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.why-statement__card-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary-dark);
  margin-bottom: var(--space-5);
}
.why-statement__card-icon svg {
  width: 28px;
  height: 28px;
}

.why-statement__card-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  max-width: 22ch;
}
.why-statement__card-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
  max-width: 32ch;
}

.why-statement__close {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   VISION GRID (6 capability cards)
   ═══════════════════════════════════════════════════════════════ */

.vision-grid {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.vision-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .vision-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .vision-grid__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vision-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.vision-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary-subtle);
}
.vision-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: #fff;
  margin-bottom: var(--space-4);
}
.vision-card__icon svg {
  width: 26px;
  height: 26px;
}
.vision-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.vision-card p {
  color: var(--text-secondary);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */

.testimonials {
  background: var(--color-background);
}
.testimonials__list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .testimonials__list {
    grid-template-columns: 1fr 1fr;
  }
}
.testimonial {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.testimonial__quote p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin: 0;
  font-weight: 400;
}
.testimonial__quote p::before {
  content: "\201C";
  color: var(--brand-primary);
  font-size: 1.2em;
  margin-right: 0.15em;
}
.testimonial__quote p::after {
  content: "\201D";
  color: var(--brand-primary);
  font-size: 1.2em;
  margin-left: 0.15em;
}
.testimonial__attribution {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.testimonial__attribution strong {
  display: block;
  color: var(--text-primary);
}
.testimonial__attribution span {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
   PARTNERS BAR
   ═══════════════════════════════════════════════════════════════ */

.partners-bar {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.partners-bar .section-inner {
  padding: var(--space-8) var(--space-5);
}
.partners-bar__list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 768px) {
  .partners-bar__list {
    /* 5 partners now (was 6 with text labels). 5 columns on desktop, with
       a 3+2 fallback at tablet so no awkward orphan single-logo row. */
    grid-template-columns: repeat(5, 1fr);
  }
}
.partners-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Constrain the row's vertical breathing room. Logos are square-ish
     PNGs (813×813 native) but we want them to read as a single horizontal
     band, not a row of equal-sized squares. Cap with max-height. */
  min-height: 64px;
}
.partners-bar__logo {
  /* Native PNG export is square (813×813) with the actual logo mark
     filling ~40-60% of the canvas. To get a readable mark size of
     ~40-50px tall, the displayed canvas needs to be ~96-100px. We
     constrain by HEIGHT (preserving aspect ratio), not width — that's
     the "scale to height" pattern for transparent-padded PNGs. */
  display: block;
  width: auto;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  /* Slight desaturation + low resting opacity = AYA-style "trusted by"
     row that recedes visually. Hover restores full presence so the logos
     feel interactive without hijacking the eye. */
  opacity: 0.7;
  filter: grayscale(0.2);
  transition:
    opacity var(--transition-fast),
    filter var(--transition-fast);
}
.partners-bar__item:hover .partners-bar__logo,
.partners-bar__item:focus-within .partners-bar__logo {
  opacity: 1;
  filter: grayscale(0);
}

/* ═══════════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════════ */

.cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%
  );
  color: #fff;
}
.cta-banner::before,
.cta-banner::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.cta-banner::before {
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
}
.cta-banner::after {
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
}

.cta-banner__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-5);
  text-align: center;
}
@media (min-width: 768px) {
  .cta-banner__inner {
    padding: var(--space-16) var(--space-8);
  }
}

.cta-banner__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--space-3);
}
.cta-banner__subhead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--space-6);
}
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   NARRATIVE / LETTER / LOCATION
   ═══════════════════════════════════════════════════════════════ */

.narrative {
  background: var(--color-surface);
}
.narrative p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}
.narrative--letter {
  background: var(--color-background);
}
.letter__pull-quote {
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-primary);
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
}
.letter__body p {
  color: var(--text-primary);
}
.letter__signature {
  margin-top: var(--space-6);
  font-size: var(--text-base) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT SECTION (About: Who We Work With)
   ═══════════════════════════════════════════════════════════════ */

.split-section {
  background: var(--color-background);
}
.split-section__inner {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .split-section__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}
.split-section__copy p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.split-section__partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.split-section__partners li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS (5 steps)
   ═══════════════════════════════════════════════════════════════ */

.process {
  background: var(--color-surface);
}
.process__list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .process__list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
}
.process__step {
  position: relative;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}
.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.process__step h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.process__step p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   METRICS (service stat row)
   ═══════════════════════════════════════════════════════════════ */

.metrics {
  background: var(--color-background);
}
.metrics__list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
@media (min-width: 768px) {
  .metrics__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.metrics__list li {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.metrics__list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
  line-height: 1;
}
.metrics__list span {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FOUNDERS — block was the original 100×100 avatar layout. Removed
   in v0.7.5 in favor of the editorial vertical-card redesign defined
   later in this file. The old `height: 100px` on `.founder-card__photo`
   was clobbering the new `aspect-ratio: 4/3`, capping each card's
   hero photo to 100px tall and clipping faces to just the hairline.
   See current rules near `.founders { background: var(--color-surface); }`
   below in the v0.7.5 redo block.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--neutral-900);
  color: rgba(255, 255, 255, 0.75);
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
    padding: 0 var(--space-8);
  }
}
.site-footer__wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
}
.site-footer__tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}
.site-footer__accreditations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: #fff;
  font-weight: 600;
}
.site-footer__heading {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 var(--space-4);
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}
.site-footer__list a:hover {
  color: #fff;
}
.site-footer__bottom {
  max-width: 1200px;
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   TYPEWRITER (cycling text + caret)
   Used by hero h1 and Career AI input placeholder via typewriter.js
   ═══════════════════════════════════════════════════════════════ */

/* (legacy inline-flex rules kept below disabled — replaced by the
   block-stack rules above so the rotator wraps to its own line.) */
.typewriter {
  display: inline-block;
  color: var(--brand-highlight, #f4d35e);
  white-space: nowrap;
  /* Reserve baseline so cycling phrases don't shift the layout */
  min-width: 1ch;
}
.typewriter--hero {
  color: var(--brand-highlight, #f4d35e);
}
.typewriter__caret {
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  animation: polaris-caret-blink 1s steps(1, end) infinite;
}
@keyframes polaris-caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter__caret {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CAREER AI PAGE
   Mirrors the React mockup at polaris-site/design-system/Mockups/src/CareerAi.jsx
   ═══════════════════════════════════════════════════════════════ */

/* ─── Site-wide nav offset & smooth-scroll setup ──────────────────
   Defined here so any anchor jump on any page accounts for the sticky
   header height. Approximated to 64px to match .site-header padding.

   Scroll-snap is enabled with `proximity` (not `mandatory`) — only kicks
   in when the user is already close to a snap point, so free-scrolling
   in the middle of a long section never gets hijacked. */
:root {
  /* Initial fallback. nav.js live-measures the actual rendered header
     height and overrides this so calc(100dvh - var(--site-header-h))
     stays accurate at any viewport / font-load state. */
  --site-header-h: 72px;
}
html {
  scroll-padding-top: var(--site-header-h);
  scroll-behavior: smooth;
}
/* Career AI page uses scroll-snap so each "screen" (hero, how-it-works,
   popular questions, state coverage, CTA) feels like a deliberate jump
   instead of a smear. `proximity` was leaving users stuck in awkward
   in-between positions on small scrolls (mid-fade, mid-section). Switching
   to `mandatory` makes the page commit to the nearest snap target on every
   scroll release — even a small wheel tick past the hero's bottom edge
   will pull the next section to viewport top. Combined with the default
   `scroll-snap-stop: normal` on each target, fast/long scrolls can still
   travel multiple sections without forced stops. */
.page-template-page-career-ai,
body.single-page.career-ai,
body[class*="page-id-"]:has(.careerai-hero) {
  scroll-snap-type: y mandatory;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body {
    scroll-snap-type: none;
  }
}

/* Full-viewport hero with main content vertically centered, trust strip
   + disclaimer + scroll cue pinned to the bottom edge. Scroll-snap on the
   sections below makes scrolling out of the hero feel like a clean jump
   into the next section instead of a slow reveal. */
.careerai-hero {
  position: relative;
  /* Pull up under the transparent header (matches .hero behavior) so the
     hero's surface bg fills the area behind the nav. */
  margin-top: calc(-1 * var(--site-header-h));
  /* Full viewport height now that the hero spans the header overlap. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Top padding = header overlap + small breathing room. Was space-10 +
     header-h (112px) — too tall on short viewports, pushed __footer past
     the 100dvh boundary and scroll-snap clipped it. Now space-6 + header-h
     (96px) reclaims 16px of vertical room without crowding the H1. */
  padding: calc(var(--space-6) + var(--site-header-h)) var(--space-5)
    var(--space-6);
  background: var(--color-surface);
  color: var(--text-primary);
  scroll-snap-align: start;
}
.careerai-hero__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  gap: var(--space-8);
  /* Allow children to shrink past their intrinsic content height when
     viewport is tight. Without this, __main's min-content (h1 + input +
     chips) becomes a hard floor and pushes __footer out of the hero. */
  min-height: 0;
}
.careerai-hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* Critical: defeats default min-height: auto on flex children. Without
     this, flex-grow:1 cannot reclaim space when content is taller than
     its share — and __footer (trust strip + CTA) gets clipped below the
     hero's bottom edge on short viewports. flex: 0.75 wouldn't fix this
     because flex-grow ratios are inert when one sibling has grow:0. */
  min-height: 0;
  /* Optical centering: pure mathematical center reads as "slightly low"
     because the eye treats the nav band overlaying the top of the hero as
     consumed space. Adding padding-bottom equal to header-h shifts the
     centered content up by half the header (~36px), so the H1 + input
     stack lands where the eye expects center to be. */
  padding-bottom: var(--site-header-h);
}
/* Hero footer: trust strip ABOVE the divider, CTA + scroll cue BELOW.
   Disclaimer was removed — that copy now belongs after a Career AI
   generation has been made, not before. */
.careerai-hero__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  text-align: center;
  /* Belt-and-suspenders: pin to bottom of __inner regardless of __main's
     flex math. `margin-top: auto` in a flex column shoves the element to
     the cross-axis end, making "footer at the bottom" a structural
     guarantee instead of a flex-grow side effect. Combined with
     min-height: 0 on __main above, this is what reliably keeps the
     trust strip + CTA inside the 100dvh hero. */
  margin-top: auto;
}
.careerai-hero__divider {
  height: 1px;
  width: 100%;
  margin: 0;
  border: 0;
  background: var(--color-border);
}
/* Centered CTA below the trust strip + divider. The scroll cue was
   removed — couldn't pin it cleanly to the corner without crowding the
   CTA, so per the user's preference the CTA owns the row solo. */
.careerai-hero__cta {
  margin: 0;
  font-size: 15px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
}
.careerai-hero__cta-prompt {
  color: var(--text-secondary);
}
.careerai-hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-primary-dark);
  font-weight: 700;
  text-decoration: none;
  transition:
    color 150ms ease,
    transform 150ms var(--ease-out);
}
.careerai-hero__cta-link:hover {
  color: var(--brand-primary);
  text-decoration: none;
  transform: translateX(2px);
}
.careerai-hero__cta-icon {
  width: 16px;
  height: 16px;
}
.careerai-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Sized to fit "How can I assist you?" on one line at all viewport widths.
     Was clamp(2.75rem, 1rem + 7vw, 6rem) — too large at mid-viewport. */
  font-size: clamp(2rem, 0.9rem + 4vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 var(--space-6);
  color: var(--text-primary);
  white-space: nowrap;
  /* Defeat the nowrap on truly narrow screens so we don't trigger horizontal
     scroll. Mobile users still get a sensible (smaller) headline. */
}
@media (max-width: 480px) {
  .careerai-hero__heading {
    white-space: normal;
  }
}
.careerai-hero__subhead {
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0 auto var(--space-10);
  max-width: 680px;
}

/* CareerAi input — vanilla version of the React mockup */
.careerai-input {
  margin-bottom: var(--space-6);
  text-align: left;
}
.careerai-input__shell {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid var(--color-border-strong, #cbd5e1);
  border-radius: 14px;
  transition: all 150ms ease;
  overflow: hidden;
}
.careerai-input__shell:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(73, 156, 87, 0.13);
}
.careerai-input__icon {
  padding: 16px 18px;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}
.careerai-input__field {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  font-family: var(--font-body);
  /* Tighten line-height so the descender area below the typed text doesn't
     create extra vertical space inside the input shell. 1.2 is the smallest
     line-height that still keeps glyph descenders (g, y, p) from clipping. */
  line-height: 1.2;
  /* Equal padding above/below now that line-height is tight. */
  padding: 14px 0;
  color: var(--text-primary);
  background: transparent;
  min-height: 0;
  display: block;
  /* Match the icon column and button column vertical alignment. */
  align-self: center;
}
.careerai-input__voice,
.careerai-input__send {
  align-self: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 150ms ease;
}
.careerai-input__voice {
  margin: 6px 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
}
.careerai-input__voice:hover {
  color: var(--text-primary);
  background: var(--color-surface-alt, #f1f5f9);
}
.careerai-input__send {
  margin: 6px;
  padding: 0 16px;
  height: 40px;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(73, 156, 87, 0.25);
}
.careerai-input__send:hover {
  filter: brightness(0.95);
}
/* (helper line removed from markup — keep selector but hide if any
   stale instance ever ships) */
.careerai-input__helper {
  display: none;
}

.careerai-suggestions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.careerai-suggestions__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}
.careerai-suggestions__chip:hover {
  background: #fff;
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.careerai-suggestions__chip-icon {
  color: var(--brand-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.careerai-trust {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin: 0;
}
.careerai-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.careerai-trust__item .icon {
  color: var(--brand-primary);
  width: 15px;
  height: 15px;
}
.careerai-trust__sep {
  color: var(--color-border-strong);
}

.careerai-section {
  padding: var(--space-16) 0;
  scroll-snap-align: start;
  scroll-margin-top: var(--site-header-h);
}
.careerai-section--alt {
  background: var(--color-background);
}
.careerai-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.careerai-section__header {
  max-width: 760px;
  margin-bottom: var(--space-12);
}
.careerai-section__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: var(--space-3) 0 var(--space-4);
}
.careerai-section__lead {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.careerai-features {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .careerai-features {
    grid-template-columns: repeat(3, 1fr);
  }
}
.careerai-feature {
  background: #fff;
  border-radius: 16px;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  /* Subtle resting elevation so cards don't read as flat-on-flat against
     the beige page bg. Hover bumps elevation + accent border to signal
     interactivity, matching the .careerai-suggestions__chip motion vocab
     (translateY -2px, soft shadow) used elsewhere on this page. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    border-color 200ms ease;
}
.careerai-feature:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.careerai-feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-primary-subtle);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-6);
  color: var(--brand-primary);
}
.careerai-feature__icon svg {
  width: 24px;
  height: 24px;
}
.careerai-feature__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
}
.careerai-feature__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ─── PHASE-2 PORT (HomeV1 / Career AI / Employers / About) ───
   Components added 2026-04-25 to mirror the React mockups at
   polaris-site/design-system/Mockups/. Uses tokens from
   polaris-design-system.css. All new selectors live below.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Shared utilities ─────────────────────────────────────── */

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.eyebrow--brand {
  color: var(--brand-primary);
}
.eyebrow--gold {
  color: var(--brand-highlight);
}
.eyebrow--gold-dark {
  color: var(--brand-highlight-dark);
}

.section-heading--on-dark {
  color: #fff;
}
.section-lead--on-dark {
  color: rgba(255, 255, 255, 0.78);
}

/* ─── Pill (used in program cards) ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.pill--accredit {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary-dark);
}
.pill--neutral {
  background: var(--neutral-100);
  color: var(--text-secondary);
}

/* ─── Photo placeholder (dashed-border + icon + label) ────── */

.photo-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(
    45deg,
    var(--neutral-100) 0,
    var(--neutral-100) 10px,
    var(--color-background) 10px,
    var(--color-background) 20px
  );
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
  overflow: hidden;
}
.photo-placeholder--portrait {
  aspect-ratio: 4 / 5;
}
.photo-placeholder--fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: 260px;
  border-radius: 0;
}
.photo-placeholder__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  margin: 0 auto var(--space-3);
  color: var(--text-tertiary);
}
.photo-placeholder__icon svg {
  width: 26px;
  height: 26px;
}
.photo-placeholder__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.photo-placeholder__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ─── REAL PHOTO RENDERING ──────────────────────────────────────
   Three image classes that replaced the dashed-border placeholders
   on the About page. They share an `object-fit: cover` strategy so
   any reasonable source image (square portrait, landscape illust)
   crops gracefully into its container without layout shift.
   - .founder-letter__portrait   sidebar portrait next to the letter
   - .founder-card__photo > img  fills the founder card top region
   - .location__illustration     NJ ink-wash next to the location copy
*/
.founder-letter__portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}
.founder-card__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center 25%;
}
.location__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  /* Ink-wash illustration reads better with a soft surface backdrop —
     matches the AYA-style "intentional, not loud" photo treatment. */
  background: var(--color-surface);
}

/* ═══════════════════════════════════════════════════════════════
   HERO EXTENSIONS (V1 video card + employer tag + about accent)
   ═══════════════════════════════════════════════════════════════ */

.hero__tag {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  margin: 0 0 var(--space-4);
}
.hero__heading-accent {
  display: block;
  color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════
   HERO VIDEO DIALOG — vanilla port of MagicUI's <HeroVideoDialog>
   https://magicui.design/docs/components/hero-video-dialog
   ═══════════════════════════════════════════════════════════════ */

.hero-video-dialog {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 173, 1, 0.32),
      transparent 60%
    ),
    radial-gradient(
      circle at 75% 80%,
      rgba(73, 156, 87, 0.35),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.04)
    );
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  transition:
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
  isolation: isolate;
}
.hero-video-dialog:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.36);
  border-color: rgba(255, 255, 255, 0.4);
}
.hero-video-dialog:focus-visible {
  outline: 3px solid var(--brand-highlight);
  outline-offset: 4px;
}

.hero-video-dialog__thumb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero-video-dialog__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: hvd-pulse 2.6s var(--ease-out) infinite;
  opacity: 0;
  pointer-events: none;
}
.hero-video-dialog__pulse--delayed {
  animation-delay: 1.3s;
}
@keyframes hvd-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.hero-video-dialog__play-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition:
    transform 240ms var(--ease-out),
    background 240ms var(--ease-out);
}
.hero-video-dialog:hover .hero-video-dialog__play-bg {
  transform: scale(1.08);
  background: #fff;
}

.hero-video-dialog__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  color: var(--brand-primary-dark);
  pointer-events: none;
}
.hero-video-dialog__play-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  transform: translateX(2px);
}

.hero-video-dialog__caption {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  pointer-events: none;
  color: #fff;
  text-align: center;
}
.hero-video-dialog__caption-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ─── MODAL ────────────────────────────────────────────────────── */

.hero-video-modal[hidden] {
  display: none;
}

.hero-video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 300);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.hero-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  animation: hvd-backdrop-in 220ms var(--ease-out) both;
}

.hero-video-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  animation-duration: 320ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}
.hero-video-modal__panel[data-hero-video-animation="from-center"] {
  animation-name: hvd-from-center-in;
}
.hero-video-modal__panel[data-hero-video-animation="from-bottom"] {
  animation-name: hvd-from-bottom-in;
}
.hero-video-modal__panel[data-hero-video-animation="fade"] {
  animation-name: hvd-fade-in;
}

.hero-video-modal.is-closing .hero-video-modal__backdrop {
  animation: hvd-backdrop-out 200ms var(--ease-out) both;
}
.hero-video-modal.is-closing
  .hero-video-modal__panel[data-hero-video-animation="from-center"] {
  animation: hvd-from-center-out 220ms var(--ease-out) both;
}
.hero-video-modal.is-closing
  .hero-video-modal__panel[data-hero-video-animation="from-bottom"] {
  animation: hvd-from-bottom-out 220ms var(--ease-out) both;
}
.hero-video-modal.is-closing
  .hero-video-modal__panel[data-hero-video-animation="fade"] {
  animation: hvd-fade-out 200ms var(--ease-out) both;
}

.hero-video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.hero-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}
.hero-video-modal__close svg {
  width: 22px;
  height: 22px;
}

.hero-video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.hero-video-modal__frame iframe,
.hero-video-modal__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.is-modal-open {
  overflow: hidden;
}

@keyframes hvd-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hvd-backdrop-out {
  to {
    opacity: 0;
  }
}
@keyframes hvd-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hvd-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes hvd-from-center-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hvd-from-center-out {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes hvd-from-bottom-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hvd-from-bottom-out {
  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-dialog__pulse,
  .hero-video-dialog__pulse--delayed {
    animation: none;
    opacity: 0;
  }
  .hero-video-modal__backdrop,
  .hero-video-modal__panel,
  .hero-video-modal.is-closing .hero-video-modal__backdrop,
  .hero-video-modal.is-closing .hero-video-modal__panel {
    animation-duration: 1ms;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIND YOUR PATHWAY — 6 audience tiles
   ═══════════════════════════════════════════════════════════════ */

.pathways-grid {
  background: var(--color-surface);
}
.pathways-grid__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pathways-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .pathways-grid__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pathway-tile {
  display: flex;
}
.pathway-tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  width: 100%;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.pathway-tile__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
  text-decoration: none;
}
.pathway-tile__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.pathway-tile__icon svg {
  width: 24px;
  height: 24px;
}
.pathway-tile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}
.pathway-tile__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
}
.pathway-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--brand-primary);
}
.pathway-tile__cta-icon {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRAMS PREVIEW — 4 program cards
   ═══════════════════════════════════════════════════════════════ */

.programs-preview {
  background: var(--color-surface);
}
.programs-preview__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .programs-preview__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.programs-preview__intro {
  max-width: 640px;
}
.programs-preview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .programs-preview__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .programs-preview__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.program-card {
  display: flex;
  /* Each card owns one of the 4 brand colors via these tokens.
     Default values fall back to brand-primary so an un-themed card
     still renders. Color-modifier classes override these below. */
  --card-accent: var(--brand-primary);
  --card-accent-subtle: var(--brand-primary-subtle);
}
.program-card--color-primary {
  --card-accent: var(--brand-primary);
  --card-accent-subtle: var(--brand-primary-subtle);
}
.program-card--color-blue {
  --card-accent: var(--brand-blue);
  --card-accent-subtle: var(--brand-blue-subtle);
}
.program-card--color-highlight {
  --card-accent: var(--brand-highlight);
  --card-accent-subtle: var(--brand-highlight-subtle);
}
.program-card--color-accent {
  --card-accent: var(--brand-accent);
  --card-accent-subtle: var(--brand-accent-subtle);
}

.program-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.program-card__link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--card-accent);
  text-decoration: none;
}
.program-card__link:focus-visible {
  outline: 3px solid var(--card-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .program-card__link,
  .program-card__link:hover {
    transition: none;
    transform: none;
  }
}

/* Featured card — single clean 2px border in its own brand color.
   No inset shadow ring, no top strip. The colored glyph + colored
   cohort line do the rest of the work. */
.program-card--featured .program-card__link {
  border-width: 2px;
  border-color: var(--card-accent);
}

.program-card__media {
  position: relative;
  height: 120px;
  background: linear-gradient(
    135deg,
    var(--card-accent-subtle) 0%,
    #ffffff 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--card-accent);
  opacity: 0.95;
}
.program-card__glyph svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}
.program-card__hours {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
}
.program-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  color: #fff;
  z-index: 1;
}
.program-card__tag--featured {
  background: var(--card-accent);
}
.program-card__tag--new {
  background: var(--brand-blue);
}
.program-card__tag--soon {
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  backdrop-filter: blur(6px);
}
.program-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}
.program-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.program-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary);
}
.program-card__meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}
.program-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.program-card__cohort {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--card-accent);
  letter-spacing: 0.01em;
}
.program-card__arrow {
  width: 16px;
  height: 16px;
  color: var(--card-accent);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
/* Coming-soon cards: keep glyph in full brand color, but mute the
   cohort/arrow so the active Core program reads as the primary CTA. */
.program-card--soon .program-card__cohort,
.program-card--soon .program-card__arrow {
  color: var(--text-tertiary);
}
.program-card__link:hover .program-card__arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .program-card__link:hover .program-card__arrow {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   VISION GRID — DARK VARIANT (Home Platform section)
   ═══════════════════════════════════════════════════════════════ */

.vision-grid--dark {
  background: var(--neutral-900);
  color: #fff;
  border-top: 0;
  border-bottom: 0;
}
.vision-grid--dark .vision-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.vision-grid--dark .vision-card:hover {
  border-color: rgba(255, 173, 1, 0.35);
}
.vision-grid--dark .vision-card__icon {
  background: rgba(255, 173, 1, 0.15);
  color: var(--brand-highlight);
}
.vision-grid--dark .vision-card__title {
  color: #fff;
}
.vision-grid--dark .vision-card p {
  color: rgba(255, 255, 255, 0.72);
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE REVIEWS
   ═══════════════════════════════════════════════════════════════ */

.google-reviews {
  background: var(--color-background);
}
.google-reviews__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .google-reviews__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.google-reviews__intro {
  max-width: 640px;
}
.google-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.google-reviews__rating-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.google-reviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.google-reviews__rating-value {
  margin-left: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.google-reviews__rating-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.google-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .google-reviews__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.review-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.review-card__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
}
.review-card__meta {
  flex: 1;
  min-width: 0;
}
.review-card__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.review-card__time {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.review-card__google {
  flex-shrink: 0;
  line-height: 0;
}
.review-card__stars {
  display: inline-flex;
  gap: 1px;
}
.review-card__quote {
  margin: 0;
  border: 0;
  padding: 0;
}
.review-card__quote p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   RESOURCE LIBRARY
   ═══════════════════════════════════════════════════════════════ */

.resource-library {
  background: var(--color-surface);
}
.resource-library__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .resource-library__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.resource-library__intro {
  max-width: 640px;
}
.resource-library__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .resource-library__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .resource-library__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 200px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.resource-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--brand-primary);
}
.resource-card__icon svg {
  width: 20px;
  height: 20px;
}
.resource-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex: 1;
  color: var(--text-primary);
}
.resource-card__meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CAREER AI — POPULAR QUESTIONS + STATE COVERAGE
   ═══════════════════════════════════════════════════════════════ */

.careerai-section__header--start {
  text-align: left;
  max-width: 720px;
}

.careerai-popular__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .careerai-popular__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.careerai-popular__intro {
  max-width: 640px;
  text-align: left;
}
.careerai-popular__more {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary-dark);
  text-decoration: none;
}
.careerai-popular__more:hover {
  text-decoration: underline;
}
.careerai-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .careerai-popular__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.careerai-popular__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.careerai-popular__link:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  text-decoration: none;
}
.careerai-popular__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.careerai-popular__icon svg {
  width: 18px;
  height: 18px;
}
.careerai-popular__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.careerai-popular__tag {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand-primary-dark);
  background: var(--brand-primary-ghost);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.careerai-popular__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.careerai-popular__asks {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.careerai-states {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px) {
  .careerai-states {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .careerai-states {
    grid-template-columns: repeat(6, 1fr);
  }
}
.careerai-state__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.careerai-state__link:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  text-decoration: none;
}
.careerai-state__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.careerai-state__code {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--brand-primary);
}
.careerai-state__tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: inline-block;
}
.careerai-state__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.careerai-state__cred {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.careerai-states__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.careerai-states__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.careerai-states__legend-meta {
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYERS — STRUGGLING / PILLARS / IMPACT / SERVICES / WITHOUT
   ═══════════════════════════════════════════════════════════════ */

.struggling {
  background: var(--color-background);
}
.struggling__intro {
  max-width: 820px;
  margin-bottom: var(--space-6);
}
.struggling__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .struggling__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.struggling__card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.struggling__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.struggling__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  flex-shrink: 0;
}
.struggling__icon svg {
  width: 22px;
  height: 22px;
}
.struggling__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.struggling__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.struggling__bullets li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  position: relative;
  padding-left: 18px;
}
.struggling__bullets li::before {
  content: "•";
  color: var(--brand-primary);
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 16px;
}
.struggling__close {
  margin: var(--space-10) auto 0;
  max-width: 820px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pillars {
  background: var(--color-surface);
}
.pillars__intro {
  max-width: 720px;
  margin-bottom: var(--space-8);
}
.pillar {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-12);
}
.pillar:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .pillar {
    grid-template-columns: 1.1fr 1fr;
  }
  .pillar--flip {
    grid-template-columns: 1fr 1.1fr;
  }
  .pillar--flip .pillar__copy {
    order: 2;
  }
  .pillar--flip .pillar__visual {
    order: 1;
  }
}
.pillar__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 var(--space-5);
}
.pillar__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pillar__bullets li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.pillar__check {
  color: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
}
.pillar__check svg {
  width: 18px;
  height: 18px;
}
.pillar__visual {
  width: 100%;
}
.pillar__image {
  display: block;
  width: 100%;
  /* Square source (1024x1024 generated). Aspect-ratio keeps layout
     stable while the file is loading; object-fit:cover lets us swap
     in non-square sources later without layout shift. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.1);
}

/* Override .process to use STEP-text format from new mockup */
.process__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .process__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.process__intro {
  max-width: 640px;
}
.process__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.process__list {
  margin-top: 0;
}
.process__num {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--brand-highlight-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  padding: 0;
}
.process__step {
  background: #fff;
  border: 1px solid var(--color-border);
}

.impact-counters {
  background: var(--neutral-900);
  color: #fff;
}
.impact-counters__intro {
  text-align: center;
  margin-bottom: var(--space-8);
}
.impact-counters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 768px) {
  .impact-counters__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.impact-counters__list li {
  padding: var(--space-3);
}
.impact-counters__list strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  color: var(--brand-highlight);
  letter-spacing: -0.025em;
  line-height: 1;
}
.impact-counters__list span {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

.services {
  background: var(--color-surface);
}
.services__intro {
  max-width: 760px;
  margin-bottom: var(--space-8);
}
.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .services__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.service-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-primary);
  color: #fff;
}
.service-card__icon svg {
  width: 26px;
  height: 26px;
}
.service-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.service-card__body {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.service-card__stats {
  list-style: none;
  margin-top: auto;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.service-card__stats strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--brand-primary-dark);
  letter-spacing: -0.02em;
}
.service-card__stats span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.service-card__cta {
  align-self: flex-start;
}

.without {
  background: var(--color-background);
}
.without__intro {
  max-width: 820px;
  margin-bottom: var(--space-6);
}
.without__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .without__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.without__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 15px;
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.without__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--status-error);
  margin-top: 1px;
}
.without__icon svg {
  width: 22px;
  height: 22px;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — POSITIONING / HOW-WE-HELP / FOUNDER LETTER / LOCATION
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Trust & Authority editorial pass (v0.7.4)
   Anchor every section to the brand-green accent + structured rhythm.
   No copy changes; visual hierarchy + density only.
   ═══════════════════════════════════════════════════════════════ */

.positioning {
  position: relative;
  background: var(--color-surface);
  /* Soft radial glow behind the diagram side reads as "Polaris is the
     center of the constellation" without needing literal copy. */
  overflow: hidden;
}
.positioning::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  width: 480px;
  height: 480px;
  transform: translateY(-50%);
  background: radial-gradient(
    circle at center,
    rgba(73, 156, 87, 0.08) 0%,
    rgba(73, 156, 87, 0) 70%
  );
  pointer-events: none;
}
.positioning__inner {
  position: relative;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .positioning__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}
.positioning__leadin {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4);
  /* Small leading mark gives the leadin sentence editorial weight —
     reads as a deliberate denial ("we are NOT X") rather than a
     throwaway lead-in. */
  padding-left: var(--space-4);
  border-left: 3px solid var(--brand-primary);
}
.positioning__highlight {
  color: var(--brand-primary);
  /* Subtle underline accent on the highlighted phrase ties back to
     the diagram's connecting lines. */
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(73, 156, 87, 0.18) 60%
  );
  padding: 0 0.05em;
}
.three-groups {
  width: 100%;
  height: auto;
  max-width: 440px;
  margin: 0 auto;
  display: block;
  /* Hover: subtle pulse on the central Polaris node. Pure CSS, no JS. */
  transition: transform 400ms var(--ease-out);
}
.three-groups:hover {
  transform: scale(1.02);
}

.who-we-work-with {
  background: var(--color-background);
  padding: var(--space-12) 0 0;
}
.who-we-work-with .section-inner {
  padding-bottom: 0;
}

/* ─── HOW WE HELP — STAT-LED CARDS ──────────────────────────────
   Trust & Authority style: stats are the hero, not the footer of the
   card. Big number first, contextual title + body below, icon as a
   small color cue. Hover lift + animated accent rule along the top
   gives interactive affordance without shouting.

   Layout v0.7.5 redo: section is now a centered "moment" — eyebrow
   + heading sit dead-center over a wider 1320px content area, so the
   three cards have presence on widescreen monitors instead of
   reading as a left-anchored list with empty right space.
*/
.how-we-help {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
/* Override the default 1200px section-inner cap for this section.
   These full-bleed feature sections need more horizontal canvas to
   feel like content peaks rather than text columns. */
.how-we-help .section-inner {
  max-width: 1320px;
}
.how-we-help__intro {
  max-width: 820px;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.how-we-help__intro .eyebrow {
  display: block;
}
.how-we-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .how-we-help__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.help-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* More generous interior so the card reads as a feature, not a
     listing item. Min-height keeps the three cards aligned even
     when body copy varies (Tech Integration is shorter). */
  padding: var(--space-10) var(--space-8);
  min-height: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Subtle lift so the white card reads as elevated above the warm
     beige canvas — without the old beige-on-beige flat treatment. */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition:
    transform 250ms var(--ease-out),
    border-color 250ms ease,
    box-shadow 250ms var(--ease-out);
}
/* Animated brand accent line that slides in on hover. Slim & elegant —
   feels like a "highlighted on review" trust signal rather than a
   loud decoration. */
.help-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-highlight) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease-out);
}
.help-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-primary);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.help-stat-card:hover::before {
  transform: scaleX(1);
}
/* Stat block now sits at the TOP of the card (was footer). The big
   number is the visual anchor — eye lands on the magnitude first,
   then reads the title and body for context. This is the AYA / "trust
   landing page" pattern: lead with proof, not preamble. */
.help-stat-card__stat {
  order: -1;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.help-stat-card__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  /* Bigger, fluid sizing. The stat is the marketing hero of the card. */
  font-size: clamp(3rem, 1.5rem + 3vw, 4.25rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  /* Gradient text in brand colors — elevates the number from
     "neutral data" to "celebrated metric" without being garish. */
  background: linear-gradient(
    135deg,
    var(--brand-primary-dark) 0%,
    var(--brand-primary) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-primary-dark);
}
.help-stat-card__stat span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.help-stat-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.help-stat-card__icon svg {
  width: 22px;
  height: 22px;
}
.help-stat-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.help-stat-card__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
}

/* ─── FOUNDER LETTER — editorial long-form ──────────────────────
   Editorial typography pass: drop cap on the lede, larger lede font,
   left-rule accent on the body to read as a "letter" not a marketing
   block, refined signature block.
*/
.founder-letter {
  background: var(--color-background);
  position: relative;
}
.founder-letter__inner {
  display: grid;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .founder-letter__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-16);
  }
  .founder-letter__sidebar {
    position: sticky;
    top: 120px;
  }
}
/* Sidebar: refined portrait + name pill below for editorial polish. */
.founder-letter__portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
  /* Subtle accent ring + offset shadow gives the portrait depth
     without a heavy frame. The 4px brand-primary outline on hover
     reads as a respectful "in conversation" affordance. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.08);
}

.founder-letter__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Constrain measure for readable long-form. ~65ch is the editorial
     sweet spot — wider gets fatiguing, narrower fragments thoughts. */
  max-width: 65ch;
}
.founder-letter__lede {
  font-size: clamp(1.25rem, 1.05rem + 0.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}
/* Drop cap on the first letter of the lede paragraph. The "N" of
   "Nobody" becomes a brand-color editorial mark — a magazine touch
   that signals "this is a considered letter, not a website blurb."
   Typography pulled from the heading family for unity with section
   titles. */
.founder-letter__lede::first-letter {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--brand-primary);
  /* Tiny optical-correction nudge — the cap looks too large without
     pulling it down a hair to baseline-align with the surrounding
     line. */
  padding-top: 0.05em;
}
.founder-letter__body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.founder-letter__body strong {
  color: var(--text-primary);
  /* Subtle brand highlighter on emphasized phrases — same treatment
     as .positioning__highlight so the visual vocabulary stays
     consistent across the page. */
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(73, 156, 87, 0.18) 60%
  );
  padding: 0 0.1em;
}
.founder-letter__signature {
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  /* Gradient rule fades the divider in and out — feels more crafted
     than a hard line, suits the letter format. */
  border-top: 1px solid transparent;
  background-image: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--color-border) 30%,
    var(--color-border) 70%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top;
}
.founder-letter__signature strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.founder-letter__signature span {
  display: block;
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ─── FOUNDERS — editorial gallery v0.7.5 ───────────────────────
   Redesigned to "people page" pattern (think AYA, Stripe team, Linear
   about): centered intro, vertical cards with hero photos on top,
   info below. The portrait-led layout reads as a deliberate gallery
   of people, not a directory listing — and uses the full available
   page width instead of being marooned in a narrow column.
*/
.founders {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
/* Wider canvas — same reasoning as .how-we-help. The two founder
   cards earn presence at 1320px instead of 1200px, breathing more
   on widescreen monitors. */
.founders .section-inner {
  max-width: 1320px;
}
.founders__intro {
  max-width: 760px;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.founders__intro .eyebrow {
  display: block;
}
.founders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .founders__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ─── FOUNDER PROFILES (no card chrome) ──────────────────────────
   2026-05-12 redesign: dropped the card-shell treatment in favor of
   circular portraits + centered text. The card chrome competed with
   the bio content; the cleaner layout reads like an editorial bio
   row and pairs better with the existing /about typography. */
.founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-5);
}
.founder__photo {
  /* 2026-05-12: bumped from clamp(96px, 10vw, 128px). On an
     "expertise + social proof" page the founder portrait is a
     primary trust signal, not a thumbnail. 180–220px gives it
     the visual weight to anchor the column. */
  width: clamp(180px, 16vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--neutral-100) 0%,
    var(--brand-primary-subtle) 100%
  );
  margin-bottom: var(--space-6);
  border: 4px solid #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.1);
}
.founder__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Face in the upper third (editorial portrait crop). */
  object-position: center 20%;
}
.founder__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.founder__role {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.founder__bio {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 auto var(--space-5);
  max-width: 36ch;
}
.founder__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: var(--space-2);
}
.founder__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--text-secondary);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.founder__socials a:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}
.founder__socials svg {
  width: 18px;
  height: 18px;
}

/* ─── LOCATION — refined image presentation ─────────────────────
   Frame the NJ illustration with a brand-tinted matte and subtle
   rotation for an editorial "framed art" feel. Chips lift on hover.
*/
.location {
  background: var(--color-background);
}
.location__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .location__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}
.location p {
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.location__visual {
  position: relative;
}
/* Soft brand-tinted halo behind the illustration — frames the
   ink-wash painting like it's hanging on a wall. The slight off-center
   placement gives the composition an editorial asymmetry. */
.location__visual::before {
  content: "";
  position: absolute;
  inset: -4% -2% -2% -4%;
  background: var(--brand-primary-subtle);
  border-radius: var(--radius-lg);
  transform: rotate(-1.5deg);
  z-index: 0;
}
.location__illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.08);
}
.location__chips {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.location__chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.location__chips li:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}
.location__chip-icon {
  display: inline-flex;
  color: var(--brand-primary);
}
.location__chip-icon svg {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL QUOTE-MARK ICON
   ═══════════════════════════════════════════════════════════════ */
.testimonial__quote-mark {
  display: inline-flex;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.testimonial__quote-mark svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT v0.8.1 — hero credibility band + inline partners + LinkedIn pill
   The /about page goal is social proof and expertise. These rules
   deliver that goal at three scroll positions:
     1. Hero: stat band immediately under the subhead
     2. Who-we-work-with: inline partner row, no nested section
     3. Founders: text+icon LinkedIn pill instead of orphan icon
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO CREDIBILITY BAND ─────────────────────────────────────
   Three verifiable numbers under the thesis. Reads as "we have
   already built this, and others trust it" before the visitor
   has to scroll for proof. */
.hero-credibility {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  max-width: 760px;
}
@media (min-width: 640px) {
  .hero-credibility {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.hero-credibility__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-credibility__item dt {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: 1;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}
.hero-credibility__item dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  max-width: 28ch;
}

/* ─── WHO WE WORK WITH — single section, inline partners ────────
   Replaces the nested partner-bar pattern. The intro and partner
   row now share one section heading and one visual rhythm.
   .who-we-work-with itself already has the section background;
   override bottom padding so the partner row has room to breathe. */
.who-we-work-with {
  padding: clamp(4rem, 6vw, 6rem) 0;
}
.who-we-work-with__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.who-we-work-with__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.who-we-work-with__intro .eyebrow {
  display: block;
}
.who-we-work-with__partners {
  list-style: none;
  margin: 0;
  padding: var(--space-8) var(--space-4);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
@media (min-width: 768px) {
  .who-we-work-with__partners {
    grid-template-columns: repeat(5, 1fr);
  }
}
.who-we-work-with__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  min-height: 72px;
}
.who-we-work-with__partner img {
  display: block;
  width: auto;
  height: 84px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(0.15);
  transition:
    opacity var(--transition-fast),
    filter var(--transition-fast),
    transform var(--transition-fast);
}
.who-we-work-with__partner:hover img,
.who-we-work-with__partner:focus-within img {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}

/* ─── FOUNDER LINKEDIN PILL ─────────────────────────────────────
   Replaces the orphaned icon-only badge with a text+icon button.
   Reads as a deliberate secondary action under the bio rather
   than a floating decoration. */
.founder__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.founder__linkedin svg {
  width: 18px;
  height: 18px;
  color: var(--brand-primary);
  transition: color var(--transition-fast);
}
.founder__linkedin:hover,
.founder__linkedin:focus-visible {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(73, 156, 87, 0.22);
}
.founder__linkedin:hover svg,
.founder__linkedin:focus-visible svg {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   BOOK A CALL v0.8.1 — funnel page modeled on parakeeto/apply-for-a-call
   Sections styled here:
     .hero--book          light hero + trust badges
     .walkaway            3 walk-away deliverables
     .book-trust          inline partner row
     .book-schedule       scheduling embed slot + placeholder
     .book-process        3 numbered process steps
     .book-qualifiers     "this call is for you if..." checklist
     .book-testimonial    pull quote
     .cta-banner__reassurance  small reassurance line under final CTA
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO --book ───────────────────────────────────────────────
   Reuses the light/about-style hero treatment but with a tighter
   subhead and the trust badge row inline above the CTA. */
.hero--book {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--neutral-50) 0%,
    var(--color-background) 100%
  );
  color: var(--text-primary);
  overflow: hidden;
}
.hero--book::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle at center,
    rgba(73, 156, 87, 0.1) 0%,
    rgba(73, 156, 87, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero--book .hero__inner {
  position: relative;
  z-index: 1;
}
.hero--book .hero__heading-accent {
  color: var(--brand-primary);
  display: block;
  margin-top: var(--space-2);
}
/* Override .hero__actions .btn--primary (which is white-on-dark by
   default for the home hero) so the green button reads correctly on
   the light cream backdrop. */
.hero--book .hero__actions .btn--primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 6px 18px rgba(73, 156, 87, 0.28);
}
.hero--book .hero__actions .btn--primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(73, 156, 87, 0.38);
}

/* ─── HERO TRUST BADGES ─────────────────────────────────────────
   Inline icon+label row sitting between subhead and CTA. Three
   chips on desktop, stack on mobile. */
.hero-badges {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}
.hero-badges__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.hero-badges__item svg {
  width: 18px;
  height: 18px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* ─── WALKAWAY ──────────────────────────────────────────────────
   Three deliverables in a card row. Echoes /employers pillar grid
   but with the icon top-left, title, body. */
.walkaway {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 6rem) 0;
}
.walkaway__intro {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.walkaway__intro .eyebrow {
  display: block;
}
.walkaway__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .walkaway__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.walkaway__item {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.walkaway__item:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.walkaway__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.walkaway__icon svg {
  width: 22px;
  height: 22px;
}
.walkaway__item h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.walkaway__item p {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ─── BOOK-TRUST ────────────────────────────────────────────────
   Quiet trust band: small eyebrow + 5 partner logos. */
.book-trust {
  background: var(--color-background);
  padding: var(--space-10) 0;
}
.book-trust__inner {
  text-align: center;
}
.book-trust__inner .eyebrow {
  display: block;
  margin-bottom: var(--space-6);
}
.book-trust__partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 768px) {
  .book-trust__partners {
    grid-template-columns: repeat(5, 1fr);
  }
}
.book-trust__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  min-height: 64px;
}
.book-trust__partner img {
  display: block;
  width: auto;
  height: 72px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(0.2);
  transition:
    opacity var(--transition-fast),
    filter var(--transition-fast);
}
.book-trust__partner:hover img,
.book-trust__partner:focus-within img {
  opacity: 1;
  filter: grayscale(0);
}

/* ─── BOOK-SCHEDULE — embed slot ────────────────────────────────
   Wrapped card so even when the placeholder shows, the section
   feels intentional. The .book-schedule__embed div holds either
   the placeholder OR the live Calendly/Cal.com/SavvyCal embed. */
.book-schedule {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
  scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-4));
}
.book-schedule__intro {
  text-align: center;
  margin: 0 auto var(--space-8);
}
.book-schedule__intro .eyebrow {
  display: block;
}
.book-schedule__embed {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-6);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 12px 32px rgba(15, 23, 42, 0.06);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-schedule__placeholder {
  text-align: center;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
}
.book-schedule__placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.book-schedule__placeholder-icon svg {
  width: 28px;
  height: 28px;
}
.book-schedule__placeholder h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  color: var(--text-primary);
  margin: 0;
}
.book-schedule__placeholder p {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 38ch;
}

/* ─── BOOK-SCHEDULE WIDGET (Google Calendar fallback) ───────────
   Replaces the bare placeholder block. Reads as an intentional
   booking card with title, sub-info, three trust pills, and a
   primary + secondary action pair. */
.book-schedule__widget {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-2);
  text-align: left;
}
.book-schedule__widget-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.book-schedule__widget-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.book-schedule__widget-icon svg {
  width: 26px;
  height: 26px;
}
.book-schedule__widget-meta h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.book-schedule__widget-meta p {
  margin: 0;
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.book-schedule__widget-slots {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}
.book-schedule__widget-slots li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.book-schedule__widget-slots svg {
  width: 16px;
  height: 16px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.book-schedule__widget-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.book-schedule__widget-actions .btn {
  flex: 1 1 200px;
}
.book-schedule__widget-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary, var(--text-secondary));
  letter-spacing: 0.01em;
}

/* ─── HERO --book-split — calendar in the hero ──────────────────
   Funnel-style two-column layout. Left: copy + trust badges +
   reassurance line. Right: iframe of the booking form so visitors
   can book without scrolling. Stacks to single column on mobile. */
.hero--book-split .hero__inner {
  max-width: 1320px;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-10);
    align-items: center;
  }
}
.hero-split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero-split__copy .eyebrow {
  margin: 0;
}
.hero-split__copy .hero__heading {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.1;
}
.hero-split__copy .hero__subhead {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);
}
.hero-split__copy .hero-badges {
  margin: 0;
}
.hero-split__reassurance {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-primary-ghost);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: 14.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.hero-split__reassurance strong {
  color: var(--text-primary);
  font-weight: 700;
}
/* The booking form card on the right. Keeps the iframe visually
   anchored with a clear frame, subtle shadow, and a small fallback
   note below if Google blocks framing. */
.hero-split__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-4));
}
.hero-split__form-frame {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 56px rgba(15, 23, 42, 0.12);
}
.book-iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: var(--neutral-50);
}
@media (max-width: 640px) {
  .book-iframe {
    height: 620px;
  }
}
.hero-split__fallback {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary, var(--text-secondary));
}
.hero-split__fallback a {
  color: var(--brand-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hero-split__fallback a:hover {
  color: var(--brand-primary);
}

/* Tighten hero padding on this variant — the iframe needs vertical
   room and we don't want the page to feel like the form is buried. */
.hero--book-split .hero__inner {
  padding-top: calc(clamp(2.5rem, 4vw, 4rem) + var(--site-header-h, 80px));
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* ─── BOOK-PROCESS — 3 numbered steps ───────────────────────────
   Big number, title, timing pill, body. The number is the visual
   anchor of each step. */
.book-process {
  background: var(--color-background);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.book-process__intro {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.book-process__intro .eyebrow {
  display: block;
}
.book-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  counter-reset: book-process;
}
@media (min-width: 768px) {
  .book-process__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.book-process__step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
}
.book-process__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-highlight, var(--brand-primary-light)) 100%
  );
}
.book-process__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.book-process__step h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.book-process__time {
  display: inline-block;
  align-self: flex-start;
  background: var(--brand-primary-ghost);
  color: var(--brand-primary-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin: 4px 0 var(--space-2);
}
.book-process__step > p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ─── BOOK-QUALIFIERS — checklist ───────────────────────────────
   "This call is for you if..." with green check icons. */
.book-qualifiers {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.book-qualifiers .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--space-3);
}
.book-qualifiers .section-heading {
  text-align: center;
  margin: 0 auto var(--space-8);
  max-width: 32ch;
}
.book-qualifiers__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
}
@media (min-width: 640px) {
  .book-qualifiers__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
  }
}
.book-qualifiers__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}
.book-qualifiers__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.book-qualifiers__check svg {
  width: 14px;
  height: 14px;
}
.book-qualifiers__note {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-soft);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.book-qualifiers__note a {
  color: var(--brand-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.book-qualifiers__note a:hover {
  color: var(--brand-primary);
}

/* ─── BOOK-TESTIMONIAL ──────────────────────────────────────────
   Mid-page pull quote. Reuses .testimonial__quote-mark from the
   shared testimonial styles. */
.book-testimonial {
  background: var(--color-background);
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.book-testimonial__card {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}
.book-testimonial__card blockquote {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}
.book-testimonial__card blockquote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.book-testimonial__card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.book-testimonial__card figcaption strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.book-testimonial__card figcaption span {
  font-size: var(--text-sm);
  color: var(--text-tertiary, var(--text-secondary));
}

/* Small reassurance line under the final CTA banner (mirrors the
   parakeeto "No credit card. No commitment. Just clarity." pattern). */
.cta-banner__reassurance {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   /EMPLOYERS v2 — 2026-05-13 operating-system rebuild
   Sections styled here:
     .hero--employers          light hero variant (mirrors --about)
     .employer-buckets         4-card top-level grid
     .bucket-deep              per-bucket alternating layout wrapper
     .pillar__offerings        new "tools and services" line under bullets
     .photo-placeholder--coming intentional "in progress" treatment
     .trust-grid               6-icon "why programs trust us" grid
     .employers-faq            native details/summary accordion
     .secondary-cta            text + button low-pressure mid-page banner
     .visually-hidden          a11y utility for screen-reader-only headings
   ═══════════════════════════════════════════════════════════════ */

/* ─── Accessibility utility ─────────────────────────────────────
   Visually hide a heading while keeping it in the a11y tree. Used
   for section h2s that exist for screen readers but don't appear
   on screen (e.g. the bucket-deep wrapper). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── HERO --employers ──────────────────────────────────────────
   Light variant mirroring .hero--about. Uses the same cream
   gradient + radial accent and the same green heading accent. */
.hero--employers {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--neutral-50) 0%,
    var(--color-background) 100%
  );
  color: var(--text-primary);
  overflow: hidden;
}
.hero--employers::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(
    circle at center,
    rgba(73, 156, 87, 0.1) 0%,
    rgba(73, 156, 87, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero--employers .hero__inner {
  position: relative;
  z-index: 1;
}
.hero--employers .hero__heading-accent {
  color: var(--brand-primary);
  display: block;
  margin-top: var(--space-2);
}
/* Override the dark-hero btn--primary so the green button reads
   correctly on the light cream backdrop. Same override pattern as
   .hero--book-split. */
.hero--employers .hero__actions .btn--primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 6px 18px rgba(73, 156, 87, 0.28);
}
.hero--employers .hero__actions .btn--primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(73, 156, 87, 0.38);
}
/* Secondary button (light-context outline) for "See what's inside" */
.hero--employers .hero__actions .btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-border-strong, var(--text-primary));
  height: 56px;
  padding: 0 var(--space-8);
}
.hero--employers .hero__actions .btn--outline:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

/* ─── EMPLOYER BUCKETS (4-card grid) ────────────────────────────
   Top-level "what we do" grid. Four cards, equal weight, each a
   bucket (People / Programs / Funding / Impact). Sits between the
   partner trust band and the per-bucket deep sections. */
.employer-buckets {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.employer-buckets__intro {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.employer-buckets__intro .eyebrow {
  display: block;
}
.employer-buckets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .employer-buckets__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .employer-buckets__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}
.employer-bucket {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.employer-bucket:hover {
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.employer-bucket__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 10px);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.employer-bucket__icon svg {
  width: 24px;
  height: 24px;
}
.employer-bucket__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.employer-bucket__promise {
  margin: 0;
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  flex-grow: 1;
}
.employer-bucket__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brand-primary-dark);
  text-decoration: none;
  margin-top: var(--space-2);
  transition:
    gap var(--transition-fast),
    color var(--transition-fast);
}
.employer-bucket__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}
.employer-bucket__link:hover {
  gap: 10px;
  color: var(--brand-primary);
}
.employer-bucket__link:hover svg {
  transform: translateX(2px);
}

/* ─── BUCKET DEEP SECTIONS ──────────────────────────────────────
   Wrapper for the alternating per-bucket sections. Reuses .pillar
   styles for the alternating-row layout. Only override is the
   wrapper background + spacing. */
.bucket-deep {
  background: var(--color-background);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.bucket-deep .pillar {
  scroll-margin-top: calc(var(--site-header-h, 80px) + var(--space-4));
}
.bucket-deep .pillar:not(:last-child) {
  margin-bottom: clamp(4rem, 6vw, 7rem);
}

/* "Tools and services" line under each pillar's bullets. Reads as
   a productized footnote pointing at the named offerings under
   each bucket. */
.pillar__offerings {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.pillar__offerings-label {
  display: inline-block;
  margin-right: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  color: var(--brand-primary-dark);
}

/* "Coming soon" placeholder variant — same dashed frame as the
   default placeholder but with a slightly more intentional label
   that signals "in progress" rather than "broken." */
.photo-placeholder--coming {
  border-color: var(--brand-primary);
  border-style: dashed;
  background: repeating-linear-gradient(
    45deg,
    var(--brand-primary-subtle) 0,
    var(--brand-primary-subtle) 10px,
    var(--color-surface-soft) 10px,
    var(--color-surface-soft) 20px
  );
}
.photo-placeholder--coming .photo-placeholder__icon {
  background: var(--color-surface);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.photo-placeholder--coming .photo-placeholder__label {
  color: var(--brand-primary-dark);
}
.photo-placeholder--coming .photo-placeholder__note {
  color: var(--brand-primary);
  font-weight: 600;
}

/* ─── TRUST GRID (6-icon "Why programs trust Polaris") ──────────
   Six trust claims in a 3x2 (desktop) or 1-col (mobile) grid.
   Each card: icon + title + supporting sentence. Reads as proof,
   not decoration. */
.trust-grid {
  background: var(--color-surface);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.trust-grid__intro {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.trust-grid__intro .eyebrow {
  display: block;
}
.trust-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .trust-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .trust-grid__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-10);
  }
}
.trust-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trust-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 10px);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.trust-grid__icon svg {
  width: 22px;
  height: 22px;
}
.trust-grid__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}
.trust-grid__support {
  margin: 0;
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ─── EMPLOYERS FAQ (native details/summary accordion) ──────────
   No JavaScript. Uses the browser's native <details>/<summary>
   for accessibility and keyboard navigation. Chevron rotates when
   open. First item open by default in the template. */
.employers-faq {
  background: var(--color-background);
  padding: clamp(4rem, 6vw, 7rem) 0;
}
.employers-faq__intro {
  text-align: center;
  margin: 0 auto var(--space-8);
}
.employers-faq__intro .eyebrow {
  display: block;
}
.employers-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 800px;
  margin: 0 auto;
}
.employers-faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.employers-faq__item[open] {
  border-color: var(--brand-primary);
  box-shadow: 0 6px 18px rgba(73, 156, 87, 0.12);
}
.employers-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.employers-faq__question::-webkit-details-marker {
  display: none;
}
.employers-faq__question:hover {
  color: var(--brand-primary-dark);
}
.employers-faq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--brand-primary);
  transition: transform var(--transition-fast);
}
.employers-faq__chevron svg {
  width: 18px;
  height: 18px;
}
.employers-faq__item[open] .employers-faq__chevron {
  transform: rotate(180deg);
}
.employers-faq__answer {
  padding: 0 var(--space-6) var(--space-5);
}
.employers-faq__answer p {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 65ch;
}

/* ─── SECONDARY CTA (mid-page text + button banner) ─────────────
   Lower-pressure than the final CTA banner. Light background, no
   form embed, single button. Reads as a "still curious?" nudge
   between FAQ and the final green banner. */
.secondary-cta {
  background: var(--color-surface);
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.secondary-cta__inner {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .secondary-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
}
.secondary-cta__inner .eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
}
.secondary-cta__inner .section-heading {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.secondary-cta__inner p {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 56ch;
}
.secondary-cta__inner .btn {
  flex-shrink: 0;
}