/* Final shared rhythm, alignment, and responsive polish. */
:root {
  --polish-gutter: clamp(1rem, 4vw, 2rem);
  --polish-section-space: clamp(3.5rem, 7vw, 6rem);
}

footer {
  background: #365522 !important;
  color: #fff;
}

footer > div > div:first-child > div:first-child img {
  width: auto !important;
  height: 4rem !important;
  opacity: 1 !important;
}

/* Hero copy keeps its premium desktop layout and an intentional three-line mobile layout. */
#about .hero-copy-mobile-line {
  display: none;
}

/* The primary product description stays fully static and readable. */
#about.premium-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#about .hero-copy-description,
#about p:has(.hero-copy-mobile-line) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Footer: a centered brand/newsletter with two equal navigation columns on mobile. */
@media (max-width: 639px) {
  footer > div > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.5rem !important;
    row-gap: 2.25rem !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
  }

  footer > div > div:first-child > div:first-child {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  footer > div > div:first-child > div:first-child > a {
    justify-content: flex-start;
    margin-bottom: 1rem !important;
    opacity: 1 !important;
  }

  footer > div > div:first-child > div:first-child img {
    content: url("/images/clearly-herbal-logo.svg");
    width: auto !important;
    height: 4rem !important;
    max-width: min(76vw, 17rem);
    opacity: 1 !important;
    filter: brightness(0) invert(1) contrast(200%) !important;
    transform: translateX(-1rem);
  }

  footer > div > div:first-child > div:first-child > p {
    max-width: 21rem !important;
    margin-right: 0;
    margin-left: 0;
    text-align: left !important;
  }

  footer > div > div:first-child > div:first-child > div {
    width: min(100%, 21rem);
    max-width: 21rem !important;
    margin-inline: 0;
    justify-content: flex-start;
  }

  footer > div > div:first-child > div:not(:first-child) {
    min-width: 0;
    text-align: left;
  }

  footer > div > div:first-child > div:nth-child(2) {
    order: 2;
  }

  footer > div > div:first-child > div:nth-child(3) {
    order: 1;
  }

  footer > div > div:first-child > div:not(:first-child) h4 {
    margin-bottom: 1rem !important;
  }

  #about h1 {
    width: min(94vw, 24rem) !important;
    max-width: 24rem !important;
    font-size: 1.8rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  #about .hero-copy-description,
  #about p:has(.hero-copy-mobile-line) {
    width: min(94vw, 24rem) !important;
    max-width: 24rem !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    letter-spacing: -0.015em;
    transform: translate3d(0, 0, 0) !important;
  }

  #about .hero-copy-desktop-line {
    display: none !important;
  }

  #about .hero-copy-mobile-line {
    display: block !important;
    white-space: nowrap;
    text-align: center !important;
  }

  /* Optical centering for the asymmetric open-diaper product visual. */
  #about div:has(> img[src$="/open-diaper.png"]) {
    transform: translateX(0.75rem) !important;
  }

  /* Compact, balanced 2x2 material cards for small screens. */
  #features .feature-intro-layout + div {
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  #features .feature-intro-layout + div > div {
    height: 100% !important;
    min-height: 0 !important;
  }

  #features .feature-intro-layout + div > div > .glass-card {
    height: 20rem !important;
    min-height: 20rem !important;
    padding: 0.8rem !important;
    border-radius: 1.5rem !important;
    justify-content: flex-start !important;
  }

  #features .feature-intro-layout + div > div > .glass-card > div:first-child {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 0.7rem !important;
  }

  #features .feature-intro-layout + div > div > .glass-card > div:first-child > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #features .feature-intro-layout + div > div > .glass-card > div:first-child > div:first-child {
    width: 100% !important;
    height: 3rem !important;
    min-height: 3rem;
    border-radius: 999px !important;
  }

  #features .feature-intro-layout + div > div > .glass-card h3 {
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
  }

  #features .feature-intro-layout + div > div > .glass-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  #features .feature-intro-layout + div > div > .glass-card [data-learn-more-trigger] {
    min-height: 2.65rem !important;
    margin-top: auto !important;
    padding: 0.6rem 0.75rem !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 380px) {
  #about .hero-copy-description,
  #about p:has(.hero-copy-mobile-line) {
    font-size: 0.84rem !important;
  }

  footer > div > div:first-child {
    column-gap: 1rem !important;
  }
}

/* Keep the two comparison tables aligned to the same readable edge. */
#comparison :is(th, td),
#comparison :is(th, td) * {
  text-align: left !important;
}

#comparison :is(th, td) > div {
  justify-content: flex-start !important;
}

/* Restrained premium scroll motion. */
html:not(.motion-reduced) .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html:not(.motion-reduced) .scroll-reveal.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html:not(.motion-reduced) .scroll-media {
  transform: translate3d(0, var(--media-shift, 0px), 0) scale(1.015);
  transition: transform 120ms linear;
  will-change: transform;
}

/* Remove the older perpetual motion; interactions remain soft and responsive. */
.premium-ambient,
.premium-section-motion,
#about::after,
#features::after,
#home-products::after {
  display: none !important;
}

body.premium-motion-ready #root > nav,
body.premium-motion-ready .category-nav,
.premium-color-button,
.premium-color-button::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-media {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}