/* WAVO components — buttons, cards, hero, navbar, footer, forms, chips */

/* ===== Sequoia primitives (macOS Sequoia design language) ===== */

/* Material surface — translucent panel with backdrop blur (Liquid Glass) */
.wavo-material {
  background: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.wavo-material--thin { background: var(--wavo-mat-thin); }
.wavo-material--thick { background: var(--wavo-mat-thick); }
.wavo-material--chrome { background: var(--wavo-mat-chrome); }
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-material { background: var(--wavo-mat-fallback); }
}

/* ===== Mac window chrome primitive =====
   Mimics a floating macOS app window: translucent body, deep shadow so the
   panel floats off the page, a translucent header strip with a hairline,
   optional traffic-light dots in top-left. Wrap any major content surface
   (hero card, auth card, invoice, assessment, etc.) to give it a true
   "Mac app" feel. */
.wavo-window {
  background: var(--wavo-mat-thick);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window-lg);
  box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
  border: 1px solid var(--wavo-hairline);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.wavo-window--xl { border-radius: var(--wavo-r-window-xl); box-shadow: var(--wavo-depth-4), var(--wavo-liquid-stroke); }
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-window { background: var(--wavo-mat-fallback); }
}

.wavo-window__chrome {
  height: 32px;
  background: var(--wavo-gradient-glass);
  border-bottom: 0.5px solid var(--wavo-hairline);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
/* Mac traffic-light dots removed: they were non-functional decoration
   (no close/min/max behavior). Kept as a disabled rule so the
   --minimal variant override + a11y comments below stay coherent. */
.wavo-window__chrome::before {
  display: none;
}
.wavo-window__title {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--wavo-font-text);
  font-size: 13px;
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-ink-muted);
  letter-spacing: var(--wavo-tracking-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Traffic lights removed — no left offset needed; title centers naturally. */
  padding-right: 0;
}
.wavo-window__body {
  padding: var(--wavo-s-7);
  position: relative;
}
.wavo-window__body--snug { padding: var(--wavo-s-5); }
.wavo-window__body--flush { padding: 0; }

/* Minimal variant — no traffic lights, used for areas that want the window
   feel without the macOS app cosplay. */
.wavo-window--minimal .wavo-window__chrome::before { display: none; }
.wavo-window--minimal .wavo-window__title {
  margin-left: 0;
  padding-right: 0;
  text-align: left;
}

/* Responsive — at ≤560px, the macOS chrome decoration is too much; drop
   traffic-lights, shrink the chrome strip, and reduce body padding. */
@media (max-width: 560px) {
  .wavo-window { border-radius: var(--wavo-r-window); }
  .wavo-window__chrome { height: 24px; padding: 0 12px; }
  .wavo-window__chrome::before { display: none; }
  .wavo-window__title { margin-left: 0; padding-right: 0; font-size: 12px; text-align: left; }
  .wavo-window__body { padding: var(--wavo-s-5); }
}

/* Print — the chrome strip is decorative; collapse it so printed pages look
   like proper documents (no traffic-light dots on an exam letter or invoice). */
@media print {
  .wavo-window {
    box-shadow: none;
    border: 1px solid #d0d0d0;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .wavo-window__chrome { display: none !important; }
}

/* Hero with Sequoia wallpaper-style gradient wash. Transparent base so the
   body wallpaper bleeds through; the ::before adds an additional vivid
   multi-stop blob layer on top, like a Sequoia login screen. */
.wavo-hero-sequoia {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
.wavo-hero-sequoia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wavo-gradient-wallpaper);
  opacity: 1;
  pointer-events: none;
}

/* Section wrapped in a translucent gradient — Sequoia glass over the body
   wallpaper. Was an opaque vertical linear gradient that hid the wallpaper;
   now a soft 55% white pane with backdrop blur so the desktop picture
   shows through. The diagonal overlay adds a slight Sequoia "sheen". */
.wavo-section--gradient {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.20) 100%),
    var(--wavo-mat-thin);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-section--gradient { background: var(--wavo-gradient-tint); }
}
@media (prefers-reduced-transparency: reduce) {
  .wavo-section--gradient {
    background: var(--wavo-gradient-tint);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== Sequoia hero — wallpaper-wash page headers ===== */
/* The hero wrapper applies the radial gradient wash. The inner is just a
   z-index/positioning context so content sits above the gradient pseudo;
   padding is owned by the .wavo-section / .wavo-section--tight on the
   outer element so the overhanging-navbar-logo clearance rule still wins.
   text-wrap: balance keeps marketing h1s from breaking awkwardly. */
.wavo-hero-sequoia__inner {
  position: relative;
  z-index: 1;
}
.wavo-hero-sequoia h1,
.wavo-hero-sequoia .wavo-page-header h1 {
  text-wrap: balance;
  letter-spacing: var(--wavo-tracking-tight);
}
.wavo-hero-sequoia .wavo-page-header__lede {
  text-wrap: pretty;
}
/* ===== Sequoia CTA — gradient-accent primary button with glow on hover ===== */
.wavo-btn--primary.wavo-btn--glow,
a.wavo-btn--primary.wavo-btn--glow,
button.wavo-btn--primary.wavo-btn--glow {
  background: var(--wavo-gradient-accent);
  background-color: var(--wavo-accent); /* fallback */
  box-shadow: var(--wavo-depth-2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
  isolation: isolate;
  transition: transform var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur) var(--wavo-ease-snap),
              filter var(--wavo-dur) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-btn--primary.wavo-btn--glow:hover,
  a.wavo-btn--primary.wavo-btn--glow:hover,
  button.wavo-btn--primary.wavo-btn--glow:hover {
    box-shadow: var(--wavo-depth-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
}
.wavo-btn--primary.wavo-btn--glow:active {
  transform: translateY(0) scale(0.98);
}

/* ===== Sequoia card — bigger radius, liquid stroke, spring lift =====
   Frosted-glass material so the body wallpaper shows through. */
.wavo-card.wavo-card--sequoia,
.wavo-card--sequoia {
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  background: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  transition: transform var(--wavo-dur) var(--wavo-ease-soft),
              box-shadow var(--wavo-dur) var(--wavo-ease-soft);
  position: relative;
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-card.wavo-card--sequoia,
  .wavo-card--sequoia { background: var(--wavo-bg-elevated); }
}
.wavo-card--sequoia::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 26%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}
.wavo-card--sequoia > * { position: relative; z-index: 2; }
@media (hover: hover) {
  .wavo-card--sequoia:hover {
    transform: translateY(-6px);
    box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
  }
}
.wavo-card--sequoia .wavo-card__media {
  border-top-left-radius: var(--wavo-r-window);
  border-top-right-radius: var(--wavo-r-window);
}
@media (prefers-reduced-motion: reduce) {
  .wavo-card--sequoia:hover { transform: none; }
}

/* ===== Sequoia chip — vibrancy active state ===== */
.wavo-chip--vibrancy {
  background: var(--wavo-vib-accent);
  color: var(--wavo-accent);
  border: 1px solid rgba(84, 113, 175, 0.18);
}
.wavo-chip--vibrancy:hover {
  background: rgba(84, 113, 175, 0.12);
  color: var(--wavo-accent-active);
}

/* ===== Sequoia pricebox — vibrancy-tinted glass ===== */
.wavo-pricebox--glass {
  border-radius: var(--wavo-r-window-lg);
  border: 1px solid rgba(84, 113, 175, 0.16);
  background:
    linear-gradient(180deg, rgba(84, 113, 175, 0.04) 0%, rgba(255, 255, 255, 0.6) 100%),
    var(--wavo-bg-elevated);
  box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
  position: relative;
  isolation: isolate;
}
.wavo-pricebox--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--wavo-inner-shine);
  pointer-events: none;
  z-index: 1;
}
.wavo-pricebox--glass > * { position: relative; z-index: 2; }

/* ===== Sequoia course-hero art — soft glow halo ===== */
.wavo-coursehero__art {
  position: relative;
  border-radius: var(--wavo-r-window-lg);
  overflow: hidden;
  margin-bottom: var(--wavo-s-6);
  aspect-ratio: 16 / 9;
  box-shadow:
    var(--wavo-depth-3),
    0 16px 56px rgba(84, 113, 175, 0.18),
    var(--wavo-liquid-stroke);
  border: 1px solid rgba(255, 255, 255, 0.55);
  isolation: isolate;
}
.wavo-coursehero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--wavo-inner-shine);
  pointer-events: none;
  z-index: 2;
}
.wavo-coursehero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .wavo-coursehero__art { border-radius: var(--wavo-r-window); }
}

/* ===== Sequoia feature media — glass-wrapped image card ===== */
.wavo-feature__media--glass,
.wavo-feature .wavo-feature__media--glass {
  border-radius: var(--wavo-r-window-lg);
  background: var(--wavo-bg-elevated);
  box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
  border: 1px solid rgba(255, 255, 255, 0.55);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wavo-feature__media--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--wavo-inner-shine);
  pointer-events: none;
  z-index: 2;
}

/* ===== Sequoia accordion — rounded items, spring motion ===== */
.wavo-accordion--sequoia {
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-3);
}
.wavo-accordion--sequoia .wavo-accordion__item {
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-window);
  background: var(--wavo-bg-elevated);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  overflow: hidden;
  transition: box-shadow var(--wavo-dur) var(--wavo-ease-soft),
              border-color var(--wavo-dur) var(--wavo-ease-soft);
}
.wavo-accordion--sequoia .wavo-accordion__item.is-open {
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  border-color: rgba(84, 113, 175, 0.22);
}
.wavo-accordion--sequoia .wavo-accordion__trigger {
  padding: var(--wavo-s-5) var(--wavo-s-6);
  font-size: var(--wavo-fs-h4);
  border-radius: inherit;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              color var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-accordion--sequoia .wavo-accordion__trigger:hover {
    background: var(--wavo-vib-accent);
  }
}
.wavo-accordion--sequoia .wavo-accordion__panel {
  transition: max-height var(--wavo-dur-slow) var(--wavo-ease-soft);
}
.wavo-accordion--sequoia .wavo-accordion__panel-inner {
  padding: 0 var(--wavo-s-6) var(--wavo-s-5);
}
.wavo-accordion--sequoia .wavo-accordion__icon {
  transition: transform var(--wavo-dur) var(--wavo-ease-spring);
}
@media (max-width: 560px) {
  .wavo-accordion--sequoia .wavo-accordion__trigger {
    padding: var(--wavo-s-4) var(--wavo-s-5);
  }
  .wavo-accordion--sequoia .wavo-accordion__panel-inner {
    padding: 0 var(--wavo-s-5) var(--wavo-s-4);
  }
}

/* ===== Sequoia quote — refined radius + soft depth ===== */
.wavo-quote--sequoia {
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  border-left: 3px solid var(--wavo-accent);
  border-radius: var(--wavo-r-window);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  padding: var(--wavo-s-6) var(--wavo-s-6);
}
@media (max-width: 560px) {
  .wavo-quote--sequoia { padding: var(--wavo-s-5); }
}

/* ===== Sequoia message-of-support card ===== */
.wavo-message--sequoia {
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-window);
  padding: var(--wavo-s-6);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  transition: transform var(--wavo-dur) var(--wavo-ease-soft),
              box-shadow var(--wavo-dur) var(--wavo-ease-soft),
              background var(--wavo-dur) var(--wavo-ease-soft);
  position: relative;
  isolation: isolate;
}
@media (hover: hover) {
  .wavo-message--sequoia:hover {
    transform: translateY(-3px);
    box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
    background:
      linear-gradient(180deg, var(--wavo-vib-accent) 0%, var(--wavo-bg-elevated) 60%);
  }
}
.wavo-message--sequoia .wavo-message__country {
  display: inline-flex;
  align-items: center;
  gap: var(--wavo-s-2);
  padding: 4px 12px;
  border-radius: var(--wavo-r-pill);
  background: var(--wavo-vib-accent);
  color: var(--wavo-accent);
  margin: 0;
  font-size: var(--wavo-fs-caption);
  float: right;
}
.wavo-message--sequoia::after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 560px) {
  .wavo-message--sequoia { padding: var(--wavo-s-5); }
}

/* ===== Sequoia filter chip — touch-friendly with vibrancy active ===== */
.wavo-chip--lg {
  height: 36px;
  padding: 0 16px;
  font-size: var(--wavo-fs-body-sm);
  font-weight: var(--wavo-weight-medium);
}
.wavo-chip--lg.wavo-chip--vibrancy.is-active,
.wavo-chip--lg.is-active {
  background: var(--wavo-gradient-accent);
  background-color: var(--wavo-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--wavo-depth-1);
}

/* ===== Sequoia stat — subtle ambient backdrop ===== */
.wavo-stat--sequoia {
  position: relative;
  padding: var(--wavo-s-5) var(--wavo-s-4);
  border-radius: var(--wavo-r-window);
  background: linear-gradient(180deg, var(--wavo-vib-accent) 0%, transparent 80%);
  transition: transform var(--wavo-dur) var(--wavo-ease-soft);
}
@media (hover: hover) {
  .wavo-stat--sequoia:hover { transform: translateY(-2px); }
}

/* ===== Sequoia membership / partner tile ===== */
.wavo-partner-tile {
  display: block;
  padding: var(--wavo-s-3);
  border-radius: var(--wavo-r-window);
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-1);
  transition: transform var(--wavo-dur) var(--wavo-ease-soft),
              box-shadow var(--wavo-dur) var(--wavo-ease-soft);
}
@media (hover: hover) {
  .wavo-partner-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--wavo-depth-3);
  }
}
.wavo-partner-tile img {
  border-radius: var(--wavo-r-md);
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Page-header eyebrow / h1 / lede on Sequoia hero ===== */
.wavo-hero-sequoia .wavo-page-header__eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--wavo-r-pill);
  background: var(--wavo-vib-accent);
  color: var(--wavo-accent);
  margin-bottom: var(--wavo-s-4);
}

/* ===== Buttons =====
   Sequoia motion: color swaps on snap-easing, transform on spring. Press
   compresses the surface (scale + depth-0); hover lifts 1px and brightens. */
.wavo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wavo-s-2);
  height: 44px;
  padding: 0 22px;
  font-family: var(--wavo-font-text);
  font-size: var(--wavo-fs-body);
  font-weight: var(--wavo-weight-regular);
  line-height: 1;
  border-radius: var(--wavo-r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--wavo-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              color var(--wavo-dur-fast) var(--wavo-ease-snap),
              border-color var(--wavo-dur-fast) var(--wavo-ease-snap),
              transform var(--wavo-dur) var(--wavo-ease-spring),
              box-shadow var(--wavo-dur) var(--wavo-ease-snap),
              filter var(--wavo-dur-fast) var(--wavo-ease-snap);
}
.wavo-btn:hover { text-decoration: none; }
@media (hover: hover) {
  .wavo-btn:hover { transform: translateY(-1px); }
}
.wavo-btn:active {
  transform: scale(0.97);
  box-shadow: var(--wavo-depth-0);
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              transform 80ms var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap);
}
.wavo-btn:focus-visible {
  outline: none;
  box-shadow: var(--wavo-depth-glow);
}
.wavo-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.wavo-btn--primary {
  background: var(--wavo-accent);
  color: #fff;
}
@media (hover: hover) {
  .wavo-btn--primary:hover {
    background: var(--wavo-accent-hover);
    color: #fff;
    box-shadow: var(--wavo-depth-2);
    filter: brightness(1.04);
  }
}
.wavo-btn--primary:active { background: var(--wavo-accent-active); filter: brightness(0.96); }

.wavo-btn--secondary {
  background: transparent;
  color: var(--wavo-accent);
  border-color: var(--wavo-accent);
}
@media (hover: hover) {
  .wavo-btn--secondary:hover {
    background: var(--wavo-accent);
    color: #fff;
    box-shadow: var(--wavo-depth-2);
  }
}

.wavo-btn--ghost {
  background: rgba(0, 0, 0, 0.04);
  color: var(--wavo-ink);
}
@media (hover: hover) {
  .wavo-btn--ghost:hover { background: rgba(0, 0, 0, 0.08); }
}

.wavo-btn--lg { height: 52px; padding: 0 28px; font-size: var(--wavo-fs-body-lg); }
.wavo-btn--sm { height: 36px; padding: 0 16px; font-size: var(--wavo-fs-body-sm); }
/* On touch viewports, lift wavo-btn--sm to a 44px tap target (Apple HIG). */
@media (max-width: 880px) and (pointer: coarse), (max-width: 560px) {
  .wavo-btn--sm { height: 44px; padding: 0 18px; }
}
.wavo-btn--block { display: flex; width: 100%; }

.wavo-link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wavo-s-1);
  color: var(--wavo-link);
  font-size: var(--wavo-fs-body);
  font-weight: var(--wavo-weight-regular);
  text-decoration: none;
  /* No gap/width transition on hover: animating `gap` is a layout
     property and reflows the row every frame (caused a visible
     "shaking" of the auth-row, e.g. Forgot password on the login
     page). The arrow's transform below gives the motion cue with
     zero reflow. */
}
.wavo-link-cta::after {
  content: "\203A"; /* U+203A — escaped so it renders regardless of how the CSS charset is interpreted */
  font-size: 1.1em;
  transition: transform var(--wavo-dur-fast) var(--wavo-ease);
}
@media (hover: hover) {
  .wavo-link-cta:hover { text-decoration: underline; }
  .wavo-link-cta:hover::after { transform: translateX(3px); }
}

/* ===== Chips =====
   Subtle scale + vibrancy tint on hover. Snap easing on color/background
   for a tight, responsive feel; spring on transform so the press feels
   alive without overshooting on small targets. */
.wavo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wavo-s-1);
  height: 28px;
  padding: 0 12px;
  font-size: var(--wavo-fs-caption);
  font-weight: var(--wavo-weight-medium);
  color: var(--wavo-ink-muted);
  background: var(--wavo-bg-tint);
  border-radius: var(--wavo-r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              color var(--wavo-dur-fast) var(--wavo-ease-snap),
              border-color var(--wavo-dur-fast) var(--wavo-ease-snap),
              transform var(--wavo-dur-fast) var(--wavo-ease-spring),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-chip:hover {
    background: var(--wavo-vib-accent);
    color: var(--wavo-accent);
    transform: scale(1.02);
  }
}
.wavo-chip:active { transform: scale(0.96); }
.wavo-chip:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow); }
.wavo-chip--active {
  background: var(--wavo-gradient-accent);
  background-color: var(--wavo-ink);
  color: #fff;
  box-shadow: var(--wavo-depth-1);
}
@media (hover: hover) {
  .wavo-chip--active:hover {
    background: var(--wavo-gradient-accent);
    background-color: var(--wavo-ink);
    color: #fff;
    filter: brightness(1.05);
  }
}

.wavo-chip--success { background: var(--wavo-success-bg); color: var(--wavo-success); }
.wavo-chip--danger { background: var(--wavo-danger-bg); color: var(--wavo-danger); }
.wavo-chip--brand { background: rgba(23, 41, 76, 0.08); color: var(--wavo-brand); }

/* ===== Card =====
   Floating Sequoia frosted glass over the desktop wallpaper. Background is
   the `--wavo-mat-regular` material (72% white) + saturating backdrop blur,
   so ~28% of the wallpaper bleeds through. Spring-lifted on hover (-6px)
   feels weighted and macOS-y when paired with depth-3. Media image scales
   subtly with a slow soft-easing so it reads as parallax not a snap. */
.wavo-card {
  background: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-lg);
  overflow: hidden;
  transition: transform 320ms var(--wavo-ease-spring),
              box-shadow var(--wavo-dur) var(--wavo-ease-soft),
              border-color var(--wavo-dur) var(--wavo-ease-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--wavo-hairline);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-card { background: var(--wavo-bg-elevated); }
}
/* Promote to its own compositor layer only while hover-capable users are
   actively pointing at the card. Avoids permanent will-change pressure
   (Lighthouse "Avoid non-composited animations" / GPU memory) on lists of
   8–24 cards. The `hover` selector engages the layer one frame before the
   transform begins, which is enough for Chromium/Safari to skip a paint. */
@media (hover: hover) {
  .wavo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--wavo-depth-3);
    will-change: transform;
  }
}
.wavo-card:focus-visible {
  outline: none;
  box-shadow: var(--wavo-depth-glow);
}
.wavo-card__media {
  /* display:block is load-bearing: this element is an <a> (inline by
     default), and aspect-ratio has no effect on an inline box — without
     it each card's media height collapsed to its image's intrinsic ratio
     (1:1 / 16:9 / 4:3 mixed). Block + aspect-ratio + object-fit:cover on
     the img gives every card one uniform 16:10 thumbnail. */
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.wavo-card__media img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--wavo-dur-slow) var(--wavo-ease-soft),
              opacity var(--wavo-dur) var(--wavo-ease-soft);
}
@media (hover: hover) {
  .wavo-card:hover .wavo-card__media img { transform: scale(1.03); }
}

/* Soft image fade-in — paired with JS handler. Images start transparent
   until the load event resolves; .is-loaded triggers the fade.
   Generic [data-wavo-fade] selector lower in this file handles the rest;
   these scoped rules just protect against the legacy element-level `img`
   styles in style.css from beating us via specificity. */
.wavo-card__media img[data-wavo-fade]:not(.is-loaded),
.wavo-feature__media img[data-wavo-fade]:not(.is-loaded) {
  opacity: 0;
}
.wavo-card__media img[data-wavo-fade].is-loaded,
.wavo-feature__media img[data-wavo-fade].is-loaded {
  opacity: 1;
}

.wavo-card__body {
  padding: var(--wavo-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-3);
  flex: 1;
}
.wavo-card__chips { display: flex; flex-wrap: wrap; gap: var(--wavo-s-1); min-height: 22px; }

/* Country flag badge on course cards — replaces the old text country chip. Flag art is an SVG
   from flagcdn (any ISO-3166 alpha-2 code); a GLOBAL country renders an inline globe instead. */
.wavo-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--wavo-surface, #fff);
}
.wavo-flag img,
.wavo-flag svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wavo-flag--global {
  color: var(--wavo-brand, #17294c);
  background: rgba(23, 41, 76, 0.06);
}
.wavo-flag--global svg { width: 18px; height: 18px; object-fit: contain; }
.wavo-card__title {
  font-family: var(--wavo-font-display);
  font-size: 19px;
  font-weight: var(--wavo-weight-semibold);
  line-height: 1.3;
  color: var(--wavo-ink);
  letter-spacing: var(--wavo-tracking-snug);
  margin: 0;
}
.wavo-card__title a { color: inherit; }
.wavo-card__title a:hover { color: var(--wavo-link); text-decoration: none; }
.wavo-card__meta {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wavo-s-3);
}
.wavo-card__footer {
  margin-top: auto;
  padding-top: var(--wavo-s-3);
  border-top: 1px solid var(--wavo-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wavo-card__price {
  font-family: var(--wavo-font-display);
  font-size: 17px;
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-ink);
}
.wavo-card__price--struck {
  color: var(--wavo-ink-muted);
  text-decoration: line-through;
  font-weight: var(--wavo-weight-regular);
  margin-right: var(--wavo-s-2);
}

/* NOTE: legacy .wavo-hero / .wavo-hero__* primitives have been retired.
   All marketing heroes now use .wavo-hero-sequoia (defined earlier) +
   .wavo-section / .wavo-section--tight for padding, with .wavo-page-header
   for the eyebrow/h1/lede block. Banners use .wavo-banner. */

/* Full-bleed banner — first section after navbar, edge to edge */
.wavo-banner {
  display: block;
  width: 100%;
  background: var(--wavo-bg-tint);
  overflow: hidden;
}
.wavo-banner > a,
.wavo-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.wavo-banner > a {
  transition: opacity var(--wavo-dur-fast) var(--wavo-ease);
}
.wavo-banner > a:hover { opacity: 0.94; }
/* When banner is the first section under the navbar, push it down so the
   overhanging 128px logo doesn't clip into the banner artwork. */
.wavo-banner--home { padding-top: 68px; }
@media (max-width: 880px) { .wavo-banner--home { padding-top: 32px; } }
@media (max-width: 560px) { .wavo-banner--home { padding-top: 0; } }

/* ===== Carousel wrapper (Apple-style prev/next over a scroll-snap rail) ===== */
.wavo-carousel { position: relative; }
.wavo-carousel__btn {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--wavo-mat-thick);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-2), var(--wavo-inner-shine);
  color: var(--wavo-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Snap easing for visual chrome (opacity / background / shadow);
     spring for the press transform so the button "settles" on release. */
  transition: opacity var(--wavo-dur) var(--wavo-ease-soft),
              transform var(--wavo-dur-fast) var(--wavo-ease-spring),
              background var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-carousel__btn:hover {
    /* Token-driven so dark mode lifts to elevated surface (#14171f) rather
       than a white pill that flares against a dark wallpaper. */
    background: var(--wavo-bg-elevated);
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--wavo-depth-3), var(--wavo-inner-shine);
  }
}
.wavo-carousel__btn:active {
  transform: translateY(-50%) scale(0.94);
  box-shadow: var(--wavo-depth-1);
}
.wavo-carousel__btn:focus-visible {
  outline: none;
  box-shadow: var(--wavo-depth-glow), var(--wavo-inner-shine);
}
.wavo-carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wavo-dur) var(--wavo-ease-soft);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-carousel__btn { background: var(--wavo-mat-fallback); }
}
.wavo-carousel__btn--prev { left: -22px; }
.wavo-carousel__btn--next { right: -22px; }
.wavo-carousel__btn svg { width: 18px; height: 18px; }

/* Buttons hide on touch/small screens — swipe-only there */
@media (max-width: 880px) { .wavo-carousel__btn { display: none; } }
@media (hover: none) and (pointer: coarse) { .wavo-carousel__btn { display: none; } }

/* Dot indicators — visual size stays Sequoia-small, but the actual hit
   target is 24×24 to satisfy WCAG 2.5.8 Target Size (Minimum). The dot
   visual is drawn via the inner pseudo so the button itself can be a
   comfortable tap target. */
.wavo-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--wavo-s-4);
}
.wavo-carousel__dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap);
}
.wavo-carousel__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wavo-hairline-strong);
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap),
              transform var(--wavo-dur) var(--wavo-ease-spring);
}
.wavo-carousel__dot.is-active::before {
  background: var(--wavo-accent);
  transform: scale(1.4);
}
.wavo-carousel__dot:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow); }

/* ===== Scroll rail (Apple TV+ horizontal) ===== */
.wavo-rail {
  display: flex;
  gap: var(--wavo-s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: var(--wavo-container-padding);
  padding-bottom: var(--wavo-s-4);
  margin: 0 calc(var(--wavo-container-padding) * -1);
  padding-left: var(--wavo-container-padding);
  padding-right: var(--wavo-container-padding);
  -ms-overflow-style: none;
  scrollbar-width: thin;
}
.wavo-rail > * {
  flex: 0 0 clamp(260px, 28vw, 340px);
  scroll-snap-align: start;
}

/* Carousel rails are driven by the prev/next buttons on desktop — no free horizontal
   scroll and no scrollbar. Touch devices (phone/tablet) keep native swipe (their arrows
   are already hidden via the (hover:none) query). wavo.js scrolls the rail programmatically
   (scrollBy/scrollTo), which still works under overflow:hidden, so arrows, dots and the
   keyboard left/right shortcuts are unaffected. Scoped to .wavo-carousel so any standalone
   .wavo-rail keeps its free scroll. */
.wavo-carousel .wavo-rail {
  overflow-x: hidden;
  scrollbar-width: none;
}
.wavo-carousel .wavo-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (hover: none) and (pointer: coarse) {
  .wavo-carousel .wavo-rail { overflow-x: auto; }
}

/* ===== Navbar — Sequoia Liquid Glass ===== */
.wavo-navbar {
  position: sticky;
  top: 0;
  z-index: var(--wavo-z-navbar);
  height: var(--wavo-navbar-h);
  /* Thin material at rest; thickens on scroll. The fallback solid bg keeps
     the bar legible if backdrop-filter is unsupported. */
  background: var(--wavo-mat-thin);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-bottom: 1px solid transparent;
  /* Liquid stroke: 1px inset shine on top + 1px hairline below. Two
     box-shadows keep the border slot free for state changes. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 0 var(--wavo-hairline);
  /* PERF: do NOT transition backdrop-filter — it forces a full recomposite +
     repaint of every pixel behind the sticky navbar on every animation frame.
     The blur "step" from thin → strong on scroll is imperceptible during the
     280ms background fade, so it can swap instantly. */
  transition:
    background var(--wavo-dur) var(--wavo-ease-soft),
    box-shadow var(--wavo-dur) var(--wavo-ease-soft);
  overflow: visible; /* allow logo to overhang */
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-navbar { background: var(--wavo-mat-fallback); }
}
/* Sequoia adapts translucency to scroll position — once you scroll, the bar
   densifies into a chrome material with a soft drop shadow. */
.wavo-navbar.is-scrolled {
  background: var(--wavo-mat-chrome);
  backdrop-filter: var(--wavo-mat-blur-strong);
  -webkit-backdrop-filter: var(--wavo-mat-blur-strong);
  /* Token-driven drop shadow (depth-2 deepens in dark mode) so the scrolled
     navbar reads as floating in both light and dark. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 var(--wavo-hairline),
    var(--wavo-depth-2);
}
/* Desktop: flat, solid navbar — custom background + no box-shadow at rest or on scroll. (Mobile keeps
   the glass look.) Both states are listed so .is-scrolled's higher specificity can't re-add them. */
@media (min-width: 881px) {
  .wavo-navbar,
  .wavo-navbar.is-scrolled {
    background: rgb(245 246 251);
    box-shadow: none;
  }
}

.wavo-navbar__brand {
  position: relative;
  z-index: 2;          /* keep overhanging logo above page content */
  align-self: flex-start; /* anchor to top of navbar so logo top isn't clipped */
  padding-top: 6px;    /* small breathing room from navbar top edge */
}
.wavo-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--wavo-container-max);
  margin: 0 auto;
  padding: 0 var(--wavo-container-padding);
  gap: var(--wavo-s-5);
}
.wavo-navbar__brand {
  display: flex;
  align-items: center;
  color: var(--wavo-ink);
  font-weight: var(--wavo-weight-semibold);
}
.wavo-navbar__brand img {
  height: 128px;       /* much bigger than the 76px menu row — overhangs */
  width: auto;
  display: block;
  /* Sequoia logo float — soft drop shadow + tiny lift on hover.
     filter:drop-shadow respects alpha of the transparent PNG. */
  filter: drop-shadow(0 6px 18px rgba(23, 41, 76, 0.08));
  transition: transform var(--wavo-dur) var(--wavo-ease-snap),
              filter var(--wavo-dur) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-navbar__brand:hover img {
    transform: translateY(-1px);
    filter: drop-shadow(0 10px 24px rgba(23, 41, 76, 0.14));
  }
}
@media (max-width: 880px) { .wavo-navbar__brand img { height: 92px; } }
@media (max-width: 560px) { .wavo-navbar__brand img { height: 64px; } }
.wavo-navbar__brand:hover { text-decoration: none; }

.wavo-navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--wavo-s-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
/* Pill-style nav links — vibrancy tint on hover. Sequoia uses small padded
   pills (not bare text) for top-level nav. */
.wavo-navbar__nav a {
  position: relative;
  color: var(--wavo-ink);
  font-size: 14px;
  font-weight: var(--wavo-weight-medium);
  letter-spacing: var(--wavo-tracking-normal);
  padding: 8px 14px;
  border-radius: var(--wavo-r-pill);
  transition:
    background var(--wavo-dur-fast) var(--wavo-ease-snap),
    color var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-navbar__nav a:hover {
    background: var(--wavo-vib-accent);
    color: var(--wavo-accent);
    text-decoration: none;
  }
}
.wavo-navbar__nav a:active { background: rgba(84, 113, 175, 0.12); }
/* Items that should only appear inside the mobile drawer (Sign in, Profile, etc). */
.wavo-navbar__nav-mobile-only { display: none; }

.wavo-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--wavo-s-2);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .wavo-navbar__actions { gap: var(--wavo-s-1); }
}
@media (max-width: 380px) {
  .wavo-navbar__inner { padding: 0 var(--wavo-s-4); gap: var(--wavo-s-2); }
  /* Hide top-bar auth buttons on very narrow screens; they live in the drawer. */
  .wavo-navbar__actions > a.wavo-btn { display: none; }
}
/* Search + menu icon buttons — Sequoia circular glass with vibrancy hover */
.wavo-navbar__search-btn,
.wavo-navbar__menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--wavo-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--wavo-dur-fast) var(--wavo-ease-snap),
    color var(--wavo-dur-fast) var(--wavo-ease-snap),
    box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap),
    transform var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-navbar__search-btn:hover,
  .wavo-navbar__menu-btn:hover {
    background: var(--wavo-vib-accent);
    color: var(--wavo-accent);
  }
}
.wavo-navbar__search-btn:active,
.wavo-navbar__menu-btn:active { transform: scale(0.94); }
.wavo-navbar__search-btn[aria-expanded="true"],
.wavo-navbar__menu-btn[aria-expanded="true"] {
  background: var(--wavo-vib-accent);
  color: var(--wavo-accent);
  box-shadow: inset 0 0 0 1px rgba(84, 113, 175, 0.18);
}
.wavo-navbar__menu-btn { display: none; }

@media (max-width: 880px) {
  .wavo-navbar__nav { display: none; }
  .wavo-navbar__menu-btn { display: inline-flex; }
  /* Mobile drawer — full-screen Sequoia material with hierarchical menu */
  .wavo-navbar__nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--wavo-navbar-h) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--wavo-s-6) var(--wavo-container-padding) calc(var(--wavo-s-7) + env(safe-area-inset-bottom, 0px));
    gap: var(--wavo-s-2);
    background: var(--wavo-mat-chrome);
    backdrop-filter: var(--wavo-mat-blur-strong);
    -webkit-backdrop-filter: var(--wavo-mat-blur-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--wavo-hairline);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: wavo-drawer-in var(--wavo-dur) var(--wavo-ease-snap);
  }
  @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .wavo-navbar__nav.is-open { background: var(--wavo-bg-elevated); }
  }
  @keyframes wavo-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .wavo-navbar__nav.is-open a {
    font-size: 20px;
    font-weight: var(--wavo-weight-semibold);
    letter-spacing: var(--wavo-tracking-snug);
    padding: var(--wavo-s-3) var(--wavo-s-4);
    border-radius: var(--wavo-r-control);
    line-height: 1.2;
  }
  @media (hover: hover) {
    .wavo-navbar__nav.is-open a:hover {
      background: var(--wavo-vib-accent);
    }
  }
  .wavo-navbar__nav.is-open .wavo-navbar__nav-mobile-only {
    display: block;
    font-size: 16px;
    font-weight: var(--wavo-weight-regular);
    color: var(--wavo-ink-muted);
  }
  .wavo-navbar__nav.is-open .wavo-navbar__nav-mobile-only:first-of-type {
    margin-top: var(--wavo-s-4);
    padding-top: var(--wavo-s-5);
    border-top: 1px solid var(--wavo-hairline);
  }
}

/* Search input — Sequoia thin material with soft glow on focus */
.wavo-navbar__search {
  position: relative;
  display: none;
  flex: 1;
  max-width: 480px;
}
.wavo-navbar__search.is-open { display: block; }
.wavo-navbar__search input {
  width: 100%;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--wavo-r-pill);
  border: 1px solid var(--wavo-hairline);
  background: var(--wavo-mat-thin);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  color: var(--wavo-ink);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(23, 41, 76, 0.04);
  transition:
    border-color var(--wavo-dur-fast) var(--wavo-ease-snap),
    background var(--wavo-dur-fast) var(--wavo-ease-snap),
    box-shadow var(--wavo-dur) var(--wavo-ease-snap);
}
.wavo-navbar__search input::placeholder {
  color: var(--wavo-ink-subtle);
}
.wavo-navbar__search input:focus {
  border-color: rgba(84, 113, 175, 0.45);
  background: var(--wavo-bg-elevated);
  box-shadow: var(--wavo-depth-glow);
}
/* On narrow screens, pop search as a full-width row below the navbar so it
   doesn't crush the actions row. */
@media (max-width: 880px) {
  .wavo-navbar__search.is-open {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--wavo-navbar-h);
    max-width: none;
    background: var(--wavo-mat-chrome);
    backdrop-filter: var(--wavo-mat-blur-strong);
    -webkit-backdrop-filter: var(--wavo-mat-blur-strong);
    padding: var(--wavo-s-3) var(--wavo-container-padding);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--wavo-hairline);
    z-index: var(--wavo-z-navbar);
  }
  @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .wavo-navbar__search.is-open { background: var(--wavo-bg-elevated); }
  }
  .wavo-navbar__search.is-open input {
    height: 44px; /* mobile tap target */
    font-size: 16px; /* prevent iOS auto-zoom */
  }
}

/* ===== Footer — Sequoia thin material with wallpaper fade-in ===== */
.wavo-footer {
  position: relative;
  /* Soft gradient flow into the tint band — feels like the page is settling
     onto a frosted shelf instead of slamming into a coloured block. */
  background:
    linear-gradient(180deg, transparent 0%, var(--wavo-bg-tint) 88px),
    var(--wavo-bg-tint);
  padding: calc(var(--wavo-s-8) + 24px) 0 var(--wavo-s-5);
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
}
/* 1px hairline above the footer, sat on the gradient — Sequoia uses a soft
   shine rather than a hard border line for footer separation. */
.wavo-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wavo-hairline) 18%, var(--wavo-hairline) 82%, transparent);
  pointer-events: none;
}
.wavo-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--wavo-s-6);
  padding-bottom: var(--wavo-s-7);
}
@media (max-width: 880px) {
  .wavo-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wavo-footer__grid { grid-template-columns: 1fr; }
}
.wavo-footer h4 {
  font-size: var(--wavo-fs-caption);
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--wavo-s-4);
}
.wavo-footer ul { list-style: none; margin: 0; padding: 0; }
.wavo-footer li { margin-bottom: var(--wavo-s-2); }
.wavo-footer a {
  color: var(--wavo-ink-muted);
  transition: color var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-footer a:hover { color: var(--wavo-accent); text-decoration: none; }
}
.wavo-footer__brand img {
  max-width: 200px;
  margin-bottom: var(--wavo-s-3);
  filter: drop-shadow(0 4px 14px rgba(23, 41, 76, 0.06));
}
.wavo-footer__brand p { max-width: 36ch; }
.wavo-footer__bottom {
  padding-top: var(--wavo-s-5);
  /* Same hairline-with-fade treatment as the footer top edge */
  border-top: 1px solid transparent;
  background-image: linear-gradient(90deg, transparent, var(--wavo-hairline) 18%, var(--wavo-hairline) 82%, transparent);
  background-position: 0 0;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wavo-s-3);
  font-size: var(--wavo-fs-micro);
}
.wavo-footer__social {
  display: flex;
  gap: var(--wavo-s-2);
}
/* Glass icon buttons — translucent material with vibrancy hover */
.wavo-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wavo-mat-thin);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--wavo-hairline);
  color: var(--wavo-ink-muted);
  box-shadow: var(--wavo-inner-shine);
  transition:
    background var(--wavo-dur-fast) var(--wavo-ease-snap),
    color var(--wavo-dur-fast) var(--wavo-ease-snap),
    border-color var(--wavo-dur-fast) var(--wavo-ease-snap),
    transform var(--wavo-dur-fast) var(--wavo-ease-snap),
    box-shadow var(--wavo-dur) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-footer__social a:hover {
    background: var(--wavo-vib-accent);
    border-color: rgba(84, 113, 175, 0.25);
    color: var(--wavo-accent);
    transform: translateY(-1px);
    box-shadow: var(--wavo-depth-2), var(--wavo-inner-shine);
  }
}
.wavo-footer__social a:active { transform: scale(0.94); }
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-footer__social a { background: var(--wavo-bg-elevated); }
}

/* ===== Form fields (Apple ID style) ===== */
.wavo-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-1);
}
.wavo-field__label {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
  font-weight: var(--wavo-weight-medium);
}
.wavo-field__control {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wavo-hairline-strong);
  border-radius: var(--wavo-r-md);
  background: var(--wavo-bg-elevated);
  color: var(--wavo-ink);
  font-size: var(--wavo-fs-body);
  font-family: inherit;
  outline: none;
  /* Snap easing — feels precise rather than springy on text inputs. */
  transition: border-color var(--wavo-dur-fast) var(--wavo-ease-snap),
              background var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap);
  width: 100%;
}
textarea.wavo-field__control { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
select.wavo-field__control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.wavo-field__control:focus {
  border-color: var(--wavo-accent);
  /* Layered glow: faint inner ring + soft outer halo — replaces the flat
     4px focus square with Sequoia's softer two-stage focus indicator. */
  box-shadow:
    0 0 0 1px rgba(84, 113, 175, 0.45),
    0 0 0 4px color-mix(in srgb, var(--wavo-accent) 14%, transparent),
    0 6px 18px rgba(84, 113, 175, 0.14);
}
.wavo-field__control::placeholder { color: var(--wavo-ink-subtle); }
.wavo-field__hint { font-size: var(--wavo-fs-caption); color: var(--wavo-ink-muted); }
.wavo-field__error { font-size: var(--wavo-fs-caption); color: var(--wavo-danger); }
.wavo-field--invalid .wavo-field__control {
  border-color: var(--wavo-danger);
}
.wavo-field__control--otp {
  letter-spacing: 0.3em;
  text-align: center;
  font-size: 22px;
  font-family: var(--wavo-font-mono);
}

/* Auth card */
.wavo-auth {
  min-height: calc(100vh - var(--wavo-navbar-h));
  min-height: calc(100dvh - var(--wavo-navbar-h));
  display: grid;
  place-items: center;
  /* padding-top tuned to clear the overhanging navbar logo on desktop & tablet */
  padding: var(--wavo-s-7) var(--wavo-container-padding);
}
@media (min-width: 881px) {
  .wavo-auth { padding-top: max(88px, var(--wavo-s-7)); }
}
@media (min-width: 561px) and (max-width: 880px) {
  .wavo-auth { padding-top: max(56px, var(--wavo-s-7)); }
}
.wavo-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--wavo-bg-elevated);
  padding: var(--wavo-s-7) var(--wavo-s-6);
  border-radius: var(--wavo-r-xl);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-shadow-card);
}
/* Wider variant for multi-field forms (e.g. registration) */
.wavo-auth--wide .wavo-auth__card { max-width: 560px; }
/* For very tall forms, allow card to flow naturally instead of vertically centered */
@media (max-height: 820px) {
  .wavo-auth--wide { align-items: start; padding-top: var(--wavo-s-7); }
}
/* Short viewports (e.g. iPhone in landscape) — anchor any auth form to the top
   so the form is scrollable rather than clipped by `place-items: center`. */
@media (max-height: 640px) {
  .wavo-auth { align-items: start; padding-top: var(--wavo-s-5); padding-bottom: var(--wavo-s-5); }
}
/* Small phones — tighten card so content doesn't feel cramped against viewport edges */
@media (max-width: 560px) {
  .wavo-auth { padding: var(--wavo-s-5) var(--wavo-s-3); }
  .wavo-auth__card {
    padding: var(--wavo-s-6) var(--wavo-s-5);
    border-radius: var(--wavo-r-lg);
  }
  .wavo-auth__title { font-size: 24px; }
}
/* Very small phones (iPhone SE, Galaxy Fold closed) */
@media (max-width: 400px) {
  .wavo-auth { padding: var(--wavo-s-4) var(--wavo-s-2); }
  .wavo-auth__card {
    padding: var(--wavo-s-5) var(--wavo-s-4);
  }
  .wavo-auth__title { font-size: 22px; }
  .wavo-auth__brand img { max-width: 128px; }
}
.wavo-auth__brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--wavo-s-5);
}
.wavo-auth__brand img { max-width: 160px; }
.wavo-auth__title {
  font-family: var(--wavo-font-display);
  font-size: 28px;
  font-weight: var(--wavo-weight-semibold);
  text-align: center;
  margin-bottom: var(--wavo-s-2);
}
.wavo-auth__sub {
  text-align: center;
  color: var(--wavo-ink-muted);
  margin-bottom: var(--wavo-s-6);
}
.wavo-auth__form { display: flex; flex-direction: column; gap: var(--wavo-s-4); }
.wavo-auth__footer {
  text-align: center;
  margin-top: var(--wavo-s-5);
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
}
.wavo-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wavo-s-3);
}

/* Table */
.wavo-table-wrap {
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wavo-table-wrap > table { min-width: 100%; }
.wavo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wavo-fs-body-sm);
}
.wavo-table thead tr {
  background: var(--wavo-bg-tint);
  border-bottom: 1px solid var(--wavo-hairline);
}
.wavo-table th {
  text-align: left;
  padding: var(--wavo-s-4) var(--wavo-s-5);
  font-size: var(--wavo-fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-ink-muted);
}
.wavo-table td {
  padding: var(--wavo-s-4) var(--wavo-s-5);
  border-bottom: 1px solid var(--wavo-hairline);
  vertical-align: middle;
}
.wavo-table tbody tr:last-child td { border-bottom: 0; }

/* Empty state */
.wavo-empty {
  text-align: center;
  padding: var(--wavo-s-9) var(--wavo-s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wavo-s-3);
}
.wavo-empty > * { margin: 0; }
.wavo-empty h3 { font-size: var(--wavo-fs-h3); color: var(--wavo-ink); letter-spacing: var(--wavo-tracking-snug); }
.wavo-empty p { color: var(--wavo-ink-muted); max-width: 48ch; }
.wavo-empty .wavo-btn { margin-top: var(--wavo-s-3); }

/* Membership block */
.wavo-membership {
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-xl);
  overflow: hidden;
}
.wavo-membership__header {
  padding: var(--wavo-s-5) var(--wavo-s-6);
  border-bottom: 1px solid var(--wavo-hairline);
}
.wavo-membership__title {
  font-size: var(--wavo-fs-h3);
  margin: 0;
}
.wavo-membership__body {
  padding: var(--wavo-s-6);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--wavo-s-6);
  align-items: start;
}
@media (max-width: 768px) {
  .wavo-membership__body { grid-template-columns: 1fr; }
}
.wavo-membership__media {
  display: block;
  border-radius: var(--wavo-r-lg);
  overflow: hidden;
  cursor: pointer;
}
.wavo-membership__media img { width: 100%; display: block; }
.wavo-membership__content {
  color: var(--wavo-ink-muted);
  line-height: var(--wavo-lh-loose);
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-5);
}
.wavo-membership__footer {
  padding: var(--wavo-s-5) var(--wavo-s-6);
  background: var(--wavo-bg-tint);
  border-top: 1px solid var(--wavo-hairline);
}

/* Form actions row (right-aligned submit buttons) */
.wavo-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wavo-s-3);
  padding-top: var(--wavo-s-4);
}

/* Consent / inline checkbox label (terms, remember-me) */
.wavo-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--wavo-s-2);
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink-muted);
  line-height: var(--wavo-lh-normal);
  cursor: pointer;
}
.wavo-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.wavo-consent--inline { align-items: center; }
.wavo-consent--inline input[type="checkbox"] { margin-top: 0; }

/* ===== Feature row ===== */
.wavo-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wavo-s-8);
  align-items: center;
}
@media (max-width: 880px) {
  .wavo-feature { grid-template-columns: 1fr; gap: var(--wavo-s-5); }
}
.wavo-feature--reverse > :first-child { order: 2; }
@media (max-width: 880px) {
  .wavo-feature--reverse > :first-child { order: 0; }
}
.wavo-feature__title {
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h2);
  letter-spacing: var(--wavo-tracking-snug);
  margin: 0 0 var(--wavo-s-4);
  line-height: var(--wavo-lh-snug);
}
.wavo-feature__media {
  border-radius: var(--wavo-r-xl);
  overflow: hidden;
  box-shadow: var(--wavo-shadow-card);
}

/* ===== Stat ===== */
.wavo-stat__value {
  font-family: var(--wavo-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-accent);
  letter-spacing: var(--wavo-tracking-tight);
  line-height: 1;
  margin-bottom: var(--wavo-s-2);
}
.wavo-stat__label {
  font-size: var(--wavo-fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wavo-ink-muted);
  font-weight: var(--wavo-weight-medium);
}

/* ===== Accordion ===== */
.wavo-accordion { border-top: 1px solid var(--wavo-hairline); }
.wavo-accordion__item { border-bottom: 1px solid var(--wavo-hairline); }
.wavo-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--wavo-s-5) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h4);
  font-weight: var(--wavo-weight-medium);
  color: var(--wavo-ink);
}
.wavo-accordion__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: var(--wavo-s-4);
  /* Plus icon rotates 45deg with a spring — a touch of overshoot reads as
     a satisfying mechanical click on open. */
  transition: transform 380ms var(--wavo-ease-spring);
}
.wavo-accordion__item.is-open .wavo-accordion__icon { transform: rotate(45deg); }
.wavo-accordion__panel {
  max-height: 0;
  overflow: hidden;
  /* Soft easing for the max-height reveal — Sequoia's content panes ease
     out, never bounce. */
  transition: max-height 320ms var(--wavo-ease-soft);
}
.wavo-accordion__item.is-open .wavo-accordion__panel { max-height: 2000px; }
.wavo-accordion__panel-inner {
  padding-bottom: var(--wavo-s-5);
  color: var(--wavo-ink-muted);
  line-height: var(--wavo-lh-loose);
}

/* ===== Price box (sticky on course detail) ===== */
.wavo-pricebox {
  background: var(--wavo-bg-elevated);
  border-radius: var(--wavo-r-xl);
  border: 1px solid var(--wavo-hairline);
  padding: var(--wavo-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-4);
}
@media (max-width: 560px) {
  .wavo-pricebox { padding: var(--wavo-s-5); }
}
.wavo-pricebox__amount {
  font-family: var(--wavo-font-display);
  font-size: clamp(24px, 3.5vw, 30px);
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-ink);
  line-height: 1.1;
}
.wavo-pricebox__struck {
  color: var(--wavo-ink-muted);
  text-decoration: line-through;
  font-weight: var(--wavo-weight-regular);
  font-size: clamp(15px, 2.5vw, 18px);
  margin-right: var(--wavo-s-2);
  display: inline-block;
}
.wavo-pricebox__meta {
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-2);
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink-muted);
}
.wavo-pricebox__meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--wavo-s-3);
  padding: var(--wavo-s-2) 0;
  border-bottom: 1px solid var(--wavo-hairline);
}
.wavo-pricebox__meta-row:last-child { border-bottom: 0; }
.wavo-pricebox__meta-row > :first-child {
  color: var(--wavo-ink-muted);
  flex-shrink: 0;
}
.wavo-pricebox__meta-row > :last-child {
  color: var(--wavo-ink);
  text-align: right;
  word-break: break-word;
  min-width: 0;
}

/* ===== Course detail hero ===== */
.wavo-coursehero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--wavo-s-7);
  padding-top: 0;
  padding-bottom: var(--wavo-s-7);
  align-items: start;
}
@media (max-width: 880px) {
  .wavo-coursehero { grid-template-columns: 1fr; gap: var(--wavo-s-5); }
}
.wavo-coursehero__title {
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h1);
  letter-spacing: var(--wavo-tracking-tight);
  line-height: var(--wavo-lh-tight);
  margin-bottom: var(--wavo-s-5);
}
.wavo-coursehero__sticky {
  position: sticky;
  top: calc(var(--wavo-navbar-h) + var(--wavo-s-4));
}
@media (max-width: 880px) {
  .wavo-coursehero__sticky { position: static; }
}

/* ===== Page header (consistent eyebrow + h1 + lede across pages) ===== */
.wavo-page-header {
  margin-bottom: var(--wavo-s-6);
}
.wavo-page-header__eyebrow {
  font-size: var(--wavo-fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--wavo-weight-semibold);
  color: var(--wavo-accent);
  margin: 0 0 var(--wavo-s-3);
}
.wavo-page-header h1,
.wavo-page-header h2 {
  margin: 0 0 var(--wavo-s-3);
}
.wavo-page-header__lede {
  font-size: var(--wavo-fs-body-lg);
  line-height: var(--wavo-lh-normal);
  color: var(--wavo-ink-muted);
  max-width: 60ch;
  margin: 0;
}
/* Center modifier — use on hero / marketing / announcement headers.
   Each child is targeted explicitly so legacy rules can't beat us via specificity. */
.wavo-page-header--center,
.wavo-page-header--center .wavo-page-header__eyebrow,
.wavo-page-header--center h1,
.wavo-page-header--center h2,
.wavo-page-header--center h3,
.wavo-page-header--center .wavo-page-header__lede,
.wavo-page-header--center p {
  text-align: center !important;
}
.wavo-page-header--center .wavo-page-header__lede {
  margin-left: auto;
  margin-right: auto;
}
/* The legacy h1/h2 are display:inline-block with an ::after underline that
   anchors left:0. Force block + auto centering so the heading + bar align. */
.wavo-page-header--center h1,
.wavo-page-header--center h2,
.wavo-page-header--center h3 {
  display: block !important;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Quote card (announcements, testimonials) ===== */
.wavo-quote {
  background: var(--wavo-bg-tint);
  border-left: 3px solid var(--wavo-accent);
  border-radius: var(--wavo-r-md);
  padding: var(--wavo-s-5) var(--wavo-s-6);
  margin: var(--wavo-s-5) 0;
}
@media (max-width: 560px) {
  .wavo-quote { padding: var(--wavo-s-4) var(--wavo-s-5); }
}
.wavo-quote__text {
  font-style: italic;
  font-size: var(--wavo-fs-body);
  line-height: var(--wavo-lh-loose);
  color: var(--wavo-ink);
  margin: 0 0 var(--wavo-s-3);
}
.wavo-quote__cite {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
  margin: 0;
  text-align: right;
}
.wavo-quote__cite strong { color: var(--wavo-ink); }

/* Message-of-support card (announcement) */
.wavo-message {
  background: var(--wavo-bg-elevated);
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-lg);
  padding: var(--wavo-s-5) var(--wavo-s-6);
  margin-bottom: var(--wavo-s-4);
}
@media (max-width: 560px) {
  .wavo-message { padding: var(--wavo-s-4) var(--wavo-s-5); }
}
.wavo-message__title {
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h4);
  font-weight: var(--wavo-weight-semibold);
  margin: 0 0 var(--wavo-s-3);
  color: var(--wavo-brand);
}
.wavo-message__text {
  font-style: italic;
  line-height: var(--wavo-lh-loose);
  color: var(--wavo-ink-muted);
  margin: 0 0 var(--wavo-s-3);
}
.wavo-message__country {
  text-align: right;
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
  margin: 0;
}

/* Long-form content typography (for raw HTML inside @Html.Raw or rich text) */
.wavo-prose {
  color: var(--wavo-ink);
  line-height: var(--wavo-lh-loose);
  font-size: var(--wavo-fs-body);
}
.wavo-prose > * + * { margin-top: var(--wavo-s-4); }
.wavo-prose h2 { margin-top: var(--wavo-s-7); margin-bottom: var(--wavo-s-3); }
.wavo-prose h3 { margin-top: var(--wavo-s-6); margin-bottom: var(--wavo-s-3); }
.wavo-prose ul, .wavo-prose ol { padding-left: var(--wavo-s-5); }
.wavo-prose li + li { margin-top: var(--wavo-s-2); }
.wavo-prose blockquote {
  border-left: 3px solid var(--wavo-accent);
  padding-left: var(--wavo-s-4);
  color: var(--wavo-ink-muted);
  font-style: italic;
  margin: var(--wavo-s-5) 0;
}

/* ===== Notice / alert ===== */
.wavo-notice {
  padding: var(--wavo-s-4) var(--wavo-s-5);
  border-radius: var(--wavo-r-md);
  background: var(--wavo-bg-tint);
  border-left: 3px solid var(--wavo-accent);
  font-size: var(--wavo-fs-body-sm);
}
.wavo-notice--success { background: var(--wavo-success-bg); border-left-color: var(--wavo-success); }
.wavo-notice--danger { background: var(--wavo-danger-bg); border-left-color: var(--wavo-danger); }
.wavo-notice--warning { background: var(--wavo-warning-bg); border-left-color: var(--wavo-warning); }

/* ===== Loading dot ===== */
.wavo-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--wavo-hairline);
  border-top-color: var(--wavo-accent);
  border-radius: 50%;
  animation: wavo-spin 0.8s linear infinite;
}
@keyframes wavo-spin { to { transform: rotate(360deg); } }

/* ===== Filter bar (catalog) =====
   Country / Category / Keyword / Submit — stacks on mobile, row on desktop. */
.wavo-filterbar {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--wavo-s-3);
  align-items: end;
}
/* The typeahead's absolutely-positioned dropdown must overlay the course cards
   below it. Those cards use backdrop-filter (a stacking context that otherwise
   composites over the dropdown), so lift the whole typeahead into its own
   stacking context above them. Sits well below the navbar (z 1000). */
.wavo-typeahead {
  position: relative;
  z-index: 40;
}
.wavo-filterbar__btn {
  height: 48px;
}

/* AJAX search/filter loading overlay (Course/List) — a frosted veil + spinner over the
   results while a request is in flight. Toggled by .is-loading on the wrapper; the overlay
   is a sibling of the swapped grid so innerHTML replacement never removes it. */
.wavo-search-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(48px, 14vh, 140px);
  background: var(--wavo-mat-thin, rgba(255, 255, 255, 0.55));
  backdrop-filter: var(--wavo-mat-blur, saturate(180%) blur(8px));
  -webkit-backdrop-filter: var(--wavo-mat-blur, saturate(180%) blur(8px));
  border-radius: var(--wavo-r-window, 26px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--wavo-ease, ease), visibility 160ms;
}
.is-loading > .wavo-search-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wavo-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--wavo-hairline-strong, rgba(23, 41, 76, 0.2));
  border-top-color: var(--wavo-accent, #5471af);
  border-radius: 50%;
  animation: wavo-spin 0.7s linear infinite;
}
@keyframes wavo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wavo-spinner { animation-duration: 1.6s; } }
@media (max-width: 880px) {
  .wavo-filterbar {
    grid-template-columns: 1fr 1fr;
  }
  .wavo-filterbar > :nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .wavo-filterbar {
    grid-template-columns: 1fr;
  }
  .wavo-filterbar > :nth-child(3),
  .wavo-filterbar > :nth-child(4) {
    grid-column: auto;
  }
}

/* ===== Cookie consent — Sequoia notification card ===== */
.wavo-cookie {
  position: fixed;
  bottom: var(--wavo-s-5);
  right: var(--wavo-s-5);
  max-width: 380px;
  /* Thick liquid glass — translucent material + saturated blur. Sits on the
     page like a macOS notification banner. */
  background: var(--wavo-mat-thick);
  backdrop-filter: var(--wavo-mat-blur-strong);
  -webkit-backdrop-filter: var(--wavo-mat-blur-strong);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--wavo-r-window);
  padding: var(--wavo-s-5);
  box-shadow: var(--wavo-depth-4), var(--wavo-inner-shine);
  z-index: var(--wavo-z-toast);
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink);
  /* Never let a long consent string + tall content make the banner
     dominate a short viewport — cap height and scroll inside. */
  max-height: calc(100vh - 2 * var(--wavo-s-5));
  overflow-y: auto;
  animation: wavo-cookie-in var(--wavo-dur-slow) var(--wavo-ease-snap) 200ms both;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-cookie { background: var(--wavo-mat-fallback); }
}
@keyframes wavo-cookie-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wavo-cookie { animation: none; }
}
.wavo-cookie p { color: var(--wavo-ink); }
@media (max-width: 560px) {
  .wavo-cookie {
    left: var(--wavo-s-4);
    right: var(--wavo-s-4);
    bottom: var(--wavo-s-4);
    max-width: none;
  }
}
.wavo-cookie__actions {
  display: flex;
  gap: var(--wavo-s-2);
  margin-top: var(--wavo-s-4);
  justify-content: flex-end;
}
/* Sequoia filled-pill on the primary action — gradient + inner shine */
.wavo-cookie__actions .wavo-btn--primary {
  background: var(--wavo-gradient-accent);
  box-shadow: var(--wavo-depth-1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.wavo-cookie__actions .wavo-btn--primary:hover {
  background: var(--wavo-gradient-accent);
  filter: brightness(1.06);
  box-shadow: var(--wavo-depth-2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Cookie clearance — the banner is position:fixed, so it floats over
   whatever is at the bottom of the page (footer links, a last card CTA,
   a sticky pay bar). Reserve scroll space at the page foot ONLY while the
   banner is in the DOM and visible. wavo.js calls el.remove() on ack, so
   :has() stops matching and the gap disappears — no permanent dead space.
   Mobile clearance is larger because the banner spans full width there. */
@supports selector(:has(*)) {
  body.wavo-body:has(.wavo-cookie:not([hidden])) {
    padding-bottom: 136px;
  }
  @media (max-width: 560px) {
    body.wavo-body:has(.wavo-cookie:not([hidden])) {
      padding-bottom: 168px;
    }
  }
}

/* =====================================================================
   Legacy CSS overrides
   ---------------------------------------------------------------------
   The legacy /assets-user/css/style.css + bootstrap.css are still loaded
   globally during the design-system migration. They set aggressive
   element-level rules (input[type=...], h1, label, .btn) that destroy
   the wavo design. The block below boosts specificity on wavo-*
   components so they win against the legacy rules, without touching
   the legacy stylesheets or rewriting old views.
   Remove this block in Phase 6 when legacy CSS is deleted.
   ===================================================================== */

/* Page-content layout container. Legacy style.css sets
   `#page-content { display: table-row; height: 100% }` for the old
   sticky-footer table layout; it's only neutralised under
   @media (max-width: 767px). On tablet (768–1439px) `table-row` makes
   the element shrink-fit to its widest descendant via anonymous-table
   rules, blowing the layout out to 1440px. Force block layout. */
main#page-content,
#page-content {
  display: block;
  height: auto;
}

/* Inputs / selects / textarea — defeat legacy element selectors */
input.wavo-field__control,
select.wavo-field__control,
textarea.wavo-field__control,
.wavo-field input.wavo-field__control,
.wavo-field select.wavo-field__control,
.wavo-field textarea.wavo-field__control {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wavo-hairline-strong);
  border-radius: var(--wavo-r-md);
  background-color: var(--wavo-bg-elevated);
  color: var(--wavo-ink);
  font-size: var(--wavo-fs-body);
  font-family: var(--wavo-font-text);
  line-height: 1.2;
  box-shadow: none;
  width: 100%;
  outline: none;
}
textarea.wavo-field__control,
.wavo-field textarea.wavo-field__control {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
}
input.wavo-field__control:hover,
select.wavo-field__control:hover,
textarea.wavo-field__control:hover {
  border-color: var(--wavo-hairline-strong);
}
input.wavo-field__control:focus,
input.wavo-field__control:active,
select.wavo-field__control:focus,
textarea.wavo-field__control:focus,
textarea.wavo-field__control:active {
  border-color: var(--wavo-accent);
  background-color: var(--wavo-bg-elevated);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent);
}

/* Labels — defeat legacy `label { font-size: 14px }` */
.wavo-field > label.wavo-field__label,
label.wavo-field__label {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-muted);
  font-weight: var(--wavo-weight-medium);
  margin: 0;
  display: block;
}

/* Auth title — defeat legacy `h1 { display: inline-block; ::after bar }` */
h1.wavo-auth__title,
.wavo-auth__card h1.wavo-auth__title {
  display: block;
  font-family: var(--wavo-font-display);
  font-size: 28px;
  font-weight: var(--wavo-weight-semibold);
  text-align: center;
  margin: 0 0 var(--wavo-s-2);
  position: static;
}
h1.wavo-auth__title::after,
.wavo-auth__card h1.wavo-auth__title::after {
  content: none;
  display: none;
}

/* Section / page h1 — neutralize legacy ::after bar inside wavo pages */
.wavo-section h1,
.wavo-container h1,
.wavo-page-header h1 {
  display: block;
  position: static;
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h1);
  font-weight: var(--wavo-weight-semibold);
  line-height: var(--wavo-lh-snug);
  letter-spacing: var(--wavo-tracking-snug);
  color: var(--wavo-ink);
  margin: 0 0 var(--wavo-s-3);
}
.wavo-section h2,
.wavo-container h2 {
  display: block;
  position: static;
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h2);
  font-weight: var(--wavo-weight-semibold);
  line-height: var(--wavo-lh-snug);
  color: var(--wavo-ink);
  margin: 0;
}
.wavo-section h1::after,
.wavo-container h1::after,
.wavo-page-header h1::after,
.wavo-section h2::after,
.wavo-container h2::after,
.wavo-membership__title::after {
  content: none;
  display: none;
}

/* Buttons — defeat legacy `.btn` rules if a wavo button happens to also have .btn */
button.wavo-btn,
a.wavo-btn,
.wavo-btn {
  border-radius: var(--wavo-r-pill);
  font-weight: var(--wavo-weight-regular);
  font-size: var(--wavo-fs-body);
  padding: 0 22px;
  background-color: transparent;
  color: var(--wavo-ink);
  min-height: 0;
}
button.wavo-btn--primary,
a.wavo-btn--primary,
.wavo-btn.wavo-btn--primary {
  background-color: var(--wavo-accent);
  color: #fff;
}
button.wavo-btn--primary:hover,
a.wavo-btn--primary:hover,
.wavo-btn.wavo-btn--primary:hover {
  background-color: var(--wavo-accent-hover);
  color: #fff;
}
button.wavo-btn--secondary,
a.wavo-btn--secondary,
.wavo-btn.wavo-btn--secondary {
  background-color: transparent;
  color: var(--wavo-accent);
  border: 1px solid var(--wavo-accent);
}
.wavo-btn.wavo-btn--lg { padding: 0 28px; }
.wavo-btn.wavo-btn--sm { padding: 0 16px; }

/* Body — keep wavo typography even with legacy body rules loaded.
   overflow-x is set in the cross-browser hardening block further down
   (hidden by default, clip on @supports). Keep that single source of
   truth — do not add overflow-x here. */
body.wavo-body {
  font-family: var(--wavo-font-text);
  font-size: var(--wavo-fs-body);
  color: var(--wavo-ink);
  background-color: var(--wavo-bg);
}

/* Links inside wavo regions — defeat legacy bootstrap `a { color: #337ab7 }` */
.wavo-auth a,
.wavo-section a,
.wavo-page-header a,
.wavo-link-cta {
  color: var(--wavo-link);
}
.wavo-auth a:hover,
.wavo-section a:hover,
.wavo-page-header a:hover,
.wavo-link-cta:hover {
  color: var(--wavo-link-hover);
}

/* Checkbox alignment inside wavo clusters */
.wavo-cluster input[type="checkbox"],
.wavo-auth__form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--wavo-hairline-strong);
  background-color: var(--wavo-bg-elevated);
  border-radius: 4px;
  accent-color: var(--wavo-accent);
}

/* Page header — keep eyebrow visible against legacy `p { color: #767676 }` */
.wavo-page-header__eyebrow,
.wavo-eyebrow {
  color: var(--wavo-accent);
  margin: 0 0 var(--wavo-s-3);
  font-size: var(--wavo-fs-caption);
  line-height: 1.2;
}
.wavo-page-header__lede,
.wavo-lede {
  color: var(--wavo-ink-muted);
  font-size: var(--wavo-fs-body-lg);
  line-height: var(--wavo-lh-normal);
}

/* Dark sections — legacy style.css `p { color: #… }` (and sibling
   element rules on blockquote/li/figcaption) beat the WHITE that
   `.wavo-section--dark` only sets via inheritance: an inherited value
   loses to any directly-matching rule, even a 0,0,1 element selector.
   Re-assert the inverse ink directly on the text-bearing descendants.
   Inline styles (e.g. the muted figcaption role at rgba(255,255,255,.65))
   still win over this, as intended. */
.wavo-section--dark p,
.wavo-section--dark blockquote,
.wavo-section--dark blockquote p,
.wavo-section--dark figcaption,
.wavo-section--dark li,
.wavo-section--dark cite {
  color: var(--wavo-ink-inverse);
}

/* intl-tel-input plugin — ensure container is full-width inside the field
   so the inner .wavo-field__control input doesn't collapse. The plugin
   prepends a dial-code box; reserve space for it on the input. */
.wavo-field .iti { width: 100%; display: block; }
.wavo-field .iti input.wavo-field__control { padding-left: 96px; }
@media (max-width: 400px) {
  .wavo-field .iti input.wavo-field__control { padding-left: 84px; }
}

/* OTP — override font-size from legacy input rules */
input.wavo-field__control.wavo-field__control--otp,
.wavo-field input.wavo-field__control--otp {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 22px;
  font-family: var(--wavo-font-mono);
}

/* Navbar inline search — defeat legacy `input[type="search"]`
   (min-height: 40px, 2px #c5c5c5 border, whitesmoke bg, 12px font, 0 radius). */
.wavo-navbar__search input,
.wavo-navbar__search input[type="search"] {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--wavo-r-pill);
  border: 1px solid var(--wavo-hairline);
  background-color: var(--wavo-bg-tint);
  color: var(--wavo-ink);
  font-size: 14px;
  font-family: var(--wavo-font-text);
  box-shadow: none;
  outline: none;
}
.wavo-navbar__search input:focus,
.wavo-navbar__search input[type="search"]:focus {
  border-color: var(--wavo-accent);
  background-color: var(--wavo-bg-elevated);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent);
}

/* Feature title — keep its bottom margin against the `.wavo-section h2 { margin: 0 }` override */
.wavo-section h2.wavo-feature__title,
.wavo-container h2.wavo-feature__title {
  margin: 0 0 var(--wavo-s-4);
}

/* Defeat legacy h1::after / h2::after grey bar on any wavo-* heading */
h1.wavo-coursehero__title::after,
h1.wavo-auth__title::after,
h2.wavo-feature__title::after,
h2.wavo-membership__title::after {
  content: none;
  display: none;
}
h1.wavo-coursehero__title {
  display: block;
  position: static;
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h1);
  letter-spacing: var(--wavo-tracking-tight);
  line-height: var(--wavo-lh-tight);
  margin: 0 0 var(--wavo-s-5);
  font-weight: var(--wavo-weight-semibold);
}
h2.wavo-feature__title,
h2.wavo-membership__title {
  display: block;
  position: static;
}

/* =====================================================================
   Responsive polish — account, course-consumption, assessment pages
   ---------------------------------------------------------------------
   Targets viewports 320 / 375 / 414 / 768 / 1024 / 1440.
   Goals: no horizontal overflow, 44x44 touch targets on phones,
   tables scroll cleanly, modals fit, assessment options wrap.
   ===================================================================== */

/* Global safeguard — never let any wavo page horizontal-scroll the body.
   The body.wavo-body overflow-x is set in the cross-browser hardening block
   (hidden by default, clip when @supports). */
html, body { max-width: 100%; }

/* Long, unbroken refs / URLs inside body / footer text should wrap */
.wavo-card__title,
.wavo-membership__title,
.wavo-section h1,
.wavo-section h2,
.wavo-section h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Table on phones — keep critical cells nowrap, allow wrap on description */
@media (max-width: 560px) {
  .wavo-table th,
  .wavo-table td {
    padding: var(--wavo-s-3) var(--wavo-s-4);
    white-space: nowrap;
  }
  .wavo-table td:nth-child(2) { white-space: normal; min-width: 200px; }
}

/* Empty state vertical padding on phones */
@media (max-width: 560px) {
  .wavo-empty { padding: var(--wavo-s-7) var(--wavo-s-4); }
}

/* Form fields on phones — prevent iOS auto-zoom (font >= 16px) */
@media (max-width: 560px) {
  input.wavo-field__control,
  select.wavo-field__control,
  textarea.wavo-field__control,
  .wavo-field input.wavo-field__control,
  .wavo-field select.wavo-field__control,
  .wavo-field textarea.wavo-field__control {
    font-size: 16px;
  }
}

/* intlTelInput — shrink dial-code padding at small widths */
@media (max-width: 400px) {
  .wavo-field .iti input.wavo-field__control { padding-left: 86px; }
}

/* Membership card image — keep proportional, never overflow */
.wavo-membership img.membership-card,
.modal img.membership-card {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--wavo-r-md);
}
@media (max-width: 768px) {
  .wavo-membership__media { max-width: 320px; margin: 0 auto; }
  .wavo-membership__header,
  .wavo-membership__body,
  .wavo-membership__footer { padding: var(--wavo-s-5); }
}

/* Bootstrap-3 modal mobile normalization */
@media (max-width: 767.98px) {
  .modal-dialog,
  .modal.fade .modal-dialog,
  .modal .modal-dialog.modal-lg,
  .modal .modal-dialog.modal-xl {
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
  .modal-body,
  .modal-header,
  .modal-footer { padding: 14px 16px; }
  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wavo-s-2);
    justify-content: flex-end;
  }
  .modal-footer .wavo-btn { flex: 0 1 auto; }
}

/* ModalEnrollmentReactivation 3-col address rows stack on small screens */
@media (max-width: 767.98px) {
  #ModalEnrollmentReactivation .col-md-4,
  #ModalEnrollmentReactivation .col-md-6 {
    width: 100%;
    float: none;
  }
  #ModalEnrollmentReactivation .form-group { margin-bottom: 12px; }
}

.modal { -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .modal-dialog-centered { align-items: flex-start !important; }
}

/* Enrollment card footer — stretch buttons on phones */
@media (max-width: 560px) {
  .wavo-stack > article > footer { justify-content: stretch !important; }
  .wavo-stack > article > footer .wavo-btn,
  .wavo-stack > article > footer a.wavo-btn,
  .wavo-stack > article > footer button.wavo-btn {
    flex: 1 1 calc(50% - var(--wavo-s-2));
    min-width: 0;
  }
}

/* Assessment wizard options */
@media (max-width: 560px) {
  .iradio_line {
    padding: 12px 14px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    white-space: normal;
    line-height: 1.35;
    font-size: 15px !important;
  }
  .iradio_line .icheck_line-icon {
    margin-left: auto;
    margin-top: 0 !important;
    flex-shrink: 0;
  }
}

/* Wizard Previous/Next bar — tap-friendly + brand-tinted */
.wizard-content .wizard > .actions {
  padding: 12px 0 0 !important;
  text-align: right;
}
.wizard-content .wizard > .actions > ul {
  display: flex;
  gap: 8px;
  float: none !important;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.wizard-content .wizard > .actions > ul > li { float: none !important; margin: 0 !important; }
.wizard-content .wizard > .actions > ul > li > a {
  background: var(--wavo-accent) !important;
  color: #fff !important;
  border-radius: var(--wavo-r-pill) !important;
  padding: 10px 22px !important;
  border: 1px solid var(--wavo-accent) !important;
  font-weight: var(--wavo-weight-medium);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.wizard-content .wizard > .actions > ul > li > a[href="#previous"] {
  background: transparent !important;
  color: var(--wavo-ink) !important;
  border: 1px solid var(--wavo-hairline-strong) !important;
}
.wizard-content .wizard > .actions > ul > li.disabled > a { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 560px) {
  .wizard-content .wizard > .actions > ul {
    width: 100%;
    flex-direction: row-reverse;
  }
  .wizard-content .wizard > .actions > ul > li,
  .wizard-content .wizard > .actions > ul > li > a {
    flex: 1 1 50%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  #validation .wavo-card { padding: var(--wavo-s-4) !important; }
}

/* ExaminationResult printable card on phones */
@media (max-width: 560px) {
  .printableArea { padding: var(--wavo-s-5) !important; }
  .printableArea table { font-size: var(--wavo-fs-caption); }
  .printableArea table th,
  .printableArea table td { padding: 8px !important; }
}

/* Print: hide chrome */
@media print {
  .wavo-navbar, .wavo-footer, .wavo-cookie, .no-print { display: none !important; }
  body, body.wavo-body { background: #fff; overflow: visible; }
  .printableArea {
    border: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
}

/* 400px / very small phones — container breathing room */
@media (max-width: 400px) {
  :root { --wavo-container-padding: 16px; }
  .wavo-section { padding-top: 36px; padding-bottom: 36px; }
  .wavo-section--tight { padding-top: 28px; padding-bottom: 28px; }
}

/* Chip clusters wrap nicely */
.wavo-card__chips,
.wavo-cluster { min-width: 0; }
.wavo-chip { max-width: 100%; }

/* Enrollment/Course card inline-styled header/body/footer — soften padding on phones */
@media (max-width: 560px) {
  .wavo-stack > article > header[style],
  .wavo-stack > article > footer[style] {
    padding: var(--wavo-s-3) var(--wavo-s-4) !important;
  }
  .wavo-stack > article > div[style*="padding: var(--wavo-s-6)"],
  .wavo-stack > article > div[style*="padding:var(--wavo-s-6)"] {
    padding: var(--wavo-s-5) var(--wavo-s-4) !important;
  }
}

/* =====================================================================
   Wide-desktop polish — 1280 / 1440 / 1920 / 2560
   ---------------------------------------------------------------------
   Goals (Apple / Linear caliber):
   - Premium card density: cap auto-fill grids at 3 cols on wide screens
   - Comfortable rail trailing space; first card aligned to container edge
   - Tighter heading line-height for big display sizes
   - Generous section breathing; pricebox sticky offset is correct
   - Cursor + meaningful hover on every interactive element
   - Subtle, branded focus rings; no bouncy hover scales
   ===================================================================== */

/* ------- 1. Card grid density at wide widths ---------------------- */
/* Default minmax(280px, 1fr) yields 4-6 cards/row on >=1280px which
   feels dense. Cap at 3 cols >=1280px for the catalog "premium" feel. */
@media (min-width: 1280px) {
  .wavo-grid--cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wavo-s-6);
  }
  .wavo-grid--cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wavo-s-6);
  }
}
@media (min-width: 1920px) {
  .wavo-grid--cards-3 { gap: var(--wavo-s-7); }
}

/* ------- 2. Scroll rail trailing space & snap polish -------------- */
/* Ensure last card has comfortable right padding (matches container
   gutter) so the rail doesn't feel "cut off". */
@media (min-width: 1280px) {
  .wavo-rail {
    gap: var(--wavo-s-5);
    padding-bottom: var(--wavo-s-5);
    scroll-padding-right: var(--wavo-container-padding);
  }
  .wavo-rail > * { flex-basis: clamp(300px, 22vw, 360px); }
}
@media (min-width: 1920px) {
  .wavo-rail > * { flex-basis: 360px; }
}
/* Slim, branded rail scrollbar so it doesn't look like a default OS bar. */
.wavo-rail::-webkit-scrollbar { height: 8px; }
.wavo-rail::-webkit-scrollbar-track { background: transparent; }
.wavo-rail::-webkit-scrollbar-thumb {
  background: var(--wavo-hairline-strong);
  border-radius: var(--wavo-r-pill);
}
.wavo-rail::-webkit-scrollbar-thumb:hover { background: var(--wavo-ink-subtle); }

/* ------- 3. Hero typography polish at wide widths ---------------- */
/* Page-header lede sizes up on wide displays so the marketing paragraph
   doesn't read as cramped against the larger h1. */
@media (min-width: 1920px) {
  .wavo-page-header__lede,
  .wavo-lede { font-size: 21px; }
}

/* ------- 4. Section breathing on wide screens -------------------- */
/* At 1920+, sections feel cramped vs ultra-wide canvas. Add extra rhythm. */
@media (min-width: 1920px) {
  .wavo-section { padding-top: clamp(96px, 8vw, 160px); padding-bottom: clamp(96px, 8vw, 160px); }
}

/* ------- 5. Course detail two-col polish ------------------------- */
/* On 1280+, expand pricebox column to feel substantial; on 1920+ widen
   sticky offset slightly so it sits comfortably below blurred navbar. */
@media (min-width: 1280px) {
  .wavo-coursehero {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--wavo-s-8);
  }
  .wavo-coursehero__sticky {
    top: calc(var(--wavo-navbar-h) + var(--wavo-s-5));
  }
  .wavo-pricebox { padding: var(--wavo-s-7); }
}
@media (min-width: 1920px) {
  .wavo-coursehero {
    grid-template-columns: 1.7fr 1fr;
    gap: var(--wavo-s-9);
  }
}

/* ------- 6. Enrollment "My Courses" cards — 2 cols on wide ------- */
/* Single-column stack feels empty at 1440+. Tile cards 2-up at 1280+
   so the dashboard reads as filled, not lonely. */
@media (min-width: 1280px) {
  .wavo-section .wavo-stack--lg:has(> article),
  .wavo-section .wavo-stack:has(> article) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wavo-s-6);
  }
  .wavo-section .wavo-stack--lg > article + article,
  .wavo-section .wavo-stack > article + article {
    margin-top: 0; /* grid handles spacing; defeat default stack margin */
  }
}
@media (min-width: 1920px) {
  /* Stay 2-up rather than 3-up — denser feels cramped with the long course
     titles + meta rows + action footer; 2-up reads premium at 1920. */
  .wavo-section .wavo-stack--lg:has(> article),
  .wavo-section .wavo-stack:has(> article) {
    gap: var(--wavo-s-7);
  }
}

/* ------- 7. Activity log + tables — wider container at 1440+ ----- */
/* Activity uses default container (1440 max). Already fine. But ensure
   table doesn't span absurdly long line-lengths at 2560px. */
@media (min-width: 1920px) {
  .wavo-table th,
  .wavo-table td { padding: var(--wavo-s-5) var(--wavo-s-6); }
}

/* ------- 8. Auth card — intentional placement on wide screens ---- */
/* 420px card centered on a 1920 screen can feel "lost". Add a subtle
   ambient backdrop via vertical gradient so the card feels anchored. */
@media (min-width: 1280px) {
  .wavo-auth {
    background:
      radial-gradient(ellipse 60% 40% at 50% 30%, rgba(84,113,175,0.06), transparent 70%),
      var(--wavo-bg);
  }
  .wavo-auth__card { padding: var(--wavo-s-8) var(--wavo-s-7); }
}

/* ------- 9. Footer — feel substantial at 1920 -------------------- */
@media (min-width: 1280px) {
  .wavo-footer { padding-top: var(--wavo-s-9); }
  .wavo-footer__grid { gap: var(--wavo-s-8); padding-bottom: var(--wavo-s-8); }
}

/* ------- 10. Partners grid — cap & center on wide ---------------- */
/* The Home partners grid uses inline auto-fit minmax(140px, 1fr) which
   yields 9-13 columns on wide screens. Cap to a denser 6-col max so
   logos breathe and the row reads as 2 rows of 6 (12 partners). */
@media (min-width: 1280px) {
  .wavo-section .wavo-grid[style*="minmax(140px"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------- 11. Hover states — Apple-level subtlety ----------------- */
@media (hover: hover) {
  .wavo-card { cursor: default; }
  .wavo-card:hover { transform: translateY(-3px); box-shadow: var(--wavo-shadow-hover); }
  /* Slight tile shift when image-only media area is focused */
  .wavo-card__media { cursor: pointer; }
  /* Chip cursor only when actionable */
  .wavo-chip { cursor: default; }
  .wavo-chip[onclick],
  a.wavo-chip,
  button.wavo-chip { cursor: pointer; }
  /* Stat hover — micro-lift to feel alive without bounce */
  .wavo-stat { transition: transform var(--wavo-dur-fast) var(--wavo-ease); }
  /* Brand logo grid items — desaturate to grayscale then pop on hover */
  .wavo-section .wavo-grid[style*="minmax(140px"] a img {
    filter: grayscale(35%);
    opacity: 0.88;
    transition: filter var(--wavo-dur) var(--wavo-ease),
                opacity var(--wavo-dur) var(--wavo-ease),
                transform var(--wavo-dur) var(--wavo-ease);
  }
  .wavo-section .wavo-grid[style*="minmax(140px"] a:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
  }
  /* Accordion trigger hover — subtle text shift */
  .wavo-accordion__trigger { cursor: pointer; transition: color var(--wavo-dur-fast) var(--wavo-ease); }
  .wavo-accordion__trigger:hover { color: var(--wavo-link); }
  /* Footer social — already styled; tighten cursor */
  .wavo-footer__social a { cursor: pointer; }
}

/* ------- 12. Focus rings — branded & visible on dark sections ---- */
.wavo-section--dark :focus-visible {
  outline-color: color-mix(in srgb, var(--wavo-accent) 75%, white);
}
.wavo-btn--primary:focus-visible {
  outline: 3px solid color-mix(in srgb, #fff 60%, transparent);
  outline-offset: 2px;
}

/* ------- 13. Image quality on wide screens ----------------------- */
/* Course banner / hero artwork can show JPEG compression at 1920+.
   Force the browser to use high-quality scaling. */
.wavo-card__media img,
.wavo-banner img,
.wavo-feature__media img,
.wavo-coursehero__art img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* For container queries, give banner images a max sensible height so a
   1920-wide banner doesn't dominate the viewport on ultra-wide. */
@media (min-width: 1920px) {
  .wavo-banner--home img { max-height: 520px; object-fit: cover; object-position: center; width: 100%; }
}

/* ------- 14. Feature row spacing on wide screens ----------------- */
@media (min-width: 1280px) {
  .wavo-feature { gap: var(--wavo-s-9); }
}
@media (min-width: 1920px) {
  .wavo-feature { gap: var(--wavo-s-10); }
}

/* ------- 15. Container ultra-wide guard ------------------------- */
/* At 2560px, with container capped at 1440, gutters are ~560px each side.
   That can feel like a tunnel. Bump the cap slightly at extreme widths
   to use available space without losing the centered layout. */
@media (min-width: 2200px) {
  :root { --wavo-container-max: 1600px; }
}

/* ------- 16. Pointer cursor on all interactive elements ---------- */
.wavo-btn,
a.wavo-btn,
button.wavo-btn,
.wavo-link-cta,
.wavo-navbar__brand,
.wavo-navbar__nav a,
.wavo-navbar__menu-btn,
.wavo-navbar__search-btn,
[onclick]:not(input):not(select):not(textarea) {
  cursor: pointer;
}
.wavo-btn:disabled,
.wavo-btn[disabled] {
  cursor: not-allowed;
}

/* ------- 17. Quote/testimonial polish on wide screens ----------- */
@media (min-width: 1280px) {
  .wavo-section--dark blockquote { max-width: 56ch; margin-left: auto; margin-right: auto; }
}

/* ------- 18. Accordion polish at wide ---------------------------- */
@media (min-width: 1280px) {
  .wavo-accordion__trigger { padding: var(--wavo-s-6) 0; font-size: 22px; }
}

/* ------- 19. Filter bar polish ---------------------------------- */
/* The 4-column filterbar at 1280+ already lays out as a row. Tighten
   vertical alignment so the Search button bottom-aligns to the inputs. */
@media (min-width: 1280px) {
  .wavo-filterbar { gap: var(--wavo-s-4); }
  .wavo-filterbar__btn { padding: 0 28px; }
}

/* ------- 20. Defeat legacy h1::after bar across remaining views -- */
/* Some pages (e.g. Membership/Index) still render legacy page-titles
   that get the underline bar. Suppress on wavo-section/container scope. */
.wavo-section h1::after,
.wavo-section h2::after,
.wavo-section h3::after,
.wavo-container h3::after,
.wavo-page-header h1::after {
  content: none !important;
  display: none !important;
}

/* =====================================================================
   Marketing pages — mobile polish (320 / 375 / 414)
   ---------------------------------------------------------------------
   Targets: Home/Index, Home/About, Home/Announcement_EduHub,
            Course/List, Course/Detail at narrow widths.
   ===================================================================== */

/* --- Stats grid: keep 2x2 on phones instead of stacking 4 rows tall --- */
@media (max-width: 768px) {
  .wavo-grid.wavo-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wavo-s-5);
  }
}
@media (max-width: 360px) {
  /* On Galaxy Fold / iPhone SE keep 2-up but tighten gap and value size */
  .wavo-grid.wavo-grid--4 { gap: var(--wavo-s-4); }
  .wavo-stat__value { font-size: clamp(30px, 9vw, 40px); }
}

/* --- Scroll rail: reserve trailing space after the last card ---
   Padding-right on an overflow flex container is unreliable for trailing
   space; use a pseudo sentinel sized to the container padding. */
.wavo-rail::after {
  content: "";
  flex: 0 0 1px;
  /* Compensate the rail's own padding-right with an extra spacer.
     Result: last card has the same gutter as the first. */
  margin-right: calc(var(--wavo-container-padding) - 1px);
}

/* On phones, lift snap behaviour so users can flick to the true last card */
@media (max-width: 560px) {
  .wavo-rail { scroll-padding-right: var(--wavo-container-padding); }
  .wavo-rail > * {
    /* Slightly wider cards at 320–414 — clamp keeps them comfortable */
    flex-basis: clamp(248px, 78vw, 300px);
  }
}

/* --- Featured section header on mobile: stack heading + "All courses" ---
   At 320px the wavo-cluster wraps awkwardly; force a vertical stack. */
@media (max-width: 560px) {
  .wavo-section > .wavo-container > header.wavo-cluster {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wavo-s-3);
  }
}

/* --- Hero CTA cluster: full-width on small phones (40-44px tap) --- */
@media (max-width: 480px) {
  .wavo-text-center > .wavo-container > .wavo-cluster,
  .wavo-text-center > .wavo-container .wavo-cluster {
    justify-content: center;
  }
  /* When a primary lg button shares the row with a link-cta, give the
     button room to be the dominant target. */
  .wavo-cluster .wavo-btn--lg { min-height: 52px; }
}
/* Closing CTA: two lg buttons stacked & full-width on phones */
@media (max-width: 480px) {
  .wavo-section.wavo-text-center .wavo-cluster .wavo-btn--lg,
  section.wavo-section.wavo-text-center .wavo-cluster .wavo-btn--lg {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* --- About: Objectives list — tighten counter column at 320px --- */
@media (max-width: 400px) {
  ol[style*="counter-reset: wavo-counter"] > li[style*="grid-template-columns: 48px"] {
    grid-template-columns: 36px 1fr !important;
    gap: var(--wavo-s-3) !important;
    padding-top: var(--wavo-s-4) !important;
    padding-bottom: var(--wavo-s-4) !important;
  }
  ol[style*="counter-reset: wavo-counter"] > li > span[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
}

/* --- About: Mission grid h3s — give them a touch more bottom space --- */
@media (max-width: 560px) {
  .wavo-grid.wavo-grid--2 > div > h3[style*="font-size: var(--wavo-fs-h4)"] {
    margin-bottom: var(--wavo-s-2) !important;
  }
}

/* --- Quote and Message — tighter side padding on tiny phones --- */
@media (max-width: 400px) {
  .wavo-quote { padding: var(--wavo-s-4); }
  .wavo-message { padding: var(--wavo-s-4); }
  .wavo-quote__text { line-height: var(--wavo-lh-normal); }
}

/* --- Robert Hecek testimonial — keep circle proportional & readable --- */
@media (max-width: 400px) {
  .wavo-section--dark figure[style*="width: 112px"] {
    width: 96px !important;
    height: 96px !important;
    margin-bottom: var(--wavo-s-5) !important;
  }
  .wavo-section--dark blockquote {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}

/* --- Members / partners — keep logos legible at 320px (auto-fit minmax) --- */
@media (max-width: 400px) {
  .wavo-section--tint .wavo-grid[style*="auto-fit"][style*="minmax(140px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--wavo-s-4) !important;
  }
}

/* --- FAQ accordion — guarantee 44px tap target on the trigger row --- */
.wavo-accordion__trigger {
  min-height: 44px;
}
@media (max-width: 560px) {
  .wavo-accordion__trigger {
    padding-top: var(--wavo-s-4);
    padding-bottom: var(--wavo-s-4);
    font-size: 17px;
    /* keep heading override from beating us */
    line-height: 1.35;
  }
  /* If the trigger is rendered as h3/etc inside a section, the
     .wavo-section h3 override below would force the larger fluid size. */
  .wavo-accordion .wavo-accordion__trigger { font-size: 17px; }
}

/* --- Course/List: filter bar Search button — block & 48px tap on phones --- */
@media (max-width: 560px) {
  .wavo-filterbar .wavo-filterbar__btn,
  .wavo-filterbar > button.wavo-btn {
    width: 100%;
    height: 48px;
    min-height: 48px;
  }
  /* Typeahead listbox: keep within viewport (the inline style already does it,
     but we ensure no horizontal overflow from long country names) */
  #countryListbox li {
    padding: 12px 14px;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }
}

/* --- Course/Detail: pricebox cleanup at narrow widths --- */
@media (max-width: 560px) {
  /* When sticky drops to static, the pricebox below content needs a clear
     visual break and full-width primary CTA */
  .wavo-coursehero__sticky .wavo-pricebox { margin-top: var(--wavo-s-4); }
  .wavo-pricebox__amount { font-size: 28px; line-height: 1.1; }
  .wavo-pricebox__meta-row {
    flex-wrap: wrap;
    /* Long module names: allow label & value to stack if needed */
    gap: var(--wavo-s-2);
  }
}
/* Course hero chips row: prevent horizontal scroll on very long category names */
.wavo-coursehero .wavo-cluster { min-width: 0; }
.wavo-coursehero .wavo-cluster .wavo-chip { max-width: 100%; }

/* --- Page-header eyebrow + h1 + lede — tighten on tiny phones --- */
@media (max-width: 400px) {
  .wavo-page-header { margin-bottom: var(--wavo-s-5); }
  .wavo-page-header h1 { margin-bottom: var(--wavo-s-2); }
  .wavo-page-header__lede { font-size: var(--wavo-fs-body); }
}

/* --- Feature row title + media on small phones — tighten rhythm --- */
@media (max-width: 560px) {
  .wavo-feature { gap: var(--wavo-s-5); }
  .wavo-feature__title { margin-bottom: var(--wavo-s-3); }
  .wavo-feature__media { border-radius: var(--wavo-r-lg); }
}

/* --- Global safeguard: any images placed inline with width=100% should
       never exceed their container, even when legacy bootstrap intervenes. */
.wavo-section img,
.wavo-container img { max-width: 100%; height: auto; }

/* =====================================================================
   Tablet polish — 560 / 768 / 1024 (portrait & landscape iPad)
   ---------------------------------------------------------------------
   These rules apply only in the tablet band and do not weaken the
   mobile-specific rules above (which all use max-width: 560px or 480px).
   Scope: navbar transition, card grid density, footer balance, modal
   widths, feature row rhythm, course-detail pricebox ordering.
   ===================================================================== */

/* 1) Course Detail — bring pricebox ABOVE the long content on tablet.
   At ≤880px the wavo-coursehero collapses to 1fr, which puts the sticky
   aside AFTER the long About/Outcomes prose. On tablet that hides the
   price + CTA behind a long scroll. Use CSS order to put it first. */
@media (min-width: 561px) and (max-width: 880px) {
  .wavo-coursehero { grid-template-columns: 1fr; }
  .wavo-coursehero > :first-child { order: 2; }
  .wavo-coursehero > .wavo-coursehero__sticky { order: 1; margin-bottom: var(--wavo-s-5); }
  /* Keep the pricebox compact so it doesn't dominate the viewport */
  .wavo-coursehero__sticky .wavo-pricebox {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2) Navbar at tablet (561-880px) — keep the actions row breathable.
   Logo is 92px overhanging a 76px navbar; with hamburger + search-btn +
   sign-in chip, gaps can squeeze. Tighten the actions gap a touch. */
@media (min-width: 561px) and (max-width: 880px) {
  .wavo-navbar__inner { gap: var(--wavo-s-4); }
  .wavo-navbar__actions { gap: var(--wavo-s-3); }
}

/* 3) Card grids — tighter minmax on tablet so 768/1024 don't waste space.
   At 768px container width ≈672px after padding, minmax(280) yields 2
   cards with wide gaps. Tighten to 260 so 2-3 cards fit comfortably. */
@media (min-width: 561px) and (max-width: 1023px) {
  .wavo-grid.wavo-grid--cards-3 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* 4) Footer — at 881-1023px the 4-column grid feels tight with a 1.5fr
   brand column. Soften the proportions so each group has room. */
@media (min-width: 881px) and (max-width: 1023px) {
  .wavo-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--wavo-s-5);
  }
}

/* 5) Bootstrap modal-lg / modal-xl at 768-991px (tablet portrait).
   The 767.98px override handles small viewports; extend to tablet
   portrait so the dialog has consistent gutters. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal.fade .modal-dialog.modal-lg,
  .modal.fade .modal-dialog.modal-xl {
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    margin: 24px auto !important;
  }
}
/* Tablet landscape (992-1199px) — cap modal-xl so it doesn't span
   edge-to-edge on a 1024px iPad. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .modal-dialog.modal-xl,
  .modal.fade .modal-dialog.modal-xl {
    width: auto !important;
    max-width: 920px !important;
  }
}

/* 6) Feature row at tablet landscape (881-1023px) — when still 2-col,
   the 64px gap eats too much of each column. Soften to --wavo-s-6. */
@media (min-width: 881px) and (max-width: 1023px) {
  .wavo-feature { gap: var(--wavo-s-6); }
}

/* 7) Course/List filter bar at tablet landscape — give the Search
   button a sensible min-width so it doesn't crowd the keyword field. */
@media (min-width: 881px) and (max-width: 1023px) {
  .wavo-filterbar .wavo-filterbar__btn,
  .wavo-filterbar > button.wavo-btn { min-width: 120px; }
}

/* 8) Auth card on tablet landscape — at 1024px a 560px wide card looks
   isolated for the multi-field register form. Lift the cap modestly. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wavo-auth--wide .wavo-auth__card { max-width: 600px; }
}

/* 9) Consecutive sections on tablet — avoid stacked heavy paddings
   making the page feel sparse. */
@media (min-width: 561px) and (max-width: 1023px) {
  .wavo-section + .wavo-section { padding-top: clamp(48px, 7vw, 96px); }
}

/* =====================================================================
   Auth + Account — mobile polish (320 / 375 / 414)
   ---------------------------------------------------------------------
   Targets: Participant/Login, Register, ForgotPassword, ResetPassword,
            ChangePassword, TwoFactorAuthenticationLogin, Profile,
            Activity, Membership at narrow widths.

   Goals: no horizontal overflow at 320px, comfortable thumb tap targets,
   primary submit CTAs feel native on mobile (full-width), intlTelInput
   country selector stays clear of the input text, OTP input never
   over-spaces glyphs off the card edge.
   ===================================================================== */

/* --- Profile / ChangePassword submit row — full-width primary on phones.
   The default .wavo-form-actions right-aligns the button, which feels
   cramped on mobile. Stretching it gives a clear, thumb-friendly target. */
@media (max-width: 560px) {
  .wavo-form-actions {
    justify-content: stretch;
    padding-top: var(--wavo-s-3);
  }
  .wavo-form-actions > .wavo-btn,
  .wavo-form-actions > button.wavo-btn,
  .wavo-form-actions > a.wavo-btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 48px;
  }
}

/* --- Login auth row — Remember-me + Forgot password.
   When wrapping at 320px, keep each item a comfortable tap target. */
@media (max-width: 560px) {
  .wavo-auth__row {
    gap: var(--wavo-s-2);
  }
  .wavo-auth__row > .wavo-consent,
  .wavo-auth__row > a.wavo-link-cta {
    min-height: 32px;
    padding: var(--wavo-s-1) 0;
  }
}

/* --- intlTelInput at very small phones — consolidated padding-left.
   Earlier rules elsewhere in this file set 84px / 86px for max-width:400px;
   this trailing rule is authoritative. 88px gives the separate-dial-code
   box (flag + +XX code at SF Pro Text 16px) clean clearance without text
   collision while preserving enough room for typing on a 320px screen. */
@media (max-width: 400px) {
  .wavo-field .iti input.wavo-field__control,
  .wavo-field .iti input[type="tel"].wavo-field__control {
    padding-left: 88px;
  }
}

/* --- intlTelInput dropdown country list — when open on phones,
   keep options tappable and readable (44px min height, 15px font for
   density-vs-readability balance). */
@media (max-width: 560px) {
  .iti__country-list {
    max-height: 50vh;
    -webkit-overflow-scrolling: touch;
  }
  .iti__country-list .iti__country {
    padding: 10px 12px;
    min-height: 44px;
    font-size: 15px;
    line-height: 1.35;
  }
}

/* --- OTP input — keep glyphs inside the card at the narrowest widths.
   At 22px font + 0.3em tracking, six digits ~= 6.6px gap * 5 + 22px * 6
   = ~165px; comfortable inside a 256px-ish card. Below 360px, dial back
   slightly so iPhone-SE-class screens still breathe. */
@media (max-width: 360px) {
  input.wavo-field__control.wavo-field__control--otp,
  .wavo-field input.wavo-field__control--otp {
    font-size: 20px;
    letter-spacing: 0.2em;
  }
}

/* --- iOS safe-area: ensure auth card has bottom breathing room on
   home-indicator devices (iPhone X+ portrait). */
@supports (padding: max(0px)) {
  @media (max-width: 560px) {
    .wavo-auth {
      padding-bottom: max(var(--wavo-s-5), env(safe-area-inset-bottom, 0px));
    }
  }
}

/* --- Activity log table — at 320-414px, tighten cell padding and
   chip footprint so all three columns (Category / Description / Date)
   sit in the scrollable card without the chip column ballooning. */
@media (max-width: 414px) {
  .wavo-table th,
  .wavo-table td {
    padding: var(--wavo-s-3) var(--wavo-s-3);
  }
  .wavo-table td .wavo-chip {
    font-size: var(--wavo-fs-micro);
    height: 24px;
    padding: 0 10px;
  }
}

/* --- Empty-state CTA — stretch the primary button on narrow viewports
   and center it. Membership empty-state and similar zero-data screens
   feel more deliberate when the CTA is the dominant tap target. */
@media (max-width: 560px) {
  .wavo-empty .wavo-btn {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Membership content gap on phones — slightly tighter so the
   image, description, and "More info" button feel cohesive when stacked. */
@media (max-width: 768px) {
  .wavo-membership__content { gap: var(--wavo-s-4); }
}

/* --- Auth brand logo on iPhone-SE-class widths — already capped at
   128px by the existing <400px rule; nudge tighter at <=360px so the
   title + sub copy don't get pushed below the fold. */
@media (max-width: 360px) {
  .wavo-auth__brand img { max-width: 112px; }
  .wavo-auth__brand { margin-bottom: var(--wavo-s-4); }
  .wavo-auth__sub { margin-bottom: var(--wavo-s-4); }
}

/* =====================================================================
   Cross-browser hardening
   ---------------------------------------------------------------------
   Targets: iOS Safari 15+, Safari Mac 15+, Chrome 100+, Firefox 100+,
   Edge 100+. Each block adds a safe fallback for legacy engines then
   upgrades to the modern feature via @supports, so modern-browser
   behaviour is preserved 1:1. Solid colour fallbacks are pre-computed
   from the brand tokens — keep these in sync if the brand changes:
     --wavo-accent  = #5471af  -> rgba(84,113,175, X)
     --wavo-success = #2da44e  -> rgba(45,164,78,  X)
   ===================================================================== */

/* --- 1. Navbar backdrop-filter fallback ---
   Modern Safari/Chrome/Firefox 103+ get glassmorphism via backdrop-filter.
   Older Firefox (<103) / engines without backdrop-filter would otherwise
   show the navbar at rgba(255,255,255,0.82), letting page content show
   through unblurred. Promote bg to a near-opaque value when unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wavo-navbar {
    background: var(--wavo-mat-fallback);
  }
}

/* --- 2. body overflow-x: clip upgrade ---
   wavo-body uses `overflow-x: clip` (preferred: doesn't create a scroll
   container so child position:sticky still pins to the viewport).
   Safari < 16 doesn't support `clip` — it computes to `visible` and the
   horizontal-overflow safeguard fails. Fall back to `hidden`, upgrade
   to `clip` only when supported. */
body.wavo-body {
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body.wavo-body { overflow-x: clip; }
}

/* --- 3. color-mix() fallbacks ---
   Used across the design system for translucent rings (focus, autofill,
   payment-method selected, navbar search focus, dark-section :focus-visible,
   primary-button :focus-visible). Safari 16.2+, Chrome 111+, Firefox 113+.
   iOS Safari 15.x (a primary target) loses these rings entirely without
   a fallback. Pre-compute solid rgba; @supports re-applies the themable
   color-mix on modern engines so brand changes stay live. */

/* 3a. Field focus rings — input/select/textarea + navbar search */
.wavo-field__control:focus,
input.wavo-field__control:focus,
input.wavo-field__control:active,
select.wavo-field__control:focus,
textarea.wavo-field__control:focus,
textarea.wavo-field__control:active,
.wavo-navbar__search input:focus,
.wavo-navbar__search input[type="search"]:focus {
  /* 18% of --wavo-accent #5471af on transparent */
  box-shadow: 0 0 0 4px rgba(84, 113, 175, 0.18);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .wavo-field__control:focus,
  input.wavo-field__control:focus,
  input.wavo-field__control:active,
  select.wavo-field__control:focus,
  textarea.wavo-field__control:focus,
  textarea.wavo-field__control:active,
  .wavo-navbar__search input:focus,
  .wavo-navbar__search input[type="search"]:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent);
  }
}

/* 3b. Payment-method selected ring (commerce) — 25% success green */
@supports not (background: color-mix(in srgb, red, blue)) {
  #formPaymentOption .paymentMethod.border-success,
  #formPaymentOption .paymentMethod.selected,
  #paymentOption .paymentMethod.border-success,
  #paymentOption .paymentMethod.selected {
    box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.25);
  }
}

/* 3c. Dark-section focus ring & primary-button focus ring use color-mix
   elsewhere in this file. Provide solid fallbacks for older engines. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .wavo-section--dark :focus-visible {
    /* 75% accent + 25% white ≈ #7e94c3 */
    outline-color: #7e94c3;
  }
  .wavo-btn--primary:focus-visible {
    /* 60% white + 40% transparent */
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
  }
}

/* --- 4. Form autofill — keep Chrome/Edge from showing yellow autofill bg ---
   Chrome/Edge/older Safari paint `-webkit-autofill` with a yellow background
   and override the input text colour, breaking the design system. Pin the
   inset shadow to our elevated bg, fix the text colour to ink, and stretch
   the transition so the colour doesn't flash yellow before settling. */
input.wavo-field__control:-webkit-autofill,
input.wavo-field__control:-webkit-autofill:hover,
input.wavo-field__control:-webkit-autofill:focus,
input.wavo-field__control:-webkit-autofill:active,
.wavo-navbar__search input:-webkit-autofill,
.wavo-navbar__search input[type="search"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--wavo-bg-elevated) inset;
  box-shadow: 0 0 0 1000px var(--wavo-bg-elevated) inset;
  -webkit-text-fill-color: var(--wavo-ink);
  caret-color: var(--wavo-ink);
  transition: background-color 99999s ease-in-out 0s;
}
/* When autofilled AND focused, the brand-tinted focus ring still needs to
   render via layered shadows (autofill claims the same box-shadow slot). */
input.wavo-field__control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 4px rgba(84, 113, 175, 0.18),
                      0 0 0 1000px var(--wavo-bg-elevated) inset;
  box-shadow: 0 0 0 4px rgba(84, 113, 175, 0.18),
              0 0 0 1000px var(--wavo-bg-elevated) inset;
}
@supports (background: color-mix(in srgb, red, blue)) {
  input.wavo-field__control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent),
                        0 0 0 1000px var(--wavo-bg-elevated) inset;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent),
                0 0 0 1000px var(--wavo-bg-elevated) inset;
  }
}

/* --- 5. iOS Safari rubber-band background ---
   On iOS Safari, overscrolling past the top of the document can expose
   the <html> element's background colour behind the sticky navbar
   (which is partially transparent). Pin html bg to match the page. */
html { background: var(--wavo-bg); }

/* --- 6. iOS safe-area for fixed bottom UI ---
   The fixed cookie banner sits at bottom:16px; on phones with home-bar
   gestures (iPhone X+) it should respect env(safe-area-inset-bottom).
   Browsers without env() ignore the second token gracefully (fallback). */
.wavo-cookie {
  bottom: calc(var(--wavo-s-4) + env(safe-area-inset-bottom, 0px));
}

/* --- 7. Explicit -webkit-sticky for pre-15 Safari holdouts ---
   Safari 15+ supports `sticky` unprefixed, but adding the prefix keeps
   pinned UI working if a user has an older install. */
.wavo-navbar,
.wavo-coursehero__sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* --- 8. WebKit scrollbar polish for the horizontal rail ---
   See the wavo-rail scrollbar block in the wide-desktop polish section
   above — that's the single source of truth (height + track + thumb +
   thumb:hover). Removed duplicate here. */

/* --- 9. prefers-reduced-motion: kill transform-based hover effects ---
   The tokens already zero out durations under reduced-motion, but
   transform values still execute (jump, no animation). Suppress the
   transforms entirely so motion-sensitive users get a stable UI. */
@media (prefers-reduced-motion: reduce) {
  .wavo-card:hover,
  .wavo-card:hover .wavo-card__media img,
  .wavo-btn:active,
  #formPaymentOption .paymentMethod:hover,
  #paymentOption .paymentMethod:hover {
    transform: none;
  }
  .wavo-accordion__icon,
  .wavo-accordion__panel { transition: none; }
}

/* --- 10. Inline SVG icon visibility (search/menu in _Layout) ---
   Inline SVGs use stroke="currentColor". Pin currentColor and fill so
   stroke can never be lost during a transition on legacy WebKit. */
.wavo-navbar__search-btn svg,
.wavo-navbar__menu-btn svg {
  color: currentColor;
  fill: none;
}

/* =====================================================================
   macOS Sequoia — Auth + Account refinements
   ---------------------------------------------------------------------
   Apple ID-style sign-in surfaces (Liquid Glass auth card on a Sequoia
   wallpaper wash) + macOS Settings-pane account screens. These rules
   ADD modifier classes without breaking existing .wavo-auth / .wavo-field
   markup.
   ===================================================================== */

/* ----- Auth: Sequoia wallpaper backdrop ----------------------------- */
.wavo-auth.wavo-hero-sequoia {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Token-driven wallpaper — swaps to deep-navy moody pastels in dark mode. */
  background: var(--wavo-gradient-auth);
}
.wavo-auth.wavo-hero-sequoia::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  /* Secondary blur layer — uses the hero gradient (token-driven) so the
     auth backdrop reads consistent in light and dark. */
  background: var(--wavo-gradient-hero);
  pointer-events: none;
  filter: blur(20px);
  opacity: 0.6;
}

/* ----- Auth card: Liquid Glass treatment --------------------------- */
.wavo-auth__card.wavo-auth__card--sequoia {
  background: var(--wavo-glass-soft);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window-lg);
  border: 1px solid var(--wavo-hairline);
  box-shadow:
    var(--wavo-depth-3),
    var(--wavo-liquid-stroke);
  padding: var(--wavo-s-7) var(--wavo-s-6);
  position: relative;
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-auth__card.wavo-auth__card--sequoia { background: var(--wavo-mat-fallback); }
}
.wavo-auth__card.wavo-auth__card--sequoia::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 24%);
  pointer-events: none;
  z-index: 0;
}
.wavo-auth__card.wavo-auth__card--sequoia > * { position: relative; z-index: 1; }

/* Mac window chrome bolted onto the auth card — the chrome strip is positioned
   flush against the rounded corners (overriding the card padding) and the card
   gets extra top padding so the first field doesn't hide under the strip. */
.wavo-auth__card--sequoia .wavo-window__chrome {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  margin: 0;
  border-top-left-radius: var(--wavo-r-window-lg);
  border-top-right-radius: var(--wavo-r-window-lg);
}
.wavo-auth__card--sequoia:has(.wavo-window__chrome) { padding-top: calc(var(--wavo-s-7) + 32px); }
@media (min-width: 1280px) {
  .wavo-auth__card--sequoia:has(.wavo-window__chrome) { padding-top: calc(var(--wavo-s-8) + 32px); }
}
@media (max-width: 560px) {
  .wavo-auth__card--sequoia:has(.wavo-window__chrome) { padding-top: calc(var(--wavo-s-5) + 24px); }
}
@media (min-width: 1280px) {
  .wavo-auth__card.wavo-auth__card--sequoia {
    padding: var(--wavo-s-8) var(--wavo-s-7);
  }
}
@media (max-width: 560px) {
  .wavo-auth__card.wavo-auth__card--sequoia {
    border-radius: var(--wavo-r-window);
    padding: var(--wavo-s-6) var(--wavo-s-5);
  }
}
@media (max-width: 400px) {
  .wavo-auth__card.wavo-auth__card--sequoia {
    padding: var(--wavo-s-5) var(--wavo-s-4);
  }
}

/* ----- Auth title: Apple ID hierarchy ------------------------------ */
.wavo-auth__title--sequoia,
h1.wavo-auth__title--sequoia,
.wavo-auth__card h1.wavo-auth__title--sequoia {
  font-family: var(--wavo-font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: var(--wavo-weight-semibold);
  letter-spacing: var(--wavo-tracking-tight);
  line-height: 1.15;
  text-align: center;
  color: var(--wavo-ink);
  margin: 0 0 var(--wavo-s-2);
}
.wavo-auth__sub--sequoia {
  text-align: center;
  font-size: var(--wavo-fs-body);
  color: var(--wavo-ink-muted);
  line-height: 1.45;
  margin: 0 0 var(--wavo-s-6);
  letter-spacing: var(--wavo-tracking-normal);
}

/* ----- Auth fields: refined Sequoia input (filled, not bordered) --- */
.wavo-field--sequoia .wavo-field__label {
  font-size: var(--wavo-fs-caption);
  font-weight: var(--wavo-weight-medium);
  color: var(--wavo-ink-muted);
  letter-spacing: var(--wavo-tracking-normal);
  padding-left: 2px;
}
.wavo-field--sequoia input.wavo-field__control,
.wavo-field--sequoia select.wavo-field__control,
.wavo-field--sequoia textarea.wavo-field__control {
  height: 48px;
  padding: 0 14px;
  /* Filled-input bg pulled from the tint token so dark mode lands on the
     elevated navy panel rather than a baked-in light blue. */
  background-color: var(--wavo-bg-tint);
  border: 1px solid transparent;
  border-radius: var(--wavo-r-control);
  font-size: var(--wavo-fs-body);
  color: var(--wavo-ink);
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline);
  transition: background-color var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap),
              border-color var(--wavo-dur-fast) var(--wavo-ease-snap);
}
.wavo-field--sequoia textarea.wavo-field__control {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
}
.wavo-field--sequoia input.wavo-field__control:hover,
.wavo-field--sequoia select.wavo-field__control:hover,
.wavo-field--sequoia textarea.wavo-field__control:hover {
  background-color: var(--wavo-bg-tint-deep);
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline-strong);
}
.wavo-field--sequoia input.wavo-field__control:focus,
.wavo-field--sequoia select.wavo-field__control:focus,
.wavo-field--sequoia textarea.wavo-field__control:focus,
.wavo-field--sequoia input.wavo-field__control:active,
.wavo-field--sequoia textarea.wavo-field__control:active {
  background-color: var(--wavo-bg-elevated);
  border-color: var(--wavo-accent);
  box-shadow:
    inset 0 0 0 0.5px var(--wavo-accent),
    0 0 0 4px rgba(84, 113, 175, 0.18),
    0 4px 12px rgba(84, 113, 175, 0.12);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .wavo-field--sequoia input.wavo-field__control:focus,
  .wavo-field--sequoia select.wavo-field__control:focus,
  .wavo-field--sequoia textarea.wavo-field__control:focus {
    box-shadow:
      inset 0 0 0 0.5px var(--wavo-accent),
      0 0 0 4px color-mix(in srgb, var(--wavo-accent) 18%, transparent),
      0 4px 12px color-mix(in srgb, var(--wavo-accent) 12%, transparent);
  }
}
.wavo-field--sequoia.wavo-field--invalid input.wavo-field__control,
.wavo-field--sequoia.wavo-field--invalid select.wavo-field__control {
  border-color: var(--wavo-danger);
  box-shadow: inset 0 0 0 0.5px var(--wavo-danger);
}

/* Sequoia primary button — gradient pill, spring lift on hover */
.wavo-btn.wavo-btn--sequoia,
button.wavo-btn.wavo-btn--sequoia,
a.wavo-btn.wavo-btn--sequoia {
  background-image: linear-gradient(180deg, #6480bf 0%, var(--wavo-accent) 50%, #475f96 100%);
  background-color: var(--wavo-accent);
  color: #fff;
  border: 1px solid rgba(23, 41, 76, 0.18);
  box-shadow:
    var(--wavo-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  font-weight: var(--wavo-weight-medium);
  letter-spacing: var(--wavo-tracking-normal);
  transition: transform var(--wavo-dur-fast) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur-fast) var(--wavo-ease-snap),
              filter var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-btn.wavo-btn--sequoia:hover,
  button.wavo-btn.wavo-btn--sequoia:hover,
  a.wavo-btn.wavo-btn--sequoia:hover {
    transform: translateY(-1px);
    filter: brightness(1.04) saturate(1.05);
    box-shadow:
      var(--wavo-depth-3),
      0 8px 24px rgba(84, 113, 175, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
    color: #fff;
  }
}
.wavo-btn.wavo-btn--sequoia:active,
button.wavo-btn.wavo-btn--sequoia:active,
a.wavo-btn.wavo-btn--sequoia:active {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.96);
}

/* Auth footer link */
.wavo-auth a.wavo-auth__link {
  color: var(--wavo-link);
  font-weight: var(--wavo-weight-medium);
  text-decoration: none;
}
.wavo-auth a.wavo-auth__link:hover { color: var(--wavo-link-hover); text-decoration: underline; }

/* ----- OTP big glyphs with vibrancy backdrop ----------------------- */
.wavo-field--sequoia input.wavo-field__control.wavo-field__control--otp,
.wavo-field--sequoia .wavo-field__control--otp {
  font-size: 28px;
  letter-spacing: 0.4em;
  text-align: center;
  font-family: var(--wavo-font-mono);
  height: 64px;
  font-weight: var(--wavo-weight-semibold);
  background-color: var(--wavo-bg-tint);
  color: var(--wavo-ink);
}
@media (max-width: 400px) {
  .wavo-field--sequoia input.wavo-field__control.wavo-field__control--otp {
    font-size: 24px;
    letter-spacing: 0.3em;
    height: 56px;
  }
}

/* ===================================================================
   Settings-pane account layout (Profile / Activity / Membership)
   =================================================================== */

.wavo-page-header--sequoia {
  margin-bottom: var(--wavo-s-6);
  text-align: center;
}
.wavo-page-header--sequoia .wavo-page-header__eyebrow {
  letter-spacing: 0.12em;
  color: var(--wavo-accent);
  font-size: var(--wavo-fs-micro);
  font-weight: var(--wavo-weight-semibold);
}
.wavo-page-header--sequoia h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: var(--wavo-weight-semibold);
  letter-spacing: var(--wavo-tracking-tight);
  margin: 0 0 var(--wavo-s-3);
}
.wavo-page-header--sequoia .wavo-page-header__lede {
  margin-left: auto;
  margin-right: auto;
  font-size: var(--wavo-fs-body);
}

/* Settings glass pane */
.wavo-settings-pane {
  background: var(--wavo-glass-soft);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  overflow: hidden;
  position: relative;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-settings-pane { background: var(--wavo-mat-fallback); }
}
.wavo-settings-pane + .wavo-settings-pane { margin-top: var(--wavo-s-5); }
.wavo-settings-pane__header {
  padding: var(--wavo-s-4) var(--wavo-s-5) var(--wavo-s-2);
}
.wavo-settings-pane__eyebrow {
  font-size: var(--wavo-fs-micro);
  font-weight: var(--wavo-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--wavo-ink-subtle);
  margin: 0 0 4px;
}
.wavo-settings-pane__title {
  font-family: var(--wavo-font-display);
  font-size: var(--wavo-fs-h4);
  font-weight: var(--wavo-weight-semibold);
  letter-spacing: var(--wavo-tracking-snug);
  color: var(--wavo-ink);
  margin: 0;
}
.wavo-settings-pane__body {
  padding: var(--wavo-s-3) var(--wavo-s-5) var(--wavo-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--wavo-s-4);
}
.wavo-settings-pane__body--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wavo-s-4);
}
@media (max-width: 600px) {
  .wavo-settings-pane__body--grid-2 { grid-template-columns: 1fr; }
}

/* Settings list — hairline-divided rows (System Preferences style) */
.wavo-settings-list {
  background: var(--wavo-glass-strong);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-settings-list { background: var(--wavo-mat-fallback); }
}
.wavo-settings-list__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) 1.4fr auto;
  gap: var(--wavo-s-4);
  align-items: center;
  padding: var(--wavo-s-4) var(--wavo-s-5);
  border-bottom: 1px solid rgba(23, 41, 76, 0.07);
  transition: background-color var(--wavo-dur-fast) var(--wavo-ease-snap);
}
.wavo-settings-list__row:last-child { border-bottom: 0; }
@media (hover: hover) {
  .wavo-settings-list__row:hover { background-color: rgba(84, 113, 175, 0.04); }
}
.wavo-settings-list__category {
  display: inline-flex;
  align-items: center;
  gap: var(--wavo-s-2);
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink-muted);
  font-weight: var(--wavo-weight-medium);
}
.wavo-settings-list__category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wavo-accent);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
}
.wavo-settings-list__desc {
  color: var(--wavo-ink);
  font-size: var(--wavo-fs-body-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wavo-settings-list__date {
  color: var(--wavo-ink-muted);
  font-size: var(--wavo-fs-caption);
  font-family: var(--wavo-font-mono);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 560px) {
  .wavo-settings-list__row {
    grid-template-columns: 1fr;
    gap: var(--wavo-s-1);
    padding: var(--wavo-s-3) var(--wavo-s-4);
  }
  .wavo-settings-list__date { text-align: left; }
}

/* Settings empty state — material backdrop */
.wavo-empty--sequoia {
  background: var(--wavo-glass-soft);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-empty--sequoia { background: var(--wavo-mat-fallback); }
}
.wavo-empty--sequoia .wavo-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wavo-vib-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wavo-accent);
  margin-bottom: var(--wavo-s-3);
  box-shadow: inset 0 0 0 0.5px rgba(84, 113, 175, 0.18);
}
.wavo-empty--sequoia .wavo-empty__icon svg { width: 28px; height: 28px; }

/* Membership — refined Sequoia card */
.wavo-membership--sequoia {
  background: var(--wavo-glass-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  overflow: hidden;
  position: relative;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-membership--sequoia { background: var(--wavo-mat-fallback); }
}
.wavo-membership--sequoia .wavo-membership__header {
  padding: var(--wavo-s-5) var(--wavo-s-6);
  border-bottom: 1px solid rgba(23, 41, 76, 0.07);
  background: linear-gradient(180deg, rgba(84, 113, 175, 0.05) 0%, transparent 100%);
}
.wavo-membership--sequoia .wavo-membership__title {
  font-size: var(--wavo-fs-h3);
  letter-spacing: var(--wavo-tracking-snug);
}
.wavo-membership--sequoia .wavo-membership__footer {
  padding: var(--wavo-s-5) var(--wavo-s-6);
  background: var(--wavo-bg-tint);
  border-top: 1px solid var(--wavo-hairline);
}
.wavo-membership--sequoia .wavo-membership__media {
  border-radius: var(--wavo-r-control);
  overflow: hidden;
  transition: transform var(--wavo-dur) var(--wavo-ease-snap),
              box-shadow var(--wavo-dur) var(--wavo-ease-snap);
  box-shadow: var(--wavo-depth-1);
}
@media (hover: hover) {
  .wavo-membership--sequoia .wavo-membership__media:hover {
    transform: translateY(-2px);
    box-shadow: var(--wavo-depth-3);
  }
}

/* Section wash for account pages — subtle Sequoia wallpaper */
.wavo-section--sequoia {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(84, 113, 175, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(23, 41, 76, 0.04), transparent 60%),
    var(--wavo-bg);
}

/* Form actions row — Sequoia variant */
.wavo-form-actions--sequoia {
  padding-top: var(--wavo-s-5);
  border-top: 1px solid rgba(23, 41, 76, 0.07);
  margin-top: var(--wavo-s-5);
}

/* ----- intl-tel-input adjustments inside Sequoia field ------------- */
.wavo-field--sequoia .iti { width: 100%; display: block; }
.wavo-field--sequoia .iti input.wavo-field__control { padding-left: 96px; }
@media (max-width: 400px) {
  .wavo-field--sequoia .iti input.wavo-field__control { padding-left: 88px; }
}
.wavo-field--sequoia .iti--separate-dial-code .iti__selected-flag {
  background: transparent;
  border-right: 1px solid rgba(23, 41, 76, 0.08);
}
.wavo-field--sequoia .iti--separate-dial-code .iti__selected-dial-code {
  color: var(--wavo-ink);
  font-weight: var(--wavo-weight-medium);
}

/* Helper hints under inputs — softer */
.wavo-field--sequoia .wavo-field__hint {
  font-size: var(--wavo-fs-caption);
  color: var(--wavo-ink-subtle);
  padding-left: 2px;
  letter-spacing: var(--wavo-tracking-normal);
}

/* Consent — softer in Sequoia */
.wavo-consent--sequoia {
  font-size: var(--wavo-fs-body-sm);
  color: var(--wavo-ink-muted);
  line-height: 1.5;
  padding: var(--wavo-s-2) 0;
}

/* Mobile auth tighter */
@media (max-width: 560px) {
  .wavo-auth__title--sequoia,
  h1.wavo-auth__title--sequoia { font-size: 24px; }
  .wavo-auth__sub--sequoia { font-size: var(--wavo-fs-body-sm); margin-bottom: var(--wavo-s-5); }
}

/* =====================================================================
   macOS Sequoia — Modal springs, skip link, image fade-in, and
   reduced-motion overrides.
   ---------------------------------------------------------------------
   NOTE: `.wavo-reveal` / `.wavo-reveal.is-in` / `.wavo-reveal-group`
   moved to wavo-motion.css in Phase 7 alongside the scroll-driven
   animations they pair with.
   ===================================================================== */

/* ===== Bootstrap modal — Sequoia spring open/close =====
   Bootstrap 3 toggles .in on .modal.fade and .modal-dialog. We override
   the default linear opacity-only fade with a Sequoia spring scale-in. */
.modal.fade .modal-dialog {
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition: transform 320ms var(--wavo-ease-spring),
              opacity var(--wavo-dur) var(--wavo-ease-soft);
}
.modal.fade.in .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Backdrop fades with material-blur feel — softer than Bootstrap's
   default flat black. */
.modal-backdrop.fade {
  opacity: 0;
  transition: opacity var(--wavo-dur) var(--wavo-ease-soft);
}
.modal-backdrop.fade.in {
  opacity: 0.5;
}
/* iOS Safari 15-17 supports -webkit-backdrop-filter only; iOS 18+ and
   desktop browsers support unprefixed. Test for either so iOS 15-17
   users still get the frosted modal backdrop. */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .modal-backdrop.in {
    background: rgba(23, 41, 76, 0.32);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
  }
}

/* NOTE: skip-link styling lives in wavo-base.css (.wavo-skip-link).
   Earlier .wavo-skip / .skip-link rules were removed — no view used them
   (only .wavo-skip-link is in _Layout.cshtml). */

/* ===== Generic image fade-in helper =====
   Add data-wavo-fade to any <img> and the wavo.js loader will toggle
   .is-loaded after the image is decoded. */
img[data-wavo-fade] {
  transition: opacity 320ms var(--wavo-ease-soft);
}
img[data-wavo-fade]:not(.is-loaded) { opacity: 0; }
img[data-wavo-fade].is-loaded { opacity: 1; }

/* ===== Focus rings — replace flat outlines with layered Sequoia glow ===== */
.wavo-link-cta:focus-visible,
.wavo-chip:focus-visible,
.wavo-navbar__nav a:focus-visible {
  outline: none;
  border-radius: var(--wavo-r-control);
  box-shadow: var(--wavo-depth-glow);
}

/* ===== prefers-reduced-motion — zero out all Sequoia motion =====
   The tokens already collapse durations to 0, but we kill the transforms
   themselves so motion-sensitive users see no movement at all. */
@media (prefers-reduced-motion: reduce) {
  .wavo-btn,
  .wavo-btn:hover,
  .wavo-btn:active,
  .wavo-chip,
  .wavo-chip:hover,
  .wavo-chip:active,
  .wavo-card,
  .wavo-card:hover,
  .wavo-card:hover .wavo-card__media img,
  .wavo-card--sequoia:hover,
  .wavo-message--sequoia:hover,
  .wavo-stat--sequoia:hover,
  .wavo-partner-tile:hover,
  .wavo-carousel__btn,
  .wavo-carousel__btn:hover,
  .wavo-carousel__btn:active,
  .wavo-carousel__dot,
  .wavo-carousel__dot.is-active,
  .wavo-carousel__dot::before,
  .wavo-carousel__dot.is-active::before,
  .wavo-footer__social a:hover,
  .wavo-footer__social a:active,
  .wavo-accordion__icon,
  .wavo-accordion--sequoia .wavo-accordion__icon {
    transform: none !important;
  }
  .wavo-btn,
  .wavo-chip,
  .wavo-card,
  .wavo-card__media img,
  .wavo-accordion__panel,
  .wavo-accordion__icon,
  .modal.fade .modal-dialog,
  .modal-backdrop.fade,
  .wavo-skip-link,
  img[data-wavo-fade] {
    transition: none !important;
  }
  /* Reveal: skip animation; show in place immediately. */
  .wavo-reveal,
  .wavo-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Image fade-in: show immediately. */
  img[data-wavo-fade] { opacity: 1 !important; }
}

/* =====================================================================
   macOS Sequoia fidelity pass — applied to base primitives so the design
   reads Apple-grade even outside the explicit `--sequoia` variants.
   ---------------------------------------------------------------------
   Why this block exists:
   The earlier blocks built strong Sequoia variants (`--sequoia`, `--glow`,
   `--vibrancy`) but the *defaults* (`.wavo-card`, `.wavo-btn--primary`,
   `.wavo-chip`, `.wavo-pricebox`, `.wavo-message`, `.wavo-accordion`,
   plain inputs) were still flat. Sequoia ships *every* control with the
   liquid-stroke + inner-shine + soft outer shadow combo — there is no
   "second-tier" surface in Finder, Settings, App Store. This block lifts
   the bar across the board so the whole site reads as one material system.
   Everything below is purely additive and avoids the legacy-override
   block so we don't fight specificity with the bootstrap shims.
   ===================================================================== */

/* ----- Base card — liquid stroke + inner shine, not a flat panel ----- */
.wavo-card {
  /* Two-shadow stack: depth-1 at rest (drop) + liquid-stroke (inner
     hairline + top sheen + bottom darken). This is the Sequoia card
     signature — it's what makes Finder/App Store cards feel "lit". */
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
}
.wavo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Top sheen — soft 26% fade. Matches Sequoia's "specular" highlight
     on Finder cards. Sits above media but under content. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 28%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.wavo-card > * { position: relative; z-index: 2; }
@media (hover: hover) {
  .wavo-card:hover {
    box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
  }
}

/* ----- Base primary button — inner top sheen + hairline ribbon ------ */
/* Sequoia primary controls always have an internal top-shine + a half-
   pixel inner border + a soft outer depth. Without these the button
   feels printed onto the page. The legacy-override block also restyles
   .wavo-btn--primary at the bottom of this file; we boost specificity
   here with the [class] attribute selector so we win the cascade
   without touching that override (which is the contract). */
button.wavo-btn[class*="wavo-btn--primary"],
a.wavo-btn[class*="wavo-btn--primary"],
.wavo-btn.wavo-btn--primary {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--wavo-accent) 88%, white 12%) 0%,
    var(--wavo-accent) 55%,
    color-mix(in srgb, var(--wavo-accent) 92%, black 8%) 100%);
  box-shadow:
    var(--wavo-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    inset 0 0 0 0.5px rgba(23, 41, 76, 0.22);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  /* Hex fallback for browsers without color-mix — pre-baked light/dark
     stops for #5471af (--wavo-accent). */
  button.wavo-btn[class*="wavo-btn--primary"],
  a.wavo-btn[class*="wavo-btn--primary"],
  .wavo-btn.wavo-btn--primary {
    background-image: linear-gradient(180deg, #6480bf 0%, #5471af 55%, #4d68a1 100%);
  }
}
@media (hover: hover) {
  button.wavo-btn[class*="wavo-btn--primary"]:hover,
  a.wavo-btn[class*="wavo-btn--primary"]:hover,
  .wavo-btn.wavo-btn--primary:hover {
    filter: brightness(1.04) saturate(1.04);
    box-shadow:
      var(--wavo-depth-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10),
      inset 0 0 0 0.5px rgba(23, 41, 76, 0.24);
  }
}

/* Secondary buttons — give them the same hairline-ribbon treatment so
   they read as glass pills rather than outlined links. */
button.wavo-btn.wavo-btn--secondary,
a.wavo-btn.wavo-btn--secondary,
.wavo-btn.wavo-btn--secondary {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow:
    inset 0 0 0 0.5px var(--wavo-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(23, 41, 76, 0.05);
}

/* Ghost buttons — translucent pill with very soft inner ribbon */
button.wavo-btn.wavo-btn--ghost,
a.wavo-btn.wavo-btn--ghost,
.wavo-btn.wavo-btn--ghost {
  background-color: rgba(23, 41, 76, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(23, 41, 76, 0.06);
}
@media (hover: hover) {
  button.wavo-btn.wavo-btn--ghost:hover,
  a.wavo-btn.wavo-btn--ghost:hover,
  .wavo-btn.wavo-btn--ghost:hover {
    background-color: rgba(23, 41, 76, 0.08);
    box-shadow: inset 0 0 0 1px rgba(23, 41, 76, 0.32);
  }
}

/* ----- Chips — Sequoia status pill: leading dot + soft halo --------- */
/* Status variants get a 6px colored dot with a glow halo. This is the
   hallmark of Sequoia status chips (Mail flags, Calendar invites,
   Reminders priority). The dot is rendered via ::before so we never
   touch markup. */
.wavo-chip--success::before,
.wavo-chip--danger::before,
.wavo-chip--brand::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 2px;
}
.wavo-chip--success::before {
  background: var(--wavo-success);
  box-shadow: 0 0 0 2px rgba(45, 164, 78, 0.18);
}
.wavo-chip--danger::before {
  background: var(--wavo-danger);
  box-shadow: 0 0 0 2px rgba(213, 0, 0, 0.18);
}
.wavo-chip--brand::before {
  background: var(--wavo-brand);
  box-shadow: 0 0 0 2px rgba(23, 41, 76, 0.14);
}
/* (Removed) An earlier fidelity-pass `.wavo-chip { background-color: rgba(23,41,76,0.04);
   box-shadow: inset 0 0 0 0.5px rgba(23,41,76,0.06); }` block lived here. Both properties
   are fully superseded by the Liquid Glass amplification pass below (line ~4951+) which
   sets the same properties with translucent `--wavo-mat-thin` + inset white sheen. Kept
   the comment as a tombstone so a future agent doesn't re-add a flat chip ribbon. */

/* ----- Pricebox (base) — liquid stroke + inner shine ---------------- */
.wavo-pricebox {
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  position: relative;
  isolation: isolate;
}
.wavo-pricebox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 22%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.wavo-pricebox > * { position: relative; z-index: 1; }

/* ----- Plain accordion — liquid items, not bare hairlines ----------- */
/* The bare `.wavo-accordion` (no `--sequoia` modifier) was just stacked
   hairlines. Sequoia disclosure groups in Settings/Books use rounded
   item cards with a liquid stroke and a soft hover wash. We keep the
   same DOM but apply the glass treatment to each item. */
.wavo-accordion:not(.wavo-accordion--sequoia) {
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wavo-accordion:not(.wavo-accordion--sequoia) > .wavo-accordion__item {
  border: 1px solid var(--wavo-hairline);
  border-radius: var(--wavo-r-window);
  background: var(--wavo-bg-elevated);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  overflow: hidden;
  transition: box-shadow var(--wavo-dur) var(--wavo-ease-soft),
              border-color var(--wavo-dur) var(--wavo-ease-soft);
}
.wavo-accordion:not(.wavo-accordion--sequoia) > .wavo-accordion__item.is-open {
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
  border-color: rgba(84, 113, 175, 0.22);
}
.wavo-accordion:not(.wavo-accordion--sequoia) > .wavo-accordion__item > .wavo-accordion__trigger {
  padding: var(--wavo-s-5) var(--wavo-s-5);
  border-radius: inherit;
  transition: background var(--wavo-dur-fast) var(--wavo-ease-snap);
}
@media (hover: hover) {
  .wavo-accordion:not(.wavo-accordion--sequoia) > .wavo-accordion__item > .wavo-accordion__trigger:hover {
    background: var(--wavo-vib-accent);
  }
}
.wavo-accordion:not(.wavo-accordion--sequoia) > .wavo-accordion__item > .wavo-accordion__panel > .wavo-accordion__panel-inner {
  padding: 0 var(--wavo-s-5) var(--wavo-s-5);
}

/* ----- Plain message — match Sequoia card chrome -------------------- */
.wavo-message:not(.wavo-message--sequoia) {
  border-radius: var(--wavo-r-window);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
  position: relative;
  isolation: isolate;
}
.wavo-message:not(.wavo-message--sequoia)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 24%);
  pointer-events: none;
  z-index: 0;
}
.wavo-message:not(.wavo-message--sequoia) > * { position: relative; z-index: 1; }

/* ----- Hero wallpaper wash — Sequoia desktop-picture pastel blobs ----- */
/* Sequoia desktop pictures use vivid 30-40% pastel blobs (lavender, peach,
   mint, blue) over a near-white canvas; the hero feels like a Sequoia login
   screen, not a faintly tinted page. Five overlapping blobs across the
   viewport. Transparent base — the body wallpaper bleeds through too. */
.wavo-hero-sequoia::before {
  background:
    radial-gradient(85vw 80vh at 8% -8%, rgba(127, 153, 211, 0.42), transparent 55%),
    radial-gradient(65vw 60vh at 95% 4%, rgba(195, 162, 224, 0.34), transparent 55%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(122, 168, 197, 0.30), transparent 60%),
    radial-gradient(45vw 45vh at 78% 55%, rgba(238, 196, 188, 0.24), transparent 60%),
    radial-gradient(40vw 40vh at 18% 70%, rgba(166, 213, 196, 0.22), transparent 60%);
}
@media (prefers-reduced-transparency: reduce) {
  /* macOS "Reduce Transparency" + low-end GPU heuristic: drop ALL
     backdrop-filter surfaces to opaque equivalents when the user has asked
     for opacity over vibrancy. Doubles as a perf budget on hardware where
     backdrop-filter throttles scrolling. */
  .wavo-hero-sequoia::before { background: var(--wavo-bg); }
  body.wavo-body::before { background: var(--wavo-bg); }
  .wavo-material,
  .wavo-navbar,
  .wavo-navbar.is-scrolled,
  .wavo-cookie,
  .wavo-carousel__btn,
  .wavo-auth__card.wavo-auth__card--sequoia,
  .wavo-settings-pane,
  .wavo-settings-list,
  .wavo-empty--sequoia,
  .wavo-membership--sequoia,
  .wavo-navbar__search input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--wavo-mat-fallback);
  }
  .modal-backdrop.in {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Dim layer — slightly heavier in dark mode since the backdrop blur is
       absent. Token-driven via the existing wavo-bg-inverse (navy ↔ near-white). */
    background: color-mix(in srgb, var(--wavo-bg-inverse) 50%, transparent);
  }
}

/* Lift the body wallpaper wash — the page sits on a vivid Sequoia desktop
   picture, not a near-white sheet. Multi-color radial blobs (lavender,
   peach, mint, blue) saturated to 28-38% so the wallpaper is unmistakable
   through every translucent section. Pages without .wavo-hero-sequoia
   still sit on this Sequoia-grade backdrop. */
body.wavo-body::before {
  background:
    radial-gradient(90vw 85vh at 5% -12%, rgba(127, 153, 211, 0.38), transparent 55%),
    radial-gradient(70vw 70vh at 95% 6%, rgba(195, 162, 224, 0.30), transparent 55%),
    radial-gradient(65vw 60vh at 50% 100%, rgba(122, 168, 197, 0.26), transparent 60%),
    radial-gradient(45vw 45vh at 78% 55%, rgba(238, 196, 188, 0.22), transparent 60%),
    radial-gradient(45vw 45vh at 22% 65%, rgba(166, 213, 196, 0.20), transparent 60%),
    var(--wavo-bg);
}

/* ----- Form fields — Sequoia filled style on base controls ---------- */
/* Sequoia inputs are *filled* (soft tint) by default, not bordered with
   a 1px hairline. Promote the base `.wavo-field__control` to a filled
   pill-radius input. The legacy-override block already wins on raw
   `input.wavo-field__control` selectors, so we mirror it here with the
   same specificity to swap white/hairline for tint/half-pixel-ring.
   The `--sequoia` modifier elsewhere wins over this when present. */
input.wavo-field__control:not(.wavo-field--sequoia *),
select.wavo-field__control:not(.wavo-field--sequoia *),
textarea.wavo-field__control:not(.wavo-field--sequoia *),
.wavo-field:not(.wavo-field--sequoia) input.wavo-field__control,
.wavo-field:not(.wavo-field--sequoia) select.wavo-field__control,
.wavo-field:not(.wavo-field--sequoia) textarea.wavo-field__control {
  background-color: var(--wavo-bg-tint);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline);
}
.wavo-field:not(.wavo-field--sequoia) input.wavo-field__control:hover,
.wavo-field:not(.wavo-field--sequoia) select.wavo-field__control:hover,
.wavo-field:not(.wavo-field--sequoia) textarea.wavo-field__control:hover {
  background-color: var(--wavo-bg-tint-deep);
  box-shadow: inset 0 0 0 0.5px var(--wavo-hairline-strong);
}
.wavo-field:not(.wavo-field--sequoia) input.wavo-field__control:focus,
.wavo-field:not(.wavo-field--sequoia) select.wavo-field__control:focus,
.wavo-field:not(.wavo-field--sequoia) textarea.wavo-field__control:focus {
  background-color: var(--wavo-bg-elevated);
  border-color: var(--wavo-accent);
  box-shadow:
    inset 0 0 0 0.5px var(--wavo-accent),
    0 0 0 4px rgba(84, 113, 175, 0.16),
    0 4px 12px rgba(84, 113, 175, 0.10);
}

/* ----- Typography — text-wrap balance on headings, optical sizing --- */
/* Sequoia uses balanced wrapping on h1/h2 (marketing headlines) plus
   pretty wrap on body text. Applied here as a default — supported
   browsers get it, others ignore unsupported properties. */
.wavo-section h1,
.wavo-section h2,
.wavo-container h1,
.wavo-container h2,
.wavo-page-header h1,
.wavo-page-header h2 {
  text-wrap: balance;
}
.wavo-lede,
.wavo-page-header__lede,
.wavo-prose p {
  text-wrap: pretty;
}
/* Optical sizing — SF Pro Display is optically sized; let the font use
   its display-optimized glyphs at larger sizes. */
.wavo-coursehero__title,
.wavo-feature__title,
.wavo-section h1,
.wavo-container h1 {
  font-optical-sizing: auto;
}

/* ----- Focus rings — uniform Sequoia soft-glow on interactive ------- */
/* Replace the system flat 3px outline with a layered Sequoia halo on
   the elements that matter most. The base rule in wavo-base.css gives
   the basic glow; here we lift it to the soft 4-stop halo that ships
   in Sequoia for ANY focusable control. */
.wavo-btn:focus-visible,
.wavo-chip:focus-visible,
.wavo-navbar__search-btn:focus-visible,
.wavo-navbar__menu-btn:focus-visible,
.wavo-footer__social a:focus-visible,
.wavo-carousel__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(84, 113, 175, 0.45),
    0 0 0 4px rgba(84, 113, 175, 0.18),
    0 8px 24px rgba(84, 113, 175, 0.18);
}

/* ----- Carousel arrow — slightly thicker liquid-glass material ------ */
/* The current rule is good but the at-rest state could push thicker
   for better visibility on busy hero washes. */
.wavo-carousel__btn {
  box-shadow:
    var(--wavo-depth-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(23, 41, 76, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
}

/* ----- Inverse / dark section — preserve sheen on chips, buttons ---- */
/* When chips/buttons sit on .wavo-section--dark, make sure the leading
   dot still glows and the button sheen doesn't disappear into the navy
   surround. */
.wavo-section--dark .wavo-chip--brand {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.wavo-section--dark .wavo-chip--brand::before {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* NOTE: macOS Sequoia scroll-driven motion (parallax / view-timeline /
   reveal / scroll-progress / reduced-motion gate) moved to wavo-motion.css
   in Phase 7. The IntersectionObserver-based .wavo-reveal class also lives
   there. */

/* NOTE: macOS Sequoia system controls (segmented / toggle / setting-row /
   stepper / select-pop / field--popover) moved to wavo-controls.css in
   Phase 7. */

/* =====================================================================
   macOS Sequoia — Liquid Glass amplification pass
   ---------------------------------------------------------------------
   The earlier fidelity pass made most defaults Sequoia-grade, but several
   discrete surfaces (chips, pricebox base, modals, footer, membership,
   enroll/checkout cards) were still flat-opaque. This block lifts them
   all to translucent material with backdrop blur so the body wallpaper
   bleeds through every layer of the UI — the entire site reads as one
   continuous Liquid Glass stack.

   Performance budget (concurrent backdrop-filter surfaces above the fold):
     - 1 navbar
     - up to 6 cards (typical hero row)
     - 1-2 footer/modal at any time
     - 0-2 carousel buttons
     Total: 8-10 max. Footer uses thin material (cheaper blur radius).
     Chips use blur(10px) which is half of mat-blur — lighter to composite.

   All selectors append `:where()` or boost specificity only where the
   legacy override block beats us. The `--sequoia` variants always win
   over the base promotions below via the explicit-modifier specificity.
   ===================================================================== */

/* ----- Chips (base) — thin material + blur so they read as glass pills -
   The fidelity pass gave .wavo-chip a flat rgba ribbon. Sequoia chips
   (Reminders priority, Mail flags) are translucent — placed on a glass
   card they pick up the card's color through 10px of blur. */
.wavo-chip {
  background-color: var(--wavo-mat-thin);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow:
    inset 0 0 0 0.5px rgba(23, 41, 76, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-chip { background-color: var(--wavo-bg-tint); }
}
/* Colored status chips — keep the vibrancy hue but float on a translucent
   tinted material so the dot reads as "lit" rather than printed. */
.wavo-chip--success,
.wavo-chip--danger,
.wavo-chip--brand {
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-chip--success { background-color: rgba(232, 245, 235, 0.95); }
  .wavo-chip--danger  { background-color: rgba(252, 230, 230, 0.95); }
  .wavo-chip--brand   { background-color: rgba(228, 232, 240, 0.95); }
}

/* ----- Card hover — backdrop saturate boost --------------------------
   When the user hovers a card, push the backdrop saturation up to 200%
   so the wallpaper colors behind the card pop more vividly through the
   glass. Sequoia uses this same trick on Finder window focus. The blur
   radius stays at 24px — we do NOT transition the filter itself
   (recomposite cost), we only swap the value on hover. */
@media (hover: hover) {
  .wavo-card:hover {
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
  }
  .wavo-card--sequoia:hover {
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
  }
}

/* ----- Card media — top sheen so image area joins the glass surface ---
   The .wavo-card__media is overflow:hidden inside the glass card. Add a
   subtle inset top-sheen so the image meets the card's inner-shine
   uninterrupted — Sequoia content tiles (App Store, TV) all have this. */
.wavo-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(23, 41, 76, 0.06);
  z-index: 3;
}

/* Guard: the thumbnail always fills the 16:10 media frame even when the source
   image is shorter than the box (no gap), defeating any element-level img
   height/object-fit leaking from style.css / custom.css which load afterwards. */
.wavo-card__media img {
  width: 100% !important;
  object-fit: cover !important;
}

/* ----- Primary button — subtle backdrop blur so glass surfaces beneath
   add depth. The gradient is opaque enough that very little wallpaper
   bleeds through, but on glass cards the soft halo around the button
   picks up the underlying material. Cheap 6px blur — barely costs a
   composite layer. */
button.wavo-btn[class*="wavo-btn--primary"],
a.wavo-btn[class*="wavo-btn--primary"],
.wavo-btn.wavo-btn--primary {
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

/* ----- Ghost button — thin material + blur ----------------------------
   Was a flat rgba(0,0,0,0.04). Promote to thin material so the button
   appears as a translucent chiclet that the wallpaper tints. */
button.wavo-btn.wavo-btn--ghost,
a.wavo-btn.wavo-btn--ghost,
.wavo-btn.wavo-btn--ghost {
  background-color: var(--wavo-vib-accent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  /* WCAG 1.4.11: the old 0.06-alpha ring was ~2.99:1 on the translucent
     navbar — the "Sign in" pill read as plain text with no affordance.
     A 1px 0.24-alpha navy ring clears the 3:1 non-text-contrast bar while
     staying a quiet Sequoia chiclet. Pin the label to full-strength ink. */
  color: var(--wavo-ink);
  box-shadow: inset 0 0 0 1px rgba(23, 41, 76, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  button.wavo-btn.wavo-btn--ghost,
  a.wavo-btn.wavo-btn--ghost,
  .wavo-btn.wavo-btn--ghost {
    background-color: var(--wavo-bg-tint);
  }
}

/* ----- Pricebox (base) — promote to true glass -----------------------
   The fidelity pass added a top sheen + liquid stroke but left the
   background flat. Promote to translucent material so the wallpaper
   bleeds through behind the price, matching the --glass variant. */
.wavo-pricebox {
  background-color: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-pricebox { background-color: var(--wavo-bg-elevated); }
}

/* ----- Bootstrap modal-content — Sequoia sheet material --------------
   The commerce file styles specific modal IDs with flat var(--wavo-bg-
   elevated). Override across all Bootstrap modal-content surfaces so
   any modal that opens on top of the wallpaper-washed page reads as a
   true frosted sheet. Specificity boost via .modal-dialog wrapper. */
.modal .modal-content,
.modal-dialog .modal-content {
  background-color: var(--wavo-mat-thick);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  border-radius: var(--wavo-r-window);
  border: 1px solid var(--wavo-hairline);
  box-shadow: var(--wavo-depth-4), var(--wavo-liquid-stroke);
  /* isolate so the traffic-light ::before pseudo stays on top of the
     modal header but never escapes the rounded clip. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Mac window traffic-light dots on every Bootstrap modal — pinned to
   the top-left of the modal sheet, sitting OVER the modal-header. This
   is what makes a frosted dialog read as "a Mac window" rather than
   "a tinted popup". Decorative via aria-hidden default; never traps
   clicks (pointer-events: none on the dot strip).
   We anchor at top: 12px left: 18px which matches AppKit window metrics
   (NSWindow titlebar inset). On <=560px we hide them — at tiny widths
   the dots crowd the title text. */
.modal .modal-content::after,
.modal-dialog .modal-content::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wavo-tl-close);
  box-shadow:
    18px 0 0 var(--wavo-tl-min),
    36px 0 0 var(--wavo-tl-max),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 560px) {
  .modal .modal-content::after,
  .modal-dialog .modal-content::after { display: none; }
}
/* Shift the modal-header title to clear the traffic-light dots — the
   dots take ~58px of horizontal space at the top-left so the title
   needs room. Only apply on header rows that contain a title (not on
   headerless dialogs). */
.modal .modal-content > .modal-header,
.modal-dialog .modal-content > .modal-header {
  padding-left: 78px;
}
@media (max-width: 560px) {
  .modal .modal-content > .modal-header,
  .modal-dialog .modal-content > .modal-header { padding-left: 18px; }
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .modal .modal-content,
  .modal-dialog .modal-content { background-color: var(--wavo-bg-elevated); }
}
/* Body / header / footer of the modal — let them inherit the sheet glass.
   The header sits on a vibrancy tint already (commerce S17); ensure body
   stays transparent so the material shows through uninterrupted. */
.modal .modal-body,
.modal-dialog .modal-body { background: transparent; }

/* ----- Footer — push toward thin material so wallpaper bleeds through -
   The footer was a flat gradient onto var(--wavo-bg-tint). Promote to
   translucent thin material with blur. Sequoia Finder/Settings footers
   are vibrancy materials — the desktop picture bleeds through the bottom
   of the window. We keep the soft top gradient as a fade-in but the body
   is now glass. */
.wavo-footer {
  background:
    linear-gradient(180deg, transparent 0%, var(--wavo-mat-thin) 88px),
    var(--wavo-mat-thin);
  backdrop-filter: saturate(170%) blur(20px);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-footer { background: var(--wavo-bg-tint); }
}

/* ----- Membership block — Sequoia card material ---------------------
   The .wavo-membership panel was opaque. Promote to the same regular
   material as .wavo-card so it reads as a continuation of the glass
   surface system. */
.wavo-membership {
  background-color: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  box-shadow: var(--wavo-depth-2), var(--wavo-liquid-stroke);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-membership { background-color: var(--wavo-bg-elevated); }
}

/* ----- Auth card (base) — promote to glass --------------------------
   The --sequoia modifier was already glass. The plain base was flat
   white. Lift the base so any auth screen without the modifier still
   reads as a Mac sheet floating on the wallpaper. */
.wavo-auth__card {
  background-color: var(--wavo-mat-thick);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  box-shadow: var(--wavo-depth-3), var(--wavo-liquid-stroke);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-auth__card { background-color: var(--wavo-bg-elevated); }
}

/* ----- Empty state — thin material so it doesn't read as a hole ----- */
.wavo-empty {
  /* Without a background it shows the body wallpaper through. That's the
     intent — keep it transparent but ensure the typography stays
     readable via the existing color tokens. No change needed here. */
}

/* ----- Notice / alert — Sequoia inline glass --------------------------
   Was a flat tint background. Promote to translucent thin material so
   the wallpaper bleeds through behind the colored left rail. The status
   variants keep their tinted backgrounds (success/danger/warning) since
   those carry semantic meaning. */
.wavo-notice {
  background-color: var(--wavo-mat-thin);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-notice { background-color: var(--wavo-bg-tint); }
}
/* Keep the success/danger/warning bg overrides — they need the semantic
   color tint, not the neutral glass. The blur applies on top of the tint. */
.wavo-notice--success,
.wavo-notice--danger,
.wavo-notice--warning {
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}

/* ----- Quote card — thin material vibrancy ---------------------------
   Quote callouts (testimonials, announcements) were flat bg-tint.
   Promote to translucent so the wallpaper hue tints them subtly. */
.wavo-quote {
  background-color: var(--wavo-mat-thin);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-quote { background-color: var(--wavo-bg-tint); }
}

/* ----- Table wrap — Sequoia outline-list material ---------------------
   Settings tables in Sequoia are translucent rounded panes. Lift our
   table container to match. The thead row keeps its slightly darker
   tint so the column headers still read as a band. */
.wavo-table-wrap {
  background-color: var(--wavo-mat-thick);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
  box-shadow: var(--wavo-depth-1), var(--wavo-liquid-stroke);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-table-wrap { background-color: var(--wavo-bg-elevated); }
}

/* ----- Enrollment card + checkout card — glass parity with .wavo-card -
   The consumption + commerce CSS files declared these as flat
   var(--wavo-bg-elevated). Lift them to the same regular material as
   .wavo-card so the whole user journey (browse → checkout → enrolled
   → assessment) sits on one continuous glass system. */
.wavo-enroll-card,
.wavo-checkout-card,
.wavo-grant-card,
.wavo-registered-card {
  background-color: var(--wavo-mat-regular);
  backdrop-filter: var(--wavo-mat-blur);
  -webkit-backdrop-filter: var(--wavo-mat-blur);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .wavo-enroll-card,
  .wavo-checkout-card,
  .wavo-grant-card,
  .wavo-registered-card { background-color: var(--wavo-bg-elevated); }
}

/* ----- Form field — Sequoia filled glass on focus --------------------
   The fidelity pass made fields filled-tint but flat. Add a faint blur
   so when the field sits on a glass surface, the underlying material
   bleeds through subtly. Light blur (6px) — cheap on the GPU. */
.wavo-field:not(.wavo-field--sequoia) input.wavo-field__control,
.wavo-field:not(.wavo-field--sequoia) select.wavo-field__control,
.wavo-field:not(.wavo-field--sequoia) textarea.wavo-field__control {
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

/* ----- prefers-reduced-transparency — drop new glass to opaque --------
   Extend the existing reduce-transparency block so the surfaces we
   just promoted also fall back to opaque equivalents. macOS "Reduce
   Transparency" users + low-end GPUs get the full opaque set. */
@media (prefers-reduced-transparency: reduce) {
  .wavo-chip,
  .wavo-chip--success,
  .wavo-chip--danger,
  .wavo-chip--brand,
  .wavo-pricebox,
  .modal .modal-content,
  .modal-dialog .modal-content,
  .wavo-footer,
  .wavo-membership,
  .wavo-auth__card,
  .wavo-notice,
  .wavo-quote,
  .wavo-table-wrap,
  .wavo-enroll-card,
  .wavo-checkout-card,
  .wavo-grant-card,
  .wavo-registered-card,
  button.wavo-btn.wavo-btn--ghost,
  a.wavo-btn.wavo-btn--ghost,
  .wavo-btn.wavo-btn--ghost,
  button.wavo-btn[class*="wavo-btn--primary"],
  a.wavo-btn[class*="wavo-btn--primary"],
  .wavo-btn.wavo-btn--primary,
  .wavo-field:not(.wavo-field--sequoia) input.wavo-field__control,
  .wavo-field:not(.wavo-field--sequoia) select.wavo-field__control,
  .wavo-field:not(.wavo-field--sequoia) textarea.wavo-field__control {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .wavo-footer { background: var(--wavo-bg-tint); }
  .wavo-pricebox,
  .wavo-membership,
  .wavo-auth__card,
  .wavo-table-wrap,
  .wavo-enroll-card,
  .wavo-checkout-card,
  .wavo-grant-card,
  .wavo-registered-card,
  .modal .modal-content,
  .modal-dialog .modal-content {
    background-color: var(--wavo-bg-elevated);
  }
  .wavo-chip,
  .wavo-notice,
  .wavo-quote { background-color: var(--wavo-bg-tint); }
}

/* =====================================================================
   Sequoia v2 — Perf + A11y reconciliation pass
   ===================================================================== */

/* Chip cost: drop backdrop-filter on chips inside cards. Cards already
   paint on mat-regular (72% white) + 24px blur, so chips inside the card
   sit on an already-frosted surface. Stacking a second blur context per
   chip costs an extra compositor buffer; a 6-card x 4-chip rail spawns
   24 redundant buffers. Standalone chips keep their glass. */
.wavo-card .wavo-chip,
.wavo-card__chips .wavo-chip,
.wavo-card .wavo-chip--success,
.wavo-card .wavo-chip--danger,
.wavo-card .wavo-chip--brand {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--wavo-bg-tint);
}
.wavo-card .wavo-chip--success { background-color: var(--wavo-success-bg); }
.wavo-card .wavo-chip--danger  { background-color: var(--wavo-danger-bg); }
.wavo-card .wavo-chip--brand   { background-color: rgba(23, 41, 76, 0.08); }

/* Section reveal scope-tighten. Original selector matched every
   first-level descendant of every container/section, spawning hundreds
   of view-timeline instances on long pages. Reveal is opt-in via
   .wavo-reveal; cancel the broad selector and keep the explicit one. */
@supports (animation-timeline: view()) {
  .wavo-section > .wavo-container > *:not(.wavo-reveal),
  .wavo-section > *:not(.wavo-reveal):not(.wavo-container) {
    animation: none;
    will-change: auto;
  }
  .wavo-reveal {
    animation: wavo-section-reveal linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 22%;
  }
}

/* Noise grain vs parallax. body::after uses mix-blend-mode: overlay,
   which forces a recomposite of the blended layer when body::before
   parallax transforms. Drop blend mode on engines without scroll-
   timeline and under reduce-transparency. */
@supports not (animation-timeline: scroll()) {
  body.wavo-body::after { mix-blend-mode: normal; opacity: 0.04; }
}
@media (prefers-reduced-transparency: reduce) {
  body.wavo-body::after { display: none; }
}

/* Reduce-transparency gap-fill. The 4239 + 5136 blocks miss the most-
   rendered surface on the home fold, .wavo-card, and its --sequoia
   variant, the card hover boost, the footer social pills, and the
   hero pseudo. */
@media (prefers-reduced-transparency: reduce) {
  .wavo-card,
  .wavo-card--sequoia,
  .wavo-card.wavo-card--sequoia,
  .wavo-footer__social a,
  .wavo-hero-sequoia::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .wavo-card,
  .wavo-card--sequoia,
  .wavo-card.wavo-card--sequoia { background: var(--wavo-bg-elevated); }
  .wavo-footer__social a { background: var(--wavo-bg-elevated); }
  .wavo-card:hover,
  .wavo-card--sequoia:hover {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Reduce-motion gap-fill. Covers wallpaper parallax will-change and
   the toggle slider transition. */
@media (prefers-reduced-motion: reduce) {
  body.wavo-body::before { will-change: auto; }
  .wavo-scroll-progress { will-change: auto; }
  .wavo-toggle__slider,
  .wavo-toggle__slider::before,
  .wavo-toggle input:checked + .wavo-toggle__slider::before {
    transition: none !important;
  }
}

/* Will-change discipline. will-change permanently allocates a
   compositor layer + GPU memory. Trim to active-only — engines
   re-promote on demand when scroll re-enters the range. */
@supports (animation-timeline: scroll()) {
  body.wavo-body::before { will-change: auto; }
}
@supports (animation-timeline: view()) {
  .wavo-hero-sequoia .wavo-page-header h1,
  .wavo-hero-sequoia .wavo-page-header h2,
  .wavo-rail > :first-child { will-change: auto; }
}

/* Window chrome a11y — heading defensive style. .wavo-window__title is
   decorative; if a view interpolates an h1/h2 into it, it disrupts
   heading hierarchy. Reset injected heading typography. */
.wavo-window__title h1,
.wavo-window__title h2,
.wavo-window__title h3,
.wavo-window__title h4 {
  font: inherit;
  margin: 0;
  color: inherit;
}

/* Forced colors (Windows High Contrast). Liquid Glass surfaces vanish
   in HCM because backdrop-filter is dropped and rgba backgrounds
   resolve to transparent. Provide a system-ink / system-canvas
   fallback. */
@media (forced-colors: active) {
  .wavo-card,
  .wavo-card--sequoia,
  .wavo-window,
  .wavo-navbar,
  .wavo-footer,
  .modal .modal-content,
  .wavo-pricebox,
  .wavo-auth__card,
  .wavo-membership,
  .wavo-table-wrap,
  .wavo-enroll-card,
  .wavo-checkout-card {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .wavo-scroll-progress { background: Highlight; }
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}