/* ==========================================================================
   Components (BEM). Tokens only — no raw colors or font sizes here.
   ========================================================================== */

/* ---------- Icon ---------- */
.icon {
  width: var(--icon-24);
  height: var(--icon-24);
  flex-shrink: 0;
}
.icon--16 { width: var(--icon-16); height: var(--icon-16); }
.icon--20 { width: var(--icon-20); height: var(--icon-20); }
.icon--24 { width: var(--icon-24); height: var(--icon-24); }
.icon--32 { width: var(--icon-32); height: var(--icon-32); }

/* ---------- Eyebrow (section label) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-primary);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
/* Square marker in CI Pink (client request 5 Nov 2026), on light and dark bands */
.eyebrow::before {
  content: "";
  width: var(--space-8);
  height: var(--space-8);
  background: var(--color-ci-pink);
  flex-shrink: 0;
}
:lang(en) .eyebrow {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.eyebrow--on-dark {
  color: var(--color-white);
}

/* ---------- Highlight ---------- */
.highlight {
  background: var(--color-teal-300);
  color: var(--color-teal-950);
  border-radius: var(--radius-8);
  padding-inline: var(--space-8);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text-accent-dark {
  color: var(--color-teal-300);
}
/* Accent words on light backgrounds — Vivid Cyan, for large headings only (≥ 3 : 1 on white) */
.text-accent {
  color: var(--color-teal-600);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  height: var(--btn-height);
  padding-block: var(--space-8);
  padding-inline: var(--space-24) var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.btn__icon {
  display: grid;
  place-items: center;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border-radius: var(--radius-pill);
  background: var(--color-teal-950);
  color: var(--color-white);
  flex-shrink: 0;
}
.btn__icon .icon {
  width: var(--icon-16);
  height: var(--icon-16);
  transition: transform var(--motion-base) var(--ease-standard);
}
.btn:hover .btn__icon .icon {
  transform: rotate(-45deg);
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--gradient-primary-hover); }
.btn--primary .btn__icon {
  background: var(--primary-icon-bg);
  color: var(--color-white);
}

.btn--secondary { background: var(--color-white); }
.btn--secondary:hover { background: var(--color-cream); }
.btn--bordered { box-shadow: inset 0 0 0 1px var(--color-gray-300); }

/* B2B outline (wireframe: coral border marks the "for organizations" path) */
.btn--outline {
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-coral-500);
}
.btn--outline:hover { background: var(--color-coral-50); }

/* Green: old-site CI main-button gradient, white label */
.btn--green {
  background: var(--gradient-b2b);
  color: var(--color-white);
}
.btn--green:hover {
  background: var(--gradient-b2b-hover);
}

/* Ghost (hero B2B): no background, white ring + white label, no arrow (client decision) */
.btn--ghost {
  padding-inline: var(--space-24);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-white);
  color: var(--color-white);
}
.btn--ghost:hover {
  background: var(--ghost-hover-bg);
}

.btn--promo { background: var(--color-coral-500); }
.btn--promo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--on-dark { background: var(--color-teal-300); }
.btn--on-dark:hover { background: var(--color-teal-200); }

.btn--sm {
  height: var(--btn-height-sm);
  padding-inline: var(--space-16) var(--space-8);
  gap: var(--space-8);
}
.btn--sm .btn__icon {
  width: var(--btn-icon-sm);
  height: var(--btn-icon-sm);
}
.btn--block {
  width: 100%;
  justify-content: space-between;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  text-decoration: none;
}
.link-arrow .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-arrow:hover .icon {
  transform: translateX(4px);
}

/* Round icon button */
.icon-btn {
  display: grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
  color: var(--color-teal-950);
  transition: background-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.icon-btn:hover {
  background: var(--color-teal-300);
  box-shadow: none;
}
.icon-btn:disabled {
  color: var(--color-gray-500);
  cursor: not-allowed;
  background: var(--color-white);
}
.icon-btn--sm {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
}

/* ---------- Chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 32px;
  padding-inline: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-teal-100);
  color: var(--color-teal-950);
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-ui);
  white-space: nowrap;
}
.chip--promo {
  background: var(--color-coral-100);
  color: var(--color-coral-800);
}

/* Meta line (date, read time) */
.meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-muted);
}

/* ---------- Image placeholder (until real photos arrive) ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--placeholder-light);
  color: var(--color-placeholder-icon);
}
.ph--light { background: var(--placeholder-light); }
.ph--warm { background: var(--placeholder-warm); }
.ph--dark {
  background: var(--placeholder-dark);
  color: var(--color-placeholder-icon-dark);
}
.ph__icon {
  width: var(--icon-48);
  height: var(--icon-48);
}
.ph__label {
  position: absolute;
  left: var(--space-12);
  bottom: var(--space-12);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-solid);
  color: var(--color-teal-950);
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}

/* ---------- Avatar ---------- */
.avatar-group {
  display: flex;
}
.avatar {
  display: grid;
  place-items: center;
  width: var(--icon-32);
  height: var(--icon-32);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-teal-950);
  color: var(--color-teal-950);
  background: var(--color-teal-300);
  flex-shrink: 0;
}
.avatar-group .avatar + .avatar {
  margin-left: calc(var(--space-8) * -1);
}
.avatar--teal { background: var(--color-teal-300); }
.avatar--coral { background: var(--color-coral-200); }
.avatar--mint { background: var(--color-teal-100); }
.avatar--lg {
  width: var(--icon-48);
  height: var(--icon-48);
  border: 0;
}

/* ==========================================================================
   Header / Navbar (floating glass)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-navbar);
  padding-block: var(--space-16);
  transition: padding-block var(--motion-header) var(--ease-out-gentle);
}
.site-header--scrolled {
  padding-block: 10px;
}

/* Three columns: logo | nav (centered on the page) | actions.
   The side columns share the leftover space equally, so the nav pill sits in the
   true page center; if a side is wider than its share it simply takes what it needs. */
.site-header__bar {
  --bar-gutter: var(--space-8); /* gap between the scrolled glass bar and the screen edge */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: calc(var(--container-max) + var(--space-96));
  min-height: var(--nav-pill-height);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  transition:
    width var(--motion-header) var(--ease-out-gentle),
    padding var(--motion-header) var(--ease-out-gentle);
}
/* Scrolled (Marqo-style): one glass bar wraps logo, nav and actions.
   It sits on a pseudo-element: backdrop-filter on the header itself would trap
   the fixed mobile menu inside the header box. */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--glass-bg); /* same glass opacity as the default nav pill */
  box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-sm);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity var(--motion-header) var(--ease-out-gentle),
    transform var(--motion-header) var(--ease-out-gentle);
}
.site-header--scrolled .site-header__bar {
  width: calc(100% - 2 * var(--bar-gutter));
  padding: 6px;
}
.site-header--scrolled .site-header__bar::before {
  opacity: 1;
  transform: none;
}
.site-header__bar .site-header__logo {
  transition: margin var(--motion-header) var(--ease-out-gentle);
}
/* Round logo mark inside the round bar end: left gap = top/bottom gap (6 px bar padding + 2 px = 8 px) */
.site-header--scrolled .site-header__bar .site-header__logo {
  margin-left: calc((var(--nav-pill-height) - var(--logo-height)) / 2);
}
/* Below 1200px the nav pill is hidden: drop its empty column so its two gaps don't waste 32px */
@media (max-width: 1199.98px) {
  .site-header__bar {
    grid-template-columns: max-content 1fr;
    gap: var(--space-8);
  }
  .site-header__bar .site-header__actions {
    grid-column: 2;
  }
}
@media (min-width: 768px) {
  .site-header__bar {
    --bar-gutter: var(--space-24);
  }
}
@media (min-width: 1200px) {
  .site-header__bar {
    --bar-gutter: var(--space-12);
    gap: var(--space-12);
    padding-inline: var(--space-16);
  }
  .site-header__bar .site-header__logo img {
    height: var(--logo-height-compact);
  }
}

.site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
}
.site-header__logo img {
  width: auto;
  height: var(--logo-height);
}

/* Desktop nav pill */
.site-nav {
  display: none;
}
@media (min-width: 1200px) {
  .site-nav {
    display: block;
  }
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-pill-height);
  padding-inline: var(--space-8); /* = vertical inset (48 - 32) / 2, so the active pill sits evenly */
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  position: relative; /* containing block for the mega menu, also when the glass is off */
  transition:
    background-color var(--motion-header) var(--ease-out-gentle),
    box-shadow var(--motion-header) var(--ease-out-gentle);
}
/* Scrolled: the outer bar is the glass now, so the nav pill turns transparent */
.site-header--scrolled .site-nav__list {
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav__list {
    background: var(--glass-bg-solid);
  }
}
/* flex, not block: an inline-flex link in a block <li> sits on the text baseline
   and adds ~1px below it, pushing the active pill off-centre */
/* Items fill the pill's full height, so every dropdown hangs the same 12px below the pill
   (the mega menu measures from the pill itself) */
.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-link-height);
  padding-inline: 10px; /* 10, not 12: keeps the pill centred at 1280px next to the TH + download buttons */
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.site-nav__link:hover,
.site-nav__trigger[aria-expanded="true"] {
  background: var(--color-teal-50);
}
/* Active page: CI deep teal pill with white text (5.9 : 1) */
.site-nav__link[aria-current="page"] {
  background: var(--color-teal-700);
  color: var(--color-white);
}
.site-header__logo { grid-column: 1; justify-self: start; }
.site-nav { grid-column: 2; }
.site-header__actions { grid-column: 3; justify-self: end; }

/* The chevron icon has ~3px of empty space on its right: trim the link padding
   so every gap between labels looks the same */
.site-nav__chevron {
  transition: transform var(--motion-base) var(--ease-standard);
}
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

/* Navbar text is 14px on tablet/desktop (--fs-nav); header buttons follow it */
.site-header__actions .btn {
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
}

/* Header over a dark hero (body[data-hero="dark"]) — only while at the top of the page.
   After scrolling, .site-header--scrolled brings back the light header. */
.site-header__bar .logo-dark {
  display: none;
}
body[data-hero] .site-header:not(.site-header--scrolled) .site-header__bar .logo-light {
  display: none;
}
body[data-hero] .site-header:not(.site-header--scrolled) .site-header__bar .logo-dark {
  display: block;
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-nav__list {
  background: var(--glass-dark-bg);
  box-shadow: inset 0 0 0 1px var(--glass-dark-border);
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-nav__link {
  color: var(--color-white);
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-nav__link:hover,
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-nav__trigger[aria-expanded="true"] {
  background: var(--glass-dark-bg-hover);
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-nav__link[aria-current="page"] {
  background: var(--color-teal-700);
  color: var(--color-white);
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .site-header__bar :focus-visible {
  outline-color: var(--color-teal-300);
}

/* Header actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-header__actions .download-pop,
.site-header__actions [data-cta-b2b] {
  display: none;
}
@media (min-width: 768px) {
  .site-header__actions .download-pop {
    display: inline-flex;
  }
  .site-header__actions [data-cta-b2b]:not([hidden]) {
    display: inline-flex;
  }
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
  color: var(--color-teal-950);
}
@media (min-width: 1200px) {
  .site-header__actions .menu-toggle {
    display: none;
  }
}

/* ---------- Dropdowns (nav menus, language, download pop-up) ---------- */
.download-pop,
.lang-pop {
  position: relative;
}
.dropdown {
  position: absolute;
  top: calc(100% + var(--space-12));
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: var(--dropdown-width);
  padding: var(--space-12);
  border-radius: var(--radius-24);
  background: var(--color-white);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-gray-200);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    visibility 0s linear var(--motion-base);
}
[data-dropdown].is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    visibility 0s;
}

/* Mega menu: centered under the whole nav pill (the pill is its containing block) */
.site-nav__item--mega {
  position: static;
}
.dropdown--mega {
  left: 50%;
  translate: -50% 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--mega-feature-width);
  gap: var(--space-8);
  width: var(--mega-width);
}
/* Shared menu rhythm (mega + promotions; the language menu has its own compact rows):
   panel padding 12 · rows padded 12 on every side · radius 12 = panel 24 − padding 12,
   so the hover fill, the photo card and the panel corners all nest evenly. */
.dropdown--mega .mega__col {
  gap: var(--space-4);
}
.dropdown--mega .mega__title {
  padding: var(--space-8) var(--space-12) var(--space-4);
}
.dropdown--mega .mega__list,
.dropdown--list .mega__list {
  gap: var(--space-4);
}
.dropdown--mega .mega__link,
.dropdown--list .mega__link {
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-12);
}
.dropdown--mega .mega__text,
.dropdown--list .mega__text {
  gap: 2px;
}
.dropdown--mega .mega__name,
.dropdown--list .mega__name {
  line-height: 22px;
}
.dropdown--mega .mega__feature {
  padding: var(--space-20);
  border-radius: var(--radius-12);
}
/* Hugs its longest row, so no empty strip on the right */
.dropdown--list {
  width: max-content;
}
.dropdown--lang {
  left: auto;
  right: 0;
  width: var(--lang-menu-width);
}
/* Download pop-up, horizontal: title + note on top, then QR (left) | store badges (right).
   The QR is as tall as the badge stack (3 × 40 + 2 × 8 = 136), so both columns end on one line. */
.dropdown--download {
  --download-row: 136px;
  left: auto;
  right: 0;
  width: max-content;
  padding: var(--space-20);
  gap: var(--space-16);
  text-align: left;
}
.download-pop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown--download .dropdown__title {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--color-teal-950);
}
.download-pop__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.dropdown--download .qr {
  width: var(--download-row);
  height: var(--download-row);
  padding: var(--space-8);
  flex-shrink: 0;
}
.dropdown--download .store-list--stack {
  width: auto;
  gap: var(--space-8);
}

.mega__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mega__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12) var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-ui);
  color: var(--color-text-muted);
}
.mega__title::before {
  content: "";
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-2);
  background: var(--color-coral-500);
}
.mega__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mega__link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  border-radius: var(--radius-16);
  color: var(--color-teal-950);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.mega__link:hover,
.mega__link:focus-visible {
  background: var(--color-teal-50);
}
.mega__link[aria-current="true"] {
  background: var(--color-teal-50);
}
/* CI icon style: 1.5px teal line + one coral accent (accent color lives in sprite.svg).
   One calm tile for every item: white with a hairline ring; ring + soft shadow on hover. */
.mega__icon {
  display: grid;
  place-items: center;
  width: var(--icon-40);
  height: var(--icon-40);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: var(--gradient-icon-tile);
  box-shadow: inset 0 0 0 1px var(--color-teal-100);
  color: var(--color-icon-ci);
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.mega__link:hover .mega__icon,
.mega__link:focus-visible .mega__icon {
  box-shadow: inset 0 0 0 1px var(--color-teal-200), var(--shadow-sm);
  transform: scale(1.06);
}
.mega__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mega__name {
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-12);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
.mega__hint {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-text-muted);
}

/* Photo feature card inside the mega menu: medical.jpg + deep-teal fade, white text */
.mega__feature {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-20);
  border-radius: var(--radius-16);
  background: var(--color-teal-950);
  overflow: hidden;
}
.mega__feature-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.mega__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-feature-photo);
}
.mega__feature-eyebrow {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-teal-100);
}
.mega__feature-title {
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-ui);
  color: var(--color-white);
}

.dropdown__title {
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-ui);
  color: var(--color-text-muted);
}
.dropdown__note {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--color-text-muted);
}

/* ---------- Language switcher: glass pill (flag + code + chevron), same glass as the nav pill ---------- */
.lang-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 44px;
  padding-inline: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  font-family: var(--font-primary);
  font-size: var(--fs-14); /* same on every screen (the mobile nav size, 20 px, was too big here) */
  line-height: var(--lh-label);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.lang-flag__code {
  margin-left: var(--space-4);
}
.lang-flag__chevron {
  transition: transform var(--motion-base) var(--ease-standard);
}
.lang-pop.is-open .lang-flag__chevron {
  transform: rotate(180deg);
}
/* Narrow phones: keep flag + code, drop the arrow so the header fits */
@media (max-width: 399.98px) {
  .lang-flag__chevron {
    display: none;
  }
}
.lang-flag:hover,
.lang-pop.is-open .lang-flag {
  background: var(--glass-bg-solid);
}
.site-header--scrolled .lang-flag {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
}
.site-header--scrolled .lang-flag:hover,
.site-header--scrolled .lang-pop.is-open .lang-flag {
  background: var(--color-teal-50);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-flag {
    background: var(--glass-bg-solid);
  }
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .lang-flag {
  background: var(--glass-dark-bg);
  box-shadow: inset 0 0 0 1px var(--glass-dark-border);
  color: var(--color-white);
}
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .lang-flag:hover,
body[data-hero="dark"] .site-header:not(.site-header--scrolled) .lang-pop.is-open .lang-flag {
  background: var(--glass-dark-bg-hover);
}
.lang-flag__icon {
  display: block;
  width: var(--flag-size);
  height: var(--flag-size);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--color-white), var(--shadow-sm);
  flex-shrink: 0;
}
.lang-flag__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Compact language menu: small flags, tight rows */
.dropdown--lang {
  padding: var(--space-8);
  border-radius: var(--radius-16);
}
.dropdown--lang .mega__list {
  gap: 2px;
}
.dropdown--lang .mega__link {
  gap: var(--space-8);
  padding: 6px var(--space-12);
  border-radius: var(--radius-8);
}
.dropdown--lang .lang-flag__icon {
  width: var(--icon-20);
  height: var(--icon-20);
  box-shadow: 0 0 0 1px var(--color-gray-200);
}

/* ---------- Mobile menu ----------
   Floating style: dimmed page behind · a white header pill (logo + round close) · a separate white
   card with soft rows, then the language switch and the two CTAs. Tapping the dim area closes it. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-12) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  background: var(--color-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 64px;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}
.mobile-menu__top .site-header__logo img {
  height: 40px;
}
/* Round close button with a CI teal ring */
.mobile-menu__top .menu-toggle {
  width: 44px;
  height: 44px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-teal-600);
}
.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-8) var(--space-12) var(--space-12);
  border-radius: var(--radius-24);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: mobile-menu-in var(--motion-slow) var(--ease-out-soft);
}
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__panel { animation: none; }
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
}
.mobile-menu__list > li + li {
  border-top: 1px solid var(--color-gray-200);
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--space-12);
  border-radius: var(--radius-12);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.mobile-menu__link:hover,
.mobile-menu__link:active {
  background: var(--color-teal-50);
}
.mobile-menu__link::-webkit-details-marker {
  display: none;
}
.mobile-menu__link .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.mobile-menu__group[open] .mobile-menu__link .icon {
  transform: rotate(180deg);
}
.mobile-menu__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-8) var(--space-12);
}
.mobile-menu__sub a {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-secondary);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--color-text);
  text-decoration: none;
}
.mobile-menu__sub a:hover {
  background: var(--color-teal-50);
  color: var(--color-teal-950);
}
.mobile-menu__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-gray-200);
}
/* Mobile menu: language row with round flags */
.mobile-lang {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.mobile-lang__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding-inline: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--color-teal-950);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
}
.mobile-lang__link[aria-current="true"] {
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-teal-600);
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline: var(--space-12);
}
.marquee__toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-inline: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
  color: var(--color-teal-950);
}
.marquee__icon-play,
[aria-pressed="true"] > .marquee__icon-pause {
  display: none;
}
[aria-pressed="true"] > .marquee__icon-play {
  display: block;
}

/* Partner logos */
.logo-tile {
  display: grid;
  place-items: center;
  min-width: 160px;
  height: 72px;
  padding-inline: var(--space-24);
  border-radius: var(--radius-16);
  background: transparent; /* no frame: logos sit straight on the page (client request 5 Nov 2026) */
  font-family: var(--font-primary);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: var(--fw-emphasis);
  color: var(--color-gray-700);
  transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.logo-tile:hover {
  color: var(--color-teal-950);
  transform: scale(1.04);
}

/* Image variant: real partner logos (assets/img/partners), shown in their own colors. */
.logo-tile--img {
  width: 168px;
  min-width: 0;
  padding: 0 var(--space-12);
  overflow: hidden;
}
/* Source files carry their own whitespace, so they can fill the tile height */
.logo-tile--img img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
}
/* Ocean Life is a solid square badge, not a transparent logo */
.logo-tile--img img[src$="ocean-life.webp"] {
  width: auto;
  height: 52px;
  border-radius: var(--radius-8);
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* Feature card (clinics) */
.feature-grid {
  display: grid;
  gap: var(--grid-gutter);
}
@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: var(--space-40);
  }
  .feature-grid > :nth-child(3n + 2) {
    transform: translateY(var(--space-40));
  }
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-16);
  background: var(--color-cream);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-base) var(--ease-standard), translate var(--motion-base) var(--ease-standard);
}
.feature-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-md);
}
.feature-card__shape {
  width: var(--icon-48);
  height: var(--icon-48);
  margin-bottom: var(--space-8);
  color: var(--color-teal-400);
}
.feature-card:nth-child(even) .feature-card__shape {
  color: var(--color-coral-300);
}
.feature-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
.feature-card__link {
  color: inherit;
  text-decoration: none;
}
.feature-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.feature-card__link:focus-visible {
  outline: none;
}
.feature-card:focus-within {
  outline: 2px solid var(--color-teal-700);
  outline-offset: 2px;
}
.feature-card__text {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}
.feature-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
.feature-card__more .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.feature-card:hover .feature-card__more .icon {
  transform: translateX(8px);
}

/* Promo card */
.promo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-24);
  background: var(--color-cream);
  overflow: hidden;
  transition: box-shadow var(--motion-base) var(--ease-standard);
}
.promo-card:hover {
  box-shadow: var(--shadow-md);
}
.promo-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-16);
  margin: var(--space-8) var(--space-8) 0;
}
.promo-card__chip {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
}
.promo-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  flex: 1;
  padding: var(--space-20) var(--space-24) var(--space-24);
}
.promo-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
.promo-card__body .btn {
  margin-top: auto;
}

/* ==========================================================================
   Carousel (scroll-snap + buttons)
   ========================================================================== */
.carousel__track {
  position: relative; /* contains absolutely positioned children (e.g. .visually-hidden) */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-promo-width);
  gap: var(--grid-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-padding);
  padding: var(--space-8) var(--container-padding) var(--space-24);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1200px) {
  .carousel__track {
    padding-inline: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
    scroll-padding-inline: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
  }
}
.carousel__slide {
  scroll-snap-align: start;
}
.carousel-nav {
  display: flex;
  gap: var(--space-12);
}
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}
.carousel__dots {
  display: flex;
  gap: var(--space-8);
}
.carousel__dot {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px var(--color-teal-700);
  transition: background-color var(--motion-fast) var(--ease-standard), width var(--motion-base) var(--ease-standard);
}
.carousel__dot[aria-current="true"] {
  width: var(--space-32);
  background: var(--color-teal-700);
}
/* Dots are small visually; give them a 44px hit area */
.carousel__dot {
  position: relative;
}
.carousel__dot::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
}

/* ==========================================================================
   QR + store badges + download card
   ========================================================================== */
.qr {
  display: grid;
  place-items: center;
  width: var(--qr-size);
  height: var(--qr-size);
  padding: var(--space-12);
  border-radius: var(--radius-16);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
  color: var(--color-teal-950);
}
.qr__icon,
.qr__img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Real QR file (from mordeeapp.com), 149 px source */
.qr__img {
  object-fit: contain;
}
.qr--lg {
  width: var(--qr-size-lg);
  height: var(--qr-size-lg);
}

.store-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
/* Flex items, so the inline badge links leave no line-height gap under them */
.store-list > li {
  display: flex;
}
.store-list--stack {
  flex-direction: column;
  width: 100%;
}
.store-list--center {
  justify-content: center;
}
.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 140px;
  height: 48px;
  padding-inline: var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-teal-950);
  color: var(--color-white);
  text-decoration: none;
  text-align: left;
}
.store-list--stack .store-badge {
  width: 100%;
}
.store-badge__small {
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--color-teal-100);
}
.store-badge__name {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: 20px;
  font-weight: var(--fw-ui);
}
.store-badge:hover {
  background: var(--color-teal-900);
}
/* Official store badge artwork (assets/img/stores/*.svg, 135 × 40, white + CI teal ring) */
.store-badge--img {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 7px;
  background: none;
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.store-badge--img img {
  display: block;
  width: 135px;
  height: 40px;
}
.store-badge--img:hover {
  background: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.store-list--stack .store-badge--img {
  width: auto;
}
.store-list--stack {
  align-items: center;
}
.store-badge--on-dark {
  background: var(--color-white);
  color: var(--color-teal-950);
}
.store-badge--on-dark .store-badge__small {
  color: var(--color-text-muted);
}
.store-badge--on-dark:hover {
  background: var(--color-teal-100);
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32);
  border-radius: var(--radius-24);
  background: var(--gradient-mesh);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
  text-align: center;
}
.download-card__title {
  font-family: var(--font-primary);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}

/* ==========================================================================
   Steps (user journey)
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  gap: var(--grid-gutter);
  counter-reset: none;
}
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Progress line behind the step numbers */
  .steps::before {
    content: "";
    position: absolute;
    top: calc(var(--space-24) + var(--icon-20));
    left: var(--space-24);
    right: var(--space-24);
    height: 2px;
    background: var(--color-teal-200);
  }
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
}
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icon-40);
  height: var(--icon-40);
  border-radius: var(--radius-pill);
  background: var(--color-teal-950);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-ui);
}
.step__icon {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: var(--icon-32);
  height: var(--icon-32);
  color: var(--color-teal-600);
}
.step__title {
  margin-top: var(--space-8);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}
.step__text {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}

/* ==========================================================================
   Corporate (B2B) + form
   ========================================================================== */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.check-list li {
  display: flex;
  gap: var(--space-12);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-teal-900);
}
.check-list .icon {
  margin-top: var(--space-4);
  color: var(--color-teal-600);
}

.lead-card {
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-24);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
@media (min-width: 768px) {
  .lead-card {
    padding: var(--space-40);
  }
}
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lead-form__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
.lead-form__note {
  margin-top: calc(var(--space-12) * -1);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--color-text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.field__label {
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
.field__input {
  width: 100%;
  height: var(--input-height);
  padding-inline: var(--space-16);
  border: 1px solid var(--color-gray-500);
  border-radius: var(--radius-12);
  background: var(--color-white);
  font-family: var(--font-secondary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--color-ink);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.field__input::placeholder {
  color: var(--color-text-muted);
}
.field__input:focus-visible {
  outline: none;
  border-color: var(--color-teal-700);
  box-shadow: 0 0 0 2px var(--color-teal-700);
}
.field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}
.field__select-wrap {
  position: relative;
}
.field__select {
  appearance: none;
  padding-right: var(--space-48);
  cursor: pointer;
}
.field__select-icon {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  transform: translateY(-50%);
  color: var(--color-teal-950);
  pointer-events: none;
}
/* Custom select (main.js initCustomSelect): button looks like the inputs; the open list
   matches the site dropdowns — white card, radius 16, soft shadow, Teal 50 highlight, check on the choice */
.cselect__button {
  display: flex;
  align-items: center;
  text-align: left;
}
.cselect__button.is-placeholder .cselect__value {
  color: var(--color-text-muted);
}
.cselect__button[aria-invalid="true"] {
  border-color: var(--color-error);
}
.cselect.is-open .cselect__button {
  border-color: var(--color-teal-700);
  box-shadow: 0 0 0 2px var(--color-teal-700);
}
.field__select-icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.cselect.is-open .field__select-icon {
  transform: translateY(-50%) rotate(180deg);
}
.cselect__list {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background: var(--color-white);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-gray-200);
  outline: none;
}
.cselect__list[hidden] {
  display: none;
}
.cselect__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  font-family: var(--font-secondary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--color-ink);
  cursor: pointer;
}
.cselect__option.is-active {
  background: var(--color-teal-50);
}
.cselect__option[aria-selected="true"] {
  font-family: var(--font-primary);
  color: var(--color-teal-950);
}
.cselect__check {
  flex-shrink: 0;
  color: var(--color-teal-600);
  visibility: hidden;
}
.cselect__option[aria-selected="true"] .cselect__check {
  visibility: visible;
}
.cselect__list:focus-visible .cselect__option.is-active {
  box-shadow: inset 0 0 0 2px var(--color-teal-700);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--color-error);
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: var(--icon-16);
  height: var(--icon-16);
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  flex-shrink: 0;
}
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--space-12);
  align-items: start;
}
.field--check .field__error {
  grid-column: 1 / -1;
}
.check {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-teal-700);
  cursor: pointer;
}
.check__label {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
.check__label a {
  color: var(--color-teal-700);
}

.lead-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-48);
  text-align: center;
}
.lead-success:focus {
  outline: none;
}
.lead-success__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: var(--color-teal-300);
  color: var(--color-teal-950);
}

/* ==========================================================================
   Tabs + FAQ accordion
   ========================================================================== */
.tabs {
  display: inline-flex;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
}
.tabs__tab {
  min-height: 48px;
  padding-inline: var(--space-24);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-ui);
  color: var(--color-text);
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.tabs__tab:hover {
  color: var(--color-teal-950);
}
.tabs__tab[aria-selected="true"] {
  background: var(--color-teal-950);
  color: var(--color-white);
}

/* FAQ accordion (reference "Your questions, Our answers"): soft-filled rows, no ring,
   question left + small solid chevron circle right; chevron flips when open */
.faq {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
/* Tabs: pill track + pill tabs, same as every other tab / button on the site */
/* Tabs centered above the questions (client request 5 Nov 2026) */
.faq .tabs {
  align-self: center;
  margin-bottom: var(--space-32);
  background: var(--color-teal-50);
  box-shadow: none;
}
.faq .tabs__tab {
  min-height: 40px;
  padding-inline: var(--space-20);
  font-size: var(--fs-14);
}
/* Selected tab uses the site's button gradients: users = pink (primary), business = green (B2B) */
.faq .tabs__tab[aria-selected="true"] {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm);
}
.faq .tabs__tab#faq-tab-business[aria-selected="true"] {
  background: var(--gradient-b2b);
}
.faq__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}
.faq__item {
  padding: 0 var(--space-20);
  border-radius: var(--radius-16);
  background: var(--color-teal-50);
  transition: background-color var(--motion-base) var(--ease-standard);
}
.faq__item:hover {
  background: var(--color-teal-100);
}
@media (min-width: 768px) {
  .faq__item {
    padding: 0 var(--space-24);
  }
}
/* Question in the body font, regular weight (the reference reads light, not heading-bold) */
.faq__question {
  font-family: var(--font-secondary);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-regular);
}
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: 64px;
  text-align: left;
  color: var(--color-teal-950);
}
/* 28 px chevron circle (site icon-circle style) */
.faq__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-teal-700);
  color: var(--color-white);
  flex-shrink: 0;
  transition: transform var(--motion-base) var(--ease-standard);
}
/* Users tab = pink family: tab track and rows in Coral tints (business keeps the Teal tints) */
.faq:has(#faq-tab-users[aria-selected="true"]) .tabs {
  background: var(--color-coral-50);
}
#faq-panel-users .faq__item {
  background: var(--color-coral-50);
}
#faq-panel-users .faq__item:hover {
  background: var(--color-coral-100);
}
/* Chevron circles follow their tab color */
#faq-panel-users .faq__icon { background: var(--gradient-primary); }
#faq-panel-business .faq__icon { background: var(--gradient-b2b); }
.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
}
.faq__answer {
  padding-bottom: var(--space-20);
  color: var(--color-text);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}


/* ==========================================================================
   Footer
   ========================================================================== */
/* Layout 1:1 with the ReliaCare footer (measured at 1440 / 810 / 390 px), MorDee CI colors.
   Wordmark → band: main (column | divider | brand | divider | column) · rule · bottom · glow */
.footer-px {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container-max) + var(--footer-px) * 2);
  margin-inline: auto;
  padding-inline: var(--footer-px);
}

/* Band */
.footer-band {
  position: relative;
  overflow: clip;
  background: var(--gradient-footer-ci);
  color: var(--color-footer-ink);
}
.footer-band :focus-visible {
  outline-color: var(--color-white);
}
.footer-rule {
  position: relative;
  z-index: 1;
  height: 1px;
  background: var(--color-footer-rule);
}

/* 5 · Glow: container-wide image, 72 px side inset, anchored below the band */
.footer-glow {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: var(--footer-glow-bottom);
  padding-inline: var(--footer-glow-px);
  pointer-events: none;
}
.footer-glow img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--footer-glow-ratio);
}

/* 3 · Main — mobile: stacked, 32 px apart, horizontal dividers */
.footer-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: var(--space-32);
}
.footer-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.footer-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--gradient-footer-divider-h);
}

/* Stacked (mobile): logo block first, then the two link columns, one divider between each */
@media (max-width: 809.98px) {
  .footer-brand { order: -1; }
  .footer-side--start .footer-divider { order: -1; }
}

/* Tablet (≥ 810 px, the reference's breakpoint): column | divider | brand | divider | column.
   Equal side tracks (1 : 1.5 : 1) keep the brand on the true page centre; each divider hugs the
   brand (same distance both sides) and the columns sit at the outer edges. */
@media (min-width: 810px) {
  .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--footer-gap-tablet);
    padding-block: var(--footer-main-pt) var(--footer-main-pb);
  }
  .footer-side {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--footer-gap-tablet);
  }
  .footer-side .footer-col {
    max-width: var(--footer-col-max-tablet);
  }
  .footer-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    background: var(--gradient-footer-divider-v);
  }
}
/* Desktop: brand 475 px centred, columns flush to the edges, dividers 64 px from the brand */
@media (min-width: 1200px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) var(--footer-brand-width) minmax(0, 1fr);
    gap: 0;
  }
  .footer-side {
    gap: 0;
  }
  .footer-side .footer-col {
    max-width: none;
  }
  /* dividers the same distance from the brand on both sides (not centred in uneven gaps) */
  .footer-side--start .footer-divider {
    margin-right: var(--space-64);
  }
  .footer-side--end .footer-divider {
    margin-left: var(--space-64);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}
.footer-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: 22px;
  font-weight: var(--fw-ui);
  color: var(--color-footer-ink);
}
.footer-heading::before {
  content: "";
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-2);
  background: var(--color-ci-pink); /* CI pink marker */
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .footer-heading { font-size: var(--fs-16); line-height: 24px; }
}
@media (min-width: 1200px) {
  .footer-heading { font-size: var(--fs-18); line-height: 26px; }
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
.footer-links a {
  display: block;
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-footer-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--motion-fast) var(--ease-standard);
}
@media (min-width: 768px) {
  .footer-links a { font-size: var(--fs-16); line-height: var(--lh-16); }
}
.footer-links a:hover {
  text-decoration-color: currentColor;
}

/* Brand block: logo + text (20 px apart), then socials (40 px; 32 px mobile) */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  text-align: center;
}
@media (min-width: 768px) {
  .footer-brand { gap: var(--space-40); }
}
.footer-brand__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}
.footer-brand__logo img {
  display: block;
  width: auto;
  height: var(--logo-height-footer);
}
.footer-brand__text {
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-footer-ink);
  text-wrap: balance;
}
/* Thai has no spaces between words: keep each phrase (and the name หมอดี) whole */
.footer-brand__text span {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .footer-brand__text { font-size: var(--fs-16); line-height: var(--lh-16); }
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
}
@media (min-width: 810px) {
  .social-list { gap: var(--space-16); }
}
@media (min-width: 1200px) {
  .social-list { gap: 34px; }
}
.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-footer-ink);
  color: var(--color-footer-ink);
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.social-link:hover {
  background: var(--color-white);
  color: var(--color-teal-950);
}

/* 4 · Bottom row: 30 px padding, space-between (stacked 30 px apart on mobile) */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-bottom-py);
  padding-block: var(--footer-bottom-py) calc(var(--footer-bottom-py) + var(--sticky-cta-height)); /* room for the mobile sticky CTA */
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-footer-ink);
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding-bottom: var(--footer-bottom-py);
  }
}
/* Right side: "ขับเคลื่อนโดย True HEALTH" + "Designed by …"; each part stays on one line,
   they wrap onto two lines on narrow screens */
.footer-credits {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-24);
  row-gap: var(--space-4);
}
.footer-credits > span {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .footer-credits {
    flex-shrink: 0;
    justify-content: flex-end;
  }
}
.footer-credits a {
  color: inherit;
  font-weight: var(--fw-emphasis);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--motion-fast) var(--ease-standard);
}
.footer-credits a:hover {
  text-decoration-color: currentColor;
}
.footer-bottom strong {
  font-weight: var(--fw-emphasis);
  color: var(--color-footer-ink);
}
/* Mobile menu: the two CTAs side by side, each as wide as its label */
.mobile-menu__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}
.mobile-menu__ctas .btn {
  height: 48px;
  gap: var(--space-8);
  padding-inline: var(--space-16) 6px;
  font-size: var(--fs-14);
  white-space: nowrap;
}
.mobile-menu__ctas .btn__icon {
  width: var(--btn-icon-sm);
  height: var(--btn-icon-sm);
}
/* Mobile sticky download bar */
/* Mobile: floating download pill, bottom-right (safe-area aware). Slides in after the hero. */
.sticky-cta {
  position: fixed;
  right: var(--space-16);
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky-cta);
  transform: translateY(calc(100% + var(--space-32)));
  visibility: hidden;
  transition:
    transform var(--motion-base) var(--ease-standard),
    visibility 0s linear var(--motion-base);
}
.sticky-cta .btn {
  height: 48px;
  gap: var(--space-8);
  padding-inline: var(--space-16) 6px;
  font-size: var(--fs-14);
  box-shadow: var(--shadow-lg);
}
.sticky-cta .btn__icon {
  width: var(--btn-icon-sm);
  height: var(--btn-icon-sm);
}
.sticky-cta.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--motion-base) var(--ease-standard), visibility 0s;
}
@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }
}
body[data-cta="b2b"] .sticky-cta,
html.is-locked .sticky-cta {
  display: none;
}