/* =========================================================================
   CURAPOD-M — Nav pill + glass menu overlay
   Nav pill: desktop 142:1744 (37:1141) · mobile 118:1176 (120:2)
   Overlay:  75:217
   Every colour on the nav is declared in BOTH ground states
   (base = over the dark hero, .nav--onlight = over a light fold).
   ========================================================================= */

/* -------------------------------------------------------------------------
   NAV PILL
   ------------------------------------------------------------------------- */
.nav{
  position:fixed;z-index:120;
  top:36px;left:20px;right:20px;
  display:flex;justify-content:center;
  pointer-events:none;
}
.nav__pill{
  pointer-events:auto;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:56px;
  padding:8px 6px;
  border-radius:var(--radius-full);
  background:var(--glass-fill);
  /* dedicated, subtler border -- the shared --glass-border token (30% white)
     reads as a much more visible outline than the reference nav's own
     border; this is scoped to the pill only, not the shared token, so other
     glass UI (menu overlay, badges) keeps its existing look */
  border:1px solid rgba(255,255,255,.14);
/* Glass / Frost is BACKGROUND_BLUR radius 20 in the variable table, but Figma
   halves layer-blur radius when it emits CSS: both 37:1141 (nav pill) and 75:219
   (overlay glass) come back as backdrop-blur-[10px]. 10px CSS IS radius 20. */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background-color .3s ease,border-color .3s ease;
}

/* --- SHAPE: pill in fold 1, static full-bleed bar for every fold after ---
   Shape is decided purely by which fold sits behind the nav (see the nav()
   watcher in home.js) and never re-floats just because a dark section
   scrolls under it later -- that is the tint question above, a separate
   thing. Either shape can carry either tint. */
.nav{transition:top .3s ease}
.nav__pill{transition:background-color .3s ease,border-color .3s ease,border-radius .3s ease,padding .3s ease}
/* .nav.nav--stretched (two classes) is deliberate, not decorative: the
   desktop rule below (.nav{top:32px;left:0;right:0} inside the 1024px query)
   is the same specificity as a single .nav--stretched selector and sits
   later in the file, so it was winning and leaving the "stretched" bar
   stuck at top:32px instead of flush at 0. The extra class forces this to
   win regardless of source order. */
.nav.nav--stretched{top:0;left:0;right:0}
.nav--stretched .nav__pill{border-radius:0;border-width:0 0 1px 0;padding:8px 20px}

/* --- ground states ------------------------------------------------------ */
.nav{ --nav-ink:#ffffff; --nav-edge:var(--glass-border); --nav-glass:var(--glass-fill); }
.nav--onlight{
  --nav-ink:#0b0b0b;
  --nav-edge:#0b0b0b29;
  --nav-glass:rgba(255,255,255,.72);
}
.nav--onlight .nav__pill{
  background:rgba(255,255,255,.92);
  border-color:rgba(11,11,11,.16);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 28px rgba(11,11,11,.08);
}
.home .nav:not(.nav--onlight) .nav__pill{
  background:rgba(32,32,32,.72);
  border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.24);
}

/* --- burger (mobile, LEFT) — 120:6 / icon 120:7 ------------------------- */
.nav__burger{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--nav-ink);
}
.nav__burger-bars{display:block;width:24px;height:24px;position:relative}
.nav__burger-bars i{
  position:absolute;left:3px;width:18px;height:1.5px;border-radius:1px;
  background:var(--nav-ink);
}
.nav__burger-bars i:nth-child(1){top:7px}
.nav__burger-bars i:nth-child(2){top:11.25px}
.nav__burger-bars i:nth-child(3){top:15.5px}

/* --- wordmark (mobile) — 120:3
   Figma: centre at calc(50% - 27.5px), baseline nudged +1px, w 122.826 h 8.
   That puts it at x 87.587→210.413 in the 353 pill, clear of Actions at x 237. */
.nav__brand{
  position:absolute;left:50%;top:calc(50% + 1px);
  transform:translate(-50%,-50%);
  display:block;line-height:0;
}
.nav__wordmark{width:122.826px;height:8px}
/* Figma only specifies 393. Below 360 the pill is too narrow for the exact
   wordmark width and it would collide with Actions, so it steps down. */
@media (max-width:359.98px){.nav__wordmark{width:96px;height:auto}}
.nav--onlight .nav__wordmark{filter:invert(1)}

/* The mobile CTA occupies more of the right rail than the original Actions
   control. Keep the wordmark optically centred, but give it a protected width
   so it can never run underneath the CTA during the hero-to-nav handoff. */
@media (max-width:1023.98px){
  .nav__brand{z-index:1}
  .nav__wordmark{width:108px;height:auto}
  .nav__actions{position:relative;z-index:2}
  .nav .nav__cta{height:38px;padding-inline:11px;font-size:13px;line-height:20px}
}
@media (max-width:359.98px){
  .nav__wordmark{width:82px}
  .nav .nav__cta{padding-inline:9px;font-size:12px}
}
@media (max-width:767px){
  body:not(.home) .nav__brand{left:calc(50% - 12px)}
}

/* --- desktop inline links — 37:1121 ------------------------------------ */
.nav__links{display:none}

/* --- actions ------------------------------------------------------------ */
.nav__actions{flex:0 0 auto;display:flex;align-items:center;gap:10px}

/* Desktop "Menu" affordance — approved addition, no Figma source.
   Every colour declared in BOTH ground states. */
.nav__menu-btn{
  display:none;align-items:center;gap:8px;
  height:42px;padding:0 14px;border-radius:var(--radius-full);
  color:var(--nav-ink);
  background:transparent;
  border:1px solid var(--nav-edge);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.nav__menu-bars{display:block;width:16px;height:12px;position:relative;flex:0 0 auto}
.nav__menu-bars i{
  position:absolute;left:0;width:16px;height:1.5px;border-radius:1px;
  background:var(--nav-ink);
}
.nav__menu-bars i:nth-child(1){top:3px}
.nav__menu-bars i:nth-child(2){top:8px}
.nav__menu-label{
  color:var(--nav-ink);
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:500;
}
.nav__menu-btn:hover{background:rgba(255,255,255,.14)}
.nav--onlight .nav__menu-btn:hover{background:rgba(11,11,11,.06)}

/* CTA — 79:340 (desktop, #0b0b0b/white) · 120:5 (mobile, white/#0b0b0b) */
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 12px;border-radius:var(--radius-full);
  background:#ffffff;color:#0b0b0b;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:700;
  white-space:nowrap;
  transform-origin:left top;will-change:transform,opacity;
  transition:box-shadow .25s ease,background-color .25s ease,color .25s ease;
}
.nav__cta-label{display:block;transform-origin:center;will-change:transform}
@media (max-width:1023.98px){.home .nav__cta{opacity:0;pointer-events:none}}
.nav--onlight .nav__cta{background:#0b0b0b;color:#ffffff}
/* Product-red hover glow -- a documented exception (see
   curapod-makers-mobile-and-toggles.md's interaction/glow-product): this
   button borrows the device's own therapy-light red on hover instead of
   the usual brand-accent glow.
   WHITE state (default): stays white, gains the glow only.
   BLACK state (nav--onlight): the button itself turns red, same glow --
   "black CTAs turn red on hover" applied consistently, 25 Aug decision. */
.nav__cta:hover,
.nav__cta:focus-visible{
  background:#E23532;
  color:#ffffff;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}
.nav--onlight .nav__cta:hover,
.nav--onlight .nav__cta:focus-visible{
  background:#E23532;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}

@media (min-width:1024px){
  .nav{top:32px;left:0;right:0}
  .nav__pill{
    width:auto;height:auto;
    padding:12px 14px 12px 26px;
    gap:44px;
    justify-content:flex-start;
  }
  .nav__burger{display:none}
  .nav__brand{position:static;transform:none}
  .nav__wordmark{width:183px;height:12px}
  .nav__links{
    display:flex;align-items:center;gap:34px;
    color:var(--nav-ink);
    font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:500;
    white-space:nowrap;
  }
  .nav__links a{transition:opacity .2s ease}
  .nav__links a:hover{opacity:.7}
  /* .nav__menu-btn stays display:none (its base rule) at desktop -- hamburger/
     menu-style triggers are mobile-only, matching the reference build, which
     has no separate menu button once the inline links are visible. */
  .nav__actions{margin-left:auto}
  .nav--stretched .nav__pill{width:100%;padding:20px clamp(24px,4vw,64px)}
  /* CTA — Tone=Ink (55:85): "black on light grounds, white on dark".
     Science nav 474:4733 is literally bg-white / #0b0b0b on the dark hero. */
  .nav__cta{
    height:auto;padding:11px 22px;
    background:#ffffff;color:#0b0b0b;
  }
  .nav--onlight .nav__cta{background:#0b0b0b;color:#ffffff}
}

/* --- current page link — 474:4733: active white, the rest muted --------- */
.nav__links a{color:var(--nav-ink);opacity:.62}
.nav__links a[aria-current="page"]{opacity:1;font-weight:600}
.nav__links a:hover{opacity:.85}
.nav__links a[aria-current="page"]:hover{opacity:1}

/* -------------------------------------------------------------------------
   MENU OVERLAY — 75:217
   Order of layers (bottom → top): photograph, scrim, glass, content.
   The photograph MUST remain readable through the scrim.
   ------------------------------------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:200;
  display:flex;
  overflow:hidden;
  background:var(--bg-page-dark);
}
.menu[hidden]{display:none}

.menu__backdrop{position:absolute;inset:0}
/* QA round 2: a brightness(3.4) lift was tried here and REVERTED. Figma 75:217 is a
   near-black warm field with the figure only faintly discernible (field luma ~28-35);
   the lift pushed it to ~49-50 — milky, and it cut the white link contrast. brightness()
   raises the black point rather than the midtones, so no single value reproduces Figma's
   falloff. If the composite still reads too dark against 75:217, the fix is a re-export of
   menu-backdrop.jpg at Figma's grade, NOT a CSS filter.
   The scrim (glass/scrim #000000c7) and glass/fill (#ffffff1a) below are Figma's own
   values, verified twice, and must not be touched. */
.menu__backdrop img{
  width:100%;height:100%;object-fit:cover;
}
/* Overlay / Scrim 75:218 — glass/scrim #000000c7 */
.menu__scrim{position:absolute;inset:0;background:var(--glass-scrim)}
/* Overlay / Glass 75:219 — glass/fill + Glass / Frost.
   Re-verified in QA round 1: get_variable_defs on 75:219 binds Glass / Frost =
   BACKGROUND_BLUR radius 20, and Figma's own codegen emits backdrop-blur-[10px]
   for that same node. See the note on .nav__pill — 10px CSS is radius 20. */
.menu__glass{
  position:absolute;inset:0;
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.menu__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;
  padding:56px 20px 40px;
  color:#ffffff;
  overflow-y:auto;
}

/* Menu / Top — 75:220 */
.menu__top{
  display:flex;align-items:center;justify-content:space-between;
  height:44px;flex:0 0 auto;
}
.menu__close{
  width:44px;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  color:#ffffff;
}
.menu__wordmark{width:170px;height:11.073px}
.menu__spacer{width:44px;height:44px}

/* Menu / Links — 75:237 */
.menu__links{margin-top:68px;display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:center;gap:12px;
  padding:22px 0;
  color:#ffffff;
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);
}
.menu__links a + a,
.menu__links a:not(:first-child){border-top:1px solid var(--border-subtle-inv)}
.menu__links a span:first-child{flex:1 1 auto;min-width:0}
/* Icon / arrow-right 75:240 etc — accent/base #FF7966 in the overlay's mode */
.menu__links .i-arrow{width:20px;height:20px;color:var(--accent-base-m)}

/* Menu / CTA — 75:254 */
.menu__cta{
  margin-top:auto;padding-top:40px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.menu__cta .btn-primary{width:100%}
.menu__cta .limited-spots{color:var(--text-accent-dark)}

@media (min-width:1024px){
  .menu__inner{
    max-width:560px;margin-inline:auto;
    padding:56px 40px 56px;
  }
}