/* ================================================================
   BiteSizeLaunch v3 — Open Skies brand system
   Source: brand/kit/10-Design-Tokens/brand.css + BRAND_GUIDE.txt
   ================================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Grandstander';
  src: url('../assets/fonts/grandstander-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dmsans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dmsans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens (Open Skies v2, DESIGN_SYSTEM.md §2.2) ---- */
:root {
  /* palette (p.6) */
  --bsl-cobalt:    #2458F3;
  --bsl-tangerine: #FF7A30;
  --bsl-ink:       #102344;
  --bsl-ivory:     #FFF7EB;
  --bsl-mist:      #D9E5EE;
  --bsl-paperblue: #A9C9DF;
  --bsl-sky:       #A9D8FF;
  --bsl-peach:     #F5D9C4;
  --bsl-slate:     #405773;
  --bsl-white:     #FFFFFF;

  /* semantic, light = Open Skies (p.3 Everyday light / Blue variation) */
  --surface:        var(--bsl-ivory);
  --surface-2:      var(--bsl-mist);
  --surface-sky:    var(--bsl-sky);
  --layer-1:        var(--bsl-sky);        /* nearest paper cloud on blue fields */
  --layer-2:        var(--bsl-paperblue);
  --layer-3:        var(--bsl-mist);
  --layer-warm:     var(--bsl-peach);
  --text:           var(--bsl-ink);
  --text-2:         var(--bsl-slate);
  --text-on-brand:  var(--bsl-ivory);
  --link:           var(--bsl-cobalt);
  --brand:          var(--bsl-cobalt);
  --accent:         var(--bsl-tangerine);
  --accent-text:    var(--bsl-ink);        /* text ON tangerine is always ink (6.0:1) */
  --border:         rgba(16,35,68,.12);
  --focus:          var(--bsl-cobalt);

  /* gradients (composed only from palette colors) */
  --grad-sky:       linear-gradient(180deg, var(--bsl-sky) 0%, var(--bsl-mist) 55%, var(--bsl-ivory) 100%);   /* Blue variation, p.3 */
  --grad-launch:    linear-gradient(180deg, var(--bsl-cobalt) 0%, #1F4FDD 100%);                                 /* Launch energy, p.3 */
  --grad-afterglow: linear-gradient(180deg, var(--bsl-ink) 0%, var(--bsl-ink) 55%, var(--bsl-slate) 100%);      /* Afterglow, p.3 */
  --glow-warm:      radial-gradient(60% 45% at 50% 110%, rgba(255,122,48,.55) 0%, rgba(255,122,48,0) 70%);      /* small warm glow at the horizon, p.3 */

  /* type (p.8) */
  --bsl-display: 'Grandstander', 'Nunito', 'Arial Rounded MT Bold', sans-serif;
  --bsl-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-display: 1.08;   /* 1.05-1.15 */
  --lh-body:    1.5;    /* 1.35-1.5 */

  /* shape + depth (p.9: 2-4 shallow paper layers, single light direction, matte) */
  --radius-card:  24px;
  --radius-inner: 16px;
  --radius-input: 12px;
  --radius-pill:  100px;
  --bsl-radius:   24px;   /* legacy alias — existing buttons/cards use this pending DS-2..DS-4 restyle */
  --shadow-paper: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(16,35,68,.08);        /* one light source, top; shallow */
  --shadow-paper-lg: 0 10px 28px rgba(16,35,68,.12);
  --shadow-paper-dark: 0 8px 20px rgba(0,0,0,.28);                                         /* on ink/slate */

  /* spacing (8px base, kit tokens) */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);
  --measure:   65ch;
}

/* Afterglow: apply to any section that goes dark (footer, milestone band, portal dark cards) */
.afterglow, [data-mode="afterglow"] {
  --surface:        var(--bsl-ink);
  --surface-2:      var(--bsl-slate);
  --layer-1:        var(--bsl-slate);
  --layer-2:        #1C3459;                 /* ink lifted one step; between ink and slate */
  --layer-3:        var(--bsl-ink);
  --layer-warm:     var(--bsl-tangerine);
  --text:           var(--bsl-ivory);
  --text-2:         var(--bsl-mist);
  --link:           var(--bsl-sky);          /* 10.4:1 on ink */
  --brand:          var(--bsl-sky);
  --accent:         var(--bsl-tangerine);    /* 6.0:1 on ink as text; as fill takes ink text */
  --accent-text:    var(--bsl-ink);
  --border:         rgba(255,247,235,.18);
  --focus:          var(--bsl-sky);
  --shadow-paper:   var(--shadow-paper-dark);
  background: var(--surface);
  color: var(--text);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x lives on body only, not html (P3 DS-8 fix 8): any non-visible overflow set
   directly on <html> makes html itself the nearest scroll ancestor for position:sticky
   descendants, which breaks sticky headers site-wide (confirmed in SONNET_P3_DS3_1.md).
   Setting it on body instead lets the UA's overflow-propagation rule push body's
   overflow-x up onto the viewport (same horizontal-scroll protection, ORCH_CRIT
   20260924-2220 fix 2) without body or html ever becoming an actual scroll container. */
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 1.25rem; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bsl-ivory);
  color: var(--bsl-ink);
  font-family: var(--bsl-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--bsl-cobalt); text-decoration: underline; }
a:hover { opacity: .85; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }

section { padding: 4rem 0; }
@media (min-width: 768px) { section { padding: 5.5rem 0; } }

/* ---- Typography ---- */
.display {
  font-family: var(--bsl-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.label-cap {
  font-family: var(--bsl-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bsl-slate);
}
.body-lg { font-size: 1.125rem; line-height: 1.6; }
.body-sm { font-size: .875rem; line-height: 1.55; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--bsl-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .75em 1.75em;
  border-radius: var(--bsl-radius);
  text-decoration: none;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--bsl-cobalt);
  color: var(--bsl-ivory);
  border-color: var(--bsl-cobalt);
}
.btn-primary:hover { opacity: .88; color: var(--bsl-ivory); }

.btn-ghost {
  background: transparent;
  color: var(--bsl-ink);
  border-color: var(--bsl-ink);
}
.btn-ghost:hover { background: rgba(16,35,68,.07); }

.btn-tangerine {
  background: var(--bsl-tangerine);
  color: var(--bsl-ink);
  border-color: var(--bsl-tangerine);
}
.btn-tangerine:hover { opacity: .88; color: var(--bsl-ink); }

.btn-ivory {
  background: var(--bsl-ivory);
  color: var(--bsl-ink);
  border-color: var(--bsl-ivory);
}
.btn-ivory:hover { opacity: .88; color: var(--bsl-ink); }

.btn-ghost-ivory {
  background: transparent;
  color: var(--bsl-ivory);
  border-color: rgba(255,247,235,.5);
}
.btn-ghost-ivory:hover { background: rgba(255,247,235,.1); color: var(--bsl-ivory); }

/* Ghost button for hero dark background */
.btn-ghost-hero {
  background: transparent;
  color: var(--bsl-ivory);
  border-color: rgba(255,247,235,.55);
}
.btn-ghost-hero:hover { background: rgba(255,247,235,.12); color: var(--bsl-ivory); }

.btn-lg { font-size: 1.1rem; padding: .9em 2em; }
.btn-block { display: flex; width: 100%; }

/* ---- Badges / labels ---- */
.badge {
  display: inline-block;
  font-family: var(--bsl-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .28em .75em;
  border-radius: 100px;
  line-height: 1.4;
}
.badge-ink     { background: var(--bsl-ink);    color: var(--bsl-ivory); }
.badge-cobalt  { background: var(--bsl-cobalt); color: var(--bsl-ivory); }
.badge-mist    { background: var(--bsl-mist);   color: var(--bsl-ink); }
.badge-peach   { background: var(--bsl-peach);  color: var(--bsl-ink); }
.badge-tangerine { background: var(--bsl-tangerine); color: var(--bsl-ink); }
.badge-outline-ivory {
  background: transparent;
  border: 1.5px solid rgba(255,247,235,.5);
  color: var(--bsl-ivory);
}

/* ---- Preview pill ---- */
.preview-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--bsl-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .05em;
  background: transparent;
  color: var(--bsl-ivory);
  border: 1px solid rgba(255,247,235,.35);
  border-radius: 100px;
  padding: .3em .9em;
}

/* ----------------------------------------------------------------
   HEADER — transparent over hero; ivory on scroll
   ---------------------------------------------------------------- */
.site-header {
  background: transparent;
  border-bottom: 1px solid rgba(255,247,235,.08);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .25s, border-color .25s, box-shadow .2s;
}
.site-header.is-scrolled {
  background: var(--bsl-ivory);
  border-bottom-color: rgba(16,35,68,.1);
  box-shadow: 0 2px 20px rgba(16,35,68,.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}

/* Logo swap: ivory over dark hero, ink after scroll */
.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-link img { height: 36px; width: auto; }
.site-header .logo-dark  { display: none; }
.site-header .logo-light { display: block; }
.site-header.is-scrolled .logo-light { display: none; }
.site-header.is-scrolled .logo-dark  { display: block; }

.header-nav {
  display: none;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 600px) {
  .header-nav { display: flex; }
}
.header-nav a.nav-link {
  font-weight: 600;
  font-size: .9rem;
  color: rgba(255,247,235,.9);
  text-decoration: none;
}
.site-header.is-scrolled .header-nav a.nav-link { color: var(--bsl-ink); }
.header-nav a.nav-link:hover { opacity: .8; }

/* Compact sticky CTA (hidden until scrolled) */
.header-cta-compact {
  display: none;
  font-size: .85rem;
  padding: .55em 1.25em;
}
.site-header.is-scrolled .header-cta-compact { display: inline-flex; }
.site-header.is-scrolled .header-nav .nav-cta { display: none; }

/* Light-hero pages (DS-2 sky-hero, p.9): the hero itself is a light field,
   so the header reads ink from first paint instead of waiting for scroll. */
.site-header--light { background: var(--bsl-ivory); border-bottom-color: rgba(16,35,68,.1); }
.site-header--light .logo-light { display: none; }
.site-header--light .logo-dark  { display: block; }
.site-header--light .header-nav a.nav-link { color: var(--bsl-ink); }

/* ----------------------------------------------------------------
   HERO — sky-hero (Open Skies v2, DESIGN_SYSTEM.md §7.1)
   Base .sky-hero / .sky-hero__content / .sky-hero__photo
   rules live in the "OPEN SKIES v2 — DS-1 FOUNDATION" section below;
   this block adds the home-page-specific text and layout pieces.
   ---------------------------------------------------------------- */
/* padding-bottom is set on the DS-1 foundation .sky-hero rule below (needs room for the cloud-edge) */
.hero-eyebrow {
  font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bsl-slate); margin-bottom: 1rem; text-wrap: balance;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 0; }
.hero-price-note {
  display: block;
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--bsl-slate);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
}
.hero-price-note a { color: var(--bsl-cobalt); text-underline-offset: .2em; }
.sky-hero__photo-wrap { position: relative; margin-bottom: var(--space-8); }
.sky-hero__photo-wrap .sky-hero__photo { position: relative; z-index: 1; margin: 0; }
.sky-hero__photo img {
  width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover;
}
@media (max-width: 899px) {
  .sky-hero__photo-wrap { margin-top: var(--space-2); max-width: 420px; }
}
@media (max-width: 640px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
}
/* Caption under photos elsewhere on page */
.photo-caption {
  font-size: .72rem;
  color: var(--bsl-slate);
  text-align: center;
  margin-top: .5rem;
  font-style: italic;
}

/* ----------------------------------------------------------------
   WHO IT'S FOR
   ---------------------------------------------------------------- */
.who-section {
  background: var(--bsl-mist);
  padding: 3.5rem 0 calc(3.5rem + 96px);
  position: relative;
}
@media (min-width: 768px) { .who-section { padding: 5rem 0 calc(5rem + 96px); } }

.age-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 600px) {
  .age-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .age-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* All three age cards are the same ivory paper card (ORCH_CRIT fix 5) — a colored
   top band + kit paper icon tells them apart, not three unrelated component styles. */
.age-card {
  background: var(--bsl-ivory);
  color: var(--bsl-ink);
  border-radius: var(--bsl-radius);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
a.age-card:hover .age-card__cta { text-decoration: underline; }
.age-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700;
  font-size: .9rem;
  color: var(--bsl-cobalt);
}
.age-card-adults-mobile { display: none; }

/* SITE_CL_1 (items 1, 3, 4): these bands were a flat colour block with a single outline
   icon floated on it — three near-identical chips directly under the hero, which is the
   "these things down here make no sense" strip and the template feel Jam called out. They
   now carry real kit photography (brand/kit/06-Photography), which is what the brand has
   plenty of. The colour stays as the band's own background so it still reads as the card's
   accent while the photo loads. */
.age-card__band {
  margin: -2rem -1.75rem 1.5rem;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.age-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  /* cover + a fixed band ratio: the source photos are 4:3 and 1.19:1, so without this the
     band would letterbox or stretch them. Nothing is ever squished — it is cropped. */
  object-fit: cover;
  object-position: center;
}
.age-card__band--sky       { background: var(--bsl-sky); }
.age-card__band--paperblue { background: var(--bsl-paperblue); }
.age-card__band--peach     { background: var(--bsl-peach); }

.age-card__label {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--bsl-ink);
  margin-bottom: .75rem;
}

.age-card__desc {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--bsl-slate);
  margin-bottom: 1.25rem;
}

.age-card__role {
  font-size: .8rem;
  line-height: 1.55;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bsl-mist);
}
.age-card__role strong { display: block; margin-bottom: .2em; }

/* DS-27 #2: compact single-line rows at mobile so a parent reaches the product
   in one screen instead of ~1,400px of nav cards. Whole row is the link. */
@media (max-width: 640px) {
  .who-section { padding: 1.75rem 0 calc(1.75rem + 64px); }
  .who-section h2 { font-size: 1.375rem; margin-top: .35rem; }
  .age-grid { grid-template-columns: 1fr; gap: .5rem; margin-top: 1.25rem; }
  .age-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: .75rem;
    row-gap: .1rem;
    padding: .6rem .85rem;
    box-shadow: none;
    border: 1px solid var(--bsl-mist);
  }
  /* SITE_CL_1: the compact mobile row keeps the photo, as a small square thumbnail.
     aspect-ratio 1 + object-fit:cover means it crops to the square, never squashes. */
  .age-card__band {
    margin: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    border-radius: 10px;
    flex: 0 0 auto;
    grid-row: 1 / 3;
  }
  .age-card__desc { grid-column: 2; }
  .age-card__label { font-size: 1rem; margin-bottom: .1rem; }
  .age-card__desc {
    font-size: .78rem; margin-bottom: 0; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .age-card__cta { display: none; }
  .age-card--quiet { display: none; }
  .age-card-adults-mobile {
    display: block; font-size: .82rem; color: var(--bsl-slate);
    padding: .4rem .85rem; margin: 0;
  }
}

/* ----------------------------------------------------------------
   BLUEPRINTS
   ---------------------------------------------------------------- */
.blueprints-section { background: var(--bsl-ivory); position: relative; padding-bottom: calc(4rem + 96px); }
.blueprints-header {
  margin-bottom: 3rem;
  max-width: 640px;
}
.blueprints-header h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  line-height: 1.1;
  margin: .75rem 0 1rem;
}
.blueprints-header p { color: var(--bsl-slate); font-size: 1.05rem; }

/* Two bp-groups side by side on desktop: [2 cards] [1 card] */
.blueprints-groups-row { }
@media (min-width: 900px) {
  .blueprints-groups-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
  .blueprints-groups-row .bp-group + .bp-group { margin-top: 0; }
}

.bp-group { display: flex; flex-direction: column; }
.bp-group .blueprint-grid { flex: 1; }

.bp-group-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.bp-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bsl-mist);
}
.bp-group + .bp-group { margin-top: 3.5rem; }

.blueprint-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .blueprint-grid { grid-template-columns: 1fr 1fr; }
}
/* Single card in the teens group stays full-width on mobile, natural on desktop */
@media (min-width: 900px) {
  .bp-group:last-child .blueprint-grid { grid-template-columns: 1fr; }
}

.blueprint-card {
  background: var(--bsl-ivory);
  border-radius: var(--bsl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-paper);
  transition: box-shadow .2s;
}
.blueprint-card:hover { box-shadow: var(--shadow-paper-lg); }

.bp-card__top {
  background: var(--bsl-mist);
  padding: 1.75rem 1.75rem 1.25rem;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bp-card__icon-wrap {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bsl-ivory);
  box-shadow: var(--shadow-paper);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
  flex-shrink: 0;
}
.bp-card__icon { width: 60px; height: 60px; }
.bp-card__top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.bp-card__name {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--bsl-ink);
}
.bp-card__body {
  padding: 1.5rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.bp-card__tagline { font-size: .95rem; line-height: 1.5; color: var(--bsl-ink); }
.bp-detail { font-size: .82rem; color: var(--bsl-slate); line-height: 1.55; }
.bp-detail strong { color: var(--bsl-ink); font-weight: 600; }
.bp-detail summary { font-size: .82rem; font-weight: 600; color: var(--bsl-cobalt); cursor: pointer; padding: .25rem 0; }
.bp-detail p { margin: .5rem 0 0; }
.bp-detail p:first-of-type { margin-top: .65rem; }

.bp-card__footer {
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--bsl-mist);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.bp-card__footer small { flex-basis: 100%; }
.bp-price {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--bsl-ink);
  line-height: 1;
}
.bp-price-note {
  font-size: .72rem;
  color: var(--bsl-slate);
  font-weight: 400;
  font-family: var(--bsl-body);
  margin-top: .2em;
}

/* Event sale pricing — SITE_EVENT_PRICE_1, added 2026-09-24, revert Mon 2026-10-05 */
.event-was-price {
  font-size: .55em;
  font-weight: 600;
  color: var(--bsl-slate);
  text-decoration: line-through;
  text-decoration-thickness: .08em;
}
.event-now-price {
  color: var(--bsl-ink);   /* was tangerine text on the ivory single card — fails 3:1 (DS §6); ink is compliant */
}
.event-price-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--bsl-ink);   /* was tangerine text on the ivory single card — fails 3:1 (DS §6); ink is compliant */
  margin-top: .5em;
}

.bp-coming-note {
  font-size: .82rem;
  color: var(--bsl-slate);
  margin-top: 1rem;
  line-height: 1.5;
  text-align: center;
}
.bp-coming-note a { color: var(--bsl-cobalt); }

/* ----------------------------------------------------------------
   HOW IT WORKS
   ---------------------------------------------------------------- */
.how-section {
  background: var(--bsl-mist);
  overflow: hidden;
  position: relative;
  padding-bottom: calc(4rem + 96px);
}
@media (max-width: 600px) {
  /* The cloud-edge divider is absolutely positioned at the section's bottom and is 48px tall
     (--edge-h at <=600px), with ::before nudged 7px higher. A flat 2rem here left less room
     than the edge itself occupies, so the cobalt wave printed over the process caption.
     1.25rem of real breathing room + the edge's own height. */
  .how-section { padding-bottom: calc(1.25rem + 48px); }
}

.steps-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
@media (min-width: 1024px) {
  .steps-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
  }
  .step-item { min-width: 0; }
}

.step-item {
  background: var(--bsl-ivory);
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  min-width: 148px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.step-number {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: .75rem;
  color: var(--bsl-cobalt);
  letter-spacing: .08em;
}
.step-icon { width: 36px; height: 36px; flex-shrink: 0; }
.step-title { font-family: var(--bsl-body); font-weight: 700; font-size: .9rem; color: var(--bsl-ink); line-height: 1.3; }
.step-desc  { font-size: .78rem; color: var(--bsl-slate); line-height: 1.5; }

/* Below 641px: compact rows — 24px icon + bold title + one-line clamped desc, no card chrome. */
@media (max-width: 640px) {
  .steps-strip { display: flex; flex-direction: column; overflow-x: visible; gap: .5rem; margin-top: 1.5rem; }
  .step-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-areas: "icon title" "icon desc";
    column-gap: .75rem; row-gap: .1rem;
    align-items: start;
    min-width: 0; width: 100%;
    background: none;
    border-radius: 0;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bsl-mist);
    gap: 0;
  }
  .step-item:last-child { border-bottom: none; }
  .step-item .step-icon   { grid-area: icon; width: 24px; height: 24px; align-self: center; }
  .step-item .step-number { display: none; }
  .step-item .step-title  { grid-area: title; font-size: .875rem; }
  .step-item .step-desc   { grid-area: desc; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; }
}

.peek-panel {
  margin-top: 3rem;
  background: var(--bsl-ivory);
  border-radius: var(--bsl-radius);
  padding: 2rem;
  border-left: 4px solid var(--bsl-cobalt);
}
.peek-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bsl-cobalt); margin-bottom: .75rem; }
.peek-title { font-family: var(--bsl-display); font-weight: 800; font-size: 1.1rem; color: var(--bsl-ink); margin-bottom: .75rem; }
.peek-quote { font-size: .95rem; line-height: 1.65; color: var(--bsl-ink); font-style: italic; max-width: 65ch; margin-left: 0; margin-right: auto; }
.desk-only { display: none; }
@media (min-width: 900px) { .desk-only { display: inline; } }
.mobile-only { display: inline; }
@media (min-width: 900px) { .mobile-only { display: none; } }
.peek-source { font-size: .78rem; color: var(--bsl-slate); margin-top: .75rem; }

/* DS-27 #6: real spreads instead of a half-width process diagram. Quote sits
   beside the 3-up row at >=900px so the row doesn't leave the right side empty. */
.look-inside { margin-top: 2.5rem; }
.look-inside__quote { margin-top: 0; }
@media (min-width: 900px) {
  .look-inside {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem;
    align-items: start;
  }
}
.spreads-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
.spread-card { margin: 0; }
.spread-card img {
  display: block; width: 100%; height: auto;
  border-radius: var(--bsl-radius);
  box-shadow: var(--shadow-paper);
}
.spread-card a:focus-visible { outline: 3px solid var(--bsl-tangerine); outline-offset: 4px; border-radius: var(--bsl-radius); }
.spreads-swipe-cue { margin: .5rem 0 0; color: var(--bsl-slate); font-size: .85rem; }
.spread-card figcaption {
  font-size: .8rem; color: var(--bsl-slate); text-align: center; margin-top: .5rem;
}
@media (max-width: 640px) {
  .spreads-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    padding-bottom: .25rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .spread-card { scroll-snap-align: start; }
  .look-inside__spreads { margin-top: 2rem; }
}

/* ----------------------------------------------------------------
   OFFERS — cobalt field
   ---------------------------------------------------------------- */
.offers-section {
  background: var(--bsl-cobalt);
  color: var(--bsl-ivory);
  position: relative;
  overflow: hidden;
}
/* extra specificity so this wins over .launch-band's own padding shorthand (§7.4) */
.offers-section.launch-band { padding-bottom: calc(var(--section-y) + 96px); }
.offers-section .label-cap { color: var(--bsl-ivory); }
.offers-section h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  color: var(--bsl-ivory);
  line-height: 1.1;
  margin: .75rem 0 .5rem;
}
.offers-section .section-intro { color: var(--bsl-ivory); font-size: 1.05rem; }

.offers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
@media (min-width: 640px) {
  .offers-grid { grid-template-columns: 1fr 1fr; }
}

.offer-card {
  border-radius: var(--bsl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.offer-card--single { background: var(--bsl-ivory); color: var(--bsl-ink); }
.offer-card--bundle { background: var(--bsl-ink); color: var(--bsl-ivory); border: 2px solid rgba(255,247,235,.2); }

.offer-card__head {
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid rgba(16,35,68,.08);
}
.offer-card--bundle .offer-card__head { border-bottom-color: rgba(255,247,235,.12); }

.offer-price-big {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  margin: .75rem 0 .25rem;
}
.offer-card--single .offer-price-big { color: var(--bsl-ink); }
.offer-card--bundle .offer-price-big { color: var(--bsl-tangerine); }
.offer-price-note { font-size: .8rem; color: var(--bsl-slate); line-height: 1.4; }
.offer-card--bundle .offer-price-note { color: var(--bsl-ivory); }
.offer-price-note--renewal { font-size: 1rem; font-weight: 700; margin-top: .65rem; }
.offer-lifetime-note, .offer-start-note { font-size: .875rem; line-height: 1.5; margin-top: .45rem; color: var(--bsl-ivory); }
/* .event-was-price defaults to --bsl-slate for the ivory single card (2.1:1 on the dark
   bundle card, fails WCAG); match the bundle's other muted-ivory overrides above (fix 5). */
.offer-card--bundle .event-was-price { color: rgba(255,247,235,.6); }

.offer-card__body { padding: 1.5rem 1.75rem; flex: 1; }
.offer-includes {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1rem 0 1.25rem;
}
.offer-includes li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  line-height: 1.5;
}
.offer-includes li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: var(--bsl-cobalt);
  border-radius: 50%;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9 l4 4 6-7' stroke='%23FFF7EB' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.offer-card--bundle .offer-includes li::before {
  background-color: var(--bsl-tangerine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9 l4 4 6-7' stroke='%23102344' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.offer-card__footer { padding: 1.25rem 1.75rem 1.75rem; }
.offer-card__footer > small { display: block; margin: .4rem 0 1rem; }
.kit-bundle-buy { text-align: center; margin: 1.5rem auto 0; }
/* DS-27 #3: one primary notify action on the page (the form below); the
   pricing cards get a plain text link instead of a second/third button. */
.notify-textlink {
  display: inline-block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--bsl-cobalt);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.notify-textlink--bundle { color: var(--bsl-tangerine); }
/* "Notify me when checkout opens" doesn't fit next to the input inline — stack full-width
   at every width so the button never spills past the card edge (ORCH_CRIT fix 3). */
.offer-card__footer .nl-form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.offer-card__footer .nl-form-row .btn { width: 100%; justify-content: center; white-space: normal; }
.offer-legal { font-size: .875rem; color: var(--bsl-slate); line-height: 1.55; margin-top: .75rem; }
.offer-card--bundle .offer-legal { color: var(--bsl-ivory); }
.bp4-price .offer-legal { color: var(--bsl-ivory); }
.offer-legal a { color: inherit; }
.checkout-notify { scroll-margin-top: 5rem; margin-top: 2rem; padding: 1.75rem; border-radius: var(--bsl-radius); background: var(--bsl-ivory); color: var(--bsl-ink); }
.checkout-notify > p { margin-top: .5rem; }
.checkout-notify .nl-form-row { display: grid; gap: .5rem; margin-top: 1rem; max-width: 560px; }
.checkout-notify .nl-form-row label { font-weight: 600; }
.checkout-notify .nl-form-row input { min-width: 0; }
.checkout-notify .nl-form-row .btn { justify-content: center; white-space: normal; background: var(--bsl-cobalt); color: var(--bsl-ivory); border-color: var(--bsl-cobalt); }
.checkout-notify .nl-consent { color: var(--bsl-ink); font-size: .875rem; }
.checkout-notify a { color: var(--bsl-cobalt); }


/* ----------------------------------------------------------------
   FREE GUIDE
   ---------------------------------------------------------------- */
.guide-section { background: var(--bsl-peach); position: relative; padding-bottom: calc(4rem + 96px); }
.guide-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 768px) {
  .guide-inner { grid-template-columns: 1fr 1fr; }
}
.guide-text h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  line-height: 1.1;
  margin: .75rem 0 1rem;
  color: var(--bsl-ink);
}
.guide-text p { color: var(--bsl-slate); }
.guide-bullets {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1.25rem 0;
}
.guide-bullets li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--bsl-ink);
  line-height: 1.5;
}
.guide-bullets li::before {
  content: '→';
  color: var(--bsl-cobalt);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.5;
}

.guide-form-card { background: var(--bsl-ivory); border-radius: var(--bsl-radius); padding: 2rem; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35em; color: var(--bsl-ink); }
.form-field input {
  width: 100%;
  padding: .7em 1em;
  border: 2px solid var(--bsl-mist);
  border-radius: 12px;
  font-family: var(--bsl-body);
  font-size: 1rem;
  background: #fff;
  color: var(--bsl-ink);
  transition: border-color .15s;
  -webkit-appearance: none;
}
.form-field input:focus { outline: none; border-color: var(--bsl-cobalt); }
.form-field input:focus-visible { outline: 3px solid var(--bsl-cobalt); outline-offset: 2px; }
.form-confirm {
  display: none;
  padding: 1.25rem;
  background: var(--bsl-mist);
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--bsl-ink);
  margin-top: 1rem;
}

/* ----------------------------------------------------------------
   BITESIZECOMMUNITY — light section (mist), DS-2: nothing dark
   except the launch band and footer
   ---------------------------------------------------------------- */
.alchemy-section {
  background: var(--bsl-mist);
  color: var(--bsl-ink);
  position: relative;
  overflow: hidden;
  padding-bottom: calc(4rem + 96px);
}
.alchemy-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 768px) {
  .alchemy-inner { grid-template-columns: 3fr 2fr; }
}
.alchemy-section h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  color: var(--bsl-ink);
  line-height: 1.1;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: .75rem 0 1rem;
}
.alchemy-section p { color: var(--bsl-slate); line-height: 1.6; }
.alchemy-section p + p { margin-top: .75rem; }
/* DS-27 #7: two side-by-side mini cards instead of a two-row table, with a
   shape icon (check mark) rather than color as the only signal (owner is
   red-green colorblind). */
.community-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 1.25rem 0;
}
@media (max-width: 480px) {
  .community-tiers { grid-template-columns: 1fr; }
}
.community-tier-card {
  background: var(--bsl-ivory);
  border-radius: var(--bsl-radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-paper);
}
.community-tier-card--bundle { border: 2px solid var(--bsl-cobalt); }
.community-tier-card__title {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--bsl-ink);
  margin-bottom: .6rem;
}
.community-tier-card__list { display: flex; flex-direction: column; gap: .45rem; }
.community-tier-card__list li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .85rem; color: var(--bsl-slate); line-height: 1.4;
}
.community-tier-card__list .check-icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--bsl-cobalt);
  color: var(--bsl-cobalt);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; line-height: 1;
}

/* ----------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------- */
.faq-section { background: var(--bsl-ivory); }
.faq-section h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  line-height: 1.1;
  margin: .75rem 0 2rem;
}
/* DS-27 #7: two-column at >=1024px so the section doesn't leave ~40% of the
   width empty; sticky intro + help card on the left, accordion on the right. */
.faq-help-card {
  margin-top: 1.5rem;
  background: var(--bsl-mist);
  border-radius: var(--bsl-radius);
  padding: 1.25rem 1.5rem;
  font-size: .88rem;
  color: var(--bsl-slate);
  max-width: 380px;
}
.faq-help-card__title { font-weight: 700; color: var(--bsl-ink); margin-bottom: .35rem; }
.faq-help-card p:last-child { margin: 0; }
.faq-list { max-width: 720px; }
@media (min-width: 1024px) {
  .faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: start; }
  .faq-layout__intro { position: sticky; top: 96px; }
  .faq-list { max-width: none; margin-top: 0; }
}
.faq-item { border-bottom: 1px solid var(--bsl-mist); }
.faq-item:first-child { border-top: 1px solid var(--bsl-mist); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--bsl-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bsl-ink);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}
.faq-chevron {
  flex-shrink: 0;
  margin-left: auto;
  width: 20px; height: 20px;
  transition: transform .2s;
  color: var(--bsl-cobalt);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-a {
  display: none;
  padding: 0 0 1.25rem;
  font-size: .95rem;
  color: var(--bsl-slate);
  line-height: 1.65;
}
.faq-a a { color: var(--bsl-cobalt); }
.faq-item.is-open .faq-a { display: block; }

/* ----------------------------------------------------------------
   SUPPORT / TERMS
   ---------------------------------------------------------------- */
.terms-section { background: var(--bsl-mist); padding: 3rem 0; }
.terms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .terms-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.terms-block h3 {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bsl-ink);
  margin-bottom: .6rem;
}
.terms-block p { font-size: .875rem; color: var(--bsl-slate); line-height: 1.6; }
.terms-block a { color: var(--bsl-ink); }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  background: var(--bsl-ink);
  color: rgba(255,247,235,.8);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 48px; width: auto; }
.footer-brand-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255,247,235,.55);
  max-width: 220px;
}
.footer-col h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,247,235,.5);
  margin-bottom: .75rem;
}
.footer-col ul li { margin-bottom: .4rem; }
.footer-col a {
  font-size: .875rem;
  color: rgba(255,247,235,.75);
  text-decoration: none;
}
.footer-col a:hover { color: var(--bsl-ivory); }

.footer-bottom {
  border-top: 1px solid rgba(255,247,235,.1);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--bsl-ivory);
  line-height: 1.6;
}
.footer-bottom a { color: rgba(255,247,235,.55); text-decoration: none; }

/* ----------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------- */
.mt-sm  { margin-top: .5rem; }
.mt-md  { margin-top: 1rem; }
.mt-lg  { margin-top: 2rem; }
.mb-sm  { margin-bottom: .5rem; }
.mb-md  { margin-bottom: 1rem; }
.mb-lg  { margin-bottom: 2rem; }
.text-center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   NEWSLETTER CTA
   ---------------------------------------------------------------- */
.newsletter-cta { background: var(--bsl-ivory); padding: 3.5rem 0; }
.newsletter-cta-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.newsletter-cta-text { flex: 1 1 0; }
.newsletter-cta-text .display { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.newsletter-cta-text p { color: var(--bsl-slate); margin-top: .5rem; font-size: 1rem; }
.newsletter-cta-form { flex: 1 1 0; }
.nl-form-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .65rem;
}
.nl-form-row input[type="email"] {
  flex: 1;
  padding: .75rem 1.1rem;
  border: 1.5px solid var(--bsl-paperblue);
  border-radius: 100px;
  font-size: .9375rem;
  font-family: "DM Sans", sans-serif;
  background: var(--bsl-ivory);
  color: var(--bsl-ink);
}
.nl-form-row input[type="email"]:focus { outline: none; border-color: var(--bsl-cobalt); }
.nl-form-row input[type="email"]:focus-visible { outline: 3px solid var(--bsl-cobalt); outline-offset: 2px; }
.nl-consent { font-size: .78rem; color: var(--bsl-slate); line-height: 1.5; }
.nl-note { font-size: .73rem; color: var(--bsl-slate); font-style: italic; margin-top: .3rem; }
@media (max-width: 768px) {
  .newsletter-cta-inner { flex-direction: column; gap: 1.5rem; }
  .newsletter-cta-form { width: 100%; }
}
@media (max-width: 480px) {
  .nl-form-row { flex-direction: column; }
  .nl-form-row .btn { width: 100%; justify-content: center; }
}

/* Accessible mobile menu disclosure — replaces the desktop nav at <=899px
   with a "Menu" button + panel (ORCH_CRIT fix 5: hiding every non-login
   link left mobile visitors unable to discover the quiz or kits). */
.menu-toggle {
  display: none;
  align-items: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .85rem;
  background: transparent;
  border: 1.5px solid rgba(255,247,235,.5);
  border-radius: 10px;
  color: rgba(255,247,235,.9);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  flex-shrink: 0;
}
.site-header--light .menu-toggle,
.site-header.is-scrolled .menu-toggle { color: var(--bsl-ink); border-color: rgba(16,35,68,.25); }
.menu-toggle__icon { width: 20px; height: 20px; flex-shrink: 0; }
.menu-toggle__icon[hidden] { display: none; }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bsl-ivory);
  border-bottom: 1px solid rgba(16,35,68,.12);
  box-shadow: 0 12px 24px rgba(16,35,68,.12);
  padding: .25rem 1.25rem 1rem;
  z-index: 99;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .25rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--bsl-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(16,35,68,.08);
}
.mobile-menu__link:last-child { border-bottom: none; }

@media (max-width: 899px) {
  .header-nav { display: none !important; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 359px) {
  .logo-link img { width: 140px; height: auto; }
}
.guide-inner > *, .alchemy-inner > * { min-width: 0; }
.guide-form-card .btn { white-space: normal; text-align: center; }

/* ================================================================
   OPEN SKIES v2 — DS-1 FOUNDATION
   New shared utilities from DESIGN_SYSTEM.md §7. Not yet applied to
   page layouts (that's DS-2..DS-4) — additive only, nothing above
   this line should change appearance.
   ================================================================ */

/* ---- Focus rings (p.7: visible on every interactive element) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Accent button (§4: tangerine fill, ink text — one per screen) ---- */
.btn-accent {
  background: var(--bsl-tangerine);
  color: var(--accent-text);
  border-color: var(--bsl-tangerine);
}
.btn-accent:hover { opacity: .88; color: var(--accent-text); }

/* ---- Card (§4: ivory/white card on mist/sky/paper-blue fields) ---- */
.card {
  background: var(--bsl-ivory);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-paper);
  padding: var(--space-3) var(--space-4);
}

/* ---- 7.1 Sky hero (Blue variation, p.3) ---- */
.sky-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-sky);
  color: var(--text);
  padding: clamp(40px, 6vw, 88px) 0 96px;
  display: grid; gap: var(--space-4);
}
@media (min-width: 900px) {
  /* SITE_CL_1: was 7fr/5fr text-led — Jam's full-image-hero critique wants the photo to
     read as the hero, not a small inset next to the copy, so the photo column now leads. */
  .sky-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: var(--space-6); padding-inline: var(--gutter); }
}
.sky-hero__content { position: relative; z-index: 3; max-width: 34rem; padding-bottom: var(--space-8); }
.sky-hero h1 { font: 800 clamp(2.5rem, 6vw, 4rem)/1.05 var(--bsl-display); letter-spacing: -.02em; margin: 0 0 var(--space-3); }
#hero-heading { text-wrap: balance; max-width: 12ch; }
@media (min-width: 900px) {
  /* DS-21 #1: 12ch wrapped the home h1 to 6 lines at 1440; widen the column so it
     settles at 3-4 lines. Must come after the base rule above to win the cascade. */
  .sky-hero__content { max-width: none; }
  #hero-heading { max-width: 34rem; }
}
.sky-hero .lead { font-size: 1.125rem; line-height: 1.5; color: var(--text-2); max-width: 32rem; margin-bottom: var(--space-4); }
.sky-hero__photo { position: relative; z-index: 2; margin: 0 0 var(--space-8); }
.sky-hero__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 0 0 4px var(--bsl-ivory), var(--shadow-paper-lg); }
.sky-hero__photo figcaption { font-size: .72rem; color: var(--text-2); margin-top: var(--space-1); }
@media (max-width: 599px) {
  /* ORCH_CRIT 0216 #4: ~210px of dead air between the CTA and the photo, plus the
     caption sat flush at x=0 (photo-wrap isn't inside .container, so it has no gutter).
     .sky-hero__content's padding-bottom and the section's grid gap are desktop-only
     spacers for the 2-column layout; at mobile (single-column stack) they stack on
     top of each other and on top of photo-wrap's own margins, so all of them need
     trimming together, not just photo-wrap's margin-top. */
  .sky-hero { padding-bottom: 3.5rem; gap: 0; }
  .sky-hero__content { padding-bottom: 0; }
  .sky-hero__photo-wrap { margin-top: 1.5rem; margin-bottom: 1.5rem; }
  .sky-hero__photo figcaption { padding-inline: 1.25rem; }
}

/* ---- 7.2 Cloud edge (paper divider, p.9) — one real paper-cloud silhouette, any section -> next surface ---- */
/* Place as the LAST child of a section, which must be `position:relative` with enough
   padding-bottom to keep real content clear of this box (ORCH_CRIT fix 1). Absolutely
   positioned and full-bleed so it can never sit in normal flow on top of content, and
   `overflow:hidden` + `mask-position` (not transform:translateX) so the layered clouds
   can't push the page into horizontal scroll (ORCH_CRIT fix 2). --edge is the NEXT
   section's surface color.
   P3 DS-12 (cloud edge v3): DS-3's fix made the front layer gap-free but both layers were
   still tiled radial-gradient CIRCLES — identical domes, evenly spaced, reading as a row of
   polka dots rather than paper clouds (p.9: irregular, overlapping, varied-scale lobes).
   Replaced with `cloud-edge-{a,b,c}.svg` — hand-tuned single-path cumulus silhouettes (varied
   lobe width/height, smooth flat-topped domes via tuned bezier tangents, not a circle grid),
   used as a CSS mask (`mask-image` + `background-color: var(--edge)`) rather than a colored
   PNG/SVG per section color, so ONE shape file serves every --edge value.
   Depth (p.9: "2-4 paper layers, shallow shadows") comes from a plain SOLID `--edge-back` fill
   on the .cloud-edge container itself, with the masked puffy front shape on top — not a second
   masked "back cloud" shape, and not `filter: drop-shadow()` on the masked front shape. Both
   were tried first: two independently-curved masked shapes cutting into each other by paint
   order (front simply overpaints back wherever front has any coverage) produces a sharp cusp
   at every x where the two curves' heights cross — mathematically unavoidable for two
   unrelated curves, no matter how the second shape was tuned (tall, gap-free, wide, gentle —
   all still cross front's varied peaks somewhere and all still cusped); `filter: drop-shadow()`
   on an element that also has `mask-image` silently failed to render anything at all in
   testing here. A solid backdrop color sidesteps both: it has no boundary of its own for the
   front shape to cross, so what shows above/around the front lobes is just flat tinted color,
   reading as a soft recessed "next layer" rather than a second competing cloud. The path
   always closes along a flat y=96 baseline across the FULL tile width (not just under the
   lobes), so the front layer's mask covers the entire bottom row of the band at every x —
   --edge reaches the bottom everywhere, zero seam, independent of where the lobes sit. The
   shape tile is 1440px wide — a full desktop viewport of hand-placed, varied-scale lobes with
   zero visible repeat at 1440; mask-repeat:repeat-x only kicks in on narrower viewports (where
   it repeats at a scale far bigger than the viewport itself, so no stretching and no obviously
   -tiling pattern at 390 either). */
.cloud-edge {
  --edge: var(--bsl-ivory);
  --edge-h: 96px;
  --edge-shape: url('../assets/cloud-edge-b.svg');
  position: absolute; left: 0; right: 0; bottom: -1px; height: var(--edge-h); margin: 0;
  overflow: hidden; pointer-events: none; z-index: 4;
  background: transparent;
}
/* SITE_CL_1 (item 2): the ::before layer is GONE. It painted the identical silhouette
   nudged up 7px in a contrasting tint, which rendered as a thin stroke tracing the whole
   divider — read on the live site as the "jagged hand-drawn line" Jam called absolutely
   wrong. Its partner, `mask-repeat: repeat-x` at a fixed 1440px tile with a per-section
   `--edge-pos` offset, also dropped a hard vertical step wherever the tile wrapped (plainly
   visible on the blueprints -> pricing divider at 1440). Both are replaced by ONE gentle
   wave stretched to 100% of the section width (the SVGs carry preserveAspectRatio="none",
   so stretching is what they were drawn for) with no repeat and no second layer: a soft
   paper edge in the next section's colour, nothing that reads as a drawn line. */
.cloud-edge::after {
  content: ""; position: absolute; inset: 0; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: bottom left; mask-position: bottom left;
  -webkit-mask-size: 100% var(--edge-h); mask-size: 100% var(--edge-h);
  -webkit-mask-image: var(--edge-shape); mask-image: var(--edge-shape);
  background: var(--edge);
}
.cloud-edge--to-mist   { --edge: var(--bsl-mist); }
.cloud-edge--to-ink    { --edge: var(--bsl-ink); }
.cloud-edge--to-peach  { --edge: var(--bsl-peach); }
.cloud-edge--to-cobalt { --edge: var(--bsl-cobalt); }

@media (max-width: 600px) {
  .cloud-edge { --edge-h: 48px; }
}

/* Vary the wave shape per section so adjacent dividers don't repeat the same curve.
   SITE_CL_1: the `--edge-pos` phase offsets went with the repeating tile and are gone —
   each shape is now stretched to the full section width, so there is nothing to phase. */
.who-section .cloud-edge         { --edge-shape: url('../assets/cloud-edge-c.svg'); }
.blueprints-section .cloud-edge  { --edge-shape: url('../assets/cloud-edge-a.svg'); }
.how-section .cloud-edge         { --edge-shape: url('../assets/cloud-edge-c.svg'); }
.guide-section .cloud-edge       { --edge-shape: url('../assets/cloud-edge-a.svg'); }
.alchemy-section .cloud-edge     { --edge-shape: url('../assets/cloud-edge-c.svg'); }

/* CSS-only fallback (no SVG, radial gradients as circle arcs); use where kit SVGs can't load (e.g. GHL custom CSS) */
.cloud-edge-css { --edge: var(--bsl-ivory); --paper: var(--bsl-paperblue); --sky: var(--bsl-sky);
  height: 72px; position: relative; pointer-events: none;
  background:
    radial-gradient(circle at 10% 100%, var(--edge) 0 60px, transparent 61px),
    radial-gradient(circle at 34% 100%, var(--edge) 0 88px, transparent 89px),
    radial-gradient(circle at 62% 100%, var(--edge) 0 70px, transparent 71px),
    radial-gradient(circle at 90% 100%, var(--edge) 0 96px, transparent 97px),
    radial-gradient(circle at 22% 100%, var(--paper) 0 84px, transparent 85px),
    radial-gradient(circle at 50% 100%, var(--paper) 0 100px, transparent 101px),
    radial-gradient(circle at 78% 100%, var(--paper) 0 80px, transparent 81px),
    radial-gradient(circle at 5% 100%, var(--sky) 0 100px, transparent 101px),
    radial-gradient(circle at 44% 100%, var(--sky) 0 120px, transparent 121px),
    radial-gradient(circle at 96% 100%, var(--sky) 0 112px, transparent 113px);
}

/* ---- 7.3 Afterglow band (footer / milestone / dark portal panel, p.3) ---- */
.afterglow-band {
  --clouds-h: 120px;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-afterglow);
  /* P3 DS-14: padding-bottom must reserve the FULL --clouds-h (was a flat +48px, less than
     the clouds' 120px height, so footer text/links sat under the cloud layer and z-index 2
     content overlapped the lobes at 390 — ORCH_CRIT-flagged). Tied to the same var the
     clouds use so they can never drift apart again. */
  padding: var(--section-y) 0 calc(var(--section-y) + var(--clouds-h));
}
.afterglow-band::before {            /* the small warm glow at the horizon (5% warmth, p.7) */
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--glow-warm); pointer-events: none;
}
.afterglow-band__clouds {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--clouds-h); z-index: 1; pointer-events: none;
  background: transparent;
}
/* SITE_CL_1 (item 2): ::before dropped and the tile stretched to 100%, same reasoning as
   .cloud-edge above — the offset tinted copy was the stroke that read as a drawn line. */
.afterglow-band__clouds::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: bottom left; mask-position: bottom left;
  -webkit-mask-size: 100% var(--clouds-h); mask-size: 100% var(--clouds-h);
  -webkit-mask-image: url('../assets/cloud-edge-a.svg'); mask-image: url('../assets/cloud-edge-a.svg');
  background: var(--bsl-ink);
}
@media (max-width: 600px) {
  .afterglow-band { --clouds-h: 64px; }
}
.afterglow-band .container { position: relative; z-index: 2; }
.afterglow-band a { color: var(--link); }
.afterglow-band .footer-logo img { height: 44px; width: auto; }   /* ivory horizontal lockup, >=220px wide */
/* four-point spark (p.9), ivory, twinkles by opacity only */
.spark {
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 16px); aspect-ratio: 1; z-index: 1;
  background: var(--bsl-ivory); opacity: .6; pointer-events: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: spark-twinkle 3.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
  @keyframes spark-twinkle { from { opacity: .35 } to { opacity: .8 } }
}
@media (max-width: 599px) {
  /* ORCH_CRIT 0216 #5: at 390 the footer stacks to one column and the left/middle
     sparks land on top of the brand copy; keep only the right one, pinned clear of text. */
  .site-footer .spark:nth-of-type(1),
  .site-footer .spark:nth-of-type(2) { display: none; }
  .site-footer .spark:nth-of-type(3) { left: auto; right: 12px; pointer-events: none; }
}

/* ---- 7.4 Launch band (once per page, p.3 "Launch energy") ---- */
.launch-band { position: relative; overflow: hidden; background: var(--grad-launch); color: var(--bsl-ivory); padding: var(--section-y) 0; }
.launch-band::after { content: ""; position: absolute; right: -6%; bottom: -30%; width: clamp(220px, 32vw, 420px); aspect-ratio: 1; border-radius: 50%; background: var(--bsl-tangerine); box-shadow: 0 0 0 6px rgba(255,247,235,.35); }
.launch-band .btn-primary { background: var(--bsl-ivory); color: var(--bsl-ink); border-color: var(--bsl-ivory); }
.launch-band .btn-accent  { background: var(--bsl-tangerine); color: var(--bsl-ink); border-color: var(--bsl-tangerine); }
/* The ivory override above is for the band's own CTAs; it also hits the ivory
   .offer-card--single's button, making it invisible against the card (ORCH_CRIT fix 3). */
.launch-band .offer-card .btn-primary { background: var(--bsl-cobalt); color: var(--bsl-ivory); border-color: var(--bsl-cobalt); }

/* DS-22: illustrated hero (replaces AI photo) */
/* DS-27: fanned real-cover stack (replaces wireframe SVG). The composite has its
   own drop shadows and a transparent surround, so it drops the card-style ivory
   ring/box-shadow the SVG placeholder needed. */
.sky-hero__photo img {
  aspect-ratio: 962 / 776;
  object-fit: contain;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}
/* P3-11: hero sits on the 1160px page grid, art centred against the text block */
@media (min-width: 900px) {
  /* SITE_CL_1: was 1fr/1fr — Jam's full-image-hero critique wants the photo to read as
     the hero, not an inset level with the copy, so it now takes the larger column. */
  .sky-hero {
    padding-inline: calc(max(0px, (100% - 1160px) / 2) + 2rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
  .sky-hero > .sky-hero__content { padding-inline: 0; padding-bottom: 0; }
}
.hero-price-note { max-width: 36rem; }
.hero-price-note a { white-space: nowrap; }
@media (max-width: 899px) {
  .sky-hero__photo-wrap { max-width: 34rem; margin-inline: auto; padding-inline: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .sky-hero__photo-wrap { padding-inline: 2rem; }
}

/* DS-27: phone spacing keeps the full offer readable without desktop-size gaps. */
@media (max-width: 640px) {
  .blueprints-section, .how-section, .guide-section, .alchemy-section {
    padding-top: 2rem; padding-bottom: 4.5rem;
  }
  .offers-section { padding-bottom: 4.5rem; }
  .faq-section, .terms-section, .newsletter-cta { padding-block: 2rem; }
  .blueprints-header { margin-bottom: 1.5rem; }
  .bp-group + .bp-group { margin-top: 1.5rem; }
  .bp-card__top, .bp-card__body, .bp-card__footer { padding: 1rem; }
  .bp-group-label { margin-bottom: .75rem; }
  .step-item { padding: .8rem; }
  .steps-strip { margin-top: 1.5rem; gap: .5rem; }
  .peek-panel { padding: 1rem; }
  .offer-card__head, .offer-card__body, .offer-card__footer { padding: 1.25rem; }
  .terms-grid { gap: 1.25rem; }
  .sky-hero { padding-top: 1.5rem; }
  .sky-hero h1 { font-size: 2.5rem; }
}
@media (max-width: 640px) {
  .bp-card__top { flex-direction: row; align-items: center; justify-content: flex-start; gap: .75rem; min-height: 0; }
  .bp-card__top .bp-card__icon-wrap { width: 56px; height: 56px; margin: 0; }
  .bp-card__top .bp-card__icon { width: 36px; height: 36px; }
  .bp-card__top-meta { flex: 1; flex-wrap: wrap; }
  .faq-q { padding-block: 1rem; }
  .guide-form-card, .checkout-notify { padding: 1.25rem; }
  .alchemy-inner, .guide-inner { gap: 1.5rem; }
  .site-footer { padding-top: 2rem; }
}
@media (max-width: 640px) {
  .offer-includes { gap: .5rem; }
  .offer-includes li { padding-block: 0; }
  .footer-grid { gap: 1.25rem; }
  .sky-hero__photo-wrap { margin-block: .75rem; }
}

@media (max-width: 640px) {
  .faq-help-card { padding: 1rem; margin-top: .75rem; }
  .faq-section h2 { margin-bottom: 1rem; }
  .steps-strip .step-item { padding-block: .65rem; }
}

/* ================================================================
   SITE_CL_1 (checklist items 1-2) — RESTORED FULL-IMAGE HERO
   ----------------------------------------------------------------
   Jam's 09-26 critique: the Open Skies v2 `.sky-hero` put a small inset
   illustration next to the copy ("the hero images here are way too small")
   and he asked for the pre-6c3fbbf full-bleed photo hero back. This block is
   that hero, lifted verbatim from `git show 6c3fbbf^:site/v3/css/styles.css`
   with two deliberate changes:
     1. namespaced `.hero*` -> `.photo-hero*`, because guide/index.html and
        course/stooptroops/index.html both define their own `.hero` in page
        <style> blocks and a global `.hero { min-height:100svh; display:flex }`
        would have wrecked them.
     2. the rejected top-right decorative disc stays omitted.
   Desktop: photo is full-bleed behind ink scrim + drifting paper clouds, text
   bottom-left, gentle wave into the next section. Mobile (<=767px): stacks to a
   full-width photo band over an ivory text block, which is how the previous
   build handled 390 and is why it read as a photo hero there too.
   ================================================================ */
/* ----------------------------------------------------------------
   HERO — full-bleed photo / video / clouds / Ken Burns
   ---------------------------------------------------------------- */
.photo-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0;
}
@media (min-width: 768px) {
  /* Pull hero up so the photo extends BEHIND the sticky header (z-100).
     The top scrim covers the header zone; ivory logo reads over dark photo. */
  .photo-hero {
    min-height: 92vh;
    margin-top: -68px;
  }
}

/* (a) Photo background */
.photo-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.photo-hero-bg-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.photo-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform-origin: center;
}

/* (a) Ken Burns — scale 1.0→1.06 over 30s, alternate */
@media (prefers-reduced-motion: no-preference) {
  .photo-hero-bg-img {
    animation: hero-kenburns 30s ease-in-out infinite alternate;
  }
}
@keyframes hero-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* (b) Video overlay */
.photo-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 1;
}
.photo-hero-bg-video.is-playing { opacity: 1; }

/* (c) Paper cloud layers */
.photo-hero-clouds {
  position: absolute;
  inset: 0;
  z-index: 4; /* above scrim (3) so clouds are CLEARLY visible, below content (5) */
  pointer-events: none;
}
.photo-hero-cloud { position: absolute; }
.photo-hero-cloud--1 { bottom: 170px; left: -60px; }
.photo-hero-cloud--2 { bottom: 190px; left: 26%; }
.photo-hero-cloud--3 { bottom: 150px; right: -30px; }
.photo-hero-cloud--4 { top: 110px; right: 40px; }

@media (prefers-reduced-motion: no-preference) {
  .photo-hero-cloud--1 { animation: cloud-drift-1 62s ease-in-out infinite alternate; }
  .photo-hero-cloud--2 { animation: cloud-drift-2 47s ease-in-out infinite alternate; }
  .photo-hero-cloud--3 { animation: cloud-drift-3 78s ease-in-out infinite alternate; }
  .photo-hero-cloud--4 { animation: cloud-drift-4 55s ease-in-out infinite alternate; }
}
@keyframes cloud-drift-1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(12px); }
}
@keyframes cloud-drift-2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-8px, 6px); }
}
@keyframes cloud-drift-3 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-10px); }
}
@keyframes cloud-drift-4 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

/* (d) Gradient scrim — darkest at bottom (text) and top (header logo).
   Bottom: ivory on ink-88% → ratio ≥ 5.3:1 against worst-case white photo ✓
   Top: ensures ivory logo is readable regardless of photo brightness */
.photo-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom,
      rgba(16,35,68,.58)  0%,
      rgba(16,35,68,.20) 12%,
      transparent        22%),
    linear-gradient(to top,
      rgba(16,35,68,.88)  0%,
      rgba(16,35,68,.65) 15%,
      rgba(16,35,68,.28) 42%,
      rgba(16,35,68,.06) 65%,
      transparent        80%);
}

/* Hero content block */
.photo-hero-content {
  position: relative;
  z-index: 5;
}
.photo-hero-content .container {
  padding-top: 8rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .photo-hero-content .container {
    padding-top: 6rem;
    padding-bottom: 4rem;
    max-width: 800px;
  }
}

.photo-hero-eyebrow {
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,247,235,.8);
  margin-bottom: 1rem;
}
.photo-hero-h1 {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--bsl-ivory);
  margin-bottom: 1.25rem;
}
.photo-hero-support {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255,247,235,.88);
  margin-bottom: 1.75rem;
  max-width: 520px;
}
.photo-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
/* SITE_CL_1: the price note is shared with the retired sky hero, where it was slate text and
   a cobalt link on ivory. Over the photo hero that is unreadable, so re-tone it to ivory —
   scoped to .photo-hero-content so nothing else on the page changes. */
.photo-hero-content .hero-price-note { color: var(--bsl-ivory); }
.photo-hero-content .hero-price-note a { color: var(--bsl-ivory); text-decoration: underline; }
@media (max-width: 767px) {
  /* stacked mode puts the note back on ivory paper, so the original tones return */
  .photo-hero-content .hero-price-note { color: var(--bsl-slate); }
  .photo-hero-content .hero-price-note a { color: var(--bsl-cobalt); }
}

.photo-hero-photo-note {
  font-size: .72rem;
  color: rgba(255,247,235,.45);
  font-style: italic;
}

/* Bottom wave transition */
.photo-hero-wave {
  position: relative;
  z-index: 6;
  line-height: 0;
  margin-top: -1px;
}
.photo-hero-wave svg {
  display: block;
  width: 100%;
  height: 72px;
}

/* ----------------------------------------------------------------
   HERO — Mobile stacked layout (≤ 767px)
   Photo fills top 45svh; text block on ivory below.
   Guarantees no headline over a face at 360, 390, 414, 768.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Switch from flex-end to stacked column */
  .photo-hero {
    min-height: auto;
    justify-content: flex-start;
  }

  /* Photo: in-flow block at top of stack */
  .photo-hero-bg {
    position: relative;
    height: 45svh;
    min-height: 220px;
    flex-shrink: 0;
  }

  /* Shift image toward table/hands; pushes face up and out */
  .photo-hero-bg-img,
  .photo-hero-bg-video {
    object-position: center 70%;
  }

  /* Top scrim: ensures ivory logo is readable regardless of photo content */
  .photo-hero-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 88px;
    background: linear-gradient(to bottom, rgba(16,35,68,.60), transparent);
    z-index: 4;
    pointer-events: none;
  }

  /* Hide full-bleed overlays that don't apply in stacked mode */
  .photo-hero-clouds,
  .photo-hero-scrim { display: none; }

  /* Text block: ivory background; no photo behind text */
  .photo-hero-content {
    position: relative;
    background: var(--bsl-ivory);
    flex-shrink: 0;
  }
  .photo-hero-content .container {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }

  /* Typography on ivory — contrast ratios:
     Ink #102344 on Ivory #FFF7EB → 14.4:1 ✓
     Slate #405773 on Ivory #FFF7EB → 6.5:1 ✓  */
  .photo-hero-eyebrow { color: var(--bsl-slate); }
  .photo-hero-h1 { color: var(--bsl-ink); }
  .photo-hero-support { color: var(--bsl-slate); }
  .photo-hero-photo-note { color: var(--bsl-slate); opacity: .6; }

  /* Ghost hero button adapts to ivory bg */
  .btn-ghost-hero {
    color: var(--bsl-ink);
    border-color: rgba(16,35,68,.35);
  }
  .btn-ghost-hero:hover {
    background: rgba(16,35,68,.06);
    color: var(--bsl-ink);
  }

  /* Wave not needed — text block meets who-section directly */
  .photo-hero-wave { display: none; }

  /* Header: in stacked mode the photo is below the header (not behind it),
     so transparent header shows ivory body. Force ink bg so the ivory logo reads.
     SITE_CL_1: the previous build could apply this globally because every page ran a
     transparent header. This build has `.site-header--light` pages (ink logo on ivory),
     so the rule is narrowed to the transparent variant only — otherwise it would paint
     an ink bar behind an ink logo on kits/guide/course at 390. */
  .site-header:not(.is-scrolled):not(.site-header--light) {
    background: var(--bsl-ink);
    border-bottom-color: rgba(255,247,235,.12);
  }
}

/* SITE_CL_1: one full brand photograph breaks up the process-card grid without touching blueprint previews. */
.how-photo { margin: 2rem 0; }
.how-photo img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: var(--bsl-radius); }
.how-photo figcaption { margin-top: .5rem; color: var(--bsl-slate); font-size: .8rem; }