/* Final client revision overrides loaded after the accumulated stylesheet. */
.investment-note a {
  color: #dffbff !important;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body {
  background: #f3f7f3 !important;
}

.image-split {
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

.section-visual img,
.clinical-evidence img,
.x39-evidence-images img,
.x39-water-card img,
.proof-asset-grid img {
  width: 100%;
  border: 1px solid rgba(120, 209, 219, 0.18);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 22px 60px rgba(3, 17, 26, 0.2);
}

.section-visual-glass img {
  aspect-ratio: 4 / 3;
  object-position: 50% 45%;
}

.why-x20 {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
  color: var(--ink);
}

.why-x20-dark {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) 1rem !important;
  background: #06131d !important;
  color: #eafcff !important;
}

.why-x20-dark > * {
  width: min(var(--max), 100%);
  margin-right: auto;
  margin-left: auto;
}

.why-x20 .section-heading {
  text-align: center;
}

.why-x20 h2,
.science-copy-grid > div:nth-child(2) > h3 {
  color: #07364b !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-x20 h2 {
  color: #dffbff !important;
}

.why-x20-dark #why-x20-title {
  color: #dffbff !important;
  opacity: 1 !important;
  text-shadow: 0 0 24px rgba(103, 232, 249, 0.18);
}

.why-x20-dark .eyebrow {
  color: #67e8f9 !important;
  opacity: 1 !important;
}

.why-x20 .section-heading p {
  color: rgba(223, 251, 255, 0.78) !important;
}

.why-x20-grid,
.pair-benefit-list,
.pair-actions,
.resource-summary {
  display: grid;
  gap: 0.8rem;
}

.why-x20-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pair-benefit-list,
.pair-actions,
.resource-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.why-x20-grid span,
.pair-benefit-list span,
.resource-summary span {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(14, 96, 118, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #143040;
  font-weight: 750;
}

.why-x20-grid span {
  position: relative;
  padding: 1rem 1rem 1rem 3.2rem;
  border-color: rgba(141, 232, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #eafcff;
}

.why-x20-grid span::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(141, 232, 255, 0.68);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(141, 232, 255, 0.95) 0 22%, transparent 24%),
    rgba(103, 232, 249, 0.1);
  transform: translateY(-50%);
}

.why-x20-visuals {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(260px, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.25rem;
}

.why-x20-visuals img {
  width: 100%;
  border: 1px solid rgba(141, 232, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 60px rgba(3, 17, 26, 0.18);
}

.why-x20-visuals img:last-child {
  padding: 0.75rem;
}

.clinical-evidence {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.clinical-evidence img {
  aspect-ratio: 1.54 / 1;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.68);
}

.clinical-image-stack {
  display: grid;
  gap: 1rem;
}

.clinical-image-stack img {
  width: 100%;
}

.science-steps li:nth-child(1) {
  background: linear-gradient(135deg, rgba(226, 249, 255, 0.92), rgba(246, 255, 255, 0.78)) !important;
}

.science-steps li:nth-child(2) {
  background: linear-gradient(135deg, rgba(222, 252, 243, 0.92), rgba(245, 255, 251, 0.78)) !important;
}

.science-steps li:nth-child(3) {
  background: linear-gradient(135deg, rgba(229, 243, 255, 0.94), rgba(248, 252, 255, 0.8)) !important;
}

.science-support-list li {
  background: linear-gradient(135deg, rgba(229, 249, 255, 0.94), rgba(240, 255, 248, 0.78)) !important;
}

.glass-transition {
  margin-top: 1.25rem;
}

.patent-proof-inline {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(14, 96, 118, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.patent-proof-inline img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
}

.x39-education-copy {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0;
}

.x39-education-copy p {
  margin: 0;
}

.pair-quote {
  margin: 1.3rem 0;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  background: rgba(217, 250, 252, 0.82);
  color: #143040;
  font-weight: 720;
}

#pair .btn-secondary {
  color: #07364b !important;
  -webkit-text-fill-color: #07364b !important;
  border-color: rgba(14, 96, 118, 0.18) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.access-cta .btn-secondary,
.brochure-actions .btn-secondary,
.science-links .btn-secondary {
  color: #07364b !important;
  -webkit-text-fill-color: #07364b !important;
  border-color: rgba(14, 96, 118, 0.22) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 28px rgba(7, 35, 45, 0.1) !important;
}

.access-cta .btn-secondary:hover,
.brochure-actions .btn-secondary:hover,
.science-links .btn-secondary:hover,
#pair .btn-secondary:hover {
  color: #06131d !important;
  -webkit-text-fill-color: #06131d !important;
  background: #fff !important;
  border-color: rgba(14, 96, 118, 0.32) !important;
}

.patch-showcase {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  min-height: auto !important;
  overflow: hidden !important;
}

.patch-lifestyle-card,
.x39-water-card {
  overflow: hidden;
  border-radius: 18px;
}

.patch-lifestyle-card {
  min-height: clamp(420px, 48vw, 620px) !important;
}

.x39-water-card img {
  aspect-ratio: 1 / 1;
  object-position: 50% 50%;
}

.x39-evidence-images {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}

.x39-evidence-images img {
  height: clamp(260px, 32vw, 390px);
}

.x39-evidence-images img:last-child {
  object-position: 50% 24%;
}

.x39-testimonial-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.46fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid rgba(14, 96, 118, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  color: #143040;
}

.x39-testimonial-card img {
  width: 100%;
  border-radius: 12px;
}

.x39-testimonial-card span {
  color: #087676;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.x39-testimonial-card strong {
  display: block;
  margin: 0.2rem 0 0.35rem;
  color: #0b2f3e;
  font-size: 1.05rem;
}

.x39-testimonial-card p {
  margin: 0;
  color: #53656c;
}

.x39-testimonial-card strong {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.15;
}

.x39-cta-panel .text-link {
  color: #dffbff;
  font-weight: 800;
}

.system-comparison {
  grid-template-columns: 1fr !important;
}

.comparison-charts {
  display: grid;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.see-difference-chart {
  overflow: hidden;
  border: 1px solid rgba(10, 73, 90, 0.14);
  border-radius: 16px;
  background: #fff;
  color: #132f3e;
  box-shadow: 0 18px 48px rgba(12, 43, 52, 0.13);
}

.see-difference-chart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.documentary-poster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.documentary-poster img {
  width: 100%;
}

.resource-card {
  background:
    linear-gradient(135deg, rgba(231, 248, 255, 0.96), rgba(247, 255, 252, 0.92)) !important;
  border-color: rgba(24, 134, 171, 0.18) !important;
}

.recognition-purpose p strong {
  display: block;
  margin: 1rem 0 0.45rem;
}

.proof-cta-copy {
  color: #0b596e !important;
  font-weight: 800;
}

.proof-asset-grid figure p {
  margin: 0.45rem 0 0;
  color: #0b596e;
  font-size: 0.82rem;
  font-weight: 800;
}

.proof-asset-grid figure button {
  border: 0;
  padding: 0;
  color: #0b596e;
  background: none;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.system-callout {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(14, 96, 118, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(194, 247, 255, 0.72), rgba(220, 255, 241, 0.76));
  color: #07364b;
  text-align: center;
}

.mini-chart-title {
  padding: 0.8rem 0.9rem;
  color: #49636e;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-chart-row {
  display: grid;
  grid-template-columns: 0.82fr 1fr 1fr;
  min-height: 3.4rem;
  border-top: 1px solid rgba(10, 73, 90, 0.12);
}

.mini-chart-row span {
  display: flex;
  align-items: center;
  padding: 0.62rem 0.72rem;
  border-left: 1px solid rgba(10, 73, 90, 0.1);
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  line-height: 1.25;
}

.mini-chart-row span:first-child {
  border-left: 0;
  font-weight: 850;
}

.mini-chart-head {
  background: #eff8f9;
  color: #07364b;
  font-weight: 900;
}

.comparison-visual img {
  height: 100%;
  min-height: 430px;
  object-fit: contain;
  background: #f7fbff;
}

.recognition-purpose {
  display: block !important;
}

.recognition-card ul,
.recognition-card li {
  color: #607782 !important;
}

.proof-asset-grid img {
  aspect-ratio: 4 / 5;
  height: auto;
}

.proof-asset-grid figure:nth-child(1) img,
.proof-asset-grid figure:nth-child(3) img,
.proof-asset-grid figure:nth-child(4) img {
  aspect-ratio: 1 / 1;
}

.brochure-preview-card img:only-child {
  width: min(100%, 720px) !important;
  max-height: 360px !important;
  object-fit: cover !important;
}

.documentary-poster img {
  object-fit: contain !important;
  background: #06131d !important;
}

.recommendation {
  color: #f7fcff !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(103, 232, 249, 0.16), transparent 22rem),
    linear-gradient(135deg, #102b3b, #071a26 62%, #06131d) !important;
}

.recommendation h2,
.recommendation h3,
.recommendation label,
.recommendation strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  opacity: 1 !important;
}

.recommendation-copy p,
.recommendation-form p {
  color: rgba(247, 252, 255, 0.86) !important;
  -webkit-text-fill-color: rgba(247, 252, 255, 0.86) !important;
  opacity: 1 !important;
}

.recommendation #recommendation-title,
.recommendation-reasons h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  opacity: 1 !important;
}

.recommendation .eyebrow,
.recommendation .social-proof-line {
  color: #8de8ff !important;
}

.recommendation-points span,
.recommendation-reasons span {
  color: #f1fbff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(141, 232, 255, 0.22) !important;
}

.recommendation-form {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(141, 232, 255, 0.22) !important;
}

.recommendation-form input,
.recommendation-form select {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(141, 232, 255, 0.22) !important;
}

.recommendation-form input::placeholder {
  color: rgba(247, 252, 255, 0.62) !important;
}

.recommendation-form a {
  color: #b8f4ff !important;
}

.site-footer {
  margin-bottom: 0 !important;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 4vw, 4rem) !important;
  color: #143040 !important;
  border-top: 1px solid rgba(14, 96, 118, 0.14) !important;
  background: #f6fbfd !important;
}

.site-footer strong,
.site-footer span,
.site-footer p {
  color: #143040 !important;
}

.site-footer p {
  color: #506872 !important;
}

@media (max-width: 1060px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.45rem !important;
    align-items: center !important;
  }

  .menu-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
  }

  .mobile-header-cta {
    display: inline-flex !important;
    position: fixed !important;
    top: 1.12rem !important;
    right: auto !important;
    left: min(286px, calc(100vw - 104px)) !important;
    z-index: 150 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    color: #06131d !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  .site-header > .header-cta {
    display: none !important;
  }

  .site-header.is-open .site-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .site-header.is-open .header-cta {
    display: none !important;
  }

  .image-split,
  .clinical-evidence,
  .comparison-charts {
    grid-template-columns: 1fr !important;
  }

  .comparison-visual img {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  main > section:not(.hero) {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
  }

  main > section:not(.hero) > * {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: min(340px, calc(100vw - 2rem)) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
  }

  main > section:not(.hero) *,
  .science-authority,
  .science-copy-grid,
  .science-evidence,
  .science-steps,
  .science-links,
  .credibility-bar {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .science-authority h2,
  .science-authority h3,
  .science-authority p,
  .science-authority li,
  .science-authority span {
    overflow: visible !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    word-break: normal;
  }

  main > .science {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  main > .science > *,
  .science-copy-grid,
  .science-copy-grid > *,
  .science-steps,
  .science-evidence,
  .clinical-image-stack,
  .credibility-bar,
  .science-links {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: min(340px, calc(100vw - 2rem)) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
  }

  .why-x20-visuals,
  .why-x20-visuals img {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: min(340px, calc(100vw - 2rem)) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
  }

  .science-steps li,
  .science-evidence img,
  .clinical-image-stack img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-header .brand {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
  }

  .site-header .brand-mark {
    width: 42px !important;
    height: 42px !important;
  }

  .site-header .brand span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .site-header .brand small {
    display: none !important;
  }

  .hero {
    padding-top: 7.2rem !important;
  }

  .hero .eyebrow {
    color: #9ff3ff !important;
    opacity: 1 !important;
  }

  .product-video img {
    object-fit: contain !important;
    object-position: 50% 50% !important;
    background: #17242c !important;
  }

  .investment-note {
    width: min(172px, 52%) !important;
    padding: 0.55rem !important;
  }

  .investment-note span {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  .investment-note p {
    display: block !important;
    margin-top: 0.24rem !important;
    font-size: 0.55rem !important;
    line-height: 1.22 !important;
  }

  .hero-microcopy {
    order: 8 !important;
    width: 100% !important;
    margin-top: 0.2rem !important;
    margin-bottom: 1rem !important;
  }

  .why-x20-dark #why-x20-title {
    max-width: 11ch !important;
    font-size: clamp(2.25rem, 11vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  .why-x20 .section-heading p {
    max-width: 30ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .recommendation #recommendation-title {
    font-size: clamp(2rem, 8vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .site-footer {
    grid-template-columns: 1fr !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
  }

  .site-footer > * {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: min(340px, calc(100vw - 2rem)) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
  }

  .site-footer > div,
  .site-footer > p {
    margin-left: 1rem !important;
  }

  .site-footer p,
  .site-footer span,
  .site-footer strong {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .why-x20-grid,
  .why-x20-visuals,
  .pair-benefit-list,
  .pair-actions,
  .x39-evidence-images,
  .resource-summary,
  .documentary-poster,
  .patent-proof-inline {
    grid-template-columns: 1fr !important;
  }

  .x39-evidence-images img {
    height: auto;
  }

  .x39-testimonial-card {
    grid-template-columns: 1fr;
  }

  .mini-chart-row {
    grid-template-columns: 1fr;
  }

  .mini-chart-row span {
    border-left: 0;
    border-top: 1px solid rgba(10, 73, 90, 0.08);
  }
}

@media (max-width: 430px) {
  .site-header > .header-cta {
    display: none !important;
  }

  .mobile-header-cta {
    min-height: 38px !important;
    width: 38px !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    top: 1.06rem !important;
    right: auto !important;
    left: min(286px, calc(100vw - 100px)) !important;
  }
}

@media (min-width: 1061px) {
  .mobile-header-cta {
    display: none !important;
  }
}

/* Final draft polish: spacing, readable mobile type, and asset-aware media sizing. */
html {
  scroll-padding-top: 7.5rem;
}

body {
  overflow-x: hidden;
}

.site-header,
.site-header.is-scrolled {
  position: sticky !important;
  top: 0.75rem !important;
  right: auto !important;
  left: auto !important;
  z-index: 120 !important;
  width: min(var(--max), calc(100% - 2rem)) !important;
  min-height: 78px !important;
  margin: 1rem auto 1.25rem !important;
  padding: 0.72rem 0.9rem !important;
  border: 1px solid rgba(164, 236, 255, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(5, 20, 30, 0.9) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  transform: none !important;
}

.site-nav {
  gap: clamp(0.95rem, 1.6vw, 1.55rem) !important;
}

.site-nav a {
  padding: 0.42rem 0 !important;
  color: rgba(240, 252, 255, 0.78) !important;
}

.site-nav a:hover {
  color: #f9feff !important;
}

.hero {
  min-height: auto !important;
  padding-top: clamp(3.2rem, 6vw, 5rem) !important;
}

section[id] {
  scroll-margin-top: 7.5rem;
}

main h1,
main h2,
main h3,
main p,
main li,
main span,
main a,
main button,
main summary {
  word-break: normal;
  overflow-wrap: break-word;
}

.section-heading h2,
.section-copy h2,
.feature-copy h2,
.pairing-copy h2,
.brochure-copy h2,
.documentary-copy h2,
.access-intro h2,
.comparison-copy h2 {
  max-width: 980px;
  letter-spacing: 0 !important;
}

.section-heading .eyebrow,
.section-kicker,
.eyebrow {
  color: #078580 !important;
}

.why-x20-dark .section-heading .eyebrow,
.why-x20-dark .eyebrow,
.recommendation .eyebrow {
  color: #8eeeff !important;
}

.why-x20-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.9rem, 2vw, 1.25rem) !important;
}

.why-x20-grid span {
  min-height: 0 !important;
  padding: 0.15rem 0 0.15rem 2.65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #edfaff !important;
  font-size: clamp(0.98rem, 1vw, 1.08rem) !important;
  line-height: 1.45 !important;
}

.why-x20-grid span::before {
  left: 0 !important;
  top: 0.2rem !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-color: rgba(141, 232, 255, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(141, 232, 255, 0.25), rgba(129, 255, 210, 0.18)),
    radial-gradient(circle, #9ff3ff 0 18%, transparent 20%) !important;
  transform: none !important;
}

.section-visual img,
.feature-image img,
.why-x20-visuals img,
.clinical-image-stack img,
.clinical-evidence img,
.patent-proof-inline img,
.x39-evidence-images img,
.x39-testimonial-card img,
.comparison-charts img,
.documentary-poster img,
.proof-asset-grid img,
.brochure-preview-card img {
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f8fcff !important;
}

.section-visual,
.feature-image,
.why-x20-visuals,
.clinical-image-stack,
.x39-evidence-images,
.documentary-poster,
.proof-asset-grid,
.brochure-preview-card {
  align-items: center !important;
}

.section-visual-glass img {
  aspect-ratio: auto !important;
  max-height: 500px !important;
}

.feature-image img,
.product-video img,
.patch-lifestyle-card img,
.x39-water-card img {
  object-fit: contain !important;
  object-position: center !important;
}

.product-video img {
  background: #102331 !important;
}

.patch-lifestyle-card,
.x39-water-card {
  min-height: 0 !important;
  background: #f8fcff !important;
}

.patch-showcase {
  align-content: start !important;
  gap: 1rem !important;
}

.patch-lifestyle-card img,
.x39-water-card img {
  aspect-ratio: auto !important;
  max-height: 460px !important;
  background: #f8fcff !important;
}

.why-x20-visuals {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) !important;
}

.why-x20-visuals img {
  max-height: 430px !important;
  padding: 0.6rem !important;
}

.clinical-image-stack img {
  max-height: 460px !important;
  padding: 0.35rem !important;
}

.patent-proof-inline img {
  max-height: 220px !important;
}

.x39-evidence-images {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.8rem, 2vw, 1.1rem) !important;
}

.x39-evidence-images img {
  max-height: 360px !important;
  padding: 0.4rem !important;
}

.x39-evidence-images img:nth-child(2) {
  aspect-ratio: 4 / 5 !important;
  width: min(100%, 290px) !important;
  margin-inline: auto !important;
  object-fit: cover !important;
  object-position: 50% 34% !important;
  padding: 0 !important;
}

.comparison-charts {
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr) !important;
  align-items: start !important;
}

.comparison-visual img {
  max-height: 720px !important;
  padding: 0.7rem !important;
}

.see-difference-chart img {
  max-height: 520px !important;
  padding: 0.55rem !important;
}

.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  align-items: stretch !important;
}

.video-card {
  min-height: 0 !important;
}

.video-card img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
}

.video-card:nth-child(2) img,
.video-card:nth-child(3) img,
.video-card:nth-child(7) img {
  object-fit: contain !important;
  padding: 0.4rem !important;
  background: #071622 !important;
}

.documentary-poster {
  align-items: center !important;
}

.documentary-poster img {
  max-height: 430px !important;
  padding: 0.35rem !important;
  background: #06131d !important;
}

.recognition-grid {
  align-items: stretch !important;
}

.recognition-card img {
  object-fit: contain !important;
  background: #f8fcff !important;
}

.proof-asset-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: clamp(0.9rem, 2vw, 1.25rem) !important;
}

.proof-asset-grid figure,
.system-callout {
  min-height: 0 !important;
}

.proof-asset-grid img {
  max-height: 330px !important;
  padding: 0.4rem !important;
}

.system-callout {
  padding: clamp(1rem, 2.5vw, 1.35rem) !important;
}

.brochure-preview-card {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 1rem !important;
}

.brochure-preview-card img {
  max-height: 340px !important;
  padding: 0.35rem !important;
}

.recommendation,
.recommendation p,
.recommendation li,
.recommendation span,
.recommendation small {
  color: #f4fcff !important;
  -webkit-text-fill-color: currentColor !important;
}

.signal,
.proof-pill,
.risk-item,
.process-card,
.step,
.resource-card,
.recognition-card,
.video-card,
.science-steps li,
.proof-asset-grid figure,
.system-callout {
  min-width: 0 !important;
}

.signal *,
.proof-pill *,
.risk-item *,
.process-card *,
.step *,
.resource-card *,
.recognition-card *,
.video-card *,
.science-steps li *,
.proof-asset-grid figure *,
.system-callout * {
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1060px) {
  .site-header,
  .site-header.is-scrolled {
    position: sticky !important;
    top: 0.5rem !important;
    width: calc(100% - 1rem) !important;
    margin: 0.5rem auto 1rem !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.55rem !important;
  }

  .site-header .brand {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  .site-header .brand-mark {
    width: 112px !important;
    height: 48px !important;
  }

  .mobile-header-cta {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    z-index: 1 !important;
  }

  .menu-toggle {
    position: relative !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body .site-header::after {
    display: none !important;
  }

  .hero {
    padding-top: clamp(2.4rem, 5vw, 3.8rem) !important;
  }

  .image-split,
  .clinical-evidence,
  .comparison-charts,
  .why-x20-visuals,
  .documentary-poster,
  .brochure-preview-card {
    grid-template-columns: 1fr !important;
  }

  .x39-evidence-images {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 6rem;
  }

  .site-header,
  .site-header.is-scrolled {
    min-height: 64px !important;
    padding: 0.55rem 0.6rem !important;
    border-radius: 16px !important;
  }

  .site-header .brand {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 0.48rem !important;
  }

  .site-header .brand-mark {
    width: 88px !important;
    height: 38px !important;
  }

  .site-header .brand span {
    font-size: 0.86rem !important;
    line-height: 1.08 !important;
  }

  .site-header .brand small {
    display: none !important;
  }

  .mobile-header-cta,
  .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .hero {
    padding-top: 2rem !important;
  }

  #hero-title {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 9.8vw, 3.15rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  .hero-lede,
  .hero-microcopy p,
  .risk-item small {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .hero-rating-line,
  .hero .eyebrow {
    color: #c7f8ff !important;
    -webkit-text-fill-color: #c7f8ff !important;
  }

  main > section:not(.hero) {
    width: 100% !important;
    max-width: none !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    overflow-x: hidden !important;
  }

  main > section:not(.hero) > *,
  main > .science > *,
  .science-copy-grid,
  .science-copy-grid > *,
  .science-steps,
  .science-evidence,
  .clinical-image-stack,
  .credibility-bar,
  .science-links,
  .why-x20-visuals,
  .site-footer > * {
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  main > section:not(.hero) h2,
  .section-heading h2,
  .section-copy h2,
  .feature-copy h2,
  .pairing-copy h2,
  .brochure-copy h2,
  .documentary-copy h2,
  .access-intro h2,
  .comparison-copy h2,
  .why-x20-dark #why-x20-title,
  .recommendation #recommendation-title {
    max-width: none !important;
    font-size: clamp(1.9rem, 8.4vw, 2.65rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  .videos .section-heading h2,
  .science-authority h2 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
  }

  main > section:not(.hero) h3,
  .science-authority h3 {
    font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
    line-height: 1.2 !important;
  }

  .section-heading p,
  .section-copy p,
  .feature-copy p,
  .pairing-copy p,
  .brochure-copy p,
  .documentary-copy p,
  .science-authority p,
  .science-authority li,
  .faq p,
  .faq li {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  .why-x20-grid,
  .pair-benefit-list,
  .pair-actions,
  .x39-evidence-images,
  .resource-summary,
  .documentary-poster,
  .patent-proof-inline,
  .proof-asset-grid,
  .brochure-preview-card {
    grid-template-columns: 1fr !important;
  }

  .why-x20-grid span {
    font-size: 1rem !important;
  }

  .why-x20-visuals img,
  .clinical-image-stack img,
  .comparison-charts img,
  .x39-evidence-images img,
  .proof-asset-grid img,
  .brochure-preview-card img {
    max-height: none !important;
  }

  .x39-evidence-images img:nth-child(2) {
    width: min(100%, 280px) !important;
  }

  .video-grid {
    grid-template-columns: 1fr !important;
  }

  .site-footer {
    width: 100% !important;
    max-width: none !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

@media (max-width: 430px) {
  .mobile-header-cta {
    position: static !important;
    left: auto !important;
    top: auto !important;
    font-size: 0.72rem !important;
  }
}

/* Final correction for legacy mobile-header rules with higher specificity. */
.section-visual-glass img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  padding: 0 !important;
}

@media (max-width: 1060px) {
  body .site-header,
  body .site-header.is-scrolled {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px 38px !important;
    column-gap: 0.55rem !important;
    align-items: center !important;
    overflow: visible !important;
    padding-right: 6.35rem !important;
  }

  body .site-header .brand {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 0.25rem) !important;
  }

  .image-split > .section-visual-glass {
    justify-self: center !important;
    width: min(100%, 640px) !important;
  }

  body .site-header > button.menu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0.65rem !important;
    left: auto !important;
    z-index: 2 !important;
    display: grid !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(187, 240, 255, 0.45) !important;
    border-radius: 12px !important;
    background: rgba(7, 44, 72, 0.72) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    display: block !important;
    width: 17px !important;
    height: 2px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    background: #f4fdff !important;
  }

  body .site-header .mobile-header-cta {
    display: inline-flex !important;
    position: absolute !important;
    top: 50% !important;
    right: 3.25rem !important;
    left: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 760px) {
  .image-split > .section-visual-glass {
    width: min(100%, 520px) !important;
  }

  .section-visual-glass img {
    aspect-ratio: 5 / 4 !important;
  }
}

@media (max-width: 1060px) {
  body .site-header::before {
    content: none !important;
    position: absolute !important;
    top: 50% !important;
    right: 3.25rem !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  body .site-header::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 0.65rem !important;
    z-index: 3 !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    padding-left: 0 !important;
    border: 1px solid rgba(187, 240, 255, 0.45) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(#f4fdff, #f4fdff) 50% 13px / 17px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 18px / 17px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 23px / 17px 2px no-repeat,
      rgba(7, 44, 72, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  body .site-header .brand::after {
    content: none !important;
    position: absolute !important;
    top: 50% !important;
    right: 3.25rem !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  body .site-header .mobile-header-cta,
  body .site-header > button.menu-toggle {
    z-index: 4 !important;
    color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    opacity: 0 !important;
  }

  body .site-header .mobile-header-cta::before {
    content: none !important;
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
  }
}

/* Final prompt pass: controlled media placement, readable lower section, and mobile type cleanup. */
html {
  scroll-padding-top: 9rem !important;
}

section[id] {
  scroll-margin-top: 9rem !important;
}

.site-header,
.site-header.is-scrolled {
  margin-bottom: clamp(1.6rem, 2.4vw, 2.35rem) !important;
}

#technology {
  margin-top: clamp(1.25rem, 2.8vw, 2.2rem) !important;
}

.section,
.process-section,
.visual-feature,
.why-x20,
.science,
.pairing,
.access,
.comparison,
.videos,
.documentary,
.recognition,
.proof-assets,
.brochure,
.faq,
.recommendation {
  overflow-wrap: normal !important;
}

main h2,
main h3,
main summary,
main p,
main li,
main span {
  word-break: normal !important;
}

.patch-showcase {
  align-content: start !important;
  gap: clamp(0.9rem, 2vw, 1.2rem) !important;
}

.patch-lifestyle-card,
.x39-water-card {
  min-height: 0 !important;
  border-radius: 16px !important;
  background: #f7fbff !important;
}

.patch-lifestyle-card img,
.x39-water-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f7fbff !important;
}

.x39-pairing {
  align-items: start !important;
  gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.x39-pairing .pairing-copy h2 {
  max-width: 780px !important;
  font-size: clamp(2rem, 3.8vw, 3.45rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.benefit-chips {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.x39-evidence-images {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.x39-evidence-images img {
  width: 100% !important;
  height: clamp(240px, 26vw, 340px) !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f8fcff !important;
}

.x39-evidence-images img:nth-child(2) {
  width: 100% !important;
  object-position: center 32% !important;
}

.x39-evidence-images img:nth-child(3) {
  padding: 0.75rem !important;
  object-fit: contain !important;
  background: #fff !important;
}

.x39-testimonial-card {
  border-radius: 16px !important;
  background: #f7fbff !important;
}

.x39-testimonial-card img {
  max-height: 180px !important;
  padding: 0.75rem !important;
  object-fit: contain !important;
  background: #fff !important;
}

.x39-cta-panel .text-link {
  display: inline-flex !important;
  margin: 0.4rem 0.9rem 0 0 !important;
  color: #dffbff !important;
}

.documentary-poster-single {
  grid-template-columns: 1fr !important;
}

.documentary-poster-single img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  background: #06131d !important;
}

.video-card img {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
}

.video-card:nth-child(4) img {
  object-position: center 32% !important;
}

.video-card:nth-child(5) img {
  object-position: center !important;
}

.video-card:nth-child(6) img {
  padding: 0.45rem !important;
  object-fit: contain !important;
  background: #071622 !important;
  filter: brightness(1.18) contrast(1.06) !important;
}

.video-card:nth-child(6)::after {
  opacity: 0.28 !important;
}

.resource-grid,
.recognition-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.founder-bio-card,
.brand-purpose-card {
  grid-column: 1 / -1 !important;
}

.founder-bio-card {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr) !important;
  gap: clamp(1rem, 2.4vw, 1.6rem) !important;
  align-items: stretch !important;
  text-align: left !important;
}

.founder-bio-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: 430px !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.founder-bio-card ul {
  columns: 2;
  column-gap: clamp(1rem, 2.4vw, 1.7rem);
  margin: 1rem 0 0 !important;
  padding-left: 1.1rem !important;
}

.founder-bio-card li {
  break-inside: avoid;
  margin: 0 0 0.48rem !important;
  color: #506872 !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
}

.brand-purpose-card {
  text-align: left !important;
}

.brand-purpose-card p {
  max-width: none !important;
}

.proof-asset-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  align-items: stretch !important;
}

.proof-asset-grid figure {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.proof-asset-grid img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f8fcff !important;
}

.proof-asset-grid figcaption {
  min-height: auto !important;
  color: #0b2f3e !important;
}

.brochure-preview-card {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

.brochure-preview-card img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
}

.brochure-preview-card img:first-child {
  aspect-ratio: 1 / 1 !important;
}

.recommendation {
  color: #f8fdff !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(104, 236, 255, 0.24), transparent 20rem),
    radial-gradient(circle at 92% 12%, rgba(180, 239, 215, 0.13), transparent 20rem),
    linear-gradient(135deg, #173b4d, #0d2534 58%, #0a1d2a) !important;
}

.recommendation p,
.recommendation li,
.recommendation span,
.recommendation small,
.recommendation label {
  color: #f8fdff !important;
  -webkit-text-fill-color: #f8fdff !important;
}

.recommendation .social-proof-line,
.recommendation .eyebrow {
  color: #9ef3ff !important;
  -webkit-text-fill-color: #9ef3ff !important;
}

.recommendation-form,
.recommendation-points span,
.recommendation-reasons span {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(181, 243, 255, 0.32) !important;
}

@media (max-width: 1060px) {
  .x39-pairing {
    grid-template-columns: 1fr !important;
  }

  .patch-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .x39-evidence-images,
  .brochure-preview-card {
    grid-template-columns: 1fr 1fr !important;
  }

  .founder-bio-card {
    grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 7.4rem !important;
  }

  section[id] {
    scroll-margin-top: 7.4rem !important;
  }

  .site-header,
  .site-header.is-scrolled {
    margin-bottom: 1.25rem !important;
  }

  #technology {
    margin-top: 1.1rem !important;
  }

  #hero-title {
    font-size: clamp(2.05rem, 8.2vw, 2.65rem) !important;
    line-height: 1.08 !important;
  }

  main > section:not(.hero) h2,
  .section-heading h2,
  .section-copy h2,
  .feature-copy h2,
  .pairing-copy h2,
  .brochure-copy h2,
  .documentary-copy h2,
  .access-intro h2,
  .comparison-copy h2,
  .x39-pairing .pairing-copy h2,
  .recommendation #recommendation-title {
    font-size: clamp(1.55rem, 6.4vw, 2.05rem) !important;
    line-height: 1.16 !important;
    text-wrap: balance;
  }

  main > section:not(.hero) h3,
  .science-authority h3 {
    font-size: clamp(1.08rem, 4.8vw, 1.35rem) !important;
    line-height: 1.24 !important;
  }

  .section-heading p,
  .section-copy p,
  .feature-copy p,
  .pairing-copy p,
  .brochure-copy p,
  .documentary-copy p,
  .science-authority p,
  .science-authority li,
  .faq p,
  .faq li {
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
  }

  .patch-showcase,
  .x39-evidence-images,
  .proof-asset-grid,
  .brochure-preview-card,
  .founder-bio-card {
    grid-template-columns: 1fr !important;
  }

  .patch-lifestyle-card img,
  .x39-water-card img,
  .x39-evidence-images img,
  .proof-asset-grid img,
  .brochure-preview-card img {
    height: auto !important;
  }

  .x39-evidence-images img,
  .proof-asset-grid img {
    aspect-ratio: auto !important;
    max-height: 520px !important;
    object-fit: contain !important;
    padding: 0.45rem !important;
    background: #fff !important;
  }

  .founder-bio-card img {
    height: auto !important;
    max-height: 380px !important;
  }

  .founder-bio-card ul {
    columns: 1;
  }

  .documentary-poster-single img,
  .video-card img {
    aspect-ratio: 16 / 9 !important;
  }

  .resource-grid,
  .recognition-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Emergency polish pass: stop header collisions and treat text-heavy assets as full artwork. */
@media (min-width: 1061px) {
  #hero-title {
    max-width: 900px !important;
    font-size: clamp(2.9rem, 3.35vw, 3.6rem) !important;
    line-height: 1.06 !important;
    text-wrap: normal !important;
  }

  .hero-copy {
    max-width: 820px !important;
  }

  .site-header,
  .site-header.is-scrolled {
    width: min(1540px, calc(100% - 2rem)) !important;
    max-width: none !important;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) auto !important;
    gap: clamp(0.7rem, 1vw, 1rem) !important;
    padding: 0.65rem 0.85rem !important;
  }

  .site-header .brand {
    grid-template-columns: 118px minmax(0, 180px) !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .site-header .brand-mark {
    width: 118px !important;
    height: 52px !important;
    border-radius: 999px !important;
  }

  .site-header .brand span {
    min-width: 0 !important;
    max-width: 180px !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .site-header .brand small {
    display: block !important;
    margin-top: 0.16rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .site-nav {
    justify-content: center !important;
    gap: clamp(0.55rem, 1vw, 1.05rem) !important;
    min-width: 0 !important;
    font-size: clamp(0.78rem, 0.78vw, 0.92rem) !important;
  }

  .site-nav a {
    flex: 0 0 auto !important;
    padding: 0.35rem 0 !important;
    white-space: nowrap !important;
  }

  .header-cta {
    flex: 0 0 auto !important;
    min-width: 184px !important;
    padding: 0 1rem !important;
    white-space: nowrap !important;
    font-size: clamp(0.78rem, 0.82vw, 0.9rem) !important;
  }
}

@media (min-width: 1061px) and (max-width: 1260px) {
  .site-header,
  .site-header.is-scrolled {
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) auto !important;
  }

  .site-header .brand {
    grid-template-columns: 96px minmax(0, 150px) !important;
  }

  .site-header .brand-mark {
    width: 96px !important;
    height: 44px !important;
  }

  .site-header .brand span {
    max-width: 150px !important;
    font-size: 0.92rem !important;
  }

  .site-nav {
    gap: 0.55rem !important;
    font-size: 0.76rem !important;
  }

  .header-cta {
    min-width: 170px !important;
    font-size: 0.76rem !important;
  }
}

.section-visual,
.feature-image,
.why-x20-visuals,
.brochure-preview-card {
  overflow: visible !important;
}

.section-visual-glass {
  display: grid !important;
  justify-items: center !important;
}

.section-visual-glass img {
  width: min(100%, 430px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.feature-image img {
  height: auto !important;
  max-height: 620px !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.why-x20-visuals {
  grid-template-columns: minmax(260px, 380px) minmax(220px, 310px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(1.25rem, 3vw, 2rem) !important;
}

.why-x20-visuals img,
.why-x20-visuals img:last-child {
  justify-self: center !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}

.why-x20-visuals img:last-child {
  max-width: 310px !important;
}

.brochure {
  grid-template-columns: minmax(460px, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
}

.brochure-copy {
  max-width: 680px !important;
}

.brochure-copy h2 {
  max-width: 680px !important;
  font-size: clamp(2.35rem, 3.2vw, 3.75rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.brochure-copy p {
  max-width: 620px !important;
}

.brochure-preview-card {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.48fr) minmax(320px, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brochure-preview-card img,
.brochure-preview-card img:first-child,
.brochure-preview-card img:last-child {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  max-height: 360px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  background: transparent !important;
}

@media (max-width: 1060px) {
  .why-x20-visuals,
  .brochure {
    grid-template-columns: 1fr !important;
  }

  .brochure-copy,
  .brochure-copy h2,
  .brochure-copy p {
    max-width: none !important;
  }

  .brochure-preview-card {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .section-visual-glass img,
  .feature-image img,
  .why-x20-visuals img,
  .why-x20-visuals img:last-child,
  .brochure-preview-card img,
  .brochure-preview-card img:first-child,
  .brochure-preview-card img:last-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .brochure-preview-card {
    grid-template-columns: 1fr !important;
  }
}

/* Final top-of-page correction: remove the pale header band and hero media outline. */
body {
  background: #06131d !important;
}

.product-video,
.product-video:hover,
.product-video:focus-visible {
  border: 0 !important;
  outline: 0 !important;
}

.product-video img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: 50% center !important;
  background: transparent !important;
}

@media (min-width: 1061px) {
  .site-header,
  .site-header.is-scrolled {
    position: fixed !important;
    top: 0.75rem !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    border: 0 !important;
    transform: translateX(-50%) !important;
  }

  .hero {
    margin-top: 0 !important;
    padding-top: clamp(6.4rem, 6.7vw, 7.6rem) !important;
  }
}

@media (max-width: 1060px) {
  .site-header,
  .site-header.is-scrolled {
    margin-bottom: 0 !important;
    border: 0 !important;
  }

  .hero {
    padding-top: clamp(1.8rem, 5vw, 3rem) !important;
  }
}

/* Mobile final lock: real nav controls, contained video copy, and phone-specific hero crop. */
@media (max-width: 1060px) {
  body .site-header,
  body .site-header.is-scrolled {
    position: sticky !important;
    top: 0.45rem !important;
    right: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px 40px !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: calc(100% - 0.75rem) !important;
    max-width: 680px !important;
    min-height: 58px !important;
    margin: 0.45rem auto 0 !important;
    padding: 0.5rem !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(5, 20, 30, 0.94) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26) !important;
    overflow: visible !important;
    transform: none !important;
  }

  body .site-header::before,
  body .site-header::after,
  body .site-header .brand::after,
  body .site-header .mobile-header-cta::before {
    content: none !important;
    display: none !important;
  }

  body .site-header .brand {
    position: relative !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 0.48rem !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body .site-header .brand-mark {
    width: 92px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    object-fit: contain !important;
  }

  body .site-header .brand span {
    min-width: 0 !important;
    max-width: 100% !important;
    color: #f8fdff !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body .site-header .brand small {
    display: none !important;
  }

  body .site-header .mobile-header-cta,
  body .site-header > button.menu-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 2 !important;
    display: grid !important;
    grid-row: 1 !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header .mobile-header-cta {
    grid-column: 2 !important;
    color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0 !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  body .site-header .mobile-header-cta::after {
    content: none !important;
    color: #06131d !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
  }

  body .site-header > button.menu-toggle {
    grid-column: 3 !important;
    gap: 5px !important;
    border: 1px solid rgba(187, 240, 255, 0.4) !important;
    background: rgba(8, 43, 64, 0.92) !important;
    box-shadow: none !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f4fdff !important;
    opacity: 1 !important;
  }

  body .site-nav,
  body .site-header .header-cta {
    display: none !important;
  }

  body .site-header.is-open {
    align-items: start !important;
  }

  body .site-header.is-open .site-nav {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    gap: 0.15rem !important;
    width: 100% !important;
    margin-top: 0.55rem !important;
    padding: 0.55rem !important;
    border: 1px solid rgba(187, 240, 255, 0.18) !important;
    border-radius: 14px !important;
    background: rgba(4, 18, 28, 0.96) !important;
    max-height: calc(100svh - 6rem) !important;
    overflow-y: auto !important;
  }

  body .site-header.is-open .site-nav a {
    display: block !important;
    width: 100% !important;
    padding: 0.72rem 0.75rem !important;
    border-radius: 10px !important;
    color: #ecfbff !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body .site-header.is-open .header-cta {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin-top: 0.5rem !important;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 5.75rem !important;
  }

  section[id] {
    scroll-margin-top: 5.75rem !important;
  }

  .hero {
    padding-top: clamp(1.05rem, 4vw, 1.65rem) !important;
  }

  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    width: min(100% - 1rem, 430px) !important;
    gap: 0.65rem !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .hero-media {
    order: 4 !important;
    width: min(100%, 348px) !important;
    margin: 0.1rem auto 0.9rem !important;
    border-radius: 20px !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .hero-media::before,
  .hero-media::after,
  .product-video::before,
  .video-caption {
    content: none !important;
    display: none !important;
  }

  .product-video {
    width: 100% !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34) !important;
    overflow: hidden !important;
  }

  .product-video img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.08 / 1 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: 58% 50% !important;
    background: transparent !important;
    transform: none !important;
  }

  .investment-note {
    right: 0.45rem !important;
    bottom: 0.45rem !important;
    left: auto !important;
    width: min(138px, 43%) !important;
    max-width: calc(100% - 0.9rem) !important;
    padding: 0.55rem 0.6rem !important;
    border: 1px solid rgba(184, 242, 255, 0.18) !important;
    border-radius: 13px !important;
    background: rgba(7, 19, 27, 0.88) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
  }

  .investment-note span {
    font-size: clamp(1rem, 5vw, 1.28rem) !important;
    line-height: 1.02 !important;
  }

  .investment-note p {
    display: none !important;
  }

  .play-button {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 430px) {
  body .site-header .brand {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  body .site-header .brand-mark {
    width: 82px !important;
    height: 36px !important;
  }

  body .site-header .brand span {
    font-size: 0.76rem !important;
  }

  .hero-media {
    width: min(100%, 326px) !important;
  }

  .investment-note {
    width: min(128px, 42%) !important;
  }
}

/* Phone top polish: compact nav, quieter proof line, and unobstructed product media. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 0.5rem !important;
    min-height: 62px !important;
    padding: 0.5rem 0.55rem !important;
    border-radius: 18px !important;
  }

  body .site-header .brand {
    grid-template-columns: auto !important;
    width: auto !important;
    max-width: 132px !important;
  }

  body .site-header .brand-mark {
    width: 120px !important;
    height: 44px !important;
  }

  body .site-header .brand span {
    display: none !important;
  }

  body .site-header .mobile-header-cta,
  body .site-header > button.menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .hero {
    padding-top: 1rem !important;
  }

  .hero-rating-line {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.7rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #c8f7ff !important;
    -webkit-text-fill-color: #c8f7ff !important;
    font-size: clamp(0.8rem, 3.7vw, 0.94rem) !important;
    font-weight: 780 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
  }

  .hero .eyebrow {
    margin-bottom: 0.62rem !important;
    color: #b8f4ff !important;
    -webkit-text-fill-color: #b8f4ff !important;
    font-size: clamp(0.58rem, 2.8vw, 0.68rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.14em !important;
  }

  #hero-title {
    max-width: 12.5ch !important;
    margin-bottom: 0.75rem !important;
    font-size: clamp(2.55rem, 12vw, 3.35rem) !important;
    line-height: 1.02 !important;
  }

  .hero-lede {
    margin-bottom: 0.85rem !important;
    font-size: clamp(1rem, 4.5vw, 1.12rem) !important;
    line-height: 1.48 !important;
  }

  .hero-media {
    width: min(calc(100% - 0.35rem), 350px) !important;
    margin-top: 0.25rem !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .hero-media::before,
  .hero-media::after,
  .product-video::before,
  body .hero .video-caption {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
  }

  .product-video {
    border-radius: 22px !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .product-video img {
    aspect-ratio: 1.08 / 1 !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 62% 50% !important;
    filter: contrast(1.04) saturate(1.05) !important;
  }

  .investment-note {
    right: 0.9rem !important;
    bottom: 0.55rem !important;
    left: auto !important;
    width: min(122px, 38%) !important;
    padding: 0.5rem 0.52rem !important;
    border-radius: 12px !important;
    background: rgba(7, 19, 27, 0.9) !important;
    transform: none !important;
  }

  .investment-note span {
    font-size: clamp(0.95rem, 4.6vw, 1.15rem) !important;
  }

  body .hero .investment-note p {
    display: none !important;
    visibility: hidden !important;
  }

  .play-button {
    left: 50% !important;
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 390px) {
  body .site-header .brand-mark {
    width: 108px !important;
    height: 40px !important;
  }

  .hero-media {
    width: min(100%, 326px) !important;
  }

  .investment-note {
    width: min(112px, 37%) !important;
  }
}

/* Mobile header refinement: restore brand text and rebalance the action buttons. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) 36px 42px !important;
    gap: 0.42rem !important;
    min-height: 58px !important;
    padding: 0.48rem 0.5rem !important;
  }

  body .site-header .brand {
    grid-template-columns: 76px minmax(112px, 1fr) !important;
    gap: 0.44rem !important;
    width: 100% !important;
    max-width: none !important;
  }

  body .site-header .brand-mark {
    width: 76px !important;
    height: 42px !important;
    border-radius: 999px !important;
  }

  body .site-header .brand span {
    display: block !important;
    min-width: 0 !important;
    max-width: 132px !important;
    color: #f8fdff !important;
    font-size: clamp(0.76rem, 3.3vw, 0.88rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  body .site-header .brand small {
    display: none !important;
  }

  body .site-header .mobile-header-cta {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid rgba(187, 240, 255, 0.34) !important;
    border-radius: 12px !important;
    color: #dffbff !important;
    background: rgba(8, 43, 64, 0.88) !important;
    box-shadow: none !important;
  }

  body .site-header .mobile-header-cta::after {
    color: #dffbff !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
  }

  body .site-header > button.menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (max-width: 390px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) 34px 40px !important;
    gap: 0.34rem !important;
  }

  body .site-header .brand {
    grid-template-columns: 68px minmax(98px, 1fr) !important;
    gap: 0.38rem !important;
  }

  body .site-header .brand-mark {
    width: 68px !important;
    height: 38px !important;
  }

  body .site-header .brand span {
    max-width: 118px !important;
    font-size: 0.73rem !important;
  }

  body .site-header .mobile-header-cta {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body .site-header > button.menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Client correction: use the full phone width for dashboard and comparison images. */
@media (max-width: 760px) {
  main > section:not(.hero) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-evidence,
  .comparison-copy,
  .comparison-charts,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list {
    box-sizing: border-box !important;
    width: min(calc(100vw - 1.25rem), 430px) !important;
    max-width: calc(100vw - 1.25rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .clinical-evidence,
  .clinical-image-stack,
  .comparison-copy,
  .comparison-charts,
  .see-difference-chart,
  .comparison-visual {
    width: min(calc(100vw - 0.75rem), 450px) !important;
    max-width: calc(100vw - 0.75rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .clinical-image-stack,
  .comparison-charts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .clinical-image-stack #clinical-findings,
  .clinical-image-stack img,
  .see-difference-chart img,
  .comparison-visual img,
  .comparison-charts img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .see-difference-chart,
  .comparison-visual,
  .clinical-image-stack {
    padding: 0.45rem !important;
    border-radius: 18px !important;
  }

  .section-visual-glass img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Safari alignment fix: center the real dollar label, not a pseudo element. */
@media (max-width: 760px) {
  body .site-header .mobile-header-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #dffbff !important;
    font-size: 0.92rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body .site-header .mobile-header-cta::after {
    content: none !important;
    display: none !important;
  }
}

/* Prompt pass: requested navigation, iPad hero, science proof, and X39 image corrections. */
.site-header,
.site-header.is-scrolled {
  background:
    linear-gradient(135deg, rgba(8, 63, 82, 0.96), rgba(7, 44, 72, 0.96)) !important;
}

.header-cta,
.site-header.is-open .header-cta {
  color: #06131d !important;
  -webkit-text-fill-color: #06131d !important;
  background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
  border-color: transparent !important;
}

.hero-footer span {
  color: #74daf4 !important;
  -webkit-text-fill-color: #74daf4 !important;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.feature-image img[src*="X20%20image"] {
  width: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  background: #eef6f7 !important;
}

.science-support-list + .clinical-result-note {
  margin-top: 1.35rem !important;
  color: #083042 !important;
  font-size: clamp(1.12rem, 1.75vw, 1.45rem) !important;
  font-weight: 820 !important;
  line-height: 1.42 !important;
}

.science-quote {
  width: min(100%, 980px) !important;
  margin: clamp(2rem, 4vw, 3rem) auto clamp(1.4rem, 3vw, 2rem) !important;
  padding: 0 !important;
  border: 0 !important;
  color: #07364b !important;
  background: transparent !important;
  font-size: clamp(1.55rem, 3vw, 2.45rem) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  text-align: center !important;
}

.credibility-bar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.7rem !important;
  width: min(100%, 760px) !important;
  margin: 0 auto clamp(1.4rem, 3vw, 2rem) !important;
}

.credibility-bar span {
  position: relative !important;
  min-height: 0 !important;
  padding: 0.2rem 0 0.2rem 2.45rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0b2f3e !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  font-weight: 820 !important;
  line-height: 1.28 !important;
}

.credibility-bar span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.12rem !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dffbff, #69dcff 60%, #5aabff) !important;
}

.credibility-bar span::after {
  content: "" !important;
  position: absolute !important;
  left: 0.5rem !important;
  top: 0.42rem !important;
  width: 0.38rem !important;
  height: 0.68rem !important;
  border: solid #06131d !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.clinical-image-stack img[src*="X20%20image"] {
  width: 100% !important;
  max-height: 460px !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: #eef6f7 !important;
}

.x39-testimonial-card img[src*="IMG_5691"] {
  width: min(100%, 320px) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

@media (min-width: 761px) and (max-width: 1060px) {
  .hero {
    padding-top: clamp(2rem, 4vw, 3rem) !important;
  }

  .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr) !important;
    align-items: center !important;
    gap: clamp(1.4rem, 3vw, 2.2rem) !important;
    width: min(100% - 2rem, 980px) !important;
  }

  .hero-copy {
    display: block !important;
  }

  .hero-media {
    align-self: center !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 !important;
  }

  .product-video img {
    aspect-ratio: 1.08 / 1 !important;
    object-fit: cover !important;
    object-position: 58% center !important;
  }

  .investment-note {
    position: static !important;
    width: 100% !important;
    margin-top: 0.65rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .investment-note span {
    color: #dffbff !important;
    -webkit-text-fill-color: #dffbff !important;
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
  }

  .investment-note p {
    display: block !important;
    margin-top: 0.3rem !important;
    color: rgba(240, 252, 255, 0.74) !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 104px) 40px !important;
    background:
      linear-gradient(135deg, rgba(8, 63, 82, 0.96), rgba(7, 44, 72, 0.96)) !important;
  }

  body .site-header .brand {
    grid-template-columns: 88px minmax(98px, 1fr) !important;
    gap: 0.44rem !important;
  }

  body .site-header .brand-mark {
    width: 88px !important;
    height: 44px !important;
  }

  body .site-header .brand span {
    max-width: 130px !important;
    font-size: clamp(0.76rem, 3.2vw, 0.9rem) !important;
  }

  body .site-header .mobile-header-cta {
    width: 100% !important;
    min-width: 88px !important;
    max-width: 104px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 0.42rem !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    border: 0 !important;
    font-size: clamp(0.58rem, 2.4vw, 0.66rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  body .site-header .mobile-header-cta::after {
    content: none !important;
    display: none !important;
  }

  body .site-header > button.menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    background: rgba(8, 43, 64, 0.92) !important;
  }

  .hero-footer {
    gap: 0.55rem !important;
  }

  .hero-footer span {
    font-size: 1.05rem !important;
  }

  .product-video::before {
    display: block !important;
    content: "" !important;
    background: linear-gradient(180deg, transparent 68%, rgba(5, 10, 14, 0.82)) !important;
  }

  body .hero .video-caption {
    display: block !important;
    visibility: visible !important;
    right: 0.45rem !important;
    bottom: 0.45rem !important;
    left: 0.45rem !important;
    min-height: 0 !important;
    padding: 0.42rem 0.5rem !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: rgba(5, 10, 14, 0.76) !important;
    font-size: clamp(0.58rem, 2.35vw, 0.7rem) !important;
    font-weight: 820 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .investment-note {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0.55rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .investment-note span {
    color: #dffbff !important;
    -webkit-text-fill-color: #dffbff !important;
    font-size: 1rem !important;
  }

  body .hero .investment-note p {
    display: none !important;
  }

  .science-quote {
    font-size: clamp(1.35rem, 7.2vw, 2rem) !important;
  }

  .credibility-bar {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 92px) 38px !important;
  }

  body .site-header .brand {
    grid-template-columns: 78px minmax(86px, 1fr) !important;
  }

  body .site-header .brand-mark {
    width: 78px !important;
    height: 40px !important;
  }

  body .site-header .brand span {
    max-width: 106px !important;
    font-size: 0.72rem !important;
  }

  body .site-header .mobile-header-cta {
    min-width: 78px !important;
    max-width: 92px !important;
    font-size: 0.56rem !important;
  }

  body .site-header > button.menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* Client final content pass: July 18 requested asset and copy placement. */
.clinical-image-stack #clinical-findings {
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

.patent-proof-inline {
  grid-template-columns: minmax(240px, 0.58fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

.patent-proof-inline img {
  width: 100% !important;
  max-height: 540px !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.patent-proof-inline p {
  margin: 0 0 1rem !important;
  color: #0b2f3e !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  line-height: 1.18 !important;
}

.pair-perfect-copy {
  font-size: clamp(1.08rem, 1.55vw, 1.32rem) !important;
  line-height: 1.55 !important;
}

.pair-perfect-copy strong {
  display: inline-block !important;
  color: #082b3a !important;
  font-size: 1.14em !important;
  font-weight: 900 !important;
}

.pair-actions {
  justify-items: center !important;
  text-align: center !important;
}

.pair-actions .btn {
  justify-content: center !important;
  width: 100% !important;
}

.x39-evidence-images {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.x39-evidence-images img,
.x39-evidence-images img:first-child,
.x39-evidence-images img:nth-child(2),
.x39-evidence-images img:nth-child(3),
.x39-evidence-images img:nth-child(4),
.x39-evidence-images img:nth-child(5),
.x39-evidence-images img:last-child {
  width: 100% !important;
  max-height: 390px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f8fcff !important;
}

.x39-evidence-images img:last-child {
  object-fit: contain !important;
  padding: 0.6rem !important;
}

.comparison-charts {
  grid-template-columns: minmax(300px, 0.48fr) minmax(0, 0.95fr) !important;
  gap: clamp(1.1rem, 2.4vw, 2rem) !important;
}

.see-difference-chart img {
  max-height: 680px !important;
  padding: 0 !important;
}

.comparison-visual img {
  max-height: 760px !important;
}

.proof-check-list {
  display: grid !important;
  gap: 0.65rem !important;
  width: min(100%, 680px) !important;
  margin: 1rem auto 1.1rem !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.proof-check-list li {
  position: relative !important;
  padding-left: 2.2rem !important;
  color: #0b2f3e !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

.proof-check-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.1rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 50% !important;
  background:
    linear-gradient(135deg, #dffbff, #69dcff 62%, #5aabff) !important;
}

.proof-check-list li::after {
  content: "" !important;
  position: absolute !important;
  left: 0.43rem !important;
  top: 0.35rem !important;
  width: 0.33rem !important;
  height: 0.58rem !important;
  border: solid #06131d !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.proof-asset-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

.proof-asset-grid img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.proof-asset-grid figure:nth-child(6) img,
.proof-asset-grid figure:nth-child(7) img {
  object-fit: contain !important;
  background: #f8fcff !important;
}

.pre-faq-x20 {
  width: min(var(--max), calc(100% - 2rem)) !important;
  margin: 0 auto !important;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem clamp(2.2rem, 4vw, 3rem) !important;
  text-align: center !important;
}

.pre-faq-x20 img {
  width: min(100%, 760px) !important;
  height: auto !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  box-shadow: 0 24px 70px rgba(3, 17, 26, 0.18) !important;
}

@media (max-width: 1060px) {
  .patent-proof-inline,
  .comparison-charts,
  .x39-evidence-images {
    grid-template-columns: 1fr !important;
  }

  .x39-evidence-images img,
  .x39-evidence-images img:first-child,
  .x39-evidence-images img:nth-child(2),
  .x39-evidence-images img:nth-child(3),
  .x39-evidence-images img:nth-child(4),
  .x39-evidence-images img:nth-child(5),
  .x39-evidence-images img:last-child {
    width: min(100%, 460px) !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  .patent-proof-inline img {
    max-height: none !important;
  }

  .pair-actions {
    grid-template-columns: 1fr !important;
  }

  .proof-check-list {
    width: 100% !important;
  }

  .pre-faq-x20 {
    width: 100% !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

/* Prompt.txt completion lock: navigation CTA text, responsive hero media, and final asset placement. */
.site-header,
.site-header.is-scrolled {
  background:
    linear-gradient(135deg, rgba(8, 63, 82, 0.97), rgba(6, 49, 76, 0.97)) !important;
}

.header-cta,
.site-header.is-open .header-cta {
  color: #06131d !important;
  -webkit-text-fill-color: #06131d !important;
  background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
  border-color: transparent !important;
}

.site-header::before,
.site-header::after,
.site-header .brand::after,
.site-header .mobile-header-cta::before,
.site-header .mobile-header-cta::after {
  content: none !important;
  display: none !important;
}

.brand-mark {
  object-fit: cover !important;
  object-position: center !important;
  background: #ffffff !important;
}

.hero-footer {
  justify-content: center !important;
}

.hero-footer span {
  color: #6be7ff !important;
  -webkit-text-fill-color: #6be7ff !important;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

.feature-image {
  background: transparent !important;
  box-shadow: none !important;
}

.feature-image img[src*="X20%20image"] {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: 0 20px 56px rgba(3, 17, 26, 0.14) !important;
}

.science-support-list + .clinical-result-note {
  margin-top: 1.45rem !important;
  color: #083042 !important;
  font-size: clamp(1.18rem, 1.8vw, 1.5rem) !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
}

.science-quote {
  width: min(100%, 980px) !important;
  margin: clamp(2.2rem, 4.2vw, 3.2rem) auto clamp(1.55rem, 3vw, 2.15rem) !important;
  padding: 0 !important;
  border: 0 !important;
  color: #07364b !important;
  background: transparent !important;
  font-size: clamp(1.65rem, 3.1vw, 2.55rem) !important;
  font-weight: 920 !important;
  line-height: 1.13 !important;
  text-align: center !important;
}

.credibility-bar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
  width: min(100%, 780px) !important;
  margin: 0 auto clamp(1.5rem, 3vw, 2.2rem) !important;
}

.credibility-bar span {
  position: relative !important;
  min-height: 0 !important;
  padding: 0.1rem 0 0.1rem 2.55rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0b2f3e !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
}

.credibility-bar span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.08rem !important;
  display: inline-grid !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dffbff, #69dcff 60%, #5aabff) !important;
}

.credibility-bar span::after {
  content: "" !important;
  position: absolute !important;
  left: 0.5rem !important;
  top: 0.39rem !important;
  width: 0.36rem !important;
  height: 0.66rem !important;
  border: solid #061016 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.clinical-image-stack img[src*="X20%20image"] {
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.x39-testimonial-card img[src*="IMG_5691"] {
  width: min(100%, 340px) !important;
  height: auto !important;
  max-height: none !important;
  padding: 0.55rem !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}

@media (min-width: 1061px) {
  .site-header,
  .site-header.is-scrolled {
    width: min(1500px, calc(100% - 2rem)) !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) auto !important;
    gap: clamp(0.9rem, 1.35vw, 1.4rem) !important;
  }

  .site-header .brand {
    grid-template-columns: 132px minmax(0, 190px) !important;
  }

  .site-header .brand-mark {
    width: 132px !important;
    height: 56px !important;
    padding: 5px !important;
    border-radius: 999px !important;
  }

  .site-header .brand span {
    max-width: 190px !important;
    font-size: 1.03rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  body .site-header,
  body .site-header.is-scrolled {
    position: sticky !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) 46px !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0.7rem 2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(135deg, rgba(8, 63, 82, 0.98), rgba(6, 49, 76, 0.98)) !important;
  }

  body .site-header .brand {
    grid-template-columns: 126px minmax(0, 180px) !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
  }

  body .site-header .brand-mark {
    width: 126px !important;
    height: 50px !important;
    padding: 5px !important;
    border-radius: 999px !important;
  }

  body .site-header .brand span {
    display: block !important;
    color: #f8fdff !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
  }

  body .site-header .brand small {
    display: none !important;
  }

  body .site-header .mobile-header-cta {
    position: static !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 150px !important;
    max-width: 180px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.2rem 0.7rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle {
    position: static !important;
    grid-column: 3 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    background: rgba(8, 43, 64, 0.92) !important;
    transform: none !important;
  }

  .hero {
    padding-top: clamp(1.8rem, 4vw, 2.8rem) !important;
  }

  .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr) !important;
    align-items: center !important;
    gap: clamp(1.35rem, 3vw, 2.25rem) !important;
    width: min(100% - 2rem, 980px) !important;
  }

  .hero-media {
    align-self: center !important;
    width: 100% !important;
    max-width: 410px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .product-video {
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28) !important;
  }

  .product-video img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.08 / 1 !important;
    object-fit: cover !important;
    object-position: 58% center !important;
    background: transparent !important;
    transform: none !important;
  }

  .investment-note {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0.7rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .investment-note span {
    color: #dffbff !important;
    -webkit-text-fill-color: #dffbff !important;
    font-size: clamp(1rem, 1.7vw, 1.25rem) !important;
    line-height: 1.12 !important;
  }

  .investment-note p {
    display: block !important;
    max-width: 360px !important;
    margin-top: 0.32rem !important;
    color: rgba(240, 252, 255, 0.78) !important;
    font-size: 0.82rem !important;
    line-height: 1.38 !important;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 4.8rem !important;
  }

  section[id] {
    scroll-margin-top: 4.8rem !important;
  }

  body .site-header,
  body .site-header.is-scrolled {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(108px, 124px) 44px !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 0.65rem 0.75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(135deg, rgba(8, 63, 82, 0.98), rgba(6, 49, 76, 0.98)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
    overflow: visible !important;
    transform: none !important;
  }

  body .site-header .brand {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 116px !important;
    gap: 0 !important;
    width: 116px !important;
    max-width: 116px !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body .site-header .brand-mark {
    width: 116px !important;
    height: 46px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
  }

  body .site-header .brand span {
    display: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #f8fdff !important;
    font-size: clamp(0.72rem, 3.05vw, 0.88rem) !important;
    font-weight: 850 !important;
    line-height: 1.06 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  body .site-header .brand small {
    display: none !important;
  }

  body .site-header .mobile-header-cta {
    position: static !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 108px !important;
    max-width: 124px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.2rem 0.42rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    box-shadow: 0 10px 24px rgba(69, 210, 209, 0.22) !important;
    font-size: clamp(0.56rem, 2.35vw, 0.66rem) !important;
    font-weight: 920 !important;
    line-height: 1.04 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle {
    position: static !important;
    grid-column: 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(187, 240, 255, 0.48) !important;
    border-radius: 12px !important;
    background: rgba(8, 43, 64, 0.92) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f4fdff !important;
    opacity: 1 !important;
  }

  body .site-header .site-nav,
  body .site-header .header-cta {
    display: none !important;
  }

  body .site-header.is-open .site-nav {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    gap: 0.15rem !important;
    width: 100% !important;
    margin-top: 0.65rem !important;
    padding: 0.55rem !important;
    border: 1px solid rgba(187, 240, 255, 0.18) !important;
    border-radius: 14px !important;
    background: rgba(4, 18, 28, 0.97) !important;
    max-height: calc(100svh - 7rem) !important;
    overflow-y: auto !important;
  }

  body .site-header.is-open .site-nav a {
    display: block !important;
    width: 100% !important;
    padding: 0.72rem 0.75rem !important;
    border-radius: 10px !important;
    color: #ecfbff !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
  }

  body .site-header.is-open .header-cta {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin-top: 0.55rem !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
  }

  .hero {
    padding-top: clamp(1.15rem, 4vw, 1.65rem) !important;
  }

  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100vw - 3rem), 352px) !important;
    max-width: min(calc(100vw - 3rem), 352px) !important;
    gap: 0.9rem !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .hero-copy,
  .hero-rating-line,
  .hero .eyebrow,
  #hero-title,
  .hero-lede,
  .hero-proof,
  .hero-actions,
  .risk-strip {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  #hero-title {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.2vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }

  .hero-lede {
    font-size: clamp(0.98rem, 4vw, 1.12rem) !important;
    line-height: 1.55 !important;
  }

  .hero-media {
    order: 4 !important;
    width: 100% !important;
    max-width: 352px !important;
    margin: 0.2rem auto 0.85rem !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .product-video {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
  }

  .product-video::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background: linear-gradient(180deg, transparent 62%, rgba(5, 10, 14, 0.84)) !important;
    pointer-events: none !important;
  }

  .product-video img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.08 / 1 !important;
    object-fit: cover !important;
    object-position: 58% center !important;
    background: transparent !important;
    transform: none !important;
  }

  body .hero .video-caption {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    z-index: 2 !important;
    right: 0.45rem !important;
    bottom: 0.45rem !important;
    left: 0.45rem !important;
    min-height: 0 !important;
    padding: 0.42rem 0.5rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: rgba(5, 10, 14, 0.76) !important;
    font-size: clamp(0.5rem, 2.1vw, 0.58rem) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    backdrop-filter: blur(10px) !important;
  }

  .investment-note {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0.58rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .investment-note span {
    color: #dffbff !important;
    -webkit-text-fill-color: #dffbff !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
  }

  body .hero .investment-note p {
    display: block !important;
    margin-top: 0.25rem !important;
    color: rgba(240, 252, 255, 0.76) !important;
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
  }

  .hero-footer {
    width: min(100% - 1.5rem, 430px) !important;
    margin-top: 1.2rem !important;
    gap: 0.55rem !important;
  }

  .hero-footer span {
    font-size: clamp(0.98rem, 4.1vw, 1.12rem) !important;
  }

  .science-quote {
    font-size: clamp(1.36rem, 6.8vw, 2rem) !important;
    line-height: 1.16 !important;
  }

  .credibility-bar {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: auto minmax(100px, 110px) 40px !important;
    gap: 0.42rem !important;
    min-height: 66px !important;
    padding: 0.58rem 0.6rem !important;
  }

  body .site-header .brand {
    grid-template-columns: 106px !important;
    gap: 0 !important;
    width: 106px !important;
    max-width: 106px !important;
  }

  body .site-header .brand-mark {
    width: 106px !important;
    height: 42px !important;
  }

  body .site-header .brand span {
    display: none !important;
  }

  body .site-header .mobile-header-cta {
    min-width: 100px !important;
    max-width: 112px !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.58rem !important;
  }

  body .site-header > button.menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* Client follow-up: uncropped video covers, iPad-safe proof assets, larger dashboard, and stronger recognition copy. */
.clinical-evidence {
  grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1fr) !important;
  align-items: center !important;
}

.clinical-image-stack #clinical-findings {
  width: min(100%, 980px) !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.x39-cta-panel .x39-video-link {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
}

.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  align-items: stretch !important;
}

.video-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  color: #f6fdff !important;
  background: #071622 !important;
  box-shadow: 0 18px 42px rgba(3, 17, 26, 0.18) !important;
}

.video-card::after {
  content: none !important;
  display: none !important;
}

.video-cover {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #071622 !important;
}

.video-cover img,
.video-card img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #071622 !important;
  filter: none !important;
}

.video-card:nth-child(3) .video-cover,
.video-card:nth-child(3) .video-cover img {
  background: #ffffff !important;
}

.video-cover .play-button,
.video-card .play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2 !important;
  width: 52px !important;
  height: 52px !important;
  transform: translate(-50%, -50%) !important;
}

.video-card strong,
.video-card small {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  align-self: auto !important;
  margin: 0 !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.video-card strong {
  padding-top: 0.95rem !important;
  color: #ffffff !important;
  font-size: clamp(1rem, 1.2vw, 1.16rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.video-card small {
  padding-top: 0.3rem !important;
  padding-bottom: 1rem !important;
  color: rgba(230, 249, 255, 0.72) !important;
  font-size: 0.84rem !important;
}

.brand-purpose-card > span {
  display: inline-block !important;
  width: fit-content !important;
  margin-bottom: 0.85rem !important;
  color: #067a86 !important;
  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

.brand-purpose-card > strong {
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height: 1.16 !important;
}

.proof-asset-grid {
  align-items: start !important;
}

.proof-asset-grid figure {
  background: #f8fcff !important;
}

.proof-asset-grid img,
.proof-asset-grid figure:nth-child(1) img,
.proof-asset-grid figure:nth-child(2) img,
.proof-asset-grid figure:nth-child(3) img,
.proof-asset-grid figure:nth-child(4) img,
.proof-asset-grid figure:nth-child(5) img,
.proof-asset-grid figure:nth-child(6) img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  aspect-ratio: auto !important;
  padding: 0.45rem !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}

@media (max-width: 1060px) {
  .clinical-evidence {
    grid-template-columns: 1fr !important;
  }

  .clinical-image-stack #clinical-findings {
    width: 100% !important;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .proof-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .video-grid,
  .proof-asset-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final mobile width lock: prevent clipped phone layouts while keeping the CTA readable. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main,
  .hero,
  main > section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: clamp(102px, 30vw, 122px) minmax(0, 1fr) clamp(40px, 12vw, 44px) !important;
    gap: clamp(0.35rem, 2vw, 0.55rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.6rem clamp(0.65rem, 3vw, 0.9rem) !important;
  }

  body .site-header .brand {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 122px !important;
    min-width: 0 !important;
  }

  body .site-header .brand-mark {
    width: 100% !important;
    height: clamp(40px, 11.5vw, 48px) !important;
    object-fit: contain !important;
  }

  body .site-header .brand span {
    display: none !important;
  }

  body .site-header .mobile-header-cta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(40px, 11.5vw, 46px) !important;
    min-height: clamp(40px, 11.5vw, 46px) !important;
    padding: 0.18rem 0.45rem !important;
    font-size: clamp(0.58rem, 2.55vw, 0.72rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body .site-header > button.menu-toggle {
    width: clamp(40px, 12vw, 44px) !important;
    min-width: clamp(40px, 12vw, 44px) !important;
    height: clamp(40px, 12vw, 44px) !important;
    min-height: clamp(40px, 12vw, 44px) !important;
  }

  .hero-inner {
    width: min(calc(100% - 1.5rem), 430px) !important;
    max-width: calc(100vw - 1.5rem) !important;
  }

  .hero-copy,
  .hero-rating-line,
  .hero .eyebrow,
  #hero-title,
  .hero-lede,
  .hero-proof,
  .hero-actions,
  .risk-strip,
  .hero-media,
  .product-video,
  .investment-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #hero-title {
    font-size: clamp(2.15rem, 9.7vw, 2.95rem) !important;
    line-height: 1.08 !important;
  }

  .hero-lede {
    font-size: clamp(1rem, 4.1vw, 1.16rem) !important;
    line-height: 1.52 !important;
  }

  .product-video img {
    object-fit: contain !important;
    object-position: center !important;
  }

  .proof-pill,
  .risk-item,
  .proof-asset-grid figure,
  .video-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 96px minmax(0, 1fr) 40px !important;
    padding-inline: 0.55rem !important;
  }

  body .site-header .mobile-header-cta {
    font-size: 0.54rem !important;
  }
}

/* Client 5:30pm revisions: larger logo, readable hero price, resent dashboard, and correct X20 visual. */
.site-header .brand-mark,
body .site-header .brand-mark {
  object-fit: cover !important;
  object-position: center !important;
  background: #ffffff !important;
}

.investment-note {
  overflow: visible !important;
}

.investment-note span {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
}

.investment-note span small {
  color: rgba(232, 250, 255, 0.82) !important;
  font-size: 0.56em !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

.feature-image img[src*="Template%201_What%20Is%20LifeWave%20X2O"],
.feature-image img[src*="Template 1_What Is LifeWave X2O"] {
  width: 100% !important;
  height: auto !important;
  max-height: 760px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #eef7f8 !important;
}

.clinical-image-stack #clinical-findings {
  width: min(100%, 1080px) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

@media (min-width: 1061px) {
  .site-header,
  .site-header.is-scrolled {
    grid-template-columns: minmax(390px, 430px) minmax(0, 1fr) auto !important;
  }

  .site-header .brand {
    grid-template-columns: 174px minmax(0, 200px) !important;
    gap: 0.75rem !important;
  }

  .site-header .brand-mark {
    width: 174px !important;
    height: 66px !important;
    padding: 6px !important;
    border-radius: 999px !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) minmax(174px, 200px) 50px !important;
    min-height: 82px !important;
  }

  body .site-header .brand {
    grid-template-columns: 158px minmax(0, 170px) !important;
    gap: 0.7rem !important;
  }

  body .site-header .brand-mark {
    width: 158px !important;
    height: 60px !important;
    padding: 6px !important;
  }

  body .site-header .mobile-header-cta {
    min-width: 174px !important;
    max-width: 200px !important;
  }

  body .site-header > button.menu-toggle {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  .investment-note span {
    gap: 0.38rem !important;
  }

  .investment-note span small {
    font-size: 0.6em !important;
  }
}

@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: clamp(130px, 37vw, 154px) minmax(0, 1fr) clamp(42px, 12vw, 46px) !important;
    min-height: clamp(68px, 18vw, 78px) !important;
  }

  body .site-header .brand {
    max-width: 154px !important;
  }

  body .site-header .brand-mark {
    height: clamp(50px, 13.8vw, 60px) !important;
    padding: 5px !important;
  }

  body .site-header .mobile-header-cta {
    font-size: clamp(0.58rem, 2.45vw, 0.74rem) !important;
  }

  .investment-note span {
    display: inline-flex !important;
    gap: 0.34rem !important;
    font-size: clamp(0.98rem, 4.05vw, 1.16rem) !important;
    line-height: 1.12 !important;
  }

  .investment-note span small {
    font-size: 0.62em !important;
  }

  body .hero .investment-note p {
    font-size: 0.68rem !important;
  }

  .feature-image img[src*="Template%201_What%20Is%20LifeWave%20X2O"],
  .feature-image img[src*="Template 1_What Is LifeWave X2O"] {
    max-height: none !important;
  }
}

@media (max-width: 380px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 126px minmax(0, 1fr) 42px !important;
    gap: 0.36rem !important;
  }

  body .site-header .brand {
    max-width: 126px !important;
  }

  body .site-header .brand-mark {
    height: 48px !important;
  }

  body .site-header .mobile-header-cta {
    font-size: 0.54rem !important;
    padding-inline: 0.32rem !important;
  }
}

/* July 19 client pass: hero positioning, X39 CTA/link clarity, pair visual, and video title sizing. */
.hero-rating-line {
  color: #fff7b3 !important;
}

#pair {
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(1.4rem, 4vw, 3.4rem) !important;
}

.pair-intro-visual {
  width: 100% !important;
  margin: 0 !important;
}

.pair-intro-visual img {
  display: block !important;
  width: min(100%, 360px) !important;
  height: auto !important;
  margin-inline: auto !important;
  border: 1px solid rgba(120, 209, 219, 0.18) !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  background: #071622 !important;
  box-shadow: 0 22px 60px rgba(3, 17, 26, 0.18) !important;
}

#pair .section-copy {
  max-width: 820px !important;
}

.x39-cta-panel {
  display: grid !important;
  gap: 0.82rem !important;
}

.x39-cta-panel .btn {
  margin-bottom: 0.25rem !important;
}

.x39-cta-panel .text-link,
.x39-cta-panel .x39-video-link {
  display: inline-flex !important;
  width: fit-content !important;
  color: #59dfff !important;
  -webkit-text-fill-color: #59dfff !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

.x39-cta-panel .text-link:hover,
.x39-cta-panel .x39-video-link:hover {
  color: #a7f3ff !important;
  -webkit-text-fill-color: #a7f3ff !important;
}

.patent-proof-inline .btn-primary {
  margin-top: 0.45rem !important;
}

.video-card {
  min-height: 100% !important;
}

.video-card strong {
  min-height: 3.45em !important;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem) !important;
}

.video-card small {
  margin-top: auto !important;
}

@media (min-width: 761px) {
  .hero {
    padding-top: clamp(1.7rem, 3.2vw, 3rem) !important;
  }

  .hero-inner {
    align-items: start !important;
    gap: clamp(1.2rem, 3vw, 3rem) !important;
  }

  .hero-copy {
    transform: translateY(-0.5rem) !important;
  }

  .hero-media {
    align-self: start !important;
    transform: translateY(-1.35rem) !important;
  }
}

@media (min-width: 1061px) {
  .hero {
    padding-top: clamp(5.8rem, 6.4vw, 6.8rem) !important;
  }

  .hero-copy {
    transform: translateY(-0.25rem) !important;
  }

  .hero-media {
    transform: translateY(-0.7rem) !important;
  }

  .hero-media .investment-note {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .hero-media .investment-note span {
    color: #dffbff !important;
    -webkit-text-fill-color: #dffbff !important;
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
  }

  .hero-media .investment-note p {
    max-width: 460px !important;
    margin-top: 0.32rem !important;
    color: rgba(240, 252, 255, 0.78) !important;
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .hero-media {
    transform: translateY(-2.15rem) !important;
  }

  #hero-title {
    font-size: clamp(2.55rem, 5.5vw, 3.55rem) !important;
  }

  .hero-lede {
    margin-bottom: 1.05rem !important;
  }

  #pair {
    grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr) !important;
  }

  .pair-intro-visual img {
    width: min(100%, 280px) !important;
  }
}

@media (max-width: 760px) {
  #pair {
    grid-template-columns: 1fr !important;
  }

  .pair-intro-visual {
    order: -1 !important;
  }

  .pair-intro-visual img {
    width: min(100%, 320px) !important;
  }

  .video-card strong {
    min-height: auto !important;
  }

  .video-cover {
    aspect-ratio: 16 / 9 !important;
  }
}

/* July 19 prompt.txt lock: exact CTA copy, larger readable logo, and uncropped mobile/tablet visuals. */
.btn-primary-stacked {
  flex-direction: column !important;
  gap: 0.18rem !important;
  min-height: 64px !important;
  padding: 0.62rem 1.15rem !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: normal !important;
}

.btn-primary-stacked span {
  display: block !important;
  color: inherit !important;
  font-size: 1rem !important;
  font-weight: 920 !important;
}

.btn-primary-stacked small {
  display: block !important;
  max-width: 24rem !important;
  color: rgba(6, 19, 29, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

.science-quote {
  margin-top: clamp(2.6rem, 4.6vw, 3.8rem) !important;
  margin-bottom: clamp(1.8rem, 3.2vw, 2.4rem) !important;
}

.credibility-bar span::before {
  background: linear-gradient(135deg, #dffbff, #69dcff 60%, #5aabff) !important;
  box-shadow: 0 0 0 1px rgba(187, 240, 255, 0.34), 0 12px 28px rgba(69, 210, 209, 0.16) !important;
}

.clinical-image-stack #clinical-findings {
  width: min(100%, 1120px) !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.feature-image img[src*="Template%201_What%20Is%20LifeWave%20X2O"],
.feature-image img[src*="Template 1_What Is LifeWave X2O"],
.proof-asset-grid img,
.x39-evidence-images img,
.x39-testimonial-card img {
  object-fit: contain !important;
  object-position: center !important;
}

.proof-asset-grid img {
  max-height: 560px !important;
  padding: 0.35rem !important;
  background: #ffffff !important;
}

.video-grid {
  align-items: stretch !important;
}

.video-card {
  height: 100% !important;
}

.video-cover,
.video-card .video-cover {
  aspect-ratio: 16 / 9 !important;
  background: #071622 !important;
}

.video-cover img,
.video-card img {
  object-fit: contain !important;
  object-position: center !important;
  background: #071622 !important;
}

.video-card strong {
  min-height: 3.2em !important;
}

@media (min-width: 761px) and (max-width: 1060px) {
  .hero-inner {
    align-items: start !important;
  }

  .hero-media {
    transform: translateY(-2.35rem) !important;
  }

  .product-video img {
    object-fit: contain !important;
    object-position: center !important;
  }

  .investment-note span {
    font-size: clamp(0.96rem, 1.45vw, 1.14rem) !important;
  }

  .investment-note span small {
    font-size: 0.56em !important;
  }
}

@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: clamp(112px, 34vw, 146px) minmax(0, 1fr) clamp(40px, 11.5vw, 44px) !important;
    background: linear-gradient(135deg, rgba(8, 63, 82, 0.98), rgba(6, 49, 76, 0.98)) !important;
  }

  body .site-header .brand {
    width: 100% !important;
    max-width: clamp(112px, 34vw, 146px) !important;
  }

  body .site-header .brand-mark {
    width: 100% !important;
    height: clamp(44px, 12.5vw, 56px) !important;
    padding: 5px !important;
    object-fit: contain !important;
  }

  body .site-header .mobile-header-cta {
    min-width: 0 !important;
    height: clamp(42px, 11.5vw, 48px) !important;
    min-height: clamp(42px, 11.5vw, 48px) !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    font-size: clamp(0.58rem, 2.25vw, 0.72rem) !important;
    line-height: 1.04 !important;
  }

  .hero-actions {
    gap: 0.62rem !important;
  }

  .btn-primary-stacked {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0.54rem 0.7rem !important;
  }

  .btn-primary-stacked span {
    font-size: 0.94rem !important;
  }

  .btn-primary-stacked small {
    font-size: clamp(0.58rem, 2.35vw, 0.66rem) !important;
    line-height: 1.12 !important;
  }

  body .hero .video-caption {
    font-size: clamp(0.48rem, 1.8vw, 0.58rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .investment-note span {
    font-size: clamp(0.92rem, 3.7vw, 1.04rem) !important;
  }

  .investment-note span small {
    font-size: 0.56em !important;
  }

  .feature-image img[src*="Template%201_What%20Is%20LifeWave%20X2O"],
  .feature-image img[src*="Template 1_What Is LifeWave X2O"],
  .proof-asset-grid img {
    width: 100% !important;
    max-height: none !important;
    padding: 0.25rem !important;
    object-fit: contain !important;
  }

  .video-grid {
    grid-template-columns: 1fr !important;
  }

  .video-card strong {
    min-height: 0 !important;
    font-size: clamp(1rem, 4.1vw, 1.14rem) !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 106px minmax(0, 1fr) 40px !important;
    gap: 0.34rem !important;
  }

  body .site-header .brand {
    max-width: 106px !important;
  }

  body .site-header .brand-mark {
    height: 42px !important;
  }

  body .site-header .mobile-header-cta {
    font-size: 0.52rem !important;
    padding-inline: 0.28rem !important;
  }
}

/* Phone overflow fix: keep all header controls and hero text inside the viewport. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(104px, 128px) minmax(124px, 156px) clamp(40px, 11vw, 44px) !important;
    justify-content: space-between !important;
    gap: clamp(0.32rem, 1.6vw, 0.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(0.55rem, 2.6vw, 0.75rem) !important;
    overflow: visible !important;
  }

  body .site-header .brand {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 128px !important;
    min-width: 0 !important;
  }

  body .site-header .brand-mark {
    height: clamp(42px, 11vw, 50px) !important;
  }

  body .site-header .mobile-header-cta {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 156px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: clamp(0.54rem, 2.05vw, 0.66rem) !important;
    line-height: 1.04 !important;
    text-wrap: balance !important;
  }

  body .site-header > button.menu-toggle {
    position: static !important;
    grid-column: 3 !important;
    display: grid !important;
    justify-self: end !important;
    width: clamp(40px, 11vw, 44px) !important;
    min-width: clamp(40px, 11vw, 44px) !important;
    height: clamp(40px, 11vw, 44px) !important;
    min-height: clamp(40px, 11vw, 44px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hero-inner {
    box-sizing: border-box !important;
    width: min(calc(100vw - 2rem), 360px) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .hero-copy,
  .hero-rating-line,
  .hero .eyebrow,
  #hero-title,
  .hero-lede,
  .hero-proof,
  .hero-actions,
  .risk-strip,
  .hero-media,
  .investment-note {
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .hero-rating-line,
  .hero .eyebrow,
  #hero-title,
  .hero-lede,
  .investment-note span,
  .investment-note p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #hero-title {
    font-size: clamp(2.05rem, 8.7vw, 2.62rem) !important;
  }

  .btn-primary-stacked small {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 96px minmax(0, 1fr) 40px !important;
  }

  body .site-header .brand {
    max-width: 96px !important;
  }

  body .site-header .brand-mark {
    height: 40px !important;
  }
}

/* Phone header final: readable brand, visible menu, full CTA text. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    row-gap: 0.48rem !important;
    column-gap: 0.75rem !important;
    min-height: 0 !important;
    padding: 0.58rem 0.75rem 0.68rem !important;
    overflow: visible !important;
  }

  body .site-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 0 !important;
  }

  body .site-header .brand-mark {
    width: 132px !important;
    height: 50px !important;
    padding: 5px !important;
    object-fit: contain !important;
  }

  body .site-header .mobile-header-cta {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0.18rem 0.75rem !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(69, 210, 209, 0.18) !important;
    font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
    font-weight: 920 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(187, 240, 255, 0.48) !important;
    border-radius: 12px !important;
    background: rgba(8, 43, 64, 0.92) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f4fdff !important;
    opacity: 1 !important;
  }

  body .site-header::after,
  body .site-header.is-scrolled::after {
    content: "" !important;
    position: absolute !important;
    top: 0.76rem !important;
    right: 0.75rem !important;
    z-index: 40 !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(187, 240, 255, 0.52) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(#f4fdff, #f4fdff) 50% 14px / 20px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 21px / 20px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 28px / 20px 2px no-repeat,
      rgba(8, 43, 64, 0.96) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
  }

  body .site-header.is-open .site-nav {
    grid-row: 3 !important;
  }

  body .site-header.is-open .header-cta {
    grid-row: 4 !important;
  }
}

@media (max-width: 360px) {
  body .site-header .brand {
    width: 112px !important;
    max-width: 112px !important;
  }

  body .site-header .brand-mark {
    width: 112px !important;
    height: 44px !important;
  }

  body .site-header > button.menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* Phone hero centering: keep copy and media inside one viewport-safe column. */
@media (max-width: 760px) {
  .hero-inner {
    align-items: stretch !important;
    width: min(calc(100vw - 2rem), 342px) !important;
    max-width: calc(100vw - 2rem) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
  }

  .hero-rating-line,
  .hero .eyebrow,
  #hero-title,
  .hero-lede,
  .hero-proof,
  .hero-actions,
  .risk-strip,
  .hero-media,
  .product-video,
  .investment-note {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  #hero-title {
    font-size: clamp(1.94rem, 8vw, 2.44rem) !important;
  }

  .hero-lede {
    font-size: clamp(0.94rem, 3.75vw, 1.06rem) !important;
    line-height: 1.5 !important;
  }
}

/* Desktop header clearance: keep the first hero proof line clear of the floating nav. */
@media (min-width: 1061px) {
  .hero {
    padding-top: clamp(7.2rem, 7.4vw, 8.1rem) !important;
  }

  .hero-copy {
    transform: translateY(0) !important;
  }

  .hero-media {
    transform: translateY(-1.15rem) !important;
  }
}

/* Phone lower-section lock: no cropped cards, charts, or copy. */
@media (max-width: 760px) {
  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-evidence,
  .comparison-copy,
  .comparison-charts,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list {
    box-sizing: border-box !important;
    width: min(calc(100vw - 3rem), 320px) !important;
    max-width: calc(100vw - 3rem) !important;
    margin-right: auto !important;
    margin-left: 1rem !important;
    overflow: visible !important;
  }

  main > section:not(.hero) h2,
  main > section:not(.hero) h3,
  main > section:not(.hero) p,
  main > section:not(.hero) li,
  main > section:not(.hero) span,
  main > section:not(.hero) strong,
  main > section:not(.hero) a,
  main > section:not(.hero) button {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .section-visual img,
  .section-visual-glass img,
  .feature-image img,
  .clinical-image-stack img,
  .comparison-charts img,
  .pair-intro-visual img,
  .x39-evidence-images img,
  .x39-testimonial-card img,
  .recognition-card img,
  .proof-asset-grid img,
  .brochure-preview-card img,
  .pre-faq-x20 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .section-visual,
  .feature-image,
  .clinical-image-stack,
  .proof-asset-grid figure,
  .brochure-preview-card {
    overflow: visible !important;
  }

  .section-visual-glass img {
    width: 76% !important;
    max-width: 260px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Client correction: one-row mobile nav with CTA beside logo and only one menu button. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    display: grid !important;
    grid-template-columns: clamp(118px, 34vw, 136px) minmax(118px, 1fr) 42px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: clamp(0.45rem, 2vw, 0.65rem) !important;
    min-height: 64px !important;
    padding: 0.55rem 0.65rem !important;
    overflow: visible !important;
  }

  body .site-header::after,
  body .site-header.is-scrolled::after,
  body .site-header .brand::after,
  body .site-header .mobile-header-cta::before,
  body .site-header .mobile-header-cta::after {
    content: none !important;
    display: none !important;
  }

  body .site-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 136px !important;
    min-width: 0 !important;
  }

  body .site-header .brand-mark {
    width: 100% !important;
    height: clamp(46px, 12.6vw, 54px) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #ffffff !important;
  }

  body .site-header .mobile-header-cta {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0.18rem 0.48rem !important;
    color: #06131d !important;
    -webkit-text-fill-color: #06131d !important;
    background: linear-gradient(135deg, var(--aqua), var(--mint)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(69, 210, 209, 0.18) !important;
    font-size: clamp(0.58rem, 2.35vw, 0.72rem) !important;
    font-weight: 920 !important;
    line-height: 1.04 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(187, 240, 255, 0.48) !important;
    border-radius: 12px !important;
    background: rgba(8, 43, 64, 0.92) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header > button.menu-toggle span:not(.sr-only) {
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f4fdff !important;
    opacity: 1 !important;
  }

  body .site-header.is-open .site-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body .site-header.is-open .header-cta {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  .hero {
    padding-top: clamp(0.75rem, 3vw, 1.2rem) !important;
  }

  #hero-title {
    font-size: clamp(1.82rem, 7.35vw, 2.28rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 104px minmax(106px, 1fr) 40px !important;
    gap: 0.38rem !important;
    padding-inline: 0.55rem !important;
  }

  body .site-header .brand {
    max-width: 104px !important;
  }

  body .site-header .brand-mark {
    height: 42px !important;
  }

  body .site-header .mobile-header-cta {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.53rem !important;
  }

  body .site-header > button.menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Mobile nav fit correction: prevent the CTA from covering the real menu button. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: clamp(118px, 34vw, 136px) minmax(126px, 150px) 42px !important;
    justify-content: space-between !important;
    gap: 0.42rem !important;
    padding-right: 0.55rem !important;
    padding-left: 0.55rem !important;
  }

  body .site-header .mobile-header-cta {
    justify-self: end !important;
    width: clamp(126px, 39vw, 150px) !important;
    max-width: 150px !important;
    z-index: 10 !important;
    font-size: clamp(0.54rem, 2.18vw, 0.68rem) !important;
  }

  body .site-header > button.menu-toggle {
    z-index: 60 !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 102px minmax(110px, 126px) 40px !important;
    gap: 0.34rem !important;
  }

  body .site-header .mobile-header-cta {
    width: 100% !important;
    max-width: 126px !important;
    font-size: 0.5rem !important;
  }
}

/* Deterministic mobile nav: pin the real menu right, keep CTA clear of it. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    position: sticky !important;
    grid-template-columns: clamp(118px, 34vw, 136px) minmax(0, 1fr) !important;
    padding-right: 3.85rem !important;
  }

  body .site-header .mobile-header-cta {
    grid-column: 2 !important;
    width: clamp(126px, 38vw, 150px) !important;
    max-width: 150px !important;
    margin-right: 0 !important;
    justify-self: end !important;
  }

  body .site-header > button.menu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0.9rem !important;
    left: auto !important;
    z-index: 100 !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 360px) {
  body .site-header,
  body .site-header.is-scrolled {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    padding-right: 3.45rem !important;
  }

  body .site-header .mobile-header-cta {
    width: clamp(104px, 36vw, 126px) !important;
  }
}

/* Absolute mobile header placement: logo | CTA | single visible menu. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    position: sticky !important;
    display: block !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .site-header .brand {
    position: absolute !important;
    top: 50% !important;
    left: 0.55rem !important;
    width: 142px !important;
    max-width: 142px !important;
    transform: translateY(-50%) !important;
  }

  body .site-header .brand-mark {
    width: 142px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body .site-header .mobile-header-cta {
    position: absolute !important;
    top: 50% !important;
    left: 10rem !important;
    right: auto !important;
    display: flex !important;
    width: 10.4rem !important;
    max-width: calc(100vw - 13.9rem) !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    transform: translateY(-50%) !important;
    font-size: 0.6rem !important;
  }

  body .site-header > button.menu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0.55rem !important;
    left: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
  }

  body .site-header::after,
  body .site-header.is-scrolled::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 0.55rem !important;
    z-index: 80 !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(187, 240, 255, 0.52) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(#f4fdff, #f4fdff) 50% 13px / 19px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 20px / 19px 2px no-repeat,
      linear-gradient(#f4fdff, #f4fdff) 50% 27px / 19px 2px no-repeat,
      rgba(8, 43, 64, 0.96) !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
  }

  body .site-header.is-open {
    height: auto !important;
    min-height: 64px !important;
    padding-top: 64px !important;
  }

  body .site-header.is-open .site-nav,
  body .site-header.is-open .header-cta {
    position: static !important;
  }
}

@media (max-width: 360px) {
  body .site-header .brand {
    width: 112px !important;
    max-width: 112px !important;
  }

  body .site-header .brand-mark {
    width: 112px !important;
    height: 44px !important;
  }

  body .site-header .mobile-header-cta {
    left: 7.7rem !important;
    right: auto !important;
    width: 10.2rem !important;
    max-width: calc(100vw - 11.2rem) !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.48rem !important;
  }

  body .site-header::after,
  body .site-header.is-scrolled::after,
  body .site-header > button.menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Final mobile content width correction: remove the narrow left rail and enlarge charts. */
@media (max-width: 900px) {
  .science-evidence.clinical-evidence,
  .comparison.system-comparison {
    width: min(calc(100vw - 1.5rem), 760px) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .science-evidence.clinical-evidence {
    grid-template-columns: 1fr !important;
  }

  .clinical-image-stack,
  .comparison-charts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(0.85rem, 3vw, 1.2rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .clinical-image-stack img,
  .clinical-image-stack #clinical-findings,
  .see-difference-chart,
  .comparison-visual,
  .see-difference-chart img,
  .comparison-visual img,
  .comparison-charts img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .clinical-image-stack img,
  .clinical-image-stack #clinical-findings,
  .see-difference-chart img,
  .comparison-visual img,
  .comparison-charts img {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

@media (max-width: 760px) {
  main > section:not(.hero) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-evidence,
  .comparison-copy,
  .comparison-charts,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list {
    box-sizing: border-box !important;
    width: min(calc(100vw - 1rem), 430px) !important;
    max-width: calc(100vw - 1rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  .clinical-evidence,
  .clinical-image-stack,
  .comparison.system-comparison,
  .comparison-copy,
  .comparison-charts,
  .see-difference-chart,
  .comparison-visual {
    width: min(calc(100vw - 0.75rem), 450px) !important;
    max-width: calc(100vw - 0.75rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .see-difference-chart,
  .comparison-visual,
  .clinical-image-stack {
    padding: 0.35rem !important;
    border-radius: 18px !important;
  }
}

/* Final video/X39 asset polish from the latest client notes. */
.x39-cta-panel .btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 430px) !important;
  min-height: 54px !important;
  text-align: center !important;
}

.x39-evidence-images img[src*="X39%20Sleeve_MAL-cropped"] {
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f7fbff !important;
}

.video-grid {
  align-items: stretch !important;
}

.video-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(106, 219, 244, 0.2) !important;
  background: #071622 !important;
}

.video-card::after {
  display: none !important;
}

.video-card .video-cover,
.video-cover {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #071622 !important;
}

.video-card .video-cover img,
.video-cover img,
.video-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #071622 !important;
}

.video-card .play-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
}

.video-card strong,
.video-card small {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  overflow-wrap: normal !important;
  text-align: left !important;
  background: #0b2533 !important;
  -webkit-text-fill-color: currentColor !important;
}

.video-card strong {
  padding-top: 0.92rem !important;
  color: #ecfbff !important;
  font-size: clamp(1rem, 1.25vw, 1.14rem) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.video-card small {
  padding-top: 0.28rem !important;
  padding-bottom: 0.95rem !important;
  color: #93e8ff !important;
  font-size: 0.84rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px) {
  .x39-cta-panel .btn.btn-primary {
    width: 100% !important;
    min-height: 56px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .x39-evidence-images img[src*="X39%20Sleeve_MAL-cropped"] {
    min-height: 210px !important;
  }

  .video-card strong {
    color: #f1fdff !important;
    font-size: clamp(1.02rem, 4.2vw, 1.18rem) !important;
  }

  .video-card small {
    color: #9eeeff !important;
    font-size: 0.86rem !important;
  }
}

/* Tiny final client fixes: centered X39 CTA and clean documentary image corners. */
.x39-cta-panel {
  justify-items: center !important;
  text-align: center !important;
}

.x39-cta-panel .btn.btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
  white-space: normal !important;
}

.x39-cta-panel .btn.btn-primary,
.x39-cta-panel .btn.btn-primary span {
  text-align: center !important;
}

.documentary-poster.documentary-poster-single {
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #071016 !important;
  clip-path: inset(0 round 22px) !important;
}

.documentary-poster.documentary-poster-single img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 22px !important;
  clip-path: inset(0 round 22px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .documentary-poster.documentary-poster-single {
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }

  .documentary-poster.documentary-poster-single img {
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }
}

/* Latest phone balance: medium logo, stronger CTA copy, and safe image breathing room. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    height: 62px !important;
    min-height: 62px !important;
  }

  body .site-header .brand {
    left: 0.55rem !important;
    width: 124px !important;
    max-width: 124px !important;
  }

  body .site-header .brand-mark {
    width: 124px !important;
    height: 46px !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body .site-header .mobile-header-cta {
    left: 9rem !important;
    width: 11.6rem !important;
    max-width: calc(100vw - 12.65rem) !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0.25rem 0.55rem !important;
    font-size: clamp(0.66rem, 2.8vw, 0.78rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-evidence,
  .comparison-copy,
  .comparison-charts,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list {
    width: min(calc(100vw - 1.5rem), 430px) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .science-evidence.clinical-evidence,
  .clinical-image-stack,
  .comparison.system-comparison,
  .comparison-copy,
  .comparison-charts,
  .see-difference-chart,
  .comparison-visual {
    width: min(calc(100vw - 1.5rem), 450px) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  main > section:not(.hero):not(.videos) img,
  .clinical-image-stack #clinical-findings,
  .clinical-image-stack img,
  .comparison-charts img,
  .see-difference-chart img,
  .comparison-visual img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .see-difference-chart,
  .comparison-visual,
  .clinical-image-stack,
  .feature-image,
  .section-visual {
    overflow: hidden !important;
  }

  .video-card .video-cover img,
  .video-cover img,
  .video-card img {
    object-fit: cover !important;
  }
}

@media (max-width: 360px) {
  body .site-header .brand {
    width: 110px !important;
    max-width: 110px !important;
  }

  body .site-header .brand-mark {
    width: 110px !important;
    height: 42px !important;
  }

  body .site-header .mobile-header-cta {
    left: 7.65rem !important;
    max-width: calc(100vw - 10.8rem) !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.62rem !important;
  }
}

/* Phone X39 product image correction: show the full packet, not a square crop. */
@media (max-width: 760px) {
  .x39-evidence-images img[src*="X39%20Sleeve_MAL-cropped"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0.45rem !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
  }
}

/* Last mobile alignment reset: one centered phone column, no clipped image rails. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main > section:not(.hero) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: clamp(0.9rem, 4vw, 1.05rem) !important;
    padding-left: clamp(0.9rem, 4vw, 1.05rem) !important;
    overflow-x: hidden !important;
  }

  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-evidence,
  .clinical-evidence,
  .clinical-image-stack,
  .comparison-copy,
  .comparison-charts,
  .see-difference-chart,
  .comparison-visual,
  .why-x20-visuals,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 430px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .comparison.system-comparison,
  .science.science-authority,
  .why-x20,
  .section.split,
  .pairing.x39-pairing,
  .access,
  .documentary,
  .science.resource-library {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .clinical-image-stack,
  .comparison-charts,
  .why-x20-visuals,
  .proof-asset-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .section-visual,
  .feature-image,
  .clinical-image-stack,
  .see-difference-chart,
  .comparison-visual,
  .why-x20-visuals,
  .proof-asset-grid figure,
  .brochure-preview-card {
    overflow: hidden !important;
  }

  main > section:not(.hero):not(.videos) img,
  .section-visual img,
  .feature-image img,
  .clinical-image-stack img,
  .clinical-image-stack #clinical-findings,
  .comparison-charts img,
  .see-difference-chart img,
  .comparison-visual img,
  .why-x20-visuals img,
  .proof-asset-grid img,
  .brochure-preview-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .video-card .video-cover img,
  .video-cover img,
  .video-card img {
    height: 100% !important;
    object-fit: cover !important;
  }

  .comparison-copy,
  .section-heading,
  .science-copy-grid,
  .science-evidence,
  .feature-copy {
    text-align: left !important;
  }

  main > section:not(.hero) *,
  main > section:not(.hero) *::before,
  main > section:not(.hero) *::after {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .science-copy-grid,
  .science-copy-grid > *,
  .science-steps,
  .science-steps li,
  .science-steps strong,
  .science-steps span,
  .science-support-list,
  .science-support-list li,
  .clinical-result-note,
  .why-x20-grid,
  .why-x20-grid span,
  .benefit-chips,
  .benefit-chips span,
  .pair-benefit-list,
  .pair-benefit-list span,
  .comparison-copy,
  .comparison-copy > *,
  .section-heading,
  .section-heading > *,
  .resource-summary,
  .resource-summary span,
  .credibility-bar,
  .credibility-bar span {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  main > section:not(.hero) p,
  main > section:not(.hero) h2,
  main > section:not(.hero) h3,
  main > section:not(.hero) li,
  main > section:not(.hero) span,
  main > section:not(.hero) strong {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Final phone hard-stop: centered 320px content column prevents all right-edge clipping. */
@media (max-width: 760px) {
  main > section:not(.hero) {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  main > section:not(.hero) > *,
  .section-copy,
  .section-visual,
  .feature-copy,
  .feature-image,
  .section-heading,
  .process-grid,
  .science-copy-grid,
  .science-copy-grid > *,
  .science-steps,
  .science-evidence,
  .clinical-evidence,
  .clinical-image-stack,
  .comparison-copy,
  .comparison-charts,
  .see-difference-chart,
  .comparison-visual,
  .why-x20-grid,
  .why-x20-visuals,
  .benefit-chips,
  .pair-benefit-list,
  .video-grid,
  .recognition-grid,
  .proof-asset-grid,
  .brochure-copy,
  .brochure-preview-card,
  .faq-list,
  .resource-grid,
  .resource-summary,
  .credibility-bar {
    width: 100% !important;
    max-width: 320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .science-steps li,
  .science-support-list li,
  .why-x20-grid span,
  .benefit-chips span,
  .pair-benefit-list span,
  .credibility-bar span,
  .resource-summary span {
    width: 100% !important;
    max-width: 100% !important;
  }

  .why-x20-visuals {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 300px !important;
    overflow: visible !important;
  }

  .why-x20-visuals img,
  .why-x20-visuals img:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Client phone polish: medium logo, separated header buttons, tighter pair image, readable video copy. */
@media (max-width: 760px) {
  body .site-header,
  body .site-header.is-scrolled {
    height: 62px !important;
    min-height: 62px !important;
  }

  body .site-header .brand {
    left: 0.55rem !important;
    width: 130px !important;
    max-width: 130px !important;
  }

  body .site-header .brand-mark {
    width: 130px !important;
    height: 48px !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body .site-header .mobile-header-cta {
    left: 9.45rem !important;
    right: 3.75rem !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: clamp(0.6rem, 2.35vw, 0.72rem) !important;
    line-height: 1.08 !important;
  }

  body .site-header::after,
  body .site-header.is-scrolled::after,
  body .site-header > button.menu-toggle {
    right: 0.55rem !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #pair {
    padding-top: 0.45rem !important;
    margin-top: -1rem !important;
  }

  #pair .pair-intro-visual {
    margin-top: -0.35rem !important;
    margin-bottom: 1rem !important;
  }

  .hero-lede {
    font-size: clamp(1.04rem, 4.15vw, 1.18rem) !important;
    line-height: 1.5 !important;
  }

  body .hero .video-caption {
    font-size: clamp(0.56rem, 2.1vw, 0.66rem) !important;
    line-height: 1.15 !important;
  }

  .videos .video-card strong {
    color: #d9fbff !important;
    -webkit-text-fill-color: #d9fbff !important;
    background: #062b3a !important;
    font-size: clamp(1.07rem, 4.3vw, 1.2rem) !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  }

  .videos .video-card small {
    color: #92efff !important;
    -webkit-text-fill-color: #92efff !important;
    background: #062b3a !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  }
}

@media (max-width: 360px) {
  body .site-header .brand {
    width: 116px !important;
    max-width: 116px !important;
  }

  body .site-header .brand-mark {
    width: 116px !important;
    height: 44px !important;
  }

  body .site-header .mobile-header-cta {
    left: 8.1rem !important;
    right: 3.45rem !important;
    font-size: 0.56rem !important;
  }
}

/* ================================================================
   CLIENT REVISION PASS — 2026-07-20
   New assets (clinical dashboard swap + GHK-Cu infographic) and FAQ
   copy are handled in index.html. The rules below address the layout
   / readability notes from the client's mobile + iPad review.
   Appended last so they win by source order.
   ================================================================ */

/* --- GHK-Cu infographic under the X39 "Result" line ---------------
   A <figure> ships with default 40px side margins that squeeze the
   image; reset it and let the infographic fill its column so the
   10-benefit graphic stays readable. */
.x39-education-copy .ghk-cu-infographic {
  margin: 1.35rem auto 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 560px !important;
}
.x39-education-copy .ghk-cu-infographic img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 14px !important;
}

/* --- Video card titles must never clip ("video titles cut off") ---
   Cards were fixed-height flex columns; the title had flex-shrink:1
   so a 2-line title got squeezed below its own height and overlapped
   the caption. Let rows/cards size to content and stop the title from
   shrinking. Keep only the cover image clipped to its rounded frame. */
.videos .video-grid,
.video-grid {
  align-items: start !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
}
.videos .video-grid .video-card,
.video-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.videos .video-grid .video-card .video-cover,
.video-card .video-cover { overflow: hidden !important; flex: 0 0 auto !important; }
.videos .video-grid .video-card strong,
.video-card strong {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
.videos .video-grid .video-card small,
.video-card small { flex: 0 0 auto !important; }

/* --- "Live Long. Live Well. Live Young." — space beneath title ---- */
.brand-purpose-card > strong {
  display: block !important;
  margin-bottom: 0.85rem !important;
}

/* --- FAQ answer text contrast: a broad near-white `li` colour was
   leaking onto the FAQ's white cards, making every bullet list render
   as faint ghost text. Force the dark navy used by the FAQ paragraphs
   on all FAQ answer copy so the lists are readable. --- */
.faq .faq-list details p,
.faq .faq-list details li,
.faq .faq-list details ul,
.faq .faq-list details ol,
.faq .faq-list details span {
  color: #0b2734 !important;
  -webkit-text-fill-color: #0b2734 !important;
}
.faq .faq-list details a {
  color: #0a66c2 !important;
  -webkit-text-fill-color: #0a66c2 !important;
}

/* --- "X20 FAQs" PDF link beside the FAQ headline ------------------ */
.faq .section-heading .faq-pdf-link {
  margin: 0.6rem 0 0 !important;
}
.faq .section-heading .faq-pdf-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.5rem 1.1rem !important;
  border: 1px solid rgba(106, 219, 244, 0.55) !important;
  border-radius: 999px !important;
  background: rgba(106, 219, 244, 0.12) !important;
  color: #0b2734 !important;
  -webkit-text-fill-color: #0b2734 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
}

/* --- Customer testimonial banners beneath the FAQ section --------- */
.faq-testimonials {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(1rem, 3vw, 1.75rem) !important;
  width: min(100% - 2rem, 900px) !important;
  margin: clamp(1.5rem, 5vw, 3rem) auto !important;
  padding: 0 !important;
}
.faq-testimonials figure {
  margin: 0 !important;
  width: 100% !important;
}
.faq-testimonials img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(3, 18, 30, 0.18) !important;
}

/* ================= MOBILE (<= 760px) ============================= */
@media (max-width: 760px) {
  /* "Better Together" callout: sit centered beneath the images,
     spanning the full grid width instead of floating in a column. */
  .proof-asset-grid .system-callout {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.25rem auto 0.5rem !important;
    text-align: center !important;
  }
  .proof-asset-grid .system-callout strong { text-align: center !important; }

  /* Enrollment steps + resource cards were too tall — tighten them. */
  .steps .step {
    padding: 0.75rem 0.9rem !important;
    gap: 0.3rem !important;
  }
  .steps .step p { margin: 0.15rem 0 0 !important; }
  .resource-grid .resource-card {
    padding: 0.7rem 0.9rem !important;
    gap: 0.2rem !important;
    min-height: 0 !important;
  }

  /* Recommendation form: keep the "Primary Goal" field full width so
     the last section isn't narrower than the ones above it. */
  .recommendation-form label,
  .recommendation-form select,
  .recommendation-form input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Header logo: it's a 500x500 square that object-fit:contain was
     shrinking to ~48px inside a too-wide pill, so it read as tiny.
     Give it a medium square footprint and let the white pill hug it,
     which also frees horizontal room for the CTA button. --- */
  body .site-header .brand {
    width: auto !important;
    max-width: 46% !important;
    min-width: 0 !important;
    padding: 5px 12px !important;
    justify-content: center !important;
  }
  body .site-header .brand-mark {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    object-fit: contain !important;
  }

  /* CTA stays fully visible beside the (now smaller) pill — let it wrap
     instead of clipping so "Upgrade Your Hydration" is never cut off. */
  body .site-header .mobile-header-cta {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  /* Sub-headline: trim size + spacing a touch so the water-machine
     video sits higher and shows more (client request). */
  .hero .hero-lede {
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
    margin-top: 0 !important;
    margin-bottom: 0.55rem !important;
  }
}

/* ================= iPad / TABLET (761–1060px) ==================== */
@media (min-width: 761px) and (max-width: 1060px) {
  /* Comparison + clinical charts and the X20 machine image: show them
     one-per-row at full width so the data is large and readable
     (client: "system-level comparison chart / clinical dashboard /
     X20 image need to be large"). */
  .comparison-charts,
  .clinical-image-stack {
    grid-template-columns: 1fr !important;
    width: min(720px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .see-difference-chart,
  .comparison-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .comparison-charts img,
  .see-difference-chart img,
  .comparison-visual img,
  .clinical-image-stack img,
  .clinical-image-stack #clinical-findings,
  .pre-faq-x20 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  .pre-faq-x20 img { max-width: 720px !important; margin: 0 auto !important; }

  /* Guard against any image being cropped and clipping copy, and centre
     standalone block images (client: "images should be centered"). */
  main img { max-width: 100% !important; height: auto !important; }
  .section-visual-glass,
  .section-visual-glass img,
  .feature-image,
  .feature-image img,
  .pre-faq-x20 img,
  .documentary-poster img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* "Better Together" sits as a full-width band beneath the images
     instead of floating in a column with empty space below it. */
  .proof-asset-grid .system-callout {
    grid-column: 1 / -1 !important;
    order: 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.4rem auto 0.6rem !important;
    text-align: center !important;
  }

  /* Investment price: enlarge and take it off "yellow" onto the same
     cyan/blue accent used in the hero + mobile view. */
  .hero .investment-note span {
    font-size: 1.25rem !important;
    color: #6be7ff !important;
  }
  .hero .investment-note span small { color: #6be7ff !important; }

  /* Hero video: drop it down so its top lines up with the first line of
     the headline instead of floating up by the rating line, and shrink
     the caption bar so it no longer covers the water machine + glass. */
  .hero .hero-media { margin-top: 8.25rem !important; }
  .hero .product-video .video-caption {
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    padding: 0.28rem 0.6rem !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  /* Enlarge the testimonial image beside "IT'S NOT ANTI-AGING…"
     (the card is a grid; widen the image's track). */
  .x39-testimonial-card {
    grid-template-columns: 240px 1fr !important;
    align-items: center !important;
  }
  .x39-testimonial-card img[src*="IMG_5691"],
  .x39-testimonial-card img {
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
  }

  /* Give every video its blue title (match the mobile treatment).
     Higher specificity to beat the dark tablet default. */
  .videos .video-grid .video-card strong,
  .videos .video-card strong {
    color: #6be7ff !important;
    -webkit-text-fill-color: #6be7ff !important;
  }

  /* Center headings and lead copy in the tablet range. */
  .section-heading,
  .section-copy,
  .feature-copy,
  .pairing-copy,
  .access-intro,
  .comparison-copy,
  .brochure-copy,
  .documentary-copy,
  .recommendation-copy,
  .hero-copy {
    text-align: center !important;
  }
  main h2,
  main h3,
  .section-heading > *,
  .section-copy > p,
  .feature-copy > p,
  .pairing-copy > p {
    text-align: center !important;
  }

  /* Eyebrows / kickers and the copy directly under each heading — the
     specific ones the client listed (WHY CHOOSE LIFEWAVE X2O, PATENTS
     STUDIES AND CREDIBILITY, THE FUTURE OF WELLNESS REVEALED,
     RECOGNITION AND PROOF ASSETS, FAQS, The Perfect Pairing, etc.). */
  body main .eyebrow,
  body main .section-kicker,
  body main .section-heading p,
  body main .section-heading h2,
  body main .section-heading h3,
  body main .section-copy h2,
  body main .section-copy h3,
  body main .feature-copy h2,
  body main .feature-copy h3,
  body main .pairing-copy h2,
  body main .pairing-copy h3,
  body main .pair-perfect-copy,
  body main .recommendation-copy h2,
  body main .recommendation-copy > p,
  body main .comparison-copy p,
  body main .resource-summary,
  body main .why-x20 .section-heading > *,
  body main .science .section-heading > * {
    text-align: center !important;
  }

  /* Keep genuine bullet / numbered lists left-aligned so their markers
     don't scatter, even though the surrounding block is centered. */
  main ul li,
  main ol li,
  .check-list,
  .science-steps,
  .science-support-list,
  .x39-education-copy,
  .brand-purpose-card,
  .founder-bio-card,
  .recommendation-reasons,
  .faq-list {
    text-align: left !important;
  }

  /* Centre the content blocks and their images so there are no bare
     gaps to one side (client: "bare big spaces to the right of the copy
     and images"). The copy blocks had a max-width but hugged the left
     of their cell; centre both the grid track and the blocks. */
  .image-split,
  .visual-feature,
  .section.split,
  .science-copy-grid,
  .science-evidence,
  .clinical-evidence,
  .pairing,
  .x39-pairing,
  .comparison,
  .why-x20 {
    justify-content: center !important;
    justify-items: center !important;
  }

  /* Stack the split sections into one centred column so the image
     isn't jammed into a narrow left track with the copy on the right.
     Use flex to override the section's grid-template shorthand. */
  .section.split {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template: none !important;
    gap: 1.5rem !important;
  }
  .section.split > .section-copy,
  .section.split > .pair-intro-visual,
  .section.split > .section-visual,
  .section.split > .section-visual-glass {
    width: 100% !important;
    max-width: 620px !important;
  }
  .pair-intro-visual img { width: 100% !important; }
  .section-copy,
  .feature-copy,
  .pairing-copy,
  .brochure-copy,
  .access-intro,
  .recommendation-copy,
  .documentary-copy,
  .comparison-copy,
  .section-heading,
  .section-visual,
  .section-visual-glass,
  .feature-image,
  .pair-intro-visual,
  .documentary-poster,
  .clinical-image-stack,
  .science-copy-grid > div,
  .science-evidence > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Centre images that carry copy so nothing gets cropped off-centre. */
  .section-visual-glass img,
  .feature-image img,
  .pair-intro-visual img,
  .documentary-poster img,
  .x39-testimonial-card,
  .clinical-image-stack img {
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
  }
}

/* ================= DESKTOP (>= 1061px) ==========================
   The System-Level comparison chart was squeezed into a side-by-side
   column (~760px, half its native resolution) and read as too small.
   Stack the two comparison charts so the data-dense system-level chart
   can grow large and legible. */
@media (min-width: 1061px) {
  .system-comparison .comparison-charts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-items: center !important;
    grid-template-columns: 1fr !important;
    grid-template: none !important;
    gap: 2.25rem !important;
  }
  .system-comparison .see-difference-chart {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  .system-comparison .comparison-visual {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
  }
  .system-comparison .see-difference-chart img,
  .system-comparison .comparison-visual img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ================================================================
   Mobile header tidy-up (client: "neaten up the top, no order").
   The bar was a stack of absolutely-positioned pieces: the logo
   badge was taller than the header and poked out, and the spacing
   was lopsided (big gap after the logo, CTA + menu crammed right).
   Rebuild it as a clean, evenly-aligned flex row.
   ================================================================ */
@media (max-width: 760px) {
  body .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.6rem !important;
    min-height: 62px !important;
  }

  /* Take the three pieces out of absolute positioning so flex orders
     them: logo (left) — spacer — CTA + menu grouped (right). */
  body .site-header .brand,
  body .site-header .mobile-header-cta,
  body .site-header .menu-toggle,
  body .site-header > button.menu-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Logo: a rounded-rectangle badge (not the circular one — the client
     couldn't read the wordmark in it). The source image is square and
     object-fit:contain, so the rendered logo size is driven by the box
     HEIGHT; keep the box wider than it is tall and give it enough
     height for the wordmark to read. */
  body .site-header .brand {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border-radius: 14px !important;
  }
  /* Cropped wordmark (aspect ~2.77:1) fills the badge now, so the logo
     reads at full size instead of a tiny square lost in whitespace.
     Height drives the size; width follows the aspect ratio. */
  body .site-header .brand-mark {
    height: 40px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }

  /* CTA sits in the MIDDLE of the bar — not stuck to the menu button —
     and must never be clipped by it. */
  body .site-header .mobile-header-cta {
    flex: 0 1 auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  body .site-header .menu-toggle {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* The desktop CTA is a duplicate on mobile (the mobile CTA is always
     in the bar). The "is-open" state was revealing it into the row as a
     second "Upgrade Your Hydration" and squeezing the mobile CTA — keep
     it hidden on mobile in every state. */
  body .site-header .header-cta,
  body .site-header.is-open .header-cta {
    display: none !important;
  }

  /* The dropdown nav must stay absolutely positioned (a drop-down
     panel below the bar) so it never joins the flex row when opened.
     ID selector to outrank the existing header rules. */
  body .site-header nav#site-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ================================================================
   Section headings centred across the iPad range (client: "in iPad
   view only"). The earlier rules capped out at 1060px, so an iPad in
   LANDSCAPE (1180–1366px) fell into the desktop range and kept showing
   these left-aligned. A touch-pointer condition was tried but did not
   match on the client's iPad, so this is now a plain width range:
   761–1400px covers every iPad in BOTH orientations. Desktops at
   1440px and above are unaffected.
   Long body paragraphs are deliberately left alone.
   ================================================================ */
@media (min-width: 761px) and (max-width: 1400px) {
  body main .section-heading > *,
  body main .eyebrow,
  body main .section-kicker,
  body main .section-copy > h2,
  body main .pair-perfect-copy,
  body main .recommendation-copy > h2,
  body main #recommendation-title,
  body main #science-title,
  body main #why-x20-title,
  body main #videos-title,
  body main #recognition-title,
  body main #resources-title,
  body main #faq-title {
    text-align: center !important;
  }

  body main .section-heading {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================================================
   Header logo: the wordmark image is now pre-cropped (wide ~2.77:1),
   so it must never be cropped by object-fit:cover at any breakpoint.
   Force contain everywhere so the full "LIFEWAVE" mark always shows.
   ================================================================ */
body .site-header .brand-mark {
  object-fit: contain !important;
  object-position: center !important;
}