/* ============================================================
   NEW DAY SKIN SPRAY — styles.css
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'EvolvedSans';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/EvolvedSans-Light.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedSans';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/EvolvedSans-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedSans';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/EvolvedSans-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedSemi';
  font-weight: 300;
  font-style: normal;
  src: url('fonts/EvolvedSemi-Light.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedSemi';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/EvolvedSemi-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedSerif';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/EvolvedSerif-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'EvolvedVariable';
  font-weight: 100 900;
  font-style: normal;
  src: url('fonts/EvolvedVariable.ttf') format('truetype');
}

/* ---------- Custom Properties ---------- */
:root {
  --blue-primary:   #2b5f82;
  --blue-pale:      #2b5f78;
  --blue-light:     #4daae8;
  --blue-mid:       #9dcded;
  --blue-badge-bg:  #4daae8;
  --blue-badge-txt: #e9f4fb;
  --bg-pale:        #f5fdff;
  --bg-light:       #e9f4fb;
  --bg-card:        #e6f3fb;
  --bg-section:     #f3faff;
  --white:          #ffffff;
  --text-primary:   #2b5f82;

  --grad-text: linear-gradient(180deg, rgba(77,170,232,0.68) 11%, rgba(43,95,130,0.68) 100%);
  --grad-blue-btn: linear-gradient(185deg, rgba(77,170,232,0.68) 28%, rgba(43,95,130,0.68) 154%);
  --grad-who: linear-gradient(180deg, #f3faff 0%, #e9f4fb 23%, rgba(233,244,251,0) 100%);
  --grad-regimen: linear-gradient(180deg, #9dcded 0%, rgba(229,244,252,0) 100%);
  --grad-hiw: linear-gradient(180deg, #71b6e4 0%, #9dcded 22.6%, rgba(205,231,246,0) 100%);
  --grad-form-fade: linear-gradient(to top, #ffffff 19.6%, rgba(255,255,255,0) 100%);

  --font-sans: 'EvolvedSans', 'EvolvedVariable', sans-serif;
  --font-semi: 'EvolvedSemi', sans-serif;
  --font-serif: 'EvolvedSerif', serif;

  --r-card: 20px;
  --r-box:  12px;
  --r-pill: 50px;
  --r-badge: 15px;

  --max-w:    1200px;
  --px:       80px;   /* +30% from original 60px — applied to all section inner padding */
  --nav-h:    95px;
  --marquee-h: 43px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  background: #F0FCFF; /* canvas fallback — matches nav gap + gradient 0–9% stop */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative; /* containing block for ::before */
}

/* Gradient pseudo-element spans the full document height and scrolls with page.
   Using ::before (not body background) avoids the browser quirk where body's
   own background-size percentages resolve to viewport height, not document height.
   inset: 0 resolves against body's computed content height = full document. */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Front: blue gradient fades to transparent at 82% */
    linear-gradient(180deg,
      #F0FCFF                    9%,
      rgba(188, 225, 247, 0.66) 54%,
      rgba(183, 222, 246, 0.63) 58%,
      transparent               82%
    ),
    /* Back: F5F5F5 base, fades to white at the very bottom */
    linear-gradient(180deg,
      #F5F5F5  82%,
      #FFFFFF 100%
    );
  pointer-events: none;
  z-index: -1;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---------- Marquee Bar ---------- */
.marquee-bar {
  position: relative;
  height: var(--marquee-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  letter-spacing: 0.1px;
  color: var(--blue-primary);
  background: #F0FCFF;
  pointer-events: none;
}
.marquee-bar span { font-weight: 400; }
.marquee-bar a {
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-transform: uppercase;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* ---------- Navigation ---------- */
.nav-wrapper {
  position: sticky;
  top: 0;
  margin: 0 20px 0;   /* top margin removed — marquee bar above provides the ~20px gap */
  z-index: 100;
  transition: margin 0.3s ease;
}
.nav-wrapper.scrolled {
  margin: 0;
}
.nav {
  background: var(--white);
  border-radius: var(--r-card);
  height: var(--nav-h);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
.nav-wrapper.scrolled .nav {
  border-radius: 0;
  box-shadow: 0 2px 20px rgba(77, 170, 232, 0.18);
}
/* Gradient shadow: lives inside nav-wrapper stacking context (z-100) so it
   paints above the nav-mobile overlay (z-99). Always present but invisible;
   fades in/out with the hamburger via opacity transition. */
.nav-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 60px;
  background: linear-gradient(to bottom,
    rgba(77, 170, 232, 0.15) 0%,
    rgba(77, 170, 232, 0)   100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav-wrapper.menu-open::after {
  opacity: 1;
}
/* When the menu opens at the top of the page (not yet scrolled), nav-wrapper has
   margin: 20px on each side, so ::after's left:0/right:0 is 20px inside the viewport.
   Extend by -20px to reach the true viewport edges. When scrolled, margin:0 so
   the base left:0/right:0 already spans edge-to-edge (no override needed there). */
.nav-wrapper.menu-open:not(.scrolled)::after {
  left: -20px;
  right: -20px;
}
.nav-logo { height: 42px; width: auto; flex-shrink: 0; position: relative; top: 4px; }  /* 24px × 1.75; +10px down −6px up = net 4px down */
.nav-links {
  display: flex;
  /* Fluid scale: 13.5px/16px at 1024px → 15.5px/27px at 1440px.
     Prevents multi-word labels wrapping between those breakpoints. */
  gap: clamp(28px, calc(3.5vw - 4px), 46px);
  align-items: center;
  list-style: none;
  font-size: clamp(13.5px, calc(0.48vw + 8.58px), 15.5px);
  letter-spacing: -0.36px;
  font-weight: 400;
  position: relative;   /* pill is absolutely positioned relative to this */
}
.nav-links a {
  color: var(--blue-primary);
  transition: opacity 0.2s;
  white-space: nowrap;   /* never let a multi-word label break onto two lines */
  position: relative;    /* sits above the pill in stacking order */
  z-index: 1;
}
.nav-links a:hover { opacity: 0.7; }

/* Sliding underline — JS sets left + width; radial gradient fades to transparent at both ends */
.nav-pill {
  display: block;
  position: absolute;
  bottom: -5px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(43, 95, 130, 0) 0%, rgba(43, 95, 130, 0.2) 50%, rgba(43, 95, 130, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transition: left    0.6s cubic-bezier(0.16, 1, 0.3, 1),
              width   0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
}
.nav-prescribe {
  background-image: linear-gradient(120deg, #4DAAE8 0%, #4DAAE8 45%, #9dcded 100%);
  background-size: 220% 100%;
  background-position: left center;
  color: var(--blue-badge-txt);
  border-radius: var(--r-pill);
  height: 34px;
  padding: 0 66px;  /* 44px × 1.5 — 1.5× total button width */
  font-size: 14.2px;  /* 12.7px × 1.12 */
  letter-spacing: 0.1px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-prescribe:hover { background-position: right center; }

/* Hamburger (hidden on desktop) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-primary);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile {
  display: flex;       /* always in flex layout; opacity/visibility control rendering */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  overflow: hidden;   /* clips spray-dots decoration at bottom edge */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
/* Spray dots decoration — half-revealed from the bottom, behind the links.
   Uses the SVG as a CSS mask so the dot colour is exactly #CDE7F6 @ 50% opacity
   regardless of what colours are baked into the SVG file itself.
   The background is a gradient (transparent at top of element → full colour at 40%)
   so the top of the dots graphic fades to invisible while lower dots remain solid.
   The SVG mask then punches the dot shapes out of this gradient background.
   z-index: 0 sits above the white background; links are at z-index: 1. */
.nav-mobile::before {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 135vw;
  height: 135vw;
  background: linear-gradient(to bottom,
    transparent                  0%,
    rgba(205, 231, 246, 0.5)    40%);   /* fade-in from top of the dot element */
  -webkit-mask-image: url('images/spray-dots-3.svg');
          mask-image: url('images/spray-dots-3.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  pointer-events: none;
  z-index: 0;
}
.nav-mobile.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---- 1. Nav link stagger ----
   Links start invisible + shifted down. When .open is added they cascade in
   with per-link delays. Removing .open reverts them instantly (no delay) so
   they're hidden well before the overlay finishes fading out. */
.nav-mobile a {
  font-size: 24px;
  font-weight: 300;
  color: var(--blue-primary);
  letter-spacing: -0.5px;
  position: relative;   /* establishes stacking context so z-index works */
  z-index: 1;           /* sits above the spray-dots ::before (z-index: 0) */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease; /* fast on close */
}
.nav-mobile.open a {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mobile.open a:nth-of-type(1) { transition-delay:  60ms; }
.nav-mobile.open a:nth-of-type(2) { transition-delay: 115ms; }
.nav-mobile.open a:nth-of-type(3) { transition-delay: 170ms; }
.nav-mobile.open a:nth-of-type(4) { transition-delay: 225ms; }
.nav-mobile.open a:nth-of-type(5) { transition-delay: 280ms; }
.nav-mobile.open a:nth-of-type(6) { transition-delay: 340ms; } /* PRESCRIBE */

/* PRESCRIBE button: larger, bold white, pinned near the bottom of the drawer */
.nav-mobile .nav-prescribe {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(14px); /* compose with stagger offset */
  font-size: 18px;       /* 14px × 1.3 */
  height: 57px;          /* 44px × 1.3 */
  padding: 0 47px;       /* 36px × 1.3 */
  color: var(--white);   /* pure white text */
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;            /* above spray dots and links */
}
.nav-mobile.open .nav-prescribe {
  transform: translateX(-50%) translateY(0px); /* compose: center + no stagger offset */
}

/* ---------- Page container helper ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* Removed: #top { height: ... } was applied to <body id="top">, constraining
   the body element to 218 px — the direct cause of the squished background.
   The hero section already carries its own padding-top to clear the fixed nav. */

/* ---------- Section eyebrow labels ---------- */
/* Pill-shaped uppercase label above the headline in each nav-linked section.
   display:inline-block shrinks the pill to text width.
   Centered sections (Results, Access) center the pill via parent text-align:center.
   Left-aligned pills (How It Works, Who It's For) hang the left padding into the
   margin so the text inside lines up flush with the headline text below. */
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: normal;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 8px 22px;
  margin-bottom: 24px;
}
/* Centered: block + fit-content + auto margins works regardless of parent text-align */
.section-eyebrow--center {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* White pill with dark blue text — for use on coloured section backgrounds */
.section-eyebrow--light {
  background: var(--white);
  color: var(--blue-primary);
}
/* Who It's For — pill and headline left-align with the grid below */
.who-section .section-eyebrow { margin-left: 0; }

/* ---------- HERO SECTION ---------- */
.hero-section {
  padding-top: 30px;   /* nav is now in-flow above; marquee bar is still fixed (43px) */
  padding-bottom: 0;
}
.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 24px;   /* right matches nav padding so graphics right-align with Prescribe button */
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: 570px;
}
.hero-copy {
  flex: 0 0 auto;
  width: 697px;   /* −20%: keeps right edge of text clear of hero graphics */
  display: flex;
  flex-direction: column;
  gap: 133px;   /* 568(photo bottom) − 22(pad) − 176(eyebrow+headline @43px) − 237(claims w/ sublh 30px) = 133 */
  padding-top: 22px;
  position: relative;
  z-index: 2;   /* keep text above absolutely-positioned hero-graphics-scene */
}
.hero-eyebrow {
  font-size: 14px;   /* ×0.9 */
  font-weight: 700;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 41px;   /* ×0.9 */
}
.hero-headline {
  font-size: 43px;   /* −15%: scale-down align-top-left */
  letter-spacing: -3.0px;
  color: var(--blue-primary);
  line-height: 1.05;
}
.hero-headline em {
  font-style: normal;
  font-weight: 300;
}
/* Line breaks are intentional at full desktop width (≥1440px) only;
   at narrower sizes the text reflows naturally around the scaled copy width. */
.hero-headline br { display: none; }
@media (min-width: 1440px) {
  .hero-headline br { display: initial; }
}
@media (min-width: 1405px) {
  .who-section { margin-top: 85px; }  /* +25px gap: outcome body copy and who-photo too close at these widths */
}
.hero-claims { display: flex; flex-direction: column; gap: 16px; }   /* ×0.9 */
.hero-subheadline {
  font-size: 27px;   /* ×0.9 */
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 30px;   /* halved leading: was 41px */
  color: var(--blue-primary);
}
.hero-claim-boxes {
  display: flex;
  gap: 22px;   /* ×0.9 */
}
.claim-box {
  background: #fcfdff;
  border-radius: var(--r-box);
  width: 215px;   /* ×0.9 */
  height: 191px;  /* ×0.9 */
  padding: 23px;  /* ×0.9 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.claim-box-text {
  font-size: 27px;   /* ×0.9 */
  font-weight: 400;
  letter-spacing: -1.3px;
  line-height: 1.2;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.claim-box-line {
  height: 5px;
  width: 144px;   /* ×0.9 */
  border-radius: 2.5px;
  background: linear-gradient(90deg, rgba(77,170,232,0.8) 0%, rgba(77,170,232,0) 100%);
}

/* Hero graphics */
.hero-graphics {
  flex: 1;
  position: relative;
  height: 570px;   /* trimmed to photo.bottom+2: eliminates dead space below claim boxes */
  display: flex;
  align-items: flex-start;
  margin-left: -25px;
}
.hero-photo-wrap {
  position: absolute;
  top: 60px;     /* shifted down: photo.bottom(568) aligns with claim boxes bottom */
  left: 162px;
  width: 518px;
  height: 508px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-bottle-wrap {
  position: absolute;
  top: -32px;
  left: 538px;   /* bottle centre (538+142=680) aligns with photo right edge (162+518=680) */
  width: 284px;
}
.hero-bottle-wrap img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(43,95,130,0.12));
}
.hero-badge {
  position: absolute;
  top: 20px;     /* −100px then +60px from original top:60px */
  left: 120px;   /* photo.left(162) − 42px: badge straddles photo's top-left corner */
  width: 140px;  /* ×0.9 */
  height: 140px; /* ×0.9 */
}
.hero-badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 17.5px;   /* +10% from 16px */
  font-weight: 400;
  text-align: center;
  color: var(--white);
  line-height: 1.2;
  gap: 0;
  padding: 22px;
}
.hero-badge-text strong {
  font-weight: 700;
  font-size: 17.5px;   /* +10% from 16px */
  white-space: nowrap;  /* keeps "FDA 510(k)" on one line */
}

/* Scene wrapper — scales all three graphic elements as one rigid unit.
   transform-origin: left top anchors the group to the hero-graphics top-left
   so the photo/bottle/badge stay adjacent to hero-copy as they shrink. */
.hero-graphics-scene {
  position: absolute;
  inset: 0;
  transform-origin: left top;
}

/* Mobile flat graphic — hidden on desktop, shown below 768px in place of the scene */
.hero-mobile-graphic { display: none; }

/* ---------- COPY BREAK ---------- */
.copy-break-br { display: block; }   /* visible at ≥768px */
.copy-break {
  text-align: center;
  padding: 78px var(--px) 82px;   /* top: 98px − 20px; bottom: 102px − 20px */
  max-width: 1280px;
  margin: 0 auto;
}
.mobile-br  { display: none; }  /* shown only in mobile media query */
.desktop-br { display: initial; } /* hidden at ≤690px */
.xs-br      { display: none; }  /* shown only at ≤600px (phone) */
.phone-br   { display: none; }  /* shown only at ≤542px (narrow phone) */

.copy-break p {
  font-size: 47px;       /* +17% from 40px */
  font-weight: 300;
  letter-spacing: -3.3px;
  color: var(--blue-primary);
  line-height: 1.05;
}

/* ---------- REGIMEN SECTION ---------- */
.regimen-section {
  margin: 0 20px;
  border-radius: var(--r-card);
  background: var(--grad-regimen);
  padding: 75px clamp(14px, 7vw, 101px) 50px;   /* side: 101px at 1440px (⅔ again), scales proportionally */
  overflow: hidden;
  position: relative;
  isolation: isolate; /* stacking context so z-index:-1 children sit above section bg, below content */
}
.regimen-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/spray-dots.png') right top / 40% auto no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}
.regimen-section::after {
  content: '';
  position: absolute;
  right: -142px;         /* −80px − 62px: left edge stays fixed as width grows */
  bottom: -210px;        /* −180px − 30px */
  width: 686px;          /* 624px × 1.1 */
  height: 686px;
  background: url('images/spray-dots-1.svg') center / contain no-repeat;
  /* visible portion = 686−210 = 476px = 69% of element; transparent lands right at the clip edge */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 69%);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 69%);
  pointer-events: none;
  z-index: -1;
}
.regimen-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -2.4px;
  color: var(--white);
  text-align: center;
  margin-bottom: 60px;   /* ×1.5: gap between headline and 4 regimen text blocks */
}
.regimen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 75px;   /* ×1.5: gap between 4 text blocks and 4 blue claim boxes */
}
.regimen-item { display: flex; flex-direction: column; gap: 14px; }
.regimen-item-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.57px;
  line-height: 1.4;
  color: var(--blue-pale);
}
.regimen-item-line {
  height: 5px;
  width: 130px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}
.regimen-item-body {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 20px;
  color: var(--blue-pale);
}

/* Badge pills row */
.regimen-badges {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.regimen-badge {
  background: var(--blue-badge-bg);
  border-radius: var(--r-badge);
  height: 76px;
  width: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
}
.regimen-badge span {
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue-badge-txt);
  line-height: 18px;   /* leading reduced 40%: was (21−13.2)=7.8px, now 7.8×0.6+13.2=18px */
}

/* ---------- BEFORE/AFTER SECTION ---------- */
.before-after-section {
  padding: 80px 0 0;  /* +20px more gap after regimen section */
}
.before-after-headline {
  text-align: center;
  margin-bottom: 16px;
  padding: 0 var(--px);
}
.before-after-headline h2 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -2px;
  color: var(--blue-primary);
  line-height: 1.2;
}
.before-after-headline p:not(.section-eyebrow) {
  font-size: 12px;
  font-weight: 400;
  color: var(--blue-primary);
  margin-top: 6px;
  line-height: 33px;
}
.before-after-boxes {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Day 0 / Day 2 boxes */
.day-box {
  background: var(--white);
  height: clamp(270px, 25.1vw, 362px);   /* scales with viewport; 362px at 1440, 270px at ~1076px */
  width: calc(50% - 10px);
  display: flex;
  align-items: stretch;   /* images fill full inner height */
  justify-content: space-between;
  padding: 20px 20px 20px 30px;
  gap: 20px;
  overflow: hidden;
}
.day-box--before {
  border-radius: 0 20px 20px 0;
}
.day-box--before .day-box-copy {
  margin-left: 20px;   /* shifts only the before/Day 0 text blurb right by 20px */
}
.day-box--after {
  border-radius: 20px 0 0 20px;
}
.day-box-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 4px;
  flex: 1;         /* takes all space left after the fixed-square image */
  min-width: 0;    /* allows flex child to shrink below content size */
}
.day-label-small {
  font-size: clamp(11px, 1.05vw, 15px);   /* scales with viewport; 15px at 1440 */
  font-weight: 300;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 35px;
}
.day-label-large {
  font-family: var(--font-semi);
  font-size: clamp(56px, 6.5vw, 94px);   /* scales with viewport; 94px at 1440 */
  font-weight: 300;
  letter-spacing: -4.7px;
  line-height: 1.1;   /* was 0.9: clipped descender on "y" with overflow:hidden parent; 1.1 gives room */
  background: linear-gradient(180deg, rgba(77,170,232,0.68) 0%, rgba(43,95,130,0.68) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  margin-left: -10px;   /* optical left-align: negative indent matches visual weight */
}
.day-sublabel {
  font-size: clamp(14px, 1.6vw, 23px);   /* scales with viewport; 23px at 1440 */
  font-weight: 300;
  letter-spacing: -0.44px;
  line-height: clamp(20px, 2.22vw, 32px); /* scales with font-size; 32/23 ≈ 1.391 ratio */
  color: var(--blue-primary);
}
.day-box-image {
  flex-shrink: 0;          /* never compressed by flex */
  aspect-ratio: 1 / 1;    /* width = height (set by align-items:stretch) → always square */
  border-radius: 12px;
  overflow: hidden;
}
.day-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;   /* right-aligned within crop */
}

/* ---------- PHILOSOPHY SECTION (A Return to First Principles) ---------- */
.philosophy-section {
  margin: 20px auto 0;
  padding: 90px 80px 140px 80px;
  max-width: 1135px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
/* Spray-dot radial SVG glow — opacity driven directly by JS via element.style.opacity */
.philosophy-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 901px;
  background: url('images/spray-dots-radial.svg') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.1s linear;
}
/* Lift text content above the z-index:0 glow div */
.philosophy-section .section-eyebrow,
.philosophy-inner {
  position: relative;
  z-index: 1;
}

/* Center the pill and give it breathing room before the headline block */
.philosophy-section .section-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 48px;
}
.philosophy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.philosophy-headline {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.philosophy-eyebrow {
  font-family: var(--font-sans);
  font-size: 15.6px;  /* 13px × 1.2 */
  font-weight: 700;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: normal;
}
.philosophy-title {
  font-size: 60px;
  letter-spacing: -4px;
  color: var(--blue-primary);
  line-height: 1.0;
}
.philosophy-title em {
  font-style: normal;
  font-weight: 300;
}
.philosophy-body {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 21px;
  color: var(--blue-primary);
  max-width: 580px;
  width: 100%;
}

/* ---------- HOW IT WORKS SECTION ---------- */
.hiw-section {
  margin: 0 20px 20px;
  border-radius: var(--r-card);
  background: var(--grad-hiw);
  padding: 80px clamp(14px, 7vw, 101px) 60px;   /* side: 101px at 1440px (⅔ again), scales proportionally */
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hiw-section::before {
  content: '';
  position: absolute;
  right: -5%;
  top: 0;
  bottom: 0;
  width: 45%;
  background: url('images/spray-dots.png') right center / contain no-repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
}
.hiw-section::after {
  content: '';
  position: absolute;
  left: -80px;
  bottom: -390px;
  width: 700px;          /* 624px × 1.06 × 1.06 */
  height: 700px;
  background: url('images/spray-dots-2.svg') center / contain no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}
.hiw-headline {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -2.52px;
  color: var(--white);
  text-align: center;
  margin-bottom: 68px;   /* 150px × 0.45 = 55% reduction */
  line-height: 43px;
}
.hiw-steps {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 29px;   /* −40%: tighter spacing to outcome row */
}
.hiw-step {
  flex: 1;
  min-width: 0;
}
.hiw-step-header {
  display: flex;
  gap: 19px;
  align-items: last baseline;
  margin-bottom: 10px;
  width: 90%;          /* match image/body width so all step content aligns as a centered block */
  margin-left: auto;
  margin-right: auto;
}
.hiw-step-img {
  display: block;
  width: 90%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-box);
  margin-bottom: 30px;
  margin-left: auto;   /* center within step column to match header/body block */
  margin-right: auto;
}
.hiw-step-num {
  font-family: var(--font-serif);
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -4.9px;
  color: var(--white);
  line-height: 64px;
  flex-shrink: 0;
}
.hiw-step-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hiw-step-body {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 21px;
  color: var(--blue-primary);
  width: 90%;          /* matches image width */
  margin-left: auto;   /* center within step column */
  margin-right: auto;
}

/* Outcome row — content left-aligns with step 2's body copy                */
/* Step 2 body left (gap=40px): (W−80)/3 × 1.05 + 40 = calc(35% + 12px)    */
/* cascade_x  = margin + label(230px) + gap(19px) + content-offset(−5px)    */
/*            = margin + 244px                                                */
/* → margin   = calc(35% + 12px − 244px) = calc(35% − 232px)  [gap=40px]   */
/* → margin   = calc(35% +  7px − 244px) = calc(35% − 237px)  [gap=24px]   */
/* → margin   = calc(35% +  6px − 244px) = calc(35% − 238px)  [gap=20px]   */
.hiw-outcome {
  display: flex;
  gap: 19px;
  align-items: baseline;   /* aligns "Outcome" text baseline with "AD INTERVENTION..." baseline */
  border-top: none;
  padding-top: 19px;
  max-width: 800px;
  margin-left: calc(35% - 232px);
  margin-right: 0;
}
.hiw-outcome-label {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.hiw-outcome-label-text {
  font-family: var(--font-serif);
  font-size: 53px;   /* +15% from 46px */
  font-weight: 700;
  letter-spacing: -3px;
  color: var(--white);
  width: 230px;
  line-height: normal;
}
.hiw-outcome-line {
  height: 5px;
  width: 230px;   /* matches label text width */
  border-radius: 2.5px;
  margin-top: -5px;  /* pull 5px closer to "Outcome" text */
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}
.hiw-outcome-content {
  padding-top: 0;     /* baseline alignment on .hiw-outcome handles vertical positioning */
  flex: 1;
  margin-left: -5px;  /* shifts title text 5px left */
}
.outcome-title-br { display: block; }   /* visible at ≥1028px */
.hiw-outcome-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #2b5f82 0%, rgba(71,157,214,0.68) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 27px;
  margin-bottom: 8px;
}
.hiw-outcome-body {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 21px;
  color: var(--blue-pale);
}

/* ---------- WHO IT'S FOR SECTION ---------- */
.who-section {
  margin: 60px 20px 0;  /* 85px − 25px: top border extends 25px higher */
  border-radius: var(--r-card);
  background: var(--grad-who);
  /* left/right: ×⅔ again; right: 125px at 1440px, left: vw-proportional */
  padding: 75px clamp(14px, 8.6vw, 125px) 50px calc(8.9vw - 9px);
  position: relative;
  overflow: visible;  /* allows floating photo and callout to bleed outside */
}
.who-photo-wrap {
  position: absolute;
  /*
   * Width = available horizontal space to the right of the headline.
   * Available ≈ 0.911×vw − 700px  (section_width − left-padding − headline − gap).
   * Height tracks width at the original 580:340 aspect ratio (×0.5862).
   * Top = 272px − height keeps the bottom edge locked to the "in your waiting room"
   * baseline: section padding-top(75) + eyebrow-block(56) + 2 headline lines(100) + baseline(41.6) = 272px.
   */
  width:  clamp(120px, calc(91.1vw - 700px), 580px);
  height: clamp(70px,  calc(53.4vw - 411px), 340px);
  top:    clamp(-43px, calc(708px - 53.4vw), 227px);
  right: 20px;
  border-radius: var(--r-box);
  overflow: hidden;
}
.who-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.who-headline {
  font-size: 48px;
  letter-spacing: -2.4px;
  line-height: 50px;
  color: var(--blue-primary);
  margin-bottom: 60px;
  max-width: 624px;
  margin-left: 0;
}
.who-headline em { font-style: normal; font-weight: 300; }
.who-headline strong { font-weight: 700; }

.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 54px;   /* restored original gap */
  row-gap: 60px;
  padding-left: 120px;  /* full-width only: indent cards away from section left edge */
}
.who-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 290px;   /* +20px right extension */
}
/* "The teen athlete" (2nd card) and "The patient who's still not quite clear" (5th card) */
.who-grid .who-card:nth-child(2),
.who-grid .who-card:nth-child(5) {
  margin-left: 22px;
}
.who-card-title {
  font-size: 22px;   /* +15% from 19px */
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 25px;
  color: var(--blue-pale);
}
.who-card-line {
  height: 5px;
  width: 130px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, rgba(77,170,232,0.8) 0%, rgba(77,170,232,0) 100%);
}
.who-card-body {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 21px;
  color: var(--blue-primary);
}

/* Callout: white box, no right corner radii, bleeds past viewport right edge */
/* Item 6 in who-grid → auto-placed at col 3, row 2. margin-left:0 keeps it there. */
/* 100% = col width (~244px). +320px extends from col3-left(~896px viewport) past right edge (~1460px). */
.who-callout {
  background: var(--white);
  border-radius: var(--r-box) 0 0 var(--r-box);
  margin-left: 0;
  width: calc(100% + 320px);
  padding: 32px 28px;
  padding-right: calc(var(--px) + 28px);
  display: flex;
  align-items: center;
}
.who-callout-text {
  font-size: 29px;       /* +15% from 25px */
  font-weight: 700;
  letter-spacing: -1.15px;
  line-height: 32px;  /* +3pt leading */
  text-align: left;
  background: linear-gradient(166deg, rgba(77,170,232,0.75) 15%, rgba(43,95,130,0.75) 77%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 5px; /* descenders of "y" bleed ~3px below the line box; padding extends the paint region */
}

/* ---------- ACCESS SECTION ---------- */
.access-outer {
  padding: 60px clamp(18px, 6.7vw, 96px) 0;   /* 96px at 1440px (⅔ again), scales proportionally */
}
.access-headline-wrap {
  text-align: center;
  margin-bottom: 24px;
  padding: 0;
}
.access-headline {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -2.4px;
  color: var(--blue-primary);
  line-height: 42px;
  margin-bottom: 16px;
}
.access-subheadline {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 19px;  /* −1pt */
}
.access-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  gap: 42px;
  align-items: center;
  margin: 0 10%;  /* full-width only: insets card ~20% from each side */
}
.access-table-card {
  background: var(--bg-card);
  border-radius: var(--r-box);
  flex: 1;   /* equal half of access-card; matches access-body flex:1 */
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 0;  /* row's own padding-bottom: 19px provides the gap — matches rule spacing */
}
.access-table-header {
  padding: 0 30px 22px;
}
.access-table-title {
  font-family: var(--font-semi);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.8px;
  color: var(--blue-primary);
  line-height: 29px;
  margin-bottom: 4px;
}
.access-table-subtitle {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 29px;
}
/* List is pushed down to reduce empty space below last row */
.access-table-list {
  padding-top: 84px;
  padding-bottom: 0;   /* bottom gap now handled by access-table-card padding-bottom: 20px */
}
.access-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 30px;
  border-top: 1px solid rgba(43,95,130,0.15);
  font-size: 18px;
  letter-spacing: -0.72px;
  color: var(--blue-primary);
}
.access-table-row-label { font-weight: 400; }
.access-table-row-value { font-weight: 700; text-align: right; }

/* Access right panel */
.access-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  margin-left: -20px;   /* extends content left by 20px */
  margin-right: 10px;
}
.access-price-num {
  font-family: var(--font-sans);
  color: #83bfe7;
  display: flex;
  align-items: flex-start;   /* aligns $ top with digits top — removes gap at baseline */
  letter-spacing: -7px;
  line-height: 0.9;
}
.access-price-dollar {
  font-size: 48px;       /* halfway between Batch B(49) and Batch C(47) */
  font-weight: 400;
  letter-spacing: -2px;  /* halfway between Batch B(3.8px) and Batch C(−8px) = −2.1px ≈ −2px */
}
.access-price-digits {
  font-size: 88px;
  font-weight: 300;
}
.access-body-copy {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -1.05px;
  line-height: 24px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 16px;
}
.access-body-copy strong {
  font-weight: 700;
  font-size: 23px;
  line-height: 29px;
}

/* ---------- FORM SECTION ---------- */
.form-section {
  padding: 200px var(--px) 200px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}
.form-section::before {
  content: '';
  position: absolute;
  right: -5%;
  top: 0;
  bottom: 0;
  width: 40%;
  background: url('images/spray-dots.png') right top / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}
.form-section::after {
  content: '';
  position: absolute;
  right: -580px;         /* −510px − 70px further right */
  top: 50%;
  transform: translateY(-50%);
  width: 858px;          /* 780px × 1.1 */
  height: 858px;
  background: url('images/spray-dots-3.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
.form-header {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 42px;
  color: var(--blue-primary);
}
.form-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 42px;
}
.form-subtitle {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.735px;
  line-height: 27px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  margin-bottom: 0;
}
.form-field { display: flex; flex-direction: column; gap: 14px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: normal;
}
.form-field input {
  background: var(--white);
  border: none;
  border-radius: var(--r-box);
  height: 49px;
  width: 100%;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--blue-primary);
  outline: none;
  transition: box-shadow 0.2s;
}
.form-field input:focus {
  box-shadow: 0 0 0 2px rgba(77,170,232,0.4);
}
.form-field input::placeholder { color: rgba(43,95,130,0.3); }

.form-footer {
  display: flex;
  gap: 30px;
  align-items: flex-end;
  margin-top: 32px;
}
.form-submit {
  flex-shrink: 0;
  width: 440px;
  height: 68px;
  border-radius: var(--r-pill);
  background-image: linear-gradient(185deg,
    rgba(77, 170, 232, 0.68)  0%,
    rgba(43, 95,  130, 0.68) 45%,
    #9dcded                  70%,
    #e9f4fb                 100%);
  background-size: 100% 220%;
  background-position: top center;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  border: none;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-submit:hover { background-position: bottom center; }
.form-disclaimer {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  line-height: 16px;
  color: var(--blue-primary);
  flex: 1;
}

/* ---------- SITE FOOTER ---------- */
/* Full-width clip wrapper.
   overflow:clip crops ONLY the bottom: margin-top pulls the wrapper 300px
   upward so the ::before (720px tall, bottom:-300px → extends 250px above
   footer top) never overflows the wrapper's top or sides — only the 300px
   below-footer portion sticks out and gets clipped. No stacking context, so
   z-index:-1 on ::before stays behind all page content. */
.footer-clip-wrap {
  position: relative;
  overflow: clip;
  margin-top: -300px;    /* extend wrapper boundary 300px above footer */
  padding-top: 300px;    /* push footer back to its original visual position */
  pointer-events: none;  /* wrapper overlaps form section — disable hits on the transparent 300px overlap */
}
.site-footer {
  pointer-events: auto;  /* restore clicks for footer links/content */
}
.footer-clip-wrap::before {
  content: '';
  position: absolute;
  left: -200px;
  bottom: -300px;
  width: 720px;
  height: 720px;
  background: url('images/spray-dots-3.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}

.site-footer {
  padding: 50px var(--px) 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.footer-logo-wrap { display: flex; flex-direction: column; gap: 80px; }
.footer-logo-group { display: flex; flex-direction: column; gap: 10px; }
.footer-logo { height: 38px; width: auto; }
.footer-subsidiary {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  line-height: 16px;
  color: var(--blue-primary);
}   /* −57px: −65px + 8px shift right */
.footer-disclaimer {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.27px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 9px;
}
.footer-mobile-disclaimer {
  display: none; /* shown only at ≤600px */
}
.footer-links {
  display: flex;
  gap: 62px;
  align-items: flex-start;
}
.footer-link-col { display: flex; flex-direction: column; gap: 0; }
.footer-link-col-title {
  font-size: 13.8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blue-primary);
  line-height: 43px;
  white-space: nowrap;
}
.footer-link-col a {
  font-size: 12.7px;
  font-weight: 400;
  letter-spacing: 0.11px;
  color: var(--blue-primary);
  line-height: 21px;
  display: block;
  transition: opacity 0.2s;
}
.footer-link-col a:first-of-type { line-height: 21px; }
.footer-link-col a:hover { opacity: 0.7; }

/* ============================================================
   RESPONSIVE STYLES
   ============================================================ */

@media (max-width: 1027px) {
  .outcome-title-br { display: none; }   /* hide break below 1028px */
}
@media (max-width: 1100px) {
  :root { --px: 50px; }
  .hero-copy { width: 373px; }
  .hero-inner { min-height: 445px; }
  .hero-graphics { height: 445px; }
  .hero-graphics-scene { transform: scale(0.78); }
  .regimen-grid { grid-template-columns: repeat(2, 1fr); }
  .regimen-badges { gap: 12px; }
  .regimen-badge { width: 200px; }
}

/* ============================================================
   TABLET  (901px – 1024px)
   Bridges the 1100px minor-desktop tweaks and the 900px full-
   mobile layout. Keeps two-column arrangements where possible,
   collapses sections that need breathing room, and scales type
   to stay readable without overflowing.
   ============================================================ */

@media (max-width: 1024px) {
  :root { --px: 40px; }

  /* ---- Nav ---- */
  .nav { padding: 14px 28px; }
  .nav-links { gap: 16px; font-size: 13.5px; }
  .nav-prescribe { padding: 0 36px; font-size: 12.5px; height: 30px; }

  /* ---- Hero ---- */
  .hero-inner { padding-right: 28px; }   /* matches nav padding at this breakpoint */
  .hero-copy { width: 308px; gap: 69px; padding-top: 14px; }
  .hero-eyebrow { font-size: 12px; line-height: 30px; }
  .hero-headline { font-size: 33px; letter-spacing: -2.2px; }
  .hero-subheadline { font-size: 21px; line-height: 23px; }   /* halved leading */
  .hero-claim-boxes { gap: 10px; }
  .claim-box { width: 140px; height: 140px; padding: 14px; }   /* square; enlarged for readability */
  .claim-box-text { font-size: 18px; }   /* ∝ inner width: 27×112/169 */
  .claim-box-line { width: 94px; }   /* 140×0.67 */

  .hero-inner { min-height: 382px; }
  .hero-graphics { height: 382px; margin-left: 50px; }
  .hero-graphics-scene { transform: scale(0.67); }

  /* ---- Copy break ---- */
  .copy-break { padding: 50px var(--px) 52px; }
  .copy-break p { font-size: 36px; letter-spacing: -2.4px; }

  /* ---- Regimen ---- */
  .regimen-section { padding: 60px 60px 50px; }
  .regimen-title { font-size: 42px; margin-bottom: 44px; }
  .regimen-grid { gap: 32px; margin-bottom: 60px; }

  /* ---- Before / After ---- */
  .day-box { height: 270px; }   /* clamp floor — consistent with base clamp(270px,…) */

  /* ---- Philosophy ---- */
  .philosophy-section { padding: 60px 40px 100px; max-width: 900px; }
  .philosophy-inner { gap: 24px; }
  .philosophy-title { font-size: 44px; letter-spacing: -2.5px; }
  .philosophy-body { max-width: 100%; }

  /* ---- HIW ---- */
  .hiw-section { padding: 50px 60px 60px; }
  .hiw-headline { font-size: 34px; line-height: 36px; margin-bottom: 50px; }
  .hiw-steps { gap: 24px; }
  .hiw-step-num { font-size: 56px; line-height: 52px; }
  .hiw-step-title { font-size: 25px; }
  .hiw-outcome { max-width: 620px; margin-left: calc(35% - 237px); }  /* gap=24px at this breakpoint */
  .hiw-outcome-label-text { font-size: 44px; }  /* +15% from 38px */

  /* ---- Who It's For ---- */
  .who-section { margin: 60px 20px 0; padding: 50px 60px; }
  .who-section .section-eyebrow { margin-left: 0; }
  .who-photo-wrap { display: none; }
  .who-headline {
    font-size: 40px;
    line-height: 44px;
    margin-left: 0;
    margin-bottom: 44px;
    max-width: 100%;
  }
  .who-grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; padding-left: 0; }
  /* Reset desktop per-card nudges that fight the 2-col grid */
  .who-grid .who-card:nth-child(2),
  .who-grid .who-card:nth-child(5) { margin-left: 0; }
  .who-callout {
    width: calc(100% + 60px);
    border-radius: var(--r-box);
    padding-right: 28px;
  }
  .who-callout-text { font-size: 24px; line-height: 28px; }

  /* ---- Access ---- */
  .access-outer { padding: 60px 8% 0 10%; }
  .access-card { flex-direction: column; gap: 24px; margin: 0; }
  .access-table-card { width: 100%; }
  .access-body { margin-left: 0; margin-right: 0; }
  .access-price-digits { font-size: 76px; }

  /* ---- Form ---- */
  .form-section { padding: 100px var(--px) 100px; }

  /* ---- Footer clip ---- */
  .footer-clip-wrap { margin-top: -300px; padding-top: 300px; }
}

/* ============================================================
   NARROW TABLET  (max-width: 900px)
   Scales everything down while KEEPING all desktop layout
   structures: two-column hero, horizontal HIW steps, side-by-
   side before/after, visible nav links. No hamburger yet.
   ============================================================ */
/* Hide philosophy forced break below 690px; space in HTML provides the word separation.
   690px–1200px shows the break naturally; below 690px the text reflows instead. */
@media (max-width: 690px) {
  .desktop-br { display: none; }
}

@media (max-width: 900px) {
  :root { --px: 28px; }

  /* ---- Nav ---- */
  .nav { padding: 12px 20px; }
  .nav-links { gap: 10px; font-size: 12px; }
  .nav-prescribe { padding: 0 20px; font-size: 11px; height: 28px; }

  /* ---- Hero (two columns preserved, scene scaled as one unit) ---- */
  .hero-inner { min-height: 320px; padding-right: 20px; }   /* matches nav padding at this breakpoint */
  .hero-copy { width: 235px; gap: 48px; padding-top: 10px; }   /* gap up: aligns claim-box bottom w/ photo bottom */
  .hero-eyebrow { font-size: 11px; }
  .hero-headline { font-size: 26px; letter-spacing: -1.6px; }
  .hero-subheadline { font-size: 16px; line-height: 18px; }   /* halved leading */
  .claim-box { width: 120px; height: 120px; padding: 12px; }   /* square; enlarged for readability */
  .claim-box-text { font-size: 15px; }   /* ∝ inner width: 27×96/169 */
  .claim-box-line { width: 80px; }   /* 120×0.67 */
  .hero-graphics { height: 320px; margin-left: 63px; }
  .hero-graphics-scene { transform: scale(0.56); }

  /* ---- Copy break ---- */
  .copy-break { padding: 32px var(--px) 34px; }
  .copy-break p { font-size: 36px; letter-spacing: -2.4px; }

  /* ---- Regimen ---- */
  .regimen-section { padding: 44px 44px 40px; }
  .regimen-title { font-size: 36px; margin-bottom: 36px; }
  .regimen-grid { gap: 24px; margin-bottom: 48px; }

  /* ---- Before / After (side by side preserved) ---- */
  .day-box { height: 230px; }
  .day-label-large { font-size: 60px; }
  .day-sublabel { font-size: 16px; }

  /* ---- Philosophy ---- */
  .philosophy-section { padding: 50px 28px 80px; max-width: 800px; }
  .philosophy-inner { gap: 20px; }
  .philosophy-title { font-size: 36px; letter-spacing: -2.2px; line-height: 1.0; }

  /* ---- HIW (horizontal steps preserved) ---- */
  .hiw-section { padding: 40px 44px 50px; }
  .hiw-headline { font-size: 28px; line-height: 30px; margin-bottom: 36px; }
  .hiw-steps { gap: 20px; }
  .hiw-step-num { font-size: 48px; line-height: 44px; }
  .hiw-step-title { font-size: 23px; }
  .hiw-outcome { max-width: 520px; margin-left: calc(35% - 238px); }  /* gap=20px at this breakpoint */
  .hiw-outcome-label-text { font-size: 37px; }  /* +15% from 32px */

  /* ---- Who It's For ---- */
  .who-section { margin: 40px 20px 0; padding: 40px 44px; }
  .who-headline { font-size: 34px; line-height: 38px; margin-bottom: 36px; }
  .who-callout-text { font-size: 21px; line-height: 25px; }

  /* ---- Access ---- */
  .access-outer { padding: 50px 6% 0; }
  .access-price-digits { font-size: 64px; }
  .access-price-dollar { font-size: 30px; }

  /* ---- Form ---- */
  .form-section { padding: 70px var(--px) 70px; }

  /* ---- Footer ---- */
  .footer-clip-wrap { margin-top: -240px; padding-top: 240px; }
}

/* ============================================================
   BEFORE/AFTER: 20% larger images at 690–960px
   Two sub-ranges because the layout shifts at 768px:
   ≥769px = side-by-side (taller box = taller image);
   690–768px = stacked (explicit image dimensions scale up).
   Placed after the 900px block so these rules win the cascade.
   ============================================================ */
@media (min-width: 769px) and (max-width: 960px) {
  /* Side-by-side: image fills box height → 230px × 1.2 = 276px */
  .day-box { height: 276px; }
}
@media (min-width: 690px) and (max-width: 768px) {
  /* Stacked: explicit square → 120px × 1.2 = 144px */
  .day-box-image { width: 144px; height: 144px; }
}

/* ============================================================
   MOBILE  (max-width: 768px)
   Hamburger nav. Hero, HIW steps, before/after all stack
   to single column. Layout goes fully vertical.
   ============================================================ */
@media (max-width: 768px) {
  :root { --px: 24px; }

  /* ---- Nav → hamburger ---- */
  .nav-links, .nav-prescribe { display: none; }
  .nav-hamburger { display: flex; }
  /* The .nav-prescribe inside .nav-mobile was caught by the display:none above —
     override it so the blue button is visible in the hamburger drawer */
  .nav-mobile .nav-prescribe { display: flex; }
  /* Logo: −10% (42px → 38px); left-center alignment comes from nav's existing
     justify-content:space-between + align-items:center */
  .nav-logo { height: 38px; }

  /* ---- Hero → single column, graphics on top ---- */
  .hero-inner {
    flex-direction: column;
    gap: 0;             /* overlap controlled by hero-copy margin-top below */
    padding-bottom: 0;
    min-height: unset;
  }
  /* Graphics come first (order:1), copy slides up 50px into the PNG's bottom negative space */
  .hero-graphics { order: 1; }
  /* hero-copy base CSS has gap:133px; JS clears inline gap on mobile — override here */
  .hero-copy { order: 2; width: 100%; gap: 28px; padding-top: 12px; margin-top: -25px; }
  /* Headline: 30px at 500px → 40px at 768px (slope = 3.7vw, intercept = 11.5px) */
  .hero-headline { font-size: clamp(30px, calc(3.7vw + 11.5px), 40px); letter-spacing: -1.8px; }
  /* Subheadline: 18px at 500px → 24px at 768px; −1pt tracking tightens "Indicated to manage…" */
  .hero-subheadline { font-size: clamp(18px, calc(1.9vw + 8.5px), 24px); line-height: 1.2; letter-spacing: -1.4px; }
  /* Claim boxes: 3 equal squares in a single row */
  .hero-claim-boxes { flex-wrap: nowrap; gap: 8px; }
  .claim-box {
    width: calc((100% - 16px) / 3);
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 10px;
  }
  /* Scale claim-box text proportionally with box width (box ≈ (vw−64px)/3).
     Matches the desktop ratio cbfont/cbw ≈ 0.125 (15px/120px at the 900px anchor).
     Formula: 0.125 × (vw−64)/3 ≈ calc(4.2vw − 2.7px).
     Ceiling raised from 18px to 28px so text continues scaling toward 768px
     (formula hits ~18px at ≈490px, would otherwise go flat through to 768px). */
  .claim-box-text { font-size: clamp(11px, calc(4.2vw - 2.7px), 28px); }
  /* Line width as % of box so it stays proportional at every mobile width */
  .claim-box-line { width: 67%; }
  /* Graphics container: height driven by the image on mobile */
  .hero-graphics { width: 100%; height: auto; margin-left: 0; overflow: visible; }
  /* Hide the individual desktop scene pieces */
  .hero-graphics-scene { display: none; }
  /* Show the pre-composited flat PNG, full-width, natural aspect ratio */
  .hero-mobile-graphic {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---- Copy break ---- */
  /* Gap between the claim boxes and the copy-break headline below */
  .copy-break { padding-top: 50px; padding-bottom: 50px; }
  .copy-break p { font-size: clamp(28px, 8.2vw, 44px); letter-spacing: -2.5px; }
  .copy-break-br { display: none; }  /* no break below 768px */
  .mobile-br { display: inline; }  /* line break between the two sentences */

  /* ---- Before / After → stack ---- */
  .before-after-headline p:not(.section-eyebrow) { font-size: 9.5px; line-height: 1.4; }  /* IRB text */
  .before-after-boxes { flex-direction: column; gap: 20px; margin: 0 20px; }
  /* Height:auto overrides the 900px clamp so the box grows to fit its content.
     The image is pinned to an explicit square — this also fixes the wide-rectangle issue. */
  .day-box { width: 100%; height: auto; border-radius: 12px; padding: 16px 16px 16px 20px; }
  .day-box--before { border-radius: var(--r-box); }
  .day-box--after  { border-radius: var(--r-box); }
  .day-box-image { width: 120px; height: 120px; align-self: flex-start; }
  /* Scale label sizes for stacked layout */
  .day-label-small { line-height: 24px; }
  .day-label-large { font-size: 44px; letter-spacing: -3px; margin-left: -4px; margin-bottom: 6px; }
  .day-sublabel    { font-size: 13px; line-height: 18px; }
  /* Desktop shifts the Before text right 20px for visual balance in the side-by-side
     layout; on mobile the boxes stack so reset to flush-left to match the After text. */
  .day-box--before .day-box-copy { margin-left: 0; }

  /* ---- Philosophy ---- */
  .philosophy-inner { gap: 20px; }
  .philosophy-title { font-size: 35px; letter-spacing: -2px; }  /* 30 × 1.15 ≈ 35px */
  .philosophy-body { max-width: 100%; }

  /* ---- HIW → stack ---- */
  .hiw-steps { flex-direction: column; gap: 56px; }  /* more breathing room between stacked steps */
  .hiw-step { gap: 14px; }
  /* Step images: full content width (was 90% desktop) */
  .hiw-step-img { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 20px; }
  .hiw-step-body { width: 100%; margin-left: 0; margin-right: 0; }  /* match photo which expands to 100% at this breakpoint */
  .hiw-step-header { width: 100%; margin-left: 0; margin-right: 0; }
  /* Scale bold title so 2 lines of text = step-num line-height (64px):
     line-height: 32px × 2 lines = 64px. Matches the big white numerals. */
  .hiw-step-title { font-size: 43px; line-height: 50px; }

  /* Outcome block: stack label above content, flush-left with steps above */
  .hiw-outcome { flex-direction: column; align-items: flex-start; margin-left: 0; gap: 8px; padding-top: 16px; }
  .hiw-outcome-content { padding-top: 10px; margin-left: 0; }  /* 10px gap between gradient line and title */

  /* ---- Who It's For ---- */
  /* Flex column so we can re-order: eyebrow → headline → photo → grid */
  .who-section { display: flex; flex-direction: column; }
  /* align-self:flex-start stops the pill from stretching full container width (flex default is stretch) */
  /* align-self:flex-start prevents flex-stretch; padding matches the base 8px 22px used by all other section pills */
  .who-section .section-eyebrow { order: 1; margin-left: 0; padding: 8px 22px; align-self: flex-start; }
  .who-headline { order: 2; }
  /* Photo: pull out of absolute positioning and place below headline */
  .who-photo-wrap {
    order: 3;
    display: block;       /* was display:none */
    position: static;     /* was position:absolute */
    width: 100%;          /* fill content area (section minus its padding) */
    height: auto;
    top: auto; right: auto; left: auto; bottom: auto;
    border-radius: var(--r-box);
    overflow: hidden;
    margin-bottom: 32px;
  }
  .who-photo-wrap img { width: 100%; height: auto; object-fit: cover; }
  .who-grid { order: 4; grid-template-columns: repeat(2, 1fr); }
  .who-callout { width: 100%; border-radius: var(--r-box); padding-right: 28px; }

  /* ---- Access ---- */
  .access-outer { padding: 60px 20px 0; }
  .access-card { flex-direction: column; }
  .access-table-card { width: 100%; }

  /* ---- Form ---- */
  .form-grid { grid-template-columns: 1fr; }
  .form-footer { flex-direction: column; gap: 16px; }
  .form-submit { width: 100%; font-size: 14px; letter-spacing: 1px; gap: 6px; }
  /* Subtitle: 20px × 0.80 = 16px (−20%); line-height scaled proportionally */
  .form-subtitle { font-size: 16px; line-height: 22px; }
  /* Hide the large circular spray-dots SVG — its right:-580px offset bleeds off screen */
  .form-section::after { display: none; }

  /* ---- Footer ---- */
  .site-footer { flex-direction: column; gap: 40px; padding: 40px var(--px); }
  .footer-clip-wrap { margin-top: -260px; padding-top: 260px; }
  .footer-logo-wrap { display: none; }
}

@media (max-width: 600px) {
  :root { --px: 20px; }

  /* ---- Nav logo: 20% smaller, flush left-center ---- */
  /* 38px (768px value) × 0.8 = 30px; top:0 removes the desktop fine-tuning offset */
  .nav-logo { height: 30px; top: 0; }

  /* ---- Nav: fix logo + gradient visibility when menu opens mid-scroll ----
     position:sticky can slip behind position:fixed overlays on iOS/Android when
     body{overflow:hidden} is applied. Switching to fixed guarantees the nav bar
     (logo, hamburger, gradient) stays on top at all scroll positions.
     top/left/right replicate the sticky position for both scrolled states. */
  .nav-wrapper.menu-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
  }
  /* Un-scrolled: nav has 20px inset margins — match with top/left/right */
  .nav-wrapper.menu-open:not(.scrolled) {
    top: 20px;
    left: 20px;
    right: 20px;
  }

  /* ---- Phone-only line breaks (xs-br class) ---- */
  .xs-br { display: inline; }
  /* Hide the "already / in" break in who-headline at this width */
  .already-br { display: none; }

  /* ---- Regimen ---- */
  /* Side padding: 44px → 30px */
  .regimen-section { padding: 40px 30px 32px; }
  /* Title: match "Visible signs" headline size; line-height tightened by ~1/3; +10px bottom gap per request */
  .regimen-title { font-size: clamp(28px, 8.5vw, 42px); line-height: 0.9; margin-bottom: 30px; }
  /* Grid: reduce both row-gap (was 44px) and margin-bottom doubled (was 28px → 56px)
     to widen the gap between "Non-greasy, fast absorbing." and the first badge pill */
  .regimen-grid { grid-template-columns: 1fr; row-gap: 28px; margin-bottom: 56px; }
  /* Item text: original −15% reduction, now +15% restored */
  .regimen-item-title { font-size: 18px; }
  .regimen-item-body  { font-size: 15px; line-height: 20px; }
  /* Tighten gap above + below gradient line (14px → 8px) */
  .regimen-item { gap: 8px; }
  .regimen-badges { flex-direction: column; align-items: center; }
  /* Badge pills: shorter height, smaller text */
  .regimen-badge { height: 60px; }
  .regimen-badge span { font-size: 13px; letter-spacing: 1.3px; }

  /* ---- Before / After ---- */
  /* Gap between "Non-systemic delivery" badge row and "Visible signs of healing":
     reduce before-after-section top padding by 40% (80px × 0.6 = 48px) */
  .before-after-section { padding-top: 48px; }
  /* IRB text: shrink further so the full sentence fits on one line at ~400px viewport */
  .before-after-headline p:not(.section-eyebrow) { font-size: 8px; }
  /* "Visible signs" h2: clamp keeps it on exactly 2 lines; at 402px 8.5vw≈34px
     which is small enough to wrap "within 48 hours" onto line 2 without a 3rd line */
  .before-after-headline h2 { font-size: clamp(28px, 8.5vw, 40px); }

  /* ---- Philosophy (Regimen body text) ---- */
  /* "Not an immune system malfunction" headline: +10px bottom gap */
  .philosophy-title { margin-bottom: 10px; }

  /* ---- HIW ---- */
  /* Side padding: 44px → 30px (extra 10px per request for step list breathing room) */
  .hiw-section { padding: 36px 30px 44px; }
  /* Section headline: match "Visible signs" headline size */
  .hiw-headline { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.05; margin-bottom: 36px; }
  /* Tighter gap between stacked steps (was 56px) */
  .hiw-steps { gap: 36px; }
  /* Step: grid so body text aligns with title, not the big numeral.
     Col 1 = min-content (numeral width); col 2 = rest.
     header → display:contents exposes num + title as direct grid children. */
  .hiw-step { display: grid; grid-template-columns: min-content 1fr; row-gap: 0; column-gap: 19px; }
  .hiw-step-header { display: contents; }
  /* Image spans both columns (full width); margin-top replaces header's margin-bottom */
  .hiw-step-img { grid-column: 1 / -1; margin-top: 10px; }
  /* Step numbers: 55px → 46px; bottom-aligned in header row */
  .hiw-step-num { font-size: 46px; line-height: 54px; align-self: end; }
  /* Step bold title: +15% from 15px; bottom-aligned; clear base margin-bottom (spacing via img margin-top) */
  .hiw-step-title { font-size: 34px; line-height: 42px; align-self: end; margin-bottom: 0; }
  /* Step body copy: +15% from 14px; col 2 only → left-aligns with title; equal right padding for visual centering */
  .hiw-step-body { font-size: 15px; line-height: 21px; grid-column: 2; padding-right: 44px; }
  /* "Outcome" label: 55px → 42px */
  .hiw-outcome-label-text { font-size: 42px; width: auto; }
  /* Outcome title + body: matching left/right indent for visual consistency with steps */
  .hiw-outcome-title { font-size: 18px; letter-spacing: 0.96px; padding-left: 44px; padding-right: 44px; }
  .hiw-outcome-body { font-size: 16px; line-height: 22px; padding-left: 44px; padding-right: 44px; }
  /* Remove the mid-sentence line break after "the skin" at this width */
  .hiw-outcome-br { display: none; }

  /* ---- Who It's For ---- */
  /* Top padding: 36px → 24px (−1/3) to tighten the gap above the eyebrow pill's top edge.
     Bottom padding unchanged at 40px. Sides 20px. */
  .who-section { padding: 24px 20px 40px; overflow: visible; }
  /* Eyebrow pill: restore base 8px vertical padding; reduce gap *below* pill by 1/3 (24px → 16px); +10px side padding */
  .who-section .section-eyebrow { padding: 8px 22px; margin-bottom: 16px; margin-left: 10px; }
  /* Headline: match "Visible signs" headline size; +10px side padding */
  .who-headline { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.05; margin-bottom: 24px; padding-left: 10px; padding-right: 10px; }
  /* Grid: tighter gaps between stacked cards; 10px extra side padding on cards (not photo).
     overflow: visible allows callout to bleed outside grid bounds. */
  .who-grid { grid-template-columns: 1fr; row-gap: 28px; column-gap: 20px; padding: 0 10px; overflow: visible; }
  /* Cards: smaller gap between title / gradient line / body */
  .who-card { gap: 8px; }
  /* Card text: +15% from 17px / 13px */
  .who-card-title { font-size: 20px; line-height: 24px; }
  .who-card-body  { font-size: 15px; line-height: 21px; }
  /* Who callout: bleeds left from section edge (left viewport margin = 20px).
     who-section padding-left is 20px, who-grid adds 10px → total 30px offset.
     Cancel with -30px to reach section left edge. Then -20px margin of section = 20px from viewport.
     Width = 100vw − 20px spans to right viewport edge. overflow: visible on section + grid required
     since body has overflow-x: clip which otherwise clips the right edge. */
  .who-callout {
    margin-left: -30px;
    width: calc(100vw - 20px);
    border-radius: var(--r-box) 0 0 var(--r-box); /* left rounded, right flush to viewport edge */
    padding: 28px 24px;
  }
  /* Callout: +15% from 20px */
  .who-callout-text { font-size: 23px; line-height: 29px; }

  /* ---- Hero ---- */
  /* Subheadline: +4pt from ≤690px value of 16px (+2pt per request) */
  .hero-subheadline { font-size: 20px; line-height: 22px; }
  /* Claim box text: +1pt from ≤690px value of 15px (was 17px, −1pt per request);
     letter-spacing: base −1.3px − 0.08px (−0.5% of 16px em) = −1.4px */
  .claim-box-text { font-size: 16px; letter-spacing: -1px; }

  /* ---- Hero claim boxes (single row of squares) ---- */
  .hero-claim-boxes { flex-wrap: nowrap; }
  .claim-box { width: calc((100% - 16px) / 3); aspect-ratio: 1 / 1; height: auto; }

  /* ---- Access ---- */
  /* ~20% scale-down across all access card text/spacing at mobile */
  .access-headline { font-size: 32px; letter-spacing: -1.9px; line-height: 34px; margin-bottom: 12px; }
  .access-table-title { font-size: 24px; letter-spacing: -1.4px; line-height: 24px; }
  .access-table-subtitle { font-size: 11px; letter-spacing: 0.9px; line-height: 22px; }
  .access-table-header { padding: 0 20px 14px; }
  /* 84px base → 36px at mobile (reduces gap between subtitle and first row) */
  .access-table-list { padding-top: 36px; }
  /* Row text: 18px × 0.80 = 14px; padding reduced proportionally */
  .access-table-row { font-size: 14px; letter-spacing: -0.5px; padding: 14px 20px; }
  /* Price panel: centered at mobile */
  .access-body { align-items: center; }
  /* Halve top gap (36px → 18px); shift left 15px; keep centered */
  .access-price-num { margin-top: 18px; justify-content: center; margin-left: -15px; }
  /* 88px base → 60px (+20% from prev 50px); letter-spacing relaxed for smaller size */
  .access-price-digits { font-size: 60px; }
  /* Dollar sign: scaled proportionally with digits 25px → 30px */
  .access-price-dollar { font-size: 30px; }
  /* Body copy: 21px × 0.80 = ~17px; centered at mobile */
  .access-body-copy { font-size: 17px; line-height: 20px; letter-spacing: -0.85px; text-align: center; padding-bottom: 10px; }
  .access-body-copy strong { font-size: 18px; line-height: 22px; }

  /* ---- Footer ---- */
  .footer-links { flex-direction: column; gap: 24px; }
  /* Disclaimer hidden in logo-wrap at mobile — show dedicated mobile copy instead */
  .footer-mobile-disclaimer {
    display: block;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.27px;
    text-transform: uppercase;
    color: var(--blue-primary);
    line-height: 1.5;
    margin-top: 16px;
  }
}

/* Narrow-phone breaks: only visible below 543px (covers iPhone 17 ~402px) */
@media (max-width: 542px) {
  .phone-br { display: inline; }
}

/* ============================================================
   ANIMATIONS
   — All layout values (position, display, width, height) are
     untouched. Only opacity and transform are animated so
     no reflow / layout shift can occur.
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes nd-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Parallax compositor hints ---- */
/* Promotes these elements to their own GPU layer so scroll-driven
   transform updates are composited without triggering layout or paint. */
.who-photo-wrap {
  will-change: transform;
}

/* ---- Page-load: nav + hero entrance ---- */
/* Nav glides in immediately so it's readable before any scroll */
.nav-wrapper {
  animation: nd-fade-in 0.6s ease both;
}

/* Hero copy slides up; graphics fade in slightly behind */
.hero-copy {
  animation: nd-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-graphics {
  animation: nd-fade-in 1.1s ease 0.3s both;
}
/* Mobile flat graphic uses the same curve */
.hero-mobile-graphic {
  animation: nd-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* ---- Scroll-reveal: single elements ---- */
/* JS adds .anim-fade-up to target elements; observer adds .is-visible */
.anim-fade-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.12s;
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Scroll-reveal: staggered children ---- */
/* JS adds .anim-stagger-item + inline transition-delay to each child */
.anim-stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-stagger-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- 2. Badge pop-in ----
   Uses @keyframes (not transition) so the hover-block's "transition: translate, scale"
   cannot override the animation's opacity/transform. animation-delay is set inline by JS.
   fill-mode: both → "from" state holds during the delay; "to" state holds after. */
@keyframes nd-pop {
  from { opacity: 0; transform: scale(0.82) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.anim-pop-item {
  opacity: 0; /* hidden before is-visible fires */
}
.anim-pop-item.is-visible {
  animation: nd-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ---- 3. Slide in from right ----
   Used on .who-callout (mobile: bleeds to right viewport edge). */
.anim-slide-right {
  opacity: 0;
  transform: translateX(55px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.08s;
}
.anim-slide-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- 7. Scroll progress bar (mobile only) ---- */
.scroll-progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--blue-light), var(--blue-mid));
  z-index: 200;            /* above nav (z-100) */
  pointer-events: none;
  border-radius: 0 1px 1px 0;
  transition: width 0.12s linear;
}
@media (max-width: 600px) {
  .scroll-progress { display: block; }
}

/* ---- 8. Section background ambient fade (mobile only) ---- */
@media (max-width: 600px) {
  html { transition: background-color 0.9s ease; }
}

/* ---- Hover lifts (pointer devices only) ---- */
/*
 * Uses the individual `translate` and `scale` CSS properties rather than
 * the shorthand `transform`. This lets them compose with the reveal
 * animation's `transform: translateY(…) → none` without any specificity
 * conflict — they are literally different CSS properties.
 */
@media (hover: hover) {
  .claim-box,
  .regimen-item,
  .regimen-badge,
  .who-card {
    transition: translate 0.22s ease, scale 0.22s ease;
  }

  .claim-box:hover     { translate: 0 -4px; }
  .regimen-item:hover  { translate: 0 -3px; }
  .regimen-badge:hover { translate: 0 -2px; scale: 1.04; }
  .who-card:hover      { translate: 0 -4px; }

  .access-table-row {
    transition: background 0.18s ease;
  }
  .access-table-row:hover {
    background: rgba(43, 95, 130, 0.05);
  }
}

/* ---- Reduced-motion: kill everything ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-wrapper,
  .hero-copy,
  .hero-graphics,
  .hero-mobile-graphic {
    animation: none;
  }
  .anim-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-pop-item { opacity: 1; }
  .anim-pop-item.is-visible { animation: none; }
  .anim-slide-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-mobile a {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-mobile .nav-prescribe {
    transform: translateX(-50%);
  }
  .scroll-progress { transition: none; }
  html { transition: none; }
  .claim-box,
  .regimen-item,
  .regimen-badge,
  .who-card,
  .access-table-row {
    transition: none;
    translate: none;
    scale: none;
  }
}