/* site-nav.css — shared navigation (matches index.html). Load after each page’s inline <style>. */

/* ── Type foundation ──
   Switzer (text) + Supreme (labels), self-hosted from Fontshare under the ITF
   Free Font Licence — see /fonts/Switzer-LICENSE.txt and /fonts/Supreme-LICENSE.txt.
   Declared here because this sheet loads on every page; the page stylesheets
   reference the tokens rather than a hardcoded family name. */
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Switzer-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Switzer";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Switzer-VariableItalic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Supreme";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Supreme-Variable.woff2") format("woff2-variations");
}
/* Azeret Mono (SIL OFL 1.1) — the mono menu labels, matching Antidote's nav. */
@font-face {
  font-family: "Azeret Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/AzeretMono-Variable.woff2") format("woff2");
}
:root {
  --font-body: "Switzer", "Inclusive Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-body);
  /* Supreme carries the small uppercase, wide-tracked labels (nav, eyebrows, buttons) */
  --font-label: "Supreme", var(--font-body);
  /* Mono labels: the tracked look comes from the monospace itself, so anything
     using this token sets letter-spacing: normal. */
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Headings sit tighter than body — between our old -0.02em and Antidote's -0.036em */
  --track-heading: -0.03em;
  --track-label: 0.12em;
  --weight-heading: 500;
  /* Full pill for every button */
  --r-pill: 999px;
}

/* Whiter page canvas + subtle blue mist (body fill from inline styles is overridden) */
html {
  min-height: 100%;
  min-height: 100dvh; /* fills full screen incl. dynamic island & home indicator on iOS */
  background:
    radial-gradient(ellipse 130% 92% at 50% -30%, rgba(120, 170, 205, 0.11), transparent 58%),
    radial-gradient(ellipse 90% 72% at 102% 5%, rgba(135, 182, 212, 0.07), transparent 46%),
    radial-gradient(ellipse 78% 58% at -5% 45%, rgba(155, 198, 228, 0.05), transparent 52%),
    #fafcfe;
  background-color: #fafcfe; /* explicit colour so safe-area zones are never white */
}
body {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hero pages: iOS paints the safe-area zone (Dynamic Island / status bar)
   from the html element's background, not from document-flow content.
   "center top" anchors the poster so its very top (light-blue sky) always
   shows in the safe-area strip, matching the sky the hero video shows just
   below it.
   Poster is anchored to the very top and sized to a single top band (its own
   aspect ratio via `100% auto`) — NOT `cover`. `cover` scaled it across the
   full-height <html> box, so its leafy lower portion bled through transparent
   sections (e.g. #home-about) mid-page while scrolling. The hero fills the
   viewport and hides this band; only the iOS safe-area strip at the very top
   reveals the poster's sky. The mist gradient + #fafcfe fill the rest of the
   page so transparent sections show mist, not leaves. */
html.lv-index-hero,
html.lv-pricing-hero {
  background:
    url('/hero-home-poster.jpg') center top / 100% auto no-repeat,
    radial-gradient(ellipse 130% 92% at 50% -30%, rgba(120, 170, 205, 0.11), transparent 58%),
    radial-gradient(ellipse 90% 72% at 102% 5%, rgba(135, 182, 212, 0.07), transparent 46%),
    radial-gradient(ellipse 78% 58% at -5% 45%, rgba(155, 198, 228, 0.05), transparent 52%),
    #fafcfe;
}

/* Skip link — off-screen until focused so it never pushes the sticky nav down */
.skip-link {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  background: #fff;
  color: var(--text, #1a2f2d);
  padding: 8px 16px;
  text-decoration: none;
  font-family:var(--font-body);
  border-radius: 4px;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Mobile-menu open animations — declared at the top level so they're available
   to any media-query rule that references them. The menu uses clip-path to
   "extrude" downward (curtain reveal); the cap and pill share a quick fade. */
@keyframes mm-extrude {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.hero-shell .nav-wrapper,
.pr-hero-shell .nav-wrapper,
body.page-how-it-works .nav-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200;
}

.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 32px 32px 0;
  /* Mirror padding-top into a custom prop so the open mobile menu can
     extend the pill upward by exactly this amount (no hard-coded math). */
  --nav-wrapper-pt: 32px;
  --nav-pill-max: 1240px;
  pointer-events: none;
}
.nav-wrapper > * {
  pointer-events: auto;
}

/* Hero pages take the nav out of flow (fixed). The notice hangs under that
   overlay, so hero copy needs this extra top offset or it sits behind the pill. */
body:has(.sw-hero) .nav-wrapper,
body:has(.hiw-hero) .nav-wrapper,
body:has(.contact-hub) .nav-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200;
}
html {
  --clinic-notice-space: 0px;
}
@media (max-width: 960px) {
  html:has(.clinic-notice.is-static),
  html:has(.clinic-notice.is-ready) {
    --clinic-notice-space: 64px;
  }
}
.hero-shell .hero-inner,
.pr-hero-shell .pr-hero-inner,
.hiw-hero-inner,
.sw-hero .container,
.loc-hero,
.loc-hub-hero,
.wwu-hero-text,
body:has(.rap-info-grid) .page-hero .container {
  margin-top: var(--clinic-notice-space, 0px);
}

/* How it Works — slightly tighter gap under nav */
body.page-how-it-works .nav-wrapper {
  padding: 24px 32px 0;
  --nav-wrapper-pt: 24px;
}

nav#navbar {
  position: relative;
  z-index: 2;
  max-width: var(--nav-pill-max);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 50px;
  /* Single clean shadow envelope — no hairline ring, no stacked glows.
     One soft directional drop for grounding + one subtle even ambient
     glow for definition against light backgrounds. Reads as a uniform
     "thickness" all the way around the pill. */
  box-shadow:
    0 8px 24px rgba(45, 97, 93, 0.10),
    0 2px 6px rgba(45, 97, 93, 0.05);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  transition: box-shadow 0.3s;
}
nav#navbar.scrolled {
  /* Slightly deeper shadow when content is behind the pill — same shape,
     more presence. Still single clean envelope, no ring. */
  box-shadow:
    0 12px 32px rgba(26, 47, 45, 0.12),
    0 3px 8px rgba(26, 47, 45, 0.06);
}

/* Glen Iris campaign notice — a second matching pill that drops out under
   the nav. Hidden until GSAP marks it ready so it doesn't flash, then
   parked for the visit. Mega menus / the mobile sheet tuck it away. */
.clinic-notice {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--nav-pill-max);
  margin: 0 auto;
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
@media (scripting: none) {
  .clinic-notice {
    height: auto;
    overflow: hidden;
    visibility: visible;
    pointer-events: auto;
    margin-top: 8px;
  }
}
.clinic-notice.is-ready,
.clinic-notice.is-static {
  height: auto;
  /* Both axes hidden. clip + visible computes overflow-y to auto, which
     iOS treats as a nested scrollport and eats vertical pans. */
  overflow: hidden;
  visibility: visible;
  pointer-events: auto;
  margin-top: 8px;
  touch-action: pan-y;
  /* Solid fill — a frosted pill lets page copy smear through as a muddy
     wash when this sits over headings (Safari especially). */
  background: #fff;
  border-radius: 50px;
}
.clinic-notice__pill {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 50px;
  box-shadow:
    0 8px 24px rgba(45, 97, 93, 0.10),
    0 2px 6px rgba(45, 97, 93, 0.05);
  height: 36px;
  display: flex;
  align-items: center;
}
.clinic-notice__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 28px,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 28px,
    #000 calc(100% - 28px),
    transparent
  );
}
.clinic-notice__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
}
.clinic-notice__msg {
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0 0.35em;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 36px;
  color: var(--body, #2a3836);
}
.clinic-notice__msg + .clinic-notice__msg::before {
  content: "·";
  margin-right: 0.75em;
  color: var(--muted, #455552);
}
.clinic-notice__msg a {
  color: var(--green, #2d615d);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.clinic-notice__msg a:hover {
  color: var(--green-dark, #244f4c);
}
.clinic-notice__msg a:focus-visible {
  outline: 2px solid var(--green, #2d615d);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Instantly collapse so the notice can't paint over a mega panel or the
   mobile sheet (the sheet sits below the nav-wrapper in z-index). */
.nav-wrapper:has(.nav-item.open) .clinic-notice,
body.mm-menu-open .clinic-notice {
  height: 0 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .clinic-notice,
  .clinic-notice.is-static {
    height: auto;
    overflow: hidden;
    visibility: visible;
    pointer-events: auto;
    margin-top: 8px;
  }
  .clinic-notice__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .clinic-notice__track {
    width: 100%;
    will-change: auto;
  }
  .clinic-notice__msg {
    white-space: normal;
    text-align: center;
    padding: 8px 18px;
    line-height: 1.35;
    width: 100%;
  }
  .clinic-notice__pill {
    height: auto;
    min-height: 36px;
  }
}

.nav-center {
  display: flex;
  gap: 0;
  list-style: none;
  align-items: center;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  z-index: 2;
}
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}
.nav-item {
  position: relative;
}
/* Every page stylesheet still ships its own copy of the nav rules and loads
   after this file, so these need the id to win the cascade. */
nav#navbar .nav-link,
nav#navbar .nav-trigger {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  transition: color 0.2s;
  line-height: 1;
  position: relative;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
nav#navbar .nav-link::after,
nav#navbar .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Stop short of the chevron so the bar sits under the label only. */
nav#navbar .nav-trigger::after {
  right: 26px;
}
nav#navbar .nav-link:hover,
nav#navbar .nav-link.active,
nav#navbar .nav-trigger:hover,
nav#navbar .nav-item.open .nav-trigger {
  color: var(--green);
}
nav#navbar .nav-link:hover::after,
nav#navbar .nav-link.active::after,
nav#navbar .nav-trigger:hover::after,
nav#navbar .nav-item.open .nav-trigger::after {
  transform: scaleX(1);
}
.nta {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
  opacity: 0.5;
}
.nav-item:hover .nta {
  transform: rotate(180deg);
}
.nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 22px;
  z-index: 299;
}
/* ─── MEGA MENU ───────────────────────────────────────────────────────────
   Click-to-open panel that spans the full width of the nav pill. Selectors
   are scoped to nav#navbar so the per-page bundles (which each carry their
   own .nav-item rules) can't win on load-order. */
nav#navbar .nav-item--mega {
  position: static;
}
nav#navbar .mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(18px, 1.8vw, 26px);
  /* Opaque, unlike the nav pill: the panel is large enough that hero copy
     showing through reads as a rendering bug rather than glass. */
  background: var(--bg-surface);
  border-radius: 28px;
  box-shadow:
    0 12px 32px rgba(45, 97, 93, 0.12),
    0 3px 8px rgba(45, 97, 93, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0s linear 0.24s;
}
nav#navbar .nav-item.open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0s;
}
nav#navbar .nav-item.open .nta {
  transform: rotate(180deg);
}
nav#navbar .mega__links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: center;
}
nav#navbar .mega__label {
  margin: 0 0 12px;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
nav#navbar .mega__links a {
  display: block;
  margin-left: -10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--body);
  text-decoration: none;
  transition:
    background 0.16s,
    color 0.16s;
}
nav#navbar .mega__links a:hover {
  background: var(--bg-alt);
  color: var(--green);
}
/* Unlinked placeholders for services that aren't live yet — same rhythm as the
   links above so the column reads as one list, but muted and inert. */
nav#navbar .mega__soon {
  display: block;
  margin-left: -10px;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--muted);
  cursor: default;
}
/* Its own line rather than an inline suffix: the longer label wraps mid-phrase
   in the narrow link column otherwise. */
nav#navbar .mega__soon em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  opacity: 0.75;
}
nav#navbar .mega__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
nav#navbar .mega-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Stretches to the link column's height instead of a fixed aspect ratio,
     which left a band of empty panel under the cards on narrower desktops. */
  min-height: clamp(180px, 14vw, 240px);
  padding: 18px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}
nav#navbar .mega-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
nav#navbar .mega-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(20, 36, 33, 0.58) 0%,
    rgba(20, 36, 33, 0.12) 48%,
    rgba(20, 36, 33, 0.42) 100%
  );
}
nav#navbar .mega-card:hover .mega-card__media {
  transform: scale(1.06);
}
nav#navbar .mega-card__title,
nav#navbar .mega-card__cta {
  position: relative;
  z-index: 2;
}
nav#navbar .mega-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.4vw, 23px);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-heading);
  line-height: 1.15;
  color: #fff;
}
nav#navbar .mega-card__cta {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
  transition:
    background 0.2s,
    color 0.2s;
}
nav#navbar .mega-card:hover .mega-card__cta {
  background: var(--green-dark);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  nav#navbar .mega,
  nav#navbar .mega-card__media {
    transition: none;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.nav-actions a.btn[data-th-book] {
  padding: 8px 16px !important;
  font-size: 12px !important;
}
.mm-actions a.btn[data-th-book] {
  width: 100% !important;
  text-align: center !important;
  padding: 13px 20px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  justify-content: center !important;
}
@media (max-width: 1280px) {
  .nav-actions a.btn[data-th-book] {
    padding: 9px 16px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 1100px) {
  .nav-actions a.btn[data-th-book] {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
}

a.str-node.str-cta[data-th-book] {
  font-family:var(--font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
}
a.str-node.str-cta[data-th-book] .str-node-title {
  font-family:var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  text-transform: none !important;
}
a.str-node.str-cta[data-th-book] .str-node-desc {
  font-family:var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-transform: none !important;
}

@media (max-width: 1280px) {
  .nav-wrapper {
    padding: 28px 24px 0;
    --nav-wrapper-pt: 28px;
  }
  body.page-how-it-works .nav-wrapper {
    padding: 20px 24px 0;
    --nav-wrapper-pt: 20px;
  }
  nav#navbar {
    padding: 0 20px;
  }
  nav#navbar .nav-link,
  nav#navbar .nav-trigger {
    padding: 7px 9px;
    font-size: 11px;
  }
  .nav-actions {
    gap: 6px;
  }
  .nav-actions .btn {
    padding: 9px 16px;
    font-size: 12.5px;
  }
}
@media (max-width: 1180px) {
  nav#navbar {
    padding: 0 18px;
  }
  /* Five items now run to the centred wordmark, so the row steps down instead
     of up as space tightens — the old values grew past the base 11.5px. */
  nav#navbar .nav-link,
  nav#navbar .nav-trigger {
    padding: 6px 7px;
    font-size: 10.5px;
    letter-spacing: 0.09em;
  }
  .nav-actions button.btn {
    display: none;
  }
  .nav-actions .btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }
  nav#navbar .nav-logo-img {
    height: 44px;
  }
}
/* Last squeeze before the burger takes over at 960px. */
@media (max-width: 1040px) {
  nav#navbar .nav-link,
  nav#navbar .nav-trigger {
    padding: 6px 5px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  nav#navbar .nav-logo-img {
    height: 40px;
  }
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  transition: background 0.15s;
}
.nav-burger:hover {
  background: var(--bg-alt);
}
/* When the menu is open, the X close lives inside the unified rounded
   container — a hard button-shape background would break the seamless
   surface, so we use a barely-there teal tint just for tap-feedback. */
.nav-burger.open {
  background: rgba(45, 97, 93, 0.05);
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu {
  display: none;
  position: fixed;
  top: 86px;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 190;
  /* Text us is hidden while the sheet is open (see body.mm-menu-open .text-us-root),
     so the only bottom reserve needed is the iOS home indicator. */
  padding: 6px 20px max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 8px 32px rgba(33, 40, 30, 0.1);
  max-height: calc(100vh - 86px);
  max-height: calc(100dvh - 86px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Sheet rows: every selector below is prefixed with .mobile-menu so the
   per-page bundles (which each redefine a bare .mm-link and load after this
   file) can't drag rows back to their own type scale. */
.mobile-menu .mm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No side padding: buttons share the link rows' left/right edge */
  padding: 18px 0 4px;
  margin-bottom: 0;
  border-bottom: none;
  /* Once an expanded accordion makes the sheet scroll, the primary CTA would
     otherwise sit below the fold. The bleed keeps rows from showing through
     the sheet's side padding as they pass underneath. */
  position: sticky;
  bottom: 0;
  margin-inline: calc(var(--mm-gutter, 16px) * -1);
  padding-inline: var(--mm-gutter, 16px);
  background: #ffffff;
}
.mobile-menu .mm-actions .btn {
  width: 100%;
  min-height: 46px;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  /* Beats the site-wide bold-CTA !important rule further down this file: in the
     sheet the labels read as menu rows, not page buttons. */
  font-weight: 400 !important;
  letter-spacing: normal;
  line-height: 1;
  border-radius: var(--r-pill);
  justify-content: center;
  text-align: center;
}
.mobile-menu .mm-actions .btn-outline {
  min-height: 46px;
  padding: 14px 20px;
  font-size: 13px;
}
.mobile-menu .mm-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 10px;
}
.mobile-menu .mm-link {
  /* Antidote's metrics: 13px mono, uppercase, regular weight, no added
     tracking — the monospace supplies the spacing. Their rows sit on a 39px
     pitch; the gap is padding rather than margin so the whole pitch is
     tappable instead of leaving 5px dead strips between rows. */
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 13px 8px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 39px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu .mm-link:active {
  color: var(--green);
}
.mobile-menu .mm-link::after {
  display: none;
}
.mm-section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 4px 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.mm-section-label + .mm-link {
  border-top: none;
}

/* Mobile menu — Explore / For Practitioners group rows.
   A group row is a peer of a link row, so every value below matches
   .mobile-menu .mm-link; only the caret and the button reset differ. The 11px
   padding keeps the 16px caret from pushing these rows off the 39px pitch. */
.mobile-menu .mm-group {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  min-height: 39px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu .mm-group__label {
  flex: 0 0 auto;
}
.mobile-menu .mm-group__caret {
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.mobile-menu .mm-group[aria-expanded='true'] .mm-group__caret {
  transform: rotate(180deg);
}
.mobile-menu .mm-group:focus-visible {
  outline: 2px solid var(--green, #2d615d);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Expanded group children: a flat block above the list, left-aligned in the
   body face so they read as a different level to the mono rows below. */
.mobile-menu .mm-sub {
  display: flex;
  flex-direction: column;
  padding: 4px 0 14px;
}
.mobile-menu .mm-sub[hidden] {
  display: none;
}
.mobile-menu .mm-sub__label {
  margin: 0;
  padding: 4px 4px 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}
.mobile-menu .mm-sub__link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 4px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  border-bottom: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu .mm-sub__link:active {
  color: var(--green);
}
.mobile-menu .mm-sub__link::after {
  display: none;
}
.mobile-menu .mm-sub__soon {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 4px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}
.mobile-menu .mm-sub__soon em {
  font-style: normal;
  font-size: 13px;
  opacity: 0.75;
}

@media (max-width: 960px) {
  .nav-wrapper {
    padding: 24px 20px 0;
    --nav-wrapper-pt: 24px;
    overflow-x: hidden;
    max-width: 100%;
  }
  body.page-how-it-works .nav-wrapper {
    padding: 18px 20px 0;
    --nav-wrapper-pt: 18px;
  }
  nav#navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    max-width: none;
    border-radius: 24px;
  }
  .clinic-notice {
    max-width: none;
  }
  .clinic-notice__pill {
    border-radius: 24px;
    height: auto;
    min-height: 34px;
  }
  .clinic-notice.is-ready,
  .clinic-notice.is-static {
    margin-top: 6px;
    overflow: hidden;
  }
  /* No x-ticker on phones — a max-content strip + GSAP x-transform creates
     a nested horizontal scrollport and iOS traps the finger there. */
  .clinic-notice__viewport {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: hidden;
  }
  .clinic-notice__track {
    width: 100% !important;
    transform: none !important;
    will-change: auto;
    display: block;
  }
  .clinic-notice__msg {
    white-space: normal;
    text-align: center;
    font-size: 12px;
    padding: 8px 14px;
    line-height: 1.35;
    width: 100%;
  }
  .clinic-notice__msg--clone {
    display: none !important;
  }
  .nav-center {
    display: none;
  }
  .nav-burger {
    display: flex;
    grid-column: 3;
    justify-self: end;
  }
  .nav-actions {
    display: none;
  }
  /* nav#navbar prefix beats the per-page bundles, which each carry their own
     .nav-logo rule pinning it to the centre column and load after this file. */
  nav#navbar .nav-logo {
    /* Logo leads the bar with the burger opposite it, so the open sheet reads
       as one card with the wordmark top-left and the close top-right. */
    grid-column: 1;
    justify-self: start;
    position: static;
    transform: none;
    left: auto;
  }
  .mobile-menu.open {
    display: block;
  }
  .mobile-menu {
    top: 84px;
    max-height: calc(100vh - 84px);
  }
  body.page-how-it-works .mobile-menu {
    top: 80px;
    max-height: calc(100vh - 80px);
  }
  .nav-burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-burger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* === Seamless mobile menu ===
     Pill + menu read as ONE rounded container that starts AT the nav bar and
     hangs below it. Nothing is drawn above the pill: the pill keeps its rounded
     top, the menu owns the rounded bottom, and the seam between them is square.
     Specificity is bumped to body.mm-menu-open prefixes so per-page CSS files
     (which load AFTER site-nav.css and used to redefine .mobile-menu with
     left:0; right:0 and no border-radius) can no longer override these. */
  body.mm-menu-open .mobile-menu {
    /* All properties are listed explicitly so per-page CSS overrides
       (border-bottom, padding, box-shadow, etc.) are neutralised. */
    --mm-gutter: 20px;
    left: var(--mm-gutter);
    right: var(--mm-gutter);
    /* --mm-top is written by site-nav.js from the pill's measured bottom edge.
       A fixed value can't work: wrapper padding differs per page (hero pages
       run 20px, how-it-works 12px), so any constant leaves a seam or a gap. */
    top: var(--mm-top, 83px);
    /* The bottom gutter matches the side gutters so the card always closes on
       screen. Without it an expanded group runs the sheet flush to the bottom
       edge and the rounded corners are cut off. */
    max-height: calc(100vh - var(--mm-top, 83px) - var(--mm-gutter));
    /* dvh so the sheet ends at the visible bottom on iOS, where the toolbar
       makes 100vh taller than the viewport. */
    max-height: calc(100dvh - var(--mm-top, 83px) - var(--mm-gutter));
    padding: 6px var(--mm-gutter)
      max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
    border: none;
    border-radius: 0 0 24px 24px;
    /* Solid white — must match cap and pill exactly. Any translucency
       creates a tonal mismatch because each element's backdrop differs. */
    background: #ffffff;
    /* Pure-Y shadow only — no lateral offsets that would blur UP into the
       pill seam above. Wider blur (32px) covers the sides naturally. */
    box-shadow:
      0 12px 32px rgba(45, 97, 93, 0.12),
      0 3px 8px rgba(45, 97, 93, 0.05);
    /* Premium "extrude from pill" reveal — clip-path drops the curtain top-to-bottom. */
    animation: mm-extrude 0.34s cubic-bezier(0.32, 0.72, 0.27, 1) both;
    transform-origin: top center;
  }
  body.mm-menu-open nav#navbar,
  body.mm-menu-open nav#navbar.scrolled {
    /* Top of the card: rounded above, square where it meets the menu. The
       shadow is upward-only — a downward one projects onto the menu below and
       leaves a darker band at the seam. */
    border-radius: 24px 24px 0 0;
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Negative spread pulls the shadow rect's bottom edge above the pill's, so
       nothing can paint down onto the menu and band the seam. */
    box-shadow: 0 -6px 8px -4px rgba(45, 97, 93, 0.10);
    /* Beats the inline opacity/clip-path GSAP writes during the intro reveal:
       opening the sheet mid-animation otherwise leaves a translucent, centre
       clipped pill wedged between the solid white cap and menu. */
    opacity: 1 !important;
    clip-path: none !important;
  }
}

@media (max-width: 600px) {
  /* Global mobile typography & touch (all pages — Layout loads this after :root from page CSS) */
  body {
    font-size: 16px;
  }
  p {
    font-weight: 400;
  }
  h2 {
    font-size: 26px;
    margin-bottom: 12px;
  }
  .btn {
    min-height: 44px;
  }
  /* Trust banner — stacked, no “prison bars”; breathing room + clear hierarchy */
  .trust-banner {
    padding: 20px 20px 22px;
    align-items: stretch;
  }
  .trust-banner .tb-static {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: none;
    width: 100%;
  }
  .trust-banner .tb-item {
    gap: 8px;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  .trust-banner .tb-item:last-child {
    padding-bottom: 0;
  }
  .trust-banner .tb-heading {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.015em;
    max-width: none;
  }
  .trust-banner .tb-sub {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 auto;
    color: var(--muted);
  }
  .trust-banner .tb-sub.tb-pricing-points {
    max-width: min(36ch, 100%);
  }
  .trust-banner .tb-icon svg {
    width: 24px;
    height: 24px;
  }

  .nav-wrapper {
    padding: 20px 16px 0;
    --nav-wrapper-pt: 20px;
  }
  nav#navbar {
    padding: 0 16px;
    height: 72px;
    border-radius: 20px;
  }
  .nav-logo {
    padding: 0;
  }
  .nav-logo-img {
    height: 48px;
  }
  /* Align panel under shorter nav bar on small phones — same specificity rule
     as the 960px block so per-page CSS cannot reach in and reset left/right. */
  body.mm-menu-open .mobile-menu {
    --mm-gutter: 16px;
    top: var(--mm-top, 83px);
    max-height: calc(100vh - var(--mm-top, 83px) - var(--mm-gutter));
    max-height: calc(100dvh - var(--mm-top, 83px) - var(--mm-gutter));
    /* No +52px Text-us reserve: the bubble is hidden while the sheet is open
       (body.mm-menu-open .text-us-root), so that space was pure dead air. */
    padding: 10px var(--mm-gutter)
      max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
    left: var(--mm-gutter);
    right: var(--mm-gutter);
    border-radius: 0 0 20px 20px;
  }
  body.mm-menu-open nav#navbar,
  body.mm-menu-open nav#navbar.scrolled {
    border-radius: 20px 20px 0 0;
  }
}

/* Pre-footer CTA — mist gradient (seamless with page bg; no strip, no photo overlay). Load after page inline <style>. */
.cta-section {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-top: none;
  box-shadow: none;
  text-align: center;
  padding: clamp(40px, 5.5vw, 56px) 32px clamp(56px, 7vw, 72px);
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--bg-card) 22%,
    var(--bg-alt) 52%,
    var(--bg) 100%
  );
}
.cta-section::before,
.cta-section::after {
  display: none;
  content: none;
}
.cta-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-section .eyebrow {
  color: var(--green-l);
  margin-bottom: 14px;
}
.cta-section h2 {
  color: var(--text);
  margin-bottom: 10px;
  font-size: clamp(22px, 3.2vw, 36px);
}
.cta-section h2 em {
  font-style: italic;
  color: var(--green);
}
.cta-section p {
  color: var(--body);
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
}
.cta-asterisk {
  width: 0.45em;
  height: 0.45em;
  vertical-align: -0.12em;
  display: inline-block;
  margin-left: 2px;
  opacity: 0.95;
}
.cta-btns {
  display: flex;
  flex-direction: row;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  justify-content: center;
}
.cta-btns .btn {
  flex: 0 0 auto;
  padding: 12px 24px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .cta-section {
    padding: clamp(36px, 5vw, 52px) 20px clamp(48px, 6vw, 64px);
  }
  .cta-btns {
    flex-direction: column;
    max-width: 320px;
  }
}

/* CTA inside site footer — one green landmark with link columns (replaces separate pre-footer band) */
footer.site-footer {
  background: var(--green-dark);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  padding: clamp(40px, 5.5vw, 56px) 32px 24px;
  box-sizing: border-box;
}
footer.site-footer .cta-section {
  background: transparent;
  padding: 0 0 clamp(36px, 5vw, 56px);
  margin: 0;
  /* Contain margins / floats so the link grid never stacks under the CTA band */
  display: flow-root;
}
footer.site-footer .cta-section h2,
footer.site-footer .cta-section h2 em {
  color: #ffffff !important;
}
footer.site-footer .cta-section h2 em {
  font-style: italic;
  color: rgba(200, 235, 228, 0.98) !important;
}
footer.site-footer .cta-section p {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: clamp(20px, 3vw, 26px);
}
footer.site-footer .cta-section .eyebrow {
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 600px) {
  footer.site-footer {
    padding: clamp(32px, 5vw, 48px) 20px 20px;
  }
  footer.site-footer .cta-section {
    padding-bottom: clamp(28px, 4vw, 44px);
  }
}

/* Script transfer: flat page bg (no gradient band); HIW + Switch */
#script-transfer.str-section {
  padding-bottom: clamp(36px, 5vw, 52px);
  background: var(--bg);
  border-top: none;
}
/* How it Works: centre #script-transfer between pharmacy and footer (matched vertical rhythm) */
body.page-how-it-works #pharmacy.section {
  padding-bottom: clamp(40px, 5.5vw, 56px);
}
body.page-how-it-works #script-transfer.str-section {
  padding-top: clamp(40px, 5vw, 52px);
  padding-bottom: clamp(40px, 5vw, 52px);
}
@media (max-width: 600px) {
  body.page-how-it-works #pharmacy.section {
    padding-bottom: clamp(32px, 5vw, 48px);
  }
  body.page-how-it-works #script-transfer.str-section {
    padding-top: clamp(32px, 4.5vw, 44px);
    padding-bottom: clamp(32px, 4.5vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.btn.btn-primary.btn-book-initial {
    animation: none !important;
  }
}
a.btn.btn-primary.btn-book-initial {
  background: var(--book) !important;
  color: #fff !important;
  border: 1px solid var(--book-hover) !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.25s ease, box-shadow 0.35s ease !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(45, 97, 93, 0.22) !important;
}
a.btn.btn-primary.btn-book-initial:hover {
  background: var(--bg-card) !important;
  color: var(--green-dark) !important;
  border-color: var(--border) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(120, 170, 205, 0.35) !important;
}
/* Same control in merged footer: light blue by default on dark green band */
footer.site-footer .cta-section a.btn.btn-primary.btn-book-initial {
  background: var(--bg-card) !important;
  color: var(--green-dark) !important;
  border: 1px solid rgba(180, 210, 228, 0.9) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
}
footer.site-footer .cta-section a.btn.btn-primary.btn-book-initial:hover {
  background: var(--bg-surface) !important;
  color: var(--green-dark) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
}
.cta-btns a.btn.btn-primary.btn-book-initial {
  width: 100% !important;
  justify-content: center !important;
}
/* Footer: pill-width button — avoid full-bleed bar overlapping link columns (beats rule above) */
footer.site-footer .cta-inner .cta-btns a.btn.btn-primary.btn-book-initial {
  width: auto !important;
  max-width: 100%;
  align-self: center;
}
footer.site-footer .cta-inner .cta-btns {
  max-width: min(460px, 100%);
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

/* Floating back-to-top (NEW LOGOs/1.png) — injected by back-to-top.js */
.back-to-top {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: 0 8px 28px rgba(26, 47, 45, 0.14), 0 2px 10px rgba(45, 97, 93, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s, box-shadow 0.2s;
}
.back-to-top.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  box-shadow: 0 12px 36px rgba(26, 47, 45, 0.18), 0 4px 14px rgba(45, 97, 93, 0.12);
  transform: translateY(-1px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.back-to-top img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease, visibility 0.2s;
  }
}

/* Testimonial star rows — brand gold (overrides page inline .tc-stars / .hiw-tc-stars) */
.tc-stars,
.hiw-tc-stars {
  color: #b8892e;
}

/* Footer social icons (stroke="currentColor") — brand gold */
.footer-social a {
  color: #b8892e;
}
.footer-social a:hover {
  color: #fff;
}

/* Consent line — must read on dark green footer (var(--muted) is for light pages only) */
footer.site-footer .footer-consent {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  margin-top: 24px;
  line-height: 1.65;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
footer.site-footer .footer-consent__link {
  color: rgba(255, 255, 255, 0.94);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
}
footer.site-footer .footer-consent__link:hover {
  color: #fff;
}

/* White wordmark sign-off — beats per-page .footer-logo-bottom { max-width:1040px; height:92px }.
   Height-capped rather than full-bleed: the asset is 2.6:1, so spanning the
   viewport would make it ~550px tall. */
footer.site-footer {
  padding-bottom: 0;
  overflow-x: hidden;
}
footer.site-footer .footer-logo-bottom {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 28px 24px 24px;
  text-align: center;
  box-sizing: border-box;
}
footer.site-footer .footer-logo-bottom a {
  display: inline-block;
}
footer.site-footer .footer-logo-bottom img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(64px, 11vw, 160px) !important;
  /* Reserves the box before the lazy image resolves — width:auto alone would
     collapse to 0 and shift the footer on load. */
  aspect-ratio: 4063 / 1563;
  margin: 0 auto;
}

/* Home + pricing compare — Total Holistic column checkmarks (stroke on svg + path) */
#home-why-transfer-band #why-transfer .cmp-item.cmp-check svg,
#home-why-transfer-band #why-transfer .cmp-item.cmp-check svg path {
  color: #b8892e;
  stroke: #b8892e;
}

/* Mobile nav sheet open — hide Text us (launcher + card) so it never overlaps or intercepts taps */
body.mm-menu-open .text-us-root {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.mm-menu-open .text-us-root * {
  pointer-events: none !important;
}

/* ── Text us (bottom-left SMS widget) — text-us-widget.js ── */
.text-us-root {
  position: fixed;
  z-index: 285;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  font-family:var(--font-body);
}
.text-us-root * {
  pointer-events: auto;
}
.text-us-backdrop {
  position: fixed;
  inset: 0;
  z-index: 284;
  background: rgba(26, 47, 45, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}
.text-us-stack {
  position: relative;
  z-index: 286;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: min(100vw - 32px, 380px);
}
.text-us-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(26, 47, 45, 0.18), 0 4px 16px rgba(26, 47, 45, 0.08);
  background: #f5f6f8;
}
.text-us-card[hidden] {
  display: none !important;
}
.text-us-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--green-dark, #244f4c);
  color: #fff;
}
.text-us-card-head-icon {
  flex-shrink: 0;
  display: flex;
  opacity: 0.95;
}
.text-us-card-head-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.text-us-card-body {
  padding: 18px 16px 20px;
}
.text-us-form {
  background: #fff;
  border-radius: 14px;
  padding: 16px 14px 16px;
  box-shadow: 0 2px 12px rgba(45, 97, 93, 0.06);
}
.text-us-req {
  color: var(--green, #2d615d);
  font-weight: 600;
  margin-left: 1px;
}
.text-us-field {
  margin-bottom: 14px;
}
.text-us-field:last-of-type {
  margin-bottom: 12px;
}
.text-us-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #5c6d6b);
  margin-bottom: 6px;
}
.text-us-label--accent {
  color: var(--green-dark, #244f4c);
}
.text-us-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(45, 97, 93, 0.2);
  border-radius: 0;
  padding: 8px 0 10px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text, #1a2f2d);
  background: transparent;
  transition: border-color 0.2s;
}
.text-us-input::placeholder {
  color: rgba(92, 109, 107, 0.45);
}
.text-us-input:focus {
  outline: none;
  border-bottom-color: var(--green, #2d615d);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.text-us-field:first-child .text-us-input {
  border-bottom-width: 2px;
  border-bottom-color: rgba(26, 26, 26, 0.85);
}
.text-us-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.45;
}
.text-us-legal {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--muted, #5c6d6b);
  margin: 0 0 14px;
}
.text-us-legal-tel {
  color: var(--green, #2d615d);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.text-us-legal-tel:hover {
  color: var(--green-dark, #244f4c);
}
.text-us-feedback {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
}
.text-us-feedback[hidden] {
  display: none !important;
}
.text-us-feedback--ok {
  background: rgba(45, 97, 93, 0.1);
  color: var(--green-dark, #244f4c);
}
.text-us-feedback--err {
  background: rgba(240, 93, 129, 0.12);
  color: #a12e4a;
}
.text-us-send {
  display: block;
  width: 100%;
  margin: 0;
  max-width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: #9eb0a8;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.text-us-send:hover {
  background: #8fa39c;
}
.text-us-send.text-us-send--ready {
  background: var(--green, #2d615d);
  box-shadow: 0 6px 20px rgba(45, 97, 93, 0.28);
}
.text-us-send.text-us-send--ready:hover {
  background: var(--green-dark, #244f4c);
  box-shadow: 0 8px 24px rgba(36, 79, 76, 0.32);
}
.text-us-send:active {
  transform: scale(0.98);
}
.text-us-send:focus-visible {
  outline: 2px solid var(--green, #2d615d);
  outline-offset: 2px;
}
.text-us-send:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  background: #9eb0a8 !important;
  box-shadow: none !important;
}
.text-us-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.text-us-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border: none;
  border-radius: 999px;
  background: #b8892e;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s, transform 0.15s;
}
.text-us-launcher:hover {
  background: #9a7224;
}
.text-us-launcher:active {
  transform: scale(0.98);
}
.text-us-launcher:focus-visible {
  outline: 2px solid var(--green, #2d615d);
  outline-offset: 3px;
}
.text-us-launcher-icon {
  display: flex;
  opacity: 0.95;
}
.text-us-launcher[hidden] {
  display: none !important;
}
.text-us-close-fab {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #b8892e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(184, 137, 46, 0.35);
  transition: background 0.2s, transform 0.15s;
  align-self: center;
}
.text-us-close-fab:hover {
  background: #9a7224;
}
.text-us-close-fab:focus-visible {
  outline: 2px solid var(--green, #2d615d);
  outline-offset: 2px;
}
.text-us-close-fab[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .text-us-send,
  .text-us-launcher,
  .text-us-close-fab {
    transition: none;
  }
}
@media (max-width: 480px) {
  .text-us-root {
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

/* Footnote references — marker tucked to the word (no extra gap before superscript) */
a.text-footnote {
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-weight: inherit;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
a.text-footnote sup {
  font-size: 0.68em;
  vertical-align: super;
  line-height: 0;
  margin: 0;
  /* Pull marker toward preceding letter (positive margin looked visually “detached”) */
  margin-left: -0.07em;
  margin-right: 0;
}
/* ¶ choose-pharmacy disclaimer: link wraps only <sup>; word “Choose” stays plain (avoids giant hit target) */
a.text-footnote.text-footnote-marker {
  display: inline;
  white-space: nowrap;
  vertical-align: baseline;
}
/* Long “Choose …” claims may wrap; marker link stays tight */
.sw-trust-banner .tb-sub a.text-footnote:not(.text-footnote-marker),
.hiw-hero-tagline a.text-footnote {
  white-space: normal;
}
.sw-trust-banner .tb-sub a.text-footnote.text-footnote-marker {
  white-space: nowrap;
}
/* Short centred titles: keep marker glued to the heading line */
.sw-trust-banner .tb-heading a.text-footnote {
  white-space: nowrap;
}
/* Pricing tiles: long “Choose … delivery” lines need to wrap */
#pricing .pricing-grid .pc a.text-footnote {
  white-space: normal;
}
/* .cmp-item is flex + gap: text after <svg> must live in one wrapper or “Choose” and ¶ become separate flex items */
.cmp-item a.text-footnote:not(.text-footnote-marker) {
  white-space: normal;
}
.cmp-item a.text-footnote.text-footnote-marker {
  white-space: nowrap;
}
.faq-a a.text-footnote:not(.text-footnote-marker),
.hfaq-a a.text-footnote:not(.text-footnote-marker) {
  white-space: normal;
}
.faq-a a.text-footnote.text-footnote-marker,
.hfaq-a a.text-footnote.text-footnote-marker {
  white-space: nowrap;
}

/* Scroll-reveal (.anim): never leave content invisible if JS fails or user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim,
  .anim.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.btn,
a.btn,
button.btn,
a.btn[data-th-book] {
  font-weight: 700 !important;
}

/* Home: pricing cards stack vertically + root overflow (append so this wins if bundled CSS order differs on host).
   Clip only html. iOS treats overflow-x clip/hidden on BOTH html and body as a
   nested scrollport, which randomly eats vertical pans. */
@media (max-width: 960px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  body {
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: manipulation !important;
  }
  #pricing .pricing-rail {
    overflow: visible !important;
    touch-action: auto !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  #pricing .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  #pricing .pricing-grid .pc {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
  }
  #pricing .pricing-scroll-indicator {
    display: none !important;
  }
}

/* ─── MOBILE HERO — phones ≤768px ──────────────────────────────────────────
   site-nav.css is served as a static file and deploys instantly without a
   build step, unlike the page-level compiled bundles. These rules use
   !important to override the bundled CSS where needed.

   Both the homepage hero (.hero-shell / .hero) and pricing hero
   (.pr-hero-shell / .pr-hero) share the same video and poster image, so
   the same treatment applies to both.

   • Video is hidden — the file is 26 MB and won't buffer fast enough on
     mobile; the poster photo (153 KB) loads instantly.
   • Keep the hero on svh, not dvh. A cover background on a dvh box recrops
     when the iOS URL bar hides and reads as a jittery zoom. The
     html.lv-index-hero poster band covers any first-paint safe-area gap.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Inner-page hero guardrail (care-team screenshot issue):
     neutralize any compiled pseudo background and keep hero compact. */
  .page-hero.hero-shell::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  .page-hero.hero-shell {
    min-height: auto !important;
    padding: 24px 16px 24px !important;
    background: var(--bg, #fafcfe) !important;
  }
  .page-hero.hero-shell .container {
    padding-left: 24px !important;
  }

  /* Preserve native hero video behavior on mobile. */

}