/* CULTR Glass / translucent material system */

:root {
  --cream: #ffffff;
  --cream-2: #f7f7f3;
  --sand: #ecece7;
  --forest: #123e44;
  --forest-light: #356d70;
  --forest-dark: #082f37;
  --forest-deep: #051f28;
  --sage: #b9ecd0;
  --sage-2: #8fd3bc;
  --mint: #d5f3e8;
  --sage-soft: #e6f5ef;
  --ink: #102f34;
  --ink-70: #334f53;
  --ink-50: #4e6669;
  --line: rgba(15, 50, 56, .16);
  --line-2: rgba(15, 50, 56, .1);

  --surface-page: #ffffff;
  --surface-card: rgba(255, 255, 255, .86);
  --surface-subtle: rgba(248, 248, 245, .92);
  --surface-strong: #123e44;
  --surface-inverse: #082f37;
  --surface-inverse-deep: #061f28;
  --surface-inverse-raised: #17464a;
  --text-inverse-primary: #ffffff;
  --text-inverse-secondary: #dce8e3;
  --text-inverse-muted: #c4d5d0;
  --accent-inverse: #b9ecd0;
  --border-inverse: rgba(237, 247, 244, .3);
  --track-inverse: #b4ccc7;
  --text-primary: #102f34;
  --text-secondary: #334f53;
  --text-muted: #4e6669;
  --border-subtle: rgba(15, 50, 56, .16);
  --border-strong: rgba(15, 50, 56, .3);
  --focus-color: #075f68;
  --focus-color-inverse: #cef8df;

  --glass-subtle: rgba(255, 255, 255, .58);
  --glass-medium: rgba(255, 255, 255, .74);
  --glass-solid: rgba(255, 255, 255, .92);
  --glass-dark: rgba(5, 31, 40, .88);
  --glass-edge: rgba(255, 255, 255, .74);
  --glass-highlight: rgba(255, 255, 255, .92);
  --glass-lower-edge: rgba(11, 52, 59, .14);
  --glass-shadow-sm: 0 12px 30px rgba(17, 65, 76, .11), inset 1px 1px 0 rgba(255, 255, 255, .8), inset -1px -1px 0 rgba(9, 47, 54, .06);
  --glass-shadow-md: 0 22px 50px rgba(15, 63, 76, .16), inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(9, 47, 54, .08);
  --glass-shadow-lg: 0 34px 80px rgba(8, 50, 66, .22), inset 1px 1px 0 rgba(255, 255, 255, .92), inset -1px -1px 0 rgba(9, 47, 54, .1);

  --sh-sm: var(--glass-shadow-sm);
  --sh-md: var(--glass-shadow-md);
  --sh-lg: var(--glass-shadow-lg);
  --shadow-card: var(--glass-shadow-sm);
  --shadow-card-hover: var(--glass-shadow-md);
  --sticky-surface-visible: linear-gradient(115deg, rgba(255, 255, 255, .92), rgba(248, 248, 245, .9) 52%, rgba(255, 255, 255, .86));
  --sticky-edge-visible: rgba(255, 255, 255, .82);
  --sticky-shadow-visible: 0 16px 38px rgba(4, 40, 49, .18), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(21, 91, 98, .1), 0 0 0 1px rgba(87, 176, 150, .12);
  --sticky-halo: linear-gradient(105deg, rgba(59, 203, 150, .24), rgba(211, 255, 231, .3), rgba(70, 160, 200, .18));
  --sticky-halo-blur: .75rem;
  --sticky-button-shadow: 0 10px 24px rgba(1, 37, 47, .28), 0 0 0 1px rgba(225, 255, 246, .58), inset 0 1px 0 rgba(255, 255, 255, .22);
}

body {
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, #ffffff 0%, #f8f8f5 48%, #ffffff 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(44rem, 62vw);
  height: min(44rem, 62vw);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(.5rem);
}

body::before {
  left: -16rem;
  top: 9rem;
  background: radial-gradient(circle, rgba(234, 233, 230, .58), rgba(234, 233, 230, 0) 68%);
}

body::after {
  right: -17rem;
  top: 34rem;
  background: radial-gradient(circle, rgba(235, 234, 231, .48), rgba(235, 234, 231, 0) 68%);
}

main {
  position: relative;
  isolation: isolate;
}

main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 42rem 0 auto;
  height: 95rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 30%, rgba(238, 237, 234, .52), transparent 25rem),
    radial-gradient(circle at 86% 62%, rgba(235, 234, 231, .42), transparent 27rem);
}

.hero,
.therapies,
.proof,
.scale,
.goal,
#test,
#faq {
  background: transparent !important;
}

.note {
  color: rgba(255, 255, 255, .84);
  background: rgba(4, 29, 37, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(1.25rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(135%);
}

.promo {
  background: rgba(248, 248, 245, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .58);
  backdrop-filter: blur(1rem) saturate(130%);
  -webkit-backdrop-filter: blur(1rem) saturate(130%);
  box-shadow: 0 8px 24px rgba(27, 75, 80, .08);
}

header {
  background: rgba(255, 255, 255, .68);
  border-bottom: 1px solid rgba(255, 255, 255, .68);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--glass-shadow-sm);
}

header.scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--glass-shadow-md);
}

.mobile-panel {
  background: var(--glass-solid);
  border-color: var(--glass-edge);
  backdrop-filter: blur(1.6rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.6rem) saturate(145%);
  box-shadow: var(--glass-shadow-lg);
}

.mobile-panel nav a:hover {
  background: rgba(255, 255, 255, .56);
}

.btn {
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
}

.btn-primary {
  color: var(--cream);
  background: rgba(18, 62, 68, .94);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 16px 32px rgba(5, 46, 53, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn-primary:hover {
  background: var(--forest-dark);
  box-shadow: 0 20px 38px rgba(5, 46, 53, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn-primary:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn-soft {
  color: var(--forest);
  background: rgba(185, 236, 208, .72);
  backdrop-filter: blur(.7rem);
  -webkit-backdrop-filter: blur(.7rem);
}

.btn-soft:hover {
  background: rgba(213, 243, 232, .88);
}

.btn-ghost {
  color: var(--forest);
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(.8rem) saturate(135%);
  -webkit-backdrop-filter: blur(.8rem) saturate(135%);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .48);
}

.menu-btn,
.watch .pc,
.socials a {
  background: rgba(255, 255, 255, .36);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(.75rem);
  -webkit-backdrop-filter: blur(.75rem);
}

.hero {
  background:
    radial-gradient(70% 74% at 76% 8%, rgba(245, 244, 241, .9), transparent 62%),
    radial-gradient(46% 45% at 14% 92%, rgba(238, 237, 234, .48), transparent 72%) !important;
}

.hero .micro span {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(.65rem);
  -webkit-backdrop-filter: blur(.65rem);
}

.stage-bg {
  inset: 3% -8% 3% -3%;
  background:
    radial-gradient(circle at 26% 20%, rgba(239, 238, 235, .72), transparent 46%),
    radial-gradient(circle at 80% 72%, rgba(235, 234, 231, .56), transparent 52%),
    rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .52);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .72), inset -1px -1px 0 rgba(8, 47, 55, .12);
  backdrop-filter: blur(1.25rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(145%);
}

.stage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 38%, rgba(221, 222, 219, .18));
}

.stage-bg .play {
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--glass-shadow-md);
  backdrop-filter: blur(.8rem);
  -webkit-backdrop-filter: blur(.8rem);
}

.pcard {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(1.65rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.65rem) saturate(145%);
}

.chip {
  color: var(--forest);
  background: rgba(255, 255, 255, .7);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(1rem) saturate(140%);
  -webkit-backdrop-filter: blur(1rem) saturate(140%);
}

.stage-caption {
  background: rgba(255, 255, 255, .78);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(.9rem);
  -webkit-backdrop-filter: blur(.9rem);
}

.cred {
  background: rgba(18, 62, 68, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 44px rgba(7, 43, 50, .14);
}

.lifestyle-card {
  border-color: rgba(255, 255, 255, .82);
  box-shadow: var(--glass-shadow-md);
}

.lifestyle-card__label {
  inset: 0;
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  align-items: flex-start;
  justify-content: space-between;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.step,
.stat,
.doc,
.cat {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 10px 26px rgba(18, 65, 74, .08), inset 1px 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(.65rem) saturate(120%);
  -webkit-backdrop-filter: blur(.65rem) saturate(120%);
}

.tcard,
.tier,
.ba,
.reco-card,
.compare-scroll,
.evidence-note,
.pricing-note {
  background: var(--glass-medium);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(1.1rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.1rem) saturate(135%);
}

.tcard,
.tier,
.reco-card {
  overflow: hidden;
}

.tcard::before,
.tier::after,
.reco-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 30%, transparent 72%, rgba(70, 137, 165, .05));
}

.tcard > *,
.tier > *,
.reco-card > * {
  position: relative;
  z-index: 1;
}

.tcard:hover,
.tcard:focus-within,
.tier:hover,
.tier:focus-within {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: var(--glass-shadow-md);
}

.tcard .media {
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .92), transparent 54%),
    rgba(247, 247, 243, .9);
  border-bottom-color: var(--border-subtle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(17, 61, 69, .08);
  backdrop-filter: blur(.75rem);
  -webkit-backdrop-filter: blur(.75rem);
}

.media {
  background: rgba(248, 248, 245, .82);
  border-color: var(--glass-edge);
}

.fbtn,
.gchip {
  color: var(--forest);
  background: var(--glass-subtle);
  border-color: var(--glass-edge);
  box-shadow: 0 8px 20px rgba(16, 64, 74, .08), inset 1px 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(.8rem) saturate(130%);
  -webkit-backdrop-filter: blur(.8rem) saturate(130%);
}

.fbtn:hover,
.gchip:hover {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(255, 255, 255, .9);
}

.fbtn[aria-pressed="true"],
.gchip[aria-pressed="true"] {
  color: var(--cream);
  background: rgba(18, 62, 68, .94);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 12px 28px rgba(5, 46, 53, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.lab,
.beat {
  background:
    radial-gradient(circle at 15% 10%, rgba(57, 119, 111, .28), transparent 42%),
    linear-gradient(145deg, #0d3d43, var(--surface-inverse) 72%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(1.3rem) saturate(130%);
  -webkit-backdrop-filter: blur(1.3rem) saturate(130%);
}

.sliderbox {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
    var(--surface-inverse-raised);
  border-color: var(--border-inverse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(.6rem);
  -webkit-backdrop-filter: blur(.6rem);
}

.compare-table {
  background: rgba(255, 255, 255, .9);
}

.compare-table thead th {
  background: rgba(247, 247, 243, .96);
}

.tier.feat {
  border: 2px solid rgba(18, 62, 68, .76);
  box-shadow: var(--glass-shadow-md);
}

/* Dense decision surfaces favor legibility over transparency. */
.tier,
.compare-scroll,
.evidence-note,
.pricing-note,
.assessment-dialog,
.assessment-result {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.q {
  border-color: var(--border-subtle);
}

.q .ic {
  background: rgba(255, 255, 255, .34);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(.6rem);
  -webkit-backdrop-filter: blur(.6rem);
}

.q.open .ic {
  color: var(--cream);
  background: var(--forest);
}

footer {
  background: linear-gradient(145deg, #0b3439, var(--surface-inverse-deep) 72%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  box-shadow: 0 -28px 70px rgba(7, 43, 50, .16);
}

footer .socials a {
  background: rgba(23, 70, 74, .92);
  border-color: var(--border-inverse);
  box-shadow: 0 12px 26px rgba(1, 19, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(.6rem) saturate(120%);
  -webkit-backdrop-filter: blur(.6rem) saturate(120%);
}

.sticky {
  background: rgba(255, 255, 255, .88);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(1.35rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.35rem) saturate(145%);
}

body:not(.menu-locked):not(.dialog-open) .sticky.show:not(.is-suppressed) {
  background: var(--sticky-surface-visible);
  border: 1px solid var(--sticky-edge-visible);
  box-shadow: var(--sticky-shadow-visible);
  backdrop-filter: blur(1.25rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(145%);
}

body:not(.menu-locked):not(.dialog-open) .sticky.show:not(.is-suppressed)::before {
  inset: -.35rem;
  background: var(--sticky-halo);
  filter: blur(var(--sticky-halo-blur));
}

body:not(.menu-locked):not(.dialog-open) .sticky.show:not(.is-suppressed) .btn {
  background: linear-gradient(145deg, rgba(8, 54, 62, .98), rgba(18, 77, 78, .96));
  box-shadow: var(--sticky-button-shadow);
}

.assessment-dialog {
  background: #ffffff;
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.assessment-result,
.assessment-option {
  background: #f7f7f3;
  border-color: rgba(255, 255, 255, .78);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .84), 0 8px 20px rgba(17, 65, 76, .07);
}

.dialog-close {
  background: rgba(255, 255, 255, .42);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(.6rem);
  -webkit-backdrop-filter: blur(.6rem);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header,
  .mobile-panel,
  .btn-ghost,
  .btn-soft,
  .stage-bg,
  .pcard,
  .chip,
  .step,
  .stat,
  .doc,
  .cat,
  .tcard,
  .tier,
  .ba,
  .reco-card,
  .compare-scroll,
  .fbtn,
  .gchip,
  .sticky,
  .assessment-dialog,
  .assessment-option,
  .evidence-note,
  .pricing-note {
    background-color: rgba(255, 255, 255, .97);
  }
}

@media (prefers-reduced-transparency: reduce) {
  header,
  .note,
  .promo,
  .mobile-panel,
  .btn,
  .stage-bg,
  .pcard,
  .chip,
  .step,
  .stat,
  .doc,
  .cat,
  .tcard,
  .tier,
  .ba,
  .reco-card,
  .compare-scroll,
  .fbtn,
  .gchip,
  .sliderbox,
  .sticky,
  .assessment-dialog,
  .assessment-option,
  .assessment-result,
  .evidence-note,
  .pricing-note {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  header,
  .mobile-panel,
  .step,
  .stat,
  .doc,
  .cat,
  .tcard,
  .tier,
  .ba,
  .reco-card,
  .compare-scroll,
  .sticky,
  .assessment-dialog,
  .assessment-option,
  .assessment-result,
  .evidence-note,
  .pricing-note {
    background: #fafaf8;
  }

  .note,
  .lab,
  .beat {
    background: var(--forest-deep);
  }
}

@media (prefers-contrast: more) {
  .btn,
  .fbtn,
  .gchip,
  .step,
  .tcard,
  .stat,
  .tier,
  .doc,
  .cat,
  .mobile-panel,
  .assessment-dialog {
    border-color: var(--forest);
  }
}

@media (max-width: 1024px) {
  .stage-bg {
    inset: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --sticky-surface-visible: rgba(255, 255, 255, .92);
    --sticky-shadow-visible: 0 14px 32px rgba(4, 40, 49, .22), 0 0 0 1px rgba(255, 255, 255, .85), 0 0 18px 3px rgba(99, 196, 154, .18);
  }

  body {
    background:
      radial-gradient(circle at 4% 18%, rgba(238, 237, 234, .62), transparent 20rem),
      radial-gradient(circle at 96% 42%, rgba(235, 234, 231, .54), transparent 22rem),
      linear-gradient(155deg, #ffffff 0%, #f7f7f3 48%, #ffffff 100%);
  }

  body::before,
  body::after {
    position: absolute;
    filter: blur(.4rem);
    opacity: .9;
  }

  header,
  header.scrolled {
    background: #ffffff;
    backdrop-filter: blur(1rem) saturate(135%);
    -webkit-backdrop-filter: blur(1rem) saturate(135%);
  }

  .mobile-panel {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(1rem) saturate(130%);
    -webkit-backdrop-filter: blur(1rem) saturate(130%);
  }

  .sticky {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(1.35rem) saturate(155%);
    -webkit-backdrop-filter: blur(1.35rem) saturate(155%);
  }

  .step,
  .stat,
  .doc,
  .cat,
  .tcard,
  .tier,
  .ba {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(247, 247, 243, .72));
    border-color: rgba(255, 255, 255, .88);
    border-radius: 1.15rem;
    box-shadow: 0 18px 46px rgba(10, 58, 72, .18), inset 1px 1px 0 rgba(255, 255, 255, 1), inset -1px -1px 0 rgba(9, 47, 54, .08);
  }

  .tcard {
    backdrop-filter: blur(.5rem) saturate(140%);
    -webkit-backdrop-filter: blur(.5rem) saturate(140%);
  }

  .tcard::before,
  .tier::after,
  .reco-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, .6), transparent 36%, transparent 70%, rgba(221, 222, 219, .2));
  }

  .fbtn,
  .gchip,
  .menu-btn {
    background: rgba(255, 255, 255, .46);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(10, 62, 76, .14), inset 1px 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(.9rem) saturate(150%);
    -webkit-backdrop-filter: blur(.9rem) saturate(150%);
  }

  .note,
  .promo,
  .socials a,
  .stage-bg .play,
  .lab,
  .beat,
  .assessment-dialog {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .btn-soft,
  .btn-ghost,
  .menu-btn,
  .watch .pc,
  .hero .micro span,
  .stage-bg,
  .pcard,
  .chip,
  .stage-caption,
  .tcard .media,
  .fbtn,
  .gchip,
  .sliderbox,
  .q .ic,
  .dialog-close {
    backdrop-filter: blur(.55rem) saturate(122%);
    -webkit-backdrop-filter: blur(.55rem) saturate(122%);
  }

  .stage-bg {
    inset: 0;
  }

  .assessment-dialog {
    background: #ffffff;
  }
}

@media (hover: none), (pointer: coarse) {
  .btn:hover:not(:active),
  .fbtn:hover:not(:active):not([aria-pressed="true"]),
  .gchip:hover:not(:active):not([aria-pressed="true"]),
  .tcard:hover:not(:focus-within),
  .tier:hover:not(:focus-within),
  .assessment-option:hover:not(:active) {
    transform: none;
  }

  .btn-primary:hover:not(:active) {
    background: rgba(18, 62, 68, .94);
    box-shadow: 0 16px 32px rgba(5, 46, 53, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
  }

  .btn-soft:hover:not(:active) {
    background: rgba(185, 236, 208, .72);
  }

  .btn-ghost:hover:not(:active) {
    background: rgba(255, 255, 255, .28);
  }

  .mobile-panel nav a:hover:not(:active) {
    background: transparent;
  }

  .fbtn:hover:not([aria-pressed="true"]),
  .gchip:hover:not([aria-pressed="true"]) {
    background: var(--glass-subtle);
    border-color: var(--glass-edge);
  }

  .gchip[aria-pressed="true"] {
    transform: none;
  }

  .tcard:hover:not(:focus-within),
  .tier:hover:not(:focus-within) {
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow-sm);
  }

  html.touch-motion .tcard.is-touch-active,
  html.touch-motion .tier.is-touch-active,
  html.touch-motion .ba.is-touch-active {
    border-color: rgba(255, 255, 255, .94);
    box-shadow: var(--glass-shadow-md);
  }

  html.touch-motion .step.is-touch-active,
  html.touch-motion .stat.is-touch-active,
  html.touch-motion .doc.is-touch-active,
  html.touch-motion #test .cat.is-touch-active,
  html.touch-motion .supplement-quality-card.is-touch-active {
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 42px rgba(10, 58, 72, .17), inset 1px 1px 0 rgba(255, 255, 255, .95);
  }

  html.touch-motion .is-touch-pressed {
    box-shadow: var(--glass-shadow-sm);
  }
}

@media (max-width: 430px) {
  .compare-scroll,
  .compare-table {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}