:root {
  --v2-navy: #061f2f;
  --v2-navy-2: #0c354b;
  --v2-green: #58b765;
  --v2-lime: #9bd36a;
  --v2-cloud: #f1f5f2;
  --v2-paper: #ffffff;
  --v2-ink: #102d3e;
  --v2-muted: #5e747e;
  --v2-rule: #d7e1dc;
  --fn-section: clamp(2.25rem, 3.5vw, 3.5rem);
}

/* Site-wide compact vertical rhythm: 50% less space between content sections. */
main > section:not(:first-child)[class~="py-8"],
main > div > section[class~="py-8"] { padding-block: 1rem !important; }
main > section:not(:first-child)[class~="py-12"],
main > div > section[class~="py-12"] { padding-block: 1.5rem !important; }
main > section:not(:first-child)[class~="py-16"],
main > div > section[class~="py-16"] { padding-block: 2rem !important; }
main > section:not(:first-child)[class~="py-20"],
main > div > section[class~="py-20"] { padding-block: 2.5rem !important; }

main > section:not(:first-child)[class~="pt-12"],
main > div > section[class~="pt-12"] { padding-top: 1.5rem !important; }
main > section:not(:first-child)[class~="pt-16"],
main > div > section[class~="pt-16"] { padding-top: 2rem !important; }
main > section:not(:first-child)[class~="pt-20"],
main > div > section[class~="pt-20"] { padding-top: 2.5rem !important; }
main > section:not(:first-child)[class~="pt-24"],
main > div > section[class~="pt-24"] { padding-top: 3rem !important; }
main > section:not(:first-child)[class~="pt-32"],
main > div > section[class~="pt-32"] { padding-top: 4rem !important; }

main > section:not(:first-child)[class~="pb-8"],
main > div > section[class~="pb-8"] { padding-bottom: 1rem !important; }
main > section:not(:first-child)[class~="pb-16"],
main > div > section[class~="pb-16"] { padding-bottom: 2rem !important; }
main > section:not(:first-child)[class~="pb-20"],
main > div > section[class~="pb-20"] { padding-bottom: 2.5rem !important; }

@media (min-width: 768px) {
  main > section:not(:first-child)[class~="md:py-12"],
  main > div > section[class~="md:py-12"] { padding-block: 1.5rem !important; }
  main > section:not(:first-child)[class~="md:py-16"],
  main > div > section[class~="md:py-16"] { padding-block: 2rem !important; }
  main > section:not(:first-child)[class~="md:py-20"],
  main > div > section[class~="md:py-20"] { padding-block: 2.5rem !important; }
  main > section:not(:first-child)[class~="md:py-28"],
  main > div > section[class~="md:py-28"] { padding-block: 3.5rem !important; }

  main > section:not(:first-child)[class~="md:pt-16"],
  main > div > section[class~="md:pt-16"] { padding-top: 2rem !important; }
  main > section:not(:first-child)[class~="md:pt-20"],
  main > div > section[class~="md:pt-20"] { padding-top: 2.5rem !important; }
  main > section:not(:first-child)[class~="md:pb-16"],
  main > div > section[class~="md:pb-16"] { padding-bottom: 2rem !important; }
  main > section:not(:first-child)[class~="md:pb-20"],
  main > div > section[class~="md:pb-20"] { padding-bottom: 2.5rem !important; }
  main > section:not(:first-child)[class~="md:pb-28"],
  main > div > section[class~="md:pb-28"] { padding-bottom: 3.5rem !important; }
}

@media (min-width: 1024px) {
  main > section:not(:first-child)[class~="lg:pt-28"],
  main > div > section[class~="lg:pt-28"] { padding-top: 3.5rem !important; }
  main > section:not(:first-child)[class~="lg:pb-12"],
  main > div > section[class~="lg:pb-12"] { padding-bottom: 1.5rem !important; }
}

.fn-facility-benefits,
.fn-facility-environments,
.fn-commercial-products {
  padding-block: clamp(1.75rem, 3vw, 3rem) !important;
}
body.fn-home .fn-home-benefits { padding-block: 2rem !important; }
body.fn-home .fn-use-ritual { padding-block: 2.5rem !important; }
.fn-home main > div > section { padding-block: var(--fn-section) !important; }
.fn-home main > div > section:first-child {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
.fn-centered-alcohol-section { padding-block: clamp(1.75rem, 3vw, 2.75rem) !important; }
.fn-selling-story { padding-block: clamp(2rem, 3.5vw, 3.5rem) !important; }
.fn-marketplace-section { padding-block: clamp(1.75rem, 3vw, 2.75rem) !important; }
body[data-route="/about-us"] #main-content > .fn-marketplace-section {
  padding-block: 2rem !important;
}

body[data-route="/about-us"] .fn-about-overview-merged {
  align-items: start !important;
  padding-block: clamp(2.5rem, 4vw, 4rem) !important;
}

body[data-route="/about-us"] .fn-about-foundation-removed > div:first-child {
  grid-column: 1 / -1;
  width: min(100%, 980px);
  margin-inline: auto;
  text-align: center;
}

body[data-route="/about-us"] .fn-about-values-merged {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid var(--v2-rule);
}

body[data-route="/about-us"] .fn-about-values-first {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-top: 2rem !important;
}

body[data-route="/about-us"] .fn-about-values-first .fn-about-values-merged {
  padding-top: 0;
  border-top: 0;
}

body[data-route="/industries"] main {
  padding-top: 98px !important;
}

body[data-route="/industries"] main > section:first-child {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

body[data-route="/about-us"] .fn-about-values-merged > div:first-child {
  margin-bottom: 2rem !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) {
  padding-bottom: 2.25rem !important;
}

@media (max-width: 900px) {
  body.fn-home .fn-home-benefits { padding-block: 1.25rem !important; }
}
@media (max-width: 767px) {
  body.fn-home .fn-use-ritual { padding-block: 1.75rem !important; }
  .fn-home main > div > section { padding-block: 2rem !important; }
}

body {
  background: var(--v2-paper) !important;
  color: var(--v2-ink) !important;
}

main h1,
main h2,
main h3,
main h4 {
  text-transform: uppercase !important;
}

body > header {
  height: 98px !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--v2-rule) !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body > header > .section-shell { height: 98px !important; }
body > header img { height: 68px !important; }
body > header nav { color: var(--v2-ink) !important; }
body > header nav a {
  color: var(--v2-ink) !important;
  font-size: .9rem !important;
  text-transform: uppercase !important;
}
body > header nav a:hover,
body > header nav a.fn-active { color: #28773b !important; }
body > header nav a::after { bottom: -.55rem; background: var(--v2-green); }
.fn-mobile-nav a { text-transform: uppercase !important; }
body > header a[href*="sample-request"] span span {
  min-height: 52px;
  font-size: .82rem !important;
  border: 1px solid #1379b8;
  background: #1379b8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

main { padding-top: 130px; }

/* The responsive brand films carry the hero; the image remains as a loading fallback. */
.fn-home main { padding-top: 0; }
.fn-home main > section:first-child {
  height: min(860px, 92svh) !important;
  min-height: 720px !important;
  padding-top: 130px !important;
  background: var(--v2-navy) url('/images/hero-banner-clean.webp') center 58% / cover no-repeat !important;
}
.fn-home [data-hero-bg] { display: block !important; }
.fn-home [data-hero-bg] video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(.88) contrast(1.04) brightness(.88) !important;
}
.fn-home [data-hero-bg] .hero-static-image,
body:has(#product) [data-hero-bg] .hero-static-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Show the supplied hero artwork without any tint or overlay. */
.fn-home [data-hero-bg] + div,
.fn-home [data-hero-bg] + div + div,
.fn-home [data-hero-bg] + div + div + div,
body:has(#product) [data-hero-bg] + div,
body:has(#product) [data-hero-bg] + div + div,
body:has(#product) [data-hero-bg] + div + div + div {
  display: none !important;
}

.fn-home main > section:first-child h1 span:first-child,
body:has(#product) main > section:first-child h1 span:first-child,
.fn-home main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child [data-hero-reveal].grid span,
body:has(#product) main > section:first-child [data-hero-reveal].grid span {
  color: #082f49 !important;
}

.fn-home main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].grid {
  border-color: rgba(8, 47, 73, .22) !important;
}

@media (min-width: 1024px) {
  .fn-home main > section:first-child .section-shell > div,
  body:has(#product) main > section:first-child .section-shell > div {
    width: min(42vw, 680px) !important;
    min-width: 0 !important;
    max-width: 680px !important;
  }

  .fn-home main > section:first-child .eyebrow,
  body:has(#product) main > section:first-child .eyebrow {
    margin-bottom: 1rem !important;
    font-size: .68rem !important;
  }

  .fn-home main > section:first-child h1,
  body:has(#product) main > section:first-child h1 {
    max-width: 680px !important;
    font-size: 3.45rem !important;
    line-height: .98 !important;
  }

  .fn-home main > section:first-child p[data-hero-reveal],
  body:has(#product) main > section:first-child p[data-hero-reveal] {
    max-width: 460px !important;
    margin-top: 1rem !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].grid,
  body:has(#product) main > section:first-child [data-hero-reveal].grid {
    max-width: 550px !important;
    margin-top: 1.4rem !important;
    gap: 1rem !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].grid > div,
  body:has(#product) main > section:first-child [data-hero-reveal].grid > div {
    gap: .55rem !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].grid svg,
  body:has(#product) main > section:first-child [data-hero-reveal].grid svg {
    width: 32px !important;
    height: 32px !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].grid span,
  body:has(#product) main > section:first-child [data-hero-reveal].grid span {
    font-size: .78rem !important;
    line-height: 1.08 !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].mt-8,
  body:has(#product) main > section:first-child [data-hero-reveal].mt-8 {
    margin-top: 1.5rem !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  body:has(#product) main > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    padding: .8rem 1.5rem !important;
    font-size: .68rem !important;
  }
}

@media (max-width: 767px) {
  .fn-home [data-hero-bg] .hero-static-image,
  body:has(#product) [data-hero-bg] .hero-static-image {
    object-position: 68% center !important;
  }

}
.fn-home main > section:first-child > div:nth-child(2) {
  display: block !important;
  background: linear-gradient(90deg, rgba(3,22,34,.95) 0%, rgba(3,22,34,.82) 37%, rgba(3,22,34,.28) 70%, rgba(3,22,34,.12) 100%) !important;
}
.fn-home main > section:first-child > div:nth-child(3) {
  display: block !important;
  background: linear-gradient(0deg, rgba(3,22,34,.52), transparent 50%) !important;
}
.fn-home main > section:first-child .section-shell {
  align-items: center !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.fn-home main > section:first-child .section-shell > div {
  position: relative;
  max-width: 820px !important;
  width: min(70vw, 820px) !important;
  min-width: 0 !important;
  padding-left: 0;
}
.fn-home main > section:first-child .section-shell > div::before {
  display: none;
}
.fn-home main > section:first-child h1 {
  max-width: 820px !important;
  font-size: clamp(3rem, 4.2vw, 4.5rem) !important;
  line-height: .95 !important;
  font-weight: 740 !important;
}
.fn-home main > section:first-child h1 span + span { color: var(--v2-green) !important; }
.fn-home main > section:first-child p { font-size: clamp(1.1rem, 1.9vw, 1.5rem) !important; }
.fn-home main > section:first-child [class*="grid-cols-2"] {
  max-width: 660px !important;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.fn-home main > section:first-child [class*="grid-cols-2"] > div { flex-direction: row !important; align-items: center !important; }
.fn-home main > section:first-child [class*="grid-cols-2"] svg { width: 26px; height: 26px; flex: 0 0 auto; }
.fn-home main > section:first-child [class*="grid-cols-2"] span { max-width: none !important; }

/* Product opener becomes an asymmetrical editorial spread. */
.fn-home #product {
  position: relative;
  overflow: hidden;
  background: var(--v2-paper) !important;
}
.fn-home #product::before {
  display: none;
}
.fn-home #product .section-shell > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  min-height: 0;
  padding: clamp(2rem, 3.5vw, 3rem) 0 2rem !important;
  text-align: center !important;
}
.fn-home #product .section-shell > div > div:first-child {
  width: 100%;
  max-width: 900px !important;
  margin: 0 auto !important;
  transform: translateY(-14px);
  text-align: center !important;
}
.fn-home #product h2 {
  max-width: 900px !important;
  margin: 0 auto !important;
  color: var(--v2-navy) !important;
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
}
.fn-home #product .section-shell > div > div:nth-child(2) {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.fn-home #product img {
  width: 75% !important;
  height: auto !important;
  margin-inline: auto;
  filter: none;
}

/* Keep informational containers directly on the plain page surface. */
.fn-home #product [class*="backdrop-blur"],
main [data-benefit-card] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Make badges bigger on home page, similar to facilities */
body.fn-home main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] {
  min-height: 64px !important;
  gap: .8rem !important;
  padding: 1rem 1.45rem !important;
  border-width: 1px !important;
  box-shadow: 0 28px 58px rgba(11, 71, 120, .13) !important;
}

/* Reduce pack image a little on home page */
body.fn-home main > section:first-child img[alt*="Freshnaps multi-purpose"],
body[data-route="/"] main > section:first-child img[alt*="Freshnaps multi-purpose"],
body.fn-home main #product img,
body[data-route="/"] main #product img {
  width: 86% !important;
  margin: 0 auto !important;
}
.fn-home #product [class*="backdrop-blur"] {
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(214, 225, 230, .9) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 14px 34px rgba(6, 31, 47, .1) !important;
}

/* Content now reads as alternating editorial bands, not a stack of floating cards. */
.fn-home main > div > section:nth-child(even),
.fn-inner main > section:nth-child(odd):not(:first-child) { background: var(--v2-paper) !important; }
.fn-home main > div > section:nth-child(odd),
.fn-inner main > section:nth-child(even) { background: var(--v2-paper) !important; }

main [data-benefit-card] {
  flex: 1 1 210px !important;
  width: auto !important;
  max-width: 270px;
  min-height: 225px;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.35rem !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  background: rgba(255, 255, 255, .68) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(255, 255, 255, .42),
    0 18px 44px rgba(6, 31, 47, .1) !important;
  transform: none !important;
}
main [data-benefit-card]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .5),
    0 22px 52px rgba(6, 31, 47, .13) !important;
}
main [data-benefit-card] > div:nth-child(2) {
  justify-content: center !important;
  width: 68px !important;
  height: 68px !important;
  margin-bottom: .75rem !important;
  margin-inline: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

main a[class*="group"][class*="overflow-hidden"] {
  border: 0 !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 18px 44px rgba(6, 31, 47, .1) !important;
}
main a[class*="group"][class*="overflow-hidden"] img { min-height: 260px; filter: saturate(.72) contrast(1.05); }
main a[class*="group"][class*="overflow-hidden"] h3 {
  color: #ffffff !important;
}
main a[class*="group"][class*="overflow-hidden"] p {
  color: var(--v2-muted) !important;
}

/* Keep prominent section titles compact and predictable. */
.fn-home main h2 {
  font-size: clamp(2.15rem, 3.2vw, 3.4rem) !important;
  line-height: 1.05 !important;
}
.fn-home .fn-two-line-heading-wrap {
  width: 100%;
  max-width: 1120px !important;
}
.fn-home .fn-two-line-heading {
  max-width: 1120px;
  margin-inline: auto;
  text-wrap: balance;
}
main a[class*="group"][class*="overflow-hidden"] .fn-use-case-button {
  width: fit-content;
  min-height: 40px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 6px;
  background: #1379b8;
  color: #ffffff !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
main a[class*="group"][class*="overflow-hidden"]:hover .fn-use-case-button {
  background: #9bd36a;
  color: var(--v2-navy) !important;
}

/* Photographic industry page heroes. */
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child {
  position: relative;
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  height: min(700px, 76svh) !important;
  min-height: 560px !important;
  margin: 0 !important;
  padding: 5rem max(24px, calc((100vw - 1180px)/2)) 4.5rem !important;
  overflow: hidden;
  background-color: var(--v2-navy) !important;
  background-position: center !important;
  background-size: cover !important;
  color: white !important;
}
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(3,22,34,.94), rgba(3,22,34,.66) 52%, rgba(3,22,34,.16)), linear-gradient(0deg, rgba(3,22,34,.58), transparent 55%);
  content: "";
}
.fn-inner main > section:first-child > div { position: relative; z-index: 1; }
.fn-inner main > section:first-child > div[class*="absolute"] { z-index: 0; }
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child > div[class*="absolute"] { display: none !important; }
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child > div:not([class*="absolute"]) {
  width: min(780px, 70vw) !important;
  max-width: 780px !important;
  margin: 0 !important;
  text-align: left !important;
}
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child h1 {
  color: white !important;
  font-size: clamp(3.1rem, 4.8vw, 5.15rem) !important;
  line-height: .98 !important;
}
.fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child p:not(.eyebrow) {
  max-width: 650px;
  color: rgba(255,255,255,.82) !important;
}

body[data-route="/restaurants"] main > section:first-child { background-image: url('/images/restaurant-panorama.jpeg') !important; }
body[data-route="/food-trucks"] main > section:first-child { background-image: url('/images/usecase-food-truck.jpg') !important; }
body[data-route="/barbers"] main > section:first-child { background-image: url('/images/usecase-barbers.jpg') !important; }
body[data-route="/salons"] main > section:first-child { background-image: url('/images/usecase-salons.jpg') !important; }
body[data-route="/chiropractors"] main > section:first-child { background-image: url('/images/usecase-chiropractors.jpg') !important; }
body[data-route="/casinos"] main > section:first-child { background-image: url('/images/usecase-casinos.jpg') !important; }
body[data-route="/hotels"] main > section:first-child { background-image: url('/images/usecase-hotels.jpg') !important; }
body[data-route="/opticians"] main > section:first-child { background-image: url('/images/usecase-opticians.jpg') !important; }
body[data-route="/waiting-rooms"] main > section:first-child { background-image: url('/images/usecase-waitingrooms.jpg') !important; }


body[data-route="/facilities"] main > section:first-child,
body[data-route="/multipurposewipes"] main > section:first-child { background-image: url('/images/wipe-texture-steel.webp') !important; }

/* Product page hero and grid. */
body[data-route="/products"] main > section:first-child {
  width: 100% !important;
  max-width: none !important;
  min-height: 590px;
  margin: 0 !important;
  padding: 8rem max(24px, calc((100vw - 1180px)/2)) 5rem !important;
  background: linear-gradient(90deg, rgba(3,22,34,.96), rgba(3,22,34,.52)), url('/images/hero-banner-clean.webp') center / cover !important;
  color: white !important;
}
body[data-route="/products"] main > section:first-child h1 { max-width: 850px; color: white !important; }
body[data-route="/products"] main > section:first-child p:not(.eyebrow) { max-width: 680px; color: rgba(255,255,255,.78) !important; }
body[data-route="/products"] main > section:nth-child(2) > div { gap: 2px !important; background: var(--v2-rule); }
body[data-route="/products"] main > section:nth-child(2) article,
body[data-route="/products"] main > section:nth-child(2) > div > div { border-radius: 0 !important; box-shadow: none !important; }

/* Contact and sample pages get a bold split-screen workspace. */
body[data-route="/contact"] main,
body[data-route="/contact-us"] main,
body[data-route="/sample-request"] main { background: var(--v2-paper) !important; }
body[data-route="/contact"] main > section:first-child,
body[data-route="/contact-us"] main > section:first-child,
body[data-route="/sample-request"] main > section:first-child {
  width: min(1320px, 100%) !important;
  min-height: calc(100svh - 130px) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--v2-paper) !important;
}
body[data-route="/contact"] main > section:first-child > div:first-child,
body[data-route="/contact-us"] main > section:first-child > div:first-child,
body[data-route="/sample-request"] main > section:first-child > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 720px;
  padding: clamp(3rem, 7vw, 7rem);
  background: var(--v2-paper) !important;
  color: var(--v2-ink);
}
body[data-route="/contact"] main > section:first-child h1,
body[data-route="/contact-us"] main > section:first-child h1,
body[data-route="/sample-request"] main > section:first-child h1 { color: var(--v2-navy) !important; }
body[data-route="/contact"] main > section:first-child p:not(.eyebrow),
body[data-route="/contact-us"] main > section:first-child p:not(.eyebrow),
body[data-route="/sample-request"] main > section:first-child p:not(.eyebrow) { color: var(--v2-muted) !important; }
body[data-route="/contact"] form,
body[data-route="/contact-us"] form,
body[data-route="/sample-request"] form {
  align-self: center;
  margin: clamp(1.5rem, 5vw, 5rem);
  border: 1px solid var(--v2-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-route="/contact"] main > section:first-child,
body[data-route="/contact-us"] main > section:first-child {
  align-items: center !important;
  padding-block: 2rem !important;
}
body[data-route="/contact"] main > section:first-child > div:first-child,
body[data-route="/contact-us"] main > section:first-child > div:first-child {
  align-self: start;
  justify-content: flex-start;
  min-height: 0;
  padding: 3.5rem clamp(2rem, 5vw, 4.5rem) 3rem;
}
body[data-route="/contact"] main > section:first-child h1,
body[data-route="/contact-us"] main > section:first-child h1 {
  max-width: 660px;
  font-size: 3rem !important;
  line-height: 1.04 !important;
}
body[data-route="/contact"] form,
body[data-route="/contact-us"] form {
  width: min(calc(100% - 3rem), 620px);
  margin: 2rem auto;
  justify-self: center;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 20px 55px rgba(8, 39, 58, .1) !important;
}
body[data-route="/contact"] form button,
body[data-route="/contact-us"] form button {
  background: #1379b8 !important;
}
body[data-route="/contact"] form label,
body[data-route="/contact-us"] form label,
body[data-route="/sample-request"] form label,
body[data-route="/contact"] form input,
body[data-route="/contact-us"] form input,
body[data-route="/sample-request"] form input,
body[data-route="/contact"] form select,
body[data-route="/contact-us"] form select,
body[data-route="/sample-request"] form select,
body[data-route="/contact"] form textarea,
body[data-route="/contact-us"] form textarea,
body[data-route="/sample-request"] form textarea { min-width: 0 !important; width: 100% !important; }
body[data-route="/sample-request"] main > section:first-child > div:first-child > div:last-child {
  display: block !important;
  margin-top: 2rem !important;
  border: 1px solid var(--v2-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

footer {
  background: var(--v2-paper) !important;
  border-top: 4px solid var(--v2-green) !important;
  color: var(--v2-muted) !important;
}
footer h3 { color: var(--v2-navy) !important; }
footer a { color: var(--v2-muted) !important; }
footer a:hover { color: #28773b !important; }
footer p[class*="text-white"] { color: var(--v2-muted) !important; }

@media (max-width: 1023px) {
  body > header { height: 72px !important; }
  .fn-brand-strip { display: none; }
  body > header > .section-shell { height: 72px !important; }
  body > header button[aria-label] { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: white !important; }
  body > header button[aria-label] { background: white !important; border-color: var(--v2-rule) !important; color: var(--v2-ink) !important; }
  .fn-mobile-nav { inset-block-start: 72px; background: white !important; border-color: var(--v2-rule); }
  .fn-mobile-nav a { color: var(--v2-ink); border-color: var(--v2-rule); }
  main { padding-top: 72px; }
  .fn-home main > section:first-child { padding-top: 72px !important; }
}

@media (max-width: 767px) {
  .fn-home main > section:first-child {
    height: 86svh !important;
    min-height: 680px !important;
    background-position: 63% center !important;
  }
  .fn-home main > section:first-child > div:nth-child(2) { background: linear-gradient(0deg, rgba(3,22,34,.98), rgba(3,22,34,.68) 67%, rgba(3,22,34,.25)) !important; }
  .fn-home main > section:first-child .section-shell { padding-bottom: 2.5rem !important; }
  .fn-home main > section:first-child .section-shell { align-items: flex-end !important; }
  .fn-home main > section:first-child .eyebrow { display: none !important; }
  .fn-home main > section:first-child .section-shell > div { width: 100% !important; padding-left: 0; }
  .fn-home main > section:first-child .section-shell > div::before { width: 3px; }
  .fn-home main > section:first-child h1 { font-size: clamp(2.65rem, 12vw, 3.5rem) !important; }
  .fn-home main > section:first-child [class*="grid-cols-2"] > div { flex-direction: column !important; align-items: flex-start !important; }

  .fn-home #product::before { display: none; }
  .fn-home #product .section-shell > div { display: flex !important; min-height: 0; padding: 2.5rem 0 1.5rem !important; text-align: center !important; }
  .fn-home #product h2 { font-size: 2.8rem !important; }

  .fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child {
    height: 78svh !important;
    min-height: 600px !important;
    padding: 5rem 24px 3rem !important;
    background-position: center !important;
  }
  .fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child::before {
    background: linear-gradient(0deg, rgba(3,22,34,.96), rgba(3,22,34,.58) 70%, rgba(3,22,34,.25));
  }
  .fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child > div:not([class*="absolute"]) { width: 100% !important; }
  .fn-inner:not([data-route="/contact"]):not([data-route="/contact-us"]):not([data-route="/sample-request"]):not([data-route="/products"]):not([data-route="/industries"]):not([data-route="/about-us"]) main > section:first-child h1 { font-size: clamp(2.5rem, 11vw, 3.35rem) !important; }

  body[data-route="/products"] main > section:first-child { min-height: 620px; padding: 7rem 24px 3.5rem !important; background-position: 64% center !important; }

  body[data-route="/contact"] main > section:first-child,
  body[data-route="/contact-us"] main > section:first-child,
  body[data-route="/sample-request"] main > section:first-child { display: block !important; }
  body[data-route="/contact"] main > section:first-child > div:first-child,
  body[data-route="/contact-us"] main > section:first-child > div:first-child,
  body[data-route="/sample-request"] main > section:first-child > div:first-child { min-height: 560px; padding: 4rem 24px; }
  body[data-route="/contact"] form,
  body[data-route="/contact-us"] form,
  body[data-route="/sample-request"] form { margin: 0; padding: 24px !important; }
  body[data-route="/contact"] main > section:first-child > div:first-child,
  body[data-route="/contact-us"] main > section:first-child > div:first-child {
    min-height: 0;
    padding: 2.5rem 24px 2rem;
  }
  body[data-route="/contact"] main > section:first-child h1,
  body[data-route="/contact-us"] main > section:first-child h1 { font-size: 2.35rem !important; }
  body[data-route="/contact"] form,
  body[data-route="/contact-us"] form {
    width: calc(100% - 48px);
    margin: 0 auto 3rem;
  }
}

/* Facilities page: merged industry groups with Waiting Rooms retained. */
body[data-route="/facilities"] .fn-merged-industries,
body[data-route="/multipurposewipes"] .fn-merged-industries {
  width: min(100%, 1120px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-inline: auto !important;
}
body[data-route="/facilities"] .fn-merged-industries > :last-child:nth-child(odd),
body[data-route="/multipurposewipes"] .fn-merged-industries > :last-child:nth-child(odd) {
  grid-column: auto;
  width: 100%;
  justify-self: stretch;
}
@media (max-width: 767px) {
  body[data-route="/facilities"] .fn-merged-industries,
  body[data-route="/multipurposewipes"] .fn-merged-industries {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-route="/facilities"] .fn-merged-industries > :last-child:nth-child(odd),
  body[data-route="/multipurposewipes"] .fn-merged-industries > :last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

/* Facilities industry cards: square image containers with a lower focal point. */
body[data-route="/facilities"] .fn-merged-industries,
body[data-route="/multipurposewipes"] .fn-merged-industries {
  width: min(100%, 1280px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-route="/facilities"] .fn-merged-industries > a > div:first-child,
body[data-route="/multipurposewipes"] .fn-merged-industries > a > div:first-child {
  height: clamp(260px, 24vw, 360px) !important;
  aspect-ratio: auto !important;
}

body[data-route="/facilities"] .fn-merged-industries > a img,
body[data-route="/multipurposewipes"] .fn-merged-industries > a img {
  object-position: center 78% !important;
}

@media (max-width: 1023px) {
  body[data-route="/facilities"] .fn-merged-industries,
  body[data-route="/multipurposewipes"] .fn-merged-industries {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body[data-route="/facilities"] .fn-merged-industries,
  body[data-route="/multipurposewipes"] .fn-merged-industries {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Bigger floating product feature badges on homepage and Facilities. */
body.fn-home main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
#product div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] {
  min-height: 64px !important;
  gap: .8rem !important;
  padding: 1rem 1.45rem !important;
  border-width: 1px !important;
  box-shadow: 0 28px 58px rgba(11, 71, 120, .13) !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > div[class*="rounded-full"],
body.fn-home main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > div[class*="rounded-full"],
body[data-route="/"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > div[class*="rounded-full"],
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > div[class*="rounded-full"],
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > div[class*="rounded-full"] {
  width: 2.15rem !important;
  height: 2.15rem !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] svg,
body.fn-home main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] svg,
body[data-route="/"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] svg,
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] svg,
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] svg {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > span,
body.fn-home main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > span,
body[data-route="/"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > span,
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > span,
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] > span {
  font-size: .93rem !important;
  line-height: 1.1 !important;
}

/* Facilities hero: lift the main pack image slightly within the feature callouts. */
#product img[src="/images/pack-open.png"],  #product img[src="/images/pack-open.png"],
  body[data-route="/multipurposewipes"] main > section:first-child img[src="/images/pack-open.png"],
  body[data-route="/facilities"] main > section:first-child img[src="/images/pack-open.png"] {
  transform: translateY(-34px) !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="right-"],
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="right-"] ,
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="right-"] {
  right: 1.5rem !important;
  left: auto !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="left-"],
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="left-"],
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"][class*="left-"] {
  left: 1.5rem !important;
  right: auto !important;
}

#product div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/multipurposewipes"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"],
body[data-route="/facilities"] main > section:first-child div[class*="hidden"][class*="md:flex"][class*="absolute"] > div[class*="bg-white/95"][class*="rounded-full"] {
  width: min(420px, 30vw) !important;
  justify-content: flex-start !important;
}

@media (max-width: 767px) {  #product img[src="/images/pack-open.png"],
  body[data-route="/multipurposewipes"] main > section:first-child img[src="/images/pack-open.png"],
  body[data-route="/facilities"] main > section:first-child img[src="/images/pack-open.png"] {
    transform: translateY(-18px) !important;
  }
}

/* Sample request: keep headline and form in distinct, stable columns. */
@media (min-width: 1024px) {
  body[data-route="/sample-request"] main > section:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 580px) !important;
    align-items: start !important;
    width: min(1440px, calc(100% - 48px)) !important;
    padding: 3rem 0 5rem !important;
  }
  body[data-route="/sample-request"] main > section:first-child > div:first-child {
    min-width: 0;
    min-height: 0;
    padding: 1rem 3rem 3rem 0 !important;
  }
  body[data-route="/sample-request"] main > section:first-child h1 {
    max-width: 760px;
    font-size: clamp(3.5rem, 5vw, 4.8rem) !important;
    line-height: .98 !important;
    overflow-wrap: normal;
  }
  body[data-route="/sample-request"] form {
    width: 100%;
    margin: 0 auto !important;
    padding: 2rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 20px 55px rgba(8,39,58,.1) !important;
  }
  body[data-route="/sample-request"] form label { min-width: 0; }
  body[data-route="/sample-request"] form input,
  body[data-route="/sample-request"] form select,
  body[data-route="/sample-request"] form textarea {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Products page opens directly on the purchasable product range. */
body[data-route="/products"] main > section:first-child { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fn-marquee-track { animation: none !important; }
}

/* Facilities is a white product page, not a photographic industry hero. */
body[data-route="/facilities"] main > section:first-child,
body[data-route="/multipurposewipes"] main > section:first-child {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(2.5rem, 4vw, 4rem) 0 2rem !important;
  overflow: hidden;
  background: #ffffff !important;
  color: var(--v2-ink) !important;
}
body[data-route="/facilities"] main > section:first-child::before,
body[data-route="/multipurposewipes"] main > section:first-child::before {
  display: none !important;
}
body[data-route="/facilities"] main > section:first-child > div:not([class*="absolute"]),
body[data-route="/multipurposewipes"] main > section:first-child > div:not([class*="absolute"]) {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body[data-route="/facilities"] main > section:first-child h1,
body[data-route="/multipurposewipes"] main > section:first-child h1 {
  max-width: 1040px;
  margin-inline: auto;
  color: var(--v2-navy) !important;
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: .98 !important;
}
body[data-route="/facilities"] main > section:first-child p:not(.eyebrow),
body[data-route="/multipurposewipes"] main > section:first-child p:not(.eyebrow) {
  max-width: 820px;
  margin-inline: auto;
  color: var(--v2-muted) !important;
}
#product img[alt*="Freshnaps multi-purpose"],
#product img,
body[data-route="/facilities"] main > section:first-child img[alt*="Freshnaps multi-purpose"],
body[data-route="/multipurposewipes"] main > section:first-child img[alt*="Freshnaps multi-purpose"] {
  width: 75% !important;
  height: auto !important;
  margin-inline: auto;
}

/* Facilities page: keep product purchasing and the feature strip on their dedicated pages. */
#active-products-section,
body[data-route="/facilities"] main > section.relative.bg-white.py-8[class~="md:py-28"],
body[data-route="/multipurposewipes"] main > section.relative.bg-white.py-8[class~="md:py-28"] {
  display: none !important;
}

.fn-facility-benefits,
.fn-facility-environments,
.fn-commercial-products {
  padding: clamp(3.5rem, 6vw, 6rem) 0 !important;
  background: #ffffff !important;
}
body.fn-home .fn-home-benefits {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 440px;
  align-items: center;
  padding: 4rem 0 !important;
  border-top: 1px solid var(--v2-rule);
  border-bottom: 1px solid var(--v2-rule);
}
body.fn-home .fn-home-benefits > .section-shell {
  transform: none !important;
}
@media (max-width: 900px) {
  body.fn-home .fn-home-benefits {
    display: block;
    min-height: 0;
    padding: 2.5rem 0 !important;
  }
}
.fn-facility-benefit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.fn-facility-benefits [data-benefit-card] img {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 1rem;
  object-fit: contain;
}
.fn-facility-benefits [data-benefit-card] {
  justify-content: flex-start !important;
}
.fn-facility-benefits [data-benefit-card] h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  margin: 0;
  color: var(--v2-navy) !important;
  font-size: 1.1rem !important;
  line-height: 1.15 !important;
}
.fn-facility-benefits [data-benefit-card] p {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 2.8rem;
  margin-top: .65rem;
  color: #8197b8 !important;
  font-size: .95rem;
  line-height: 1.45;
}

/* Compact homepage use-case story. */
body.fn-home .fn-use-ritual {
  padding: 5rem 0 !important;
  background: #fff !important;
}
body.fn-home .fn-use-ritual .section-shell > div:first-child {
  max-width: 920px !important;
  margin-bottom: 2.5rem !important;
}
body.fn-home .fn-use-ritual h2 {
  max-width: 880px !important;
  margin: .75rem auto 0 !important;
  font-size: 2.75rem !important;
  line-height: 1.06 !important;
}
body.fn-home .fn-use-ritual h2 + p {
  max-width: 760px;
  margin: 1.25rem auto 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}
body.fn-home .fn-use-ritual .section-shell > div:nth-child(2) {
  gap: 1.25rem !important;
  margin-top: 0 !important;
}
body.fn-home .fn-use-ritual article {
  min-height: 270px;
  justify-content: center !important;
  padding: 2rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 18px 48px rgba(8, 39, 58, .09) !important;
}
body.fn-home .fn-use-ritual article > div > div:first-child {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 1.25rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #3c9150 !important;
}
body.fn-home .fn-use-ritual article svg {
  width: 34px;
  height: 34px;
}
body.fn-home .fn-use-ritual article h3 {
  max-width: 320px;
  margin-inline: auto;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}
body.fn-home .fn-use-ritual article p {
  max-width: 360px;
  margin: .75rem auto 0 !important;
  color: var(--v2-muted) !important;
  font-size: .92rem !important;
  line-height: 1.6 !important;
}

/* Shared alignment for major content-section headings across the site. */
main .fn-site-section-heading-wrap {
  margin-inline: auto !important;
  text-align: center !important;
}
main .fn-site-section-heading {
  margin-inline: auto !important;
  text-align: center !important;
}
main .fn-site-section-eyebrow {
  display: block;
  width: 100%;
  text-align: center !important;
}
main .fn-site-section-intro {
  max-width: 900px;
  margin-inline: auto !important;
  text-align: center !important;
}
@media (max-width: 767px) {
  body.fn-home .fn-use-ritual { padding: 3.5rem 0 !important; }
  body.fn-home .fn-use-ritual h2 { font-size: 2.1rem !important; }
  body.fn-home .fn-use-ritual article { min-height: 0; }
}

.fn-centered-alcohol-section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) !important;
  background: #fff !important;
}
.fn-centered-alcohol-layout {
  display: flex !important;
  justify-content: center;
}
.fn-centered-alcohol-copy {
  width: min(100%, 780px);
  text-align: center;
}
.fn-centered-alcohol-copy > span {
  margin-bottom: .75rem !important;
}
.fn-centered-alcohol-copy h2 {
  max-width: 720px;
  margin-inline: auto;
  font-size: clamp(2.25rem, 4vw, 3.6rem) !important;
  line-height: 1.04 !important;
  text-transform: uppercase;
}
.fn-centered-alcohol-copy p {
  max-width: 700px;
  margin-inline: auto;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.fn-centered-alcohol-copy > div {
  display: flex;
  justify-content: center;
}
.fn-facility-section-heading {
  max-width: 1050px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}
.fn-facility-section-heading h2 {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--v2-navy) !important;
  font-size: clamp(2.1rem, 3vw, 3.2rem) !important;
  line-height: 1.05 !important;
}
.fn-facility-section-heading p:not(.eyebrow) {
  max-width: 900px;
  margin: 1.4rem auto 0;
  color: var(--v2-muted);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}
.fn-environment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.fn-environment-card {
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(6, 31, 47, .09);
}
.fn-environment-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fn-environment-card figcaption {
  padding: 1rem;
  color: #0b4778;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}
.fn-commercial-products {
  padding-top: 3rem !important;
  background: #ffffff !important;
}
.fn-commercial-products .fn-facility-section-heading {
  margin-bottom: 2rem;
}
.fn-commercial-products .eyebrow {
  color: #3c9150 !important;
  font-size: .82rem;
}
.fn-commercial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  background: transparent;
}
.fn-commercial-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(6, 31, 47, .08) !important;
}
.fn-commercial-image {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 1.5rem;
  background: #ffffff;
}
.fn-commercial-image img {
  width: 100%;
  height: 210px;
  object-fit: contain;
}
.fn-commercial-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem;
}
.fn-commercial-content h3 {
  color: var(--v2-navy) !important;
  font-size: 1.25rem;
  line-height: 1.2;
}
.fn-commercial-content > p {
  margin-top: 1rem;
  color: var(--v2-muted);
  line-height: 1.55;
}
.fn-commercial-content h4 {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d8e2df;
  color: var(--v2-navy) !important;
  font-size: .82rem;
}
.fn-commercial-content ul {
  display: grid;
  gap: .8rem;
  margin: 1rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
.fn-commercial-content li {
  display: flex;
  gap: .65rem;
  color: #496476;
  font-size: .9rem;
  line-height: 1.4;
}
.fn-commercial-content li span { color: #3c9150; font-weight: 900; }
.fn-commercial-content > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 46px;
  margin-top: auto;
  padding: .8rem 1rem;
  border-radius: 6px;
  background: #1379b8;
  color: #ffffff !important;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
}
.fn-commercial-content > a:hover { background: var(--v2-navy); }

/* One consistent Freshnaps blue for every primary command. */
body > header a[href*="sample-request"] span span,
main a.inline-block > span.group > span,
main a[class*="group"][class*="overflow-hidden"] .fn-use-case-button,
.fn-commercial-content > a,
main button[type="submit"] {
  border-color: #1379b8 !important;
  background: #1379b8 !important;
  color: #ffffff !important;
}
body > header a[href*="sample-request"]:hover span span,
main a.inline-block:hover > span.group > span,
main a[class*="group"][class*="overflow-hidden"]:hover .fn-use-case-button,
.fn-commercial-content > a:hover,
main button[type="submit"]:hover {
  border-color: #0b4778 !important;
  background: #0b4778 !important;
  color: #ffffff !important;
}

@media (max-width: 1023px) {
  .fn-environment-grid,
  .fn-commercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="/facilities"] main > section:first-child,
  body[data-route="/multipurposewipes"] main > section:first-child { padding-top: 2.5rem !important; }
}
@media (max-width: 639px) {
  body[data-route="/facilities"] main > section:first-child > div:not([class*="absolute"]),
  body[data-route="/multipurposewipes"] main > section:first-child > div:not([class*="absolute"]) { width: min(100% - 32px, 1180px) !important; }
  body[data-route="/facilities"] main > section:first-child img[alt*="Freshnaps multi-purpose"],
  body[data-route="/multipurposewipes"] main > section:first-child img[alt*="Freshnaps multi-purpose"] { width: 94% !important; }
  .fn-environment-grid,
  .fn-commercial-grid { grid-template-columns: 1fr; }
  .fn-facility-section-heading h2 { font-size: 2.35rem !important; }
}

/* ID-level guard prevents the generic industry template from reclaiming this hero. */
body[data-route="/facilities"] #main-content > section:first-child,
body[data-route="/multipurposewipes"] #main-content > section:first-child {
  position: relative !important;
  display: block !important;
  align-items: initial !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(2.5rem, 4vw, 4rem) 0 2rem !important;
  background: #ffffff !important;
  color: var(--v2-ink) !important;
}
body[data-route="/facilities"] #main-content > section:first-child::before,
body[data-route="/multipurposewipes"] #main-content > section:first-child::before {
  display: none !important;
  content: none !important;
}
body[data-route="/facilities"] #main-content > section:first-child > div:not([class*="absolute"]),
body[data-route="/multipurposewipes"] #main-content > section:first-child > div:not([class*="absolute"]) {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body[data-route="/facilities"] #main-content > section:first-child h1,
body[data-route="/multipurposewipes"] #main-content > section:first-child h1 {
  max-width: 1040px !important;
  margin-inline: auto !important;
  color: var(--v2-navy) !important;
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: .98 !important;
}
body[data-route="/facilities"] #main-content > section:first-child p:not(.eyebrow),
body[data-route="/multipurposewipes"] #main-content > section:first-child p:not(.eyebrow) {
  max-width: 820px !important;
  margin-inline: auto !important;
  color: var(--v2-muted) !important;
}

/* Core selling story used on the homepage and Facilities page. */
.fn-selling-story {
  padding: clamp(4rem, 7vw, 7rem) 0 !important;
  border-top: 1px solid var(--v2-rule);
  border-bottom: 1px solid var(--v2-rule);
  background: #ffffff !important;
}
.fn-selling-story-heading {
  max-width: 1400px;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.fn-selling-story-heading .eyebrow { color: #3c9150 !important; }
body .fn-selling-story-heading h2 {
  max-width: 1180px !important;
  margin: .75rem auto 0;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-navy) !important;
  font-size: 2.35rem !important;
  line-height: 1.04 !important;
}
.fn-selling-story-heading h2 span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  body .fn-selling-story-heading h2 { font-size: 2.35rem !important; }
  .fn-selling-story-heading h2 span {
    width: auto;
    white-space: normal;
  }
}
.fn-selling-story-heading > p:last-child {
  max-width: 880px;
  margin: 1.4rem auto 0;
  color: var(--v2-muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}
.fn-selling-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: selling-story;
}
.fn-selling-story-grid article {
  position: relative;
  display: flex;
  min-height: 240px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 2.25rem !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 18px 48px rgba(8, 39, 58, .09) !important;
  text-align: center;
  counter-increment: selling-story;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fn-selling-story-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(8, 39, 58, .13) !important;
}
.fn-selling-story-grid article::before {
  content: "0" counter(selling-story);
  margin-bottom: 1rem;
  color: #3c9150;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.fn-selling-story-grid h3 {
  max-width: 520px;
  margin-inline: auto;
  color: var(--v2-navy) !important;
  font-size: 1.4rem !important;
  line-height: 1.18;
}
.fn-selling-story-grid p {
  max-width: 540px;
  margin: .85rem auto 0;
  color: var(--v2-muted);
  line-height: 1.65;
}
@media (max-width: 767px) {
  .fn-selling-story-grid { grid-template-columns: 1fr; gap: 2rem; }
  body .fn-selling-story-heading h2 { font-size: 2.1rem !important; }
  .fn-selling-story-heading h2 span {
    width: auto;
    white-space: normal;
  }
}

/* About-page marketplace section must remain legible on the white theme. */
.fn-marketplace-section {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 !important;
  background: #ffffff !important;
  color: var(--v2-ink) !important;
}
.fn-marketplace-section > .section-shell > div:first-child {
  max-width: 900px !important;
  margin-bottom: 2.75rem !important;
}
.fn-marketplace-section .eyebrow { color: #3c9150 !important; }
.fn-marketplace-section h2 {
  max-width: 850px;
  margin: .75rem auto 0 !important;
  color: var(--v2-navy) !important;
  font-size: clamp(2.25rem, 3.2vw, 3.35rem) !important;
  line-height: 1.05 !important;
}
body[data-route="/about-us"] #main-content > .fn-marketplace-section {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.fn-marketplace-section > div[class*="absolute"] {
  display: none !important;
}

/* Products comparison: distinct cards instead of a single tinted slab. */
body[data-route="/products"] #main-content > section:nth-child(2) {
  padding-bottom: 4.5rem !important;
  background: #ffffff !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) > div {
  gap: 1.25rem !important;
  background: transparent !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article {
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(6, 31, 47, .09) !important;
  transform: none !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article:hover {
  box-shadow: 0 18px 44px rgba(6, 31, 47, .13) !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article > div:first-child {
  border-bottom: 1px solid #e2e9eb !important;
  background: #ffffff !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article > div:nth-child(2) {
  padding: 1.5rem !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article h3 {
  color: var(--v2-navy) !important;
  font-size: 1.05rem !important;
  line-height: 1.22 !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article p {
  color: var(--v2-muted) !important;
  font-size: .86rem !important;
  line-height: 1.55 !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article li span {
  font-size: .78rem !important;
  line-height: 1.4 !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) article a > span,
body[data-route="/products"] #main-content > section:nth-child(2) article a > span > span {
  width: 100%;
}
@media (max-width: 1023px) {
  body[data-route="/products"] #main-content > section:nth-child(2) > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 639px) {
  body[data-route="/products"] #main-content > section:nth-child(2) > div {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage wipe-technology cards use the same white glass language. */
.fn-technology-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem !important;
  width: 100%;
  max-width: 1100px;
  margin: 2.75rem auto 0 !important;
}
.fn-technology-card {
  width: auto !important;
  min-height: 210px !important;
  padding: 1.5rem !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  background: rgba(255, 255, 255, .76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 14px 36px rgba(6, 31, 47, .09) !important;
}
.fn-technology-icon {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 1rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #4bb857 !important;
}
.fn-technology-icon svg { width: 38px; height: 38px; }
.fn-technology-card > p {
  max-width: 280px;
  color: var(--v2-navy) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
@media (max-width: 900px) {
  .fn-technology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fn-technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem !important;
    margin-top: 1.5rem !important;
  }
  .fn-technology-card {
    min-height: 150px !important;
    padding: .9rem .65rem !important;
  }
  .fn-technology-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: .55rem !important;
  }
  .fn-technology-icon svg { width: 30px; height: 30px; }
  .fn-technology-card > p {
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }
}

/* Responsive homepage media and compact mobile hero layout. */
.mobile-only-video { display: none !important; }
.desktop-only-video { display: block !important; }

@media (max-width: 767px) {
  html,
  body { overflow-x: hidden; }

  .mobile-only-video {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .desktop-only-video { display: none !important; }

  .fn-home main > section:first-child [data-hero-reveal].mt-5 {
    width: min(100%, 330px);
    max-width: 330px !important;
    margin-top: .8rem !important;
    font-size: 1.2rem !important;
    line-height: 1.22 !important;
  }

  .fn-home main > section:first-child [data-hero-reveal].grid {
    margin-top: 1rem !important;
    column-gap: 1rem !important;
    row-gap: .7rem !important;
  }
  .fn-home main > section:first-child [data-hero-reveal].grid > div {
    gap: .35rem !important;
    margin-left: 0 !important;
  }
  .fn-home main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    transform: translateX(-1rem);
  }
  .fn-home main > section:first-child [data-hero-reveal].grid svg {
    width: 36px !important;
    height: 36px !important;
  }
  .fn-home main > section:first-child [data-hero-reveal].grid span {
    max-width: 9rem !important;
    font-size: .9rem !important;
    line-height: 1.05 !important;
  }

  /* Product claims become two compact pill rows below the pack on mobile. */
  .fn-home #product .grid.grid-cols-2 {
    width: calc(100vw - 24px) !important;
    gap: .65rem !important;
    margin-top: .75rem !important;
    margin-inline: calc(50% - 50vw + 12px) !important;
    padding-inline: .25rem !important;
    max-width: none !important;
    align-self: center;
  }
  .fn-home #product .grid.grid-cols-2 > div {
    min-height: 62px !important;
    padding: .65rem .75rem !important;
    flex-direction: row !important;
    gap: .55rem !important;
    border: 1px solid #e8edf1 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(6, 31, 47, .08) !important;
  }
  .fn-home #product .grid.grid-cols-2 > div > div {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
  .fn-home #product .grid.grid-cols-2 > div > span {
    font-size: .72rem !important;
    line-height: 1.15 !important;
  }

  /* Home-specific rules cannot rely on runtime body classes after hydration. */
  body:has(#product) main > section:first-child [data-hero-reveal].mt-5 {
    width: min(100%, 330px);
    max-width: 330px !important;
    margin-top: .8rem !important;
    font-size: 1.2rem !important;
    line-height: 1.22 !important;
  }
  body:has(#product) main > section:first-child [data-hero-reveal].grid {
    margin-top: 1rem !important;
    column-gap: 1rem !important;
    row-gap: .7rem !important;
  }
  body:has(#product) main > section:first-child [data-hero-reveal].grid > div {
    gap: .35rem !important;
    margin-left: 0 !important;
  }
  body:has(#product) main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    transform: translateX(-3rem);
  }
  body:has(#product) main > section:first-child [data-hero-reveal].grid svg {
    width: 36px !important;
    height: 36px !important;
  }
  body:has(#product) main > section:first-child [data-hero-reveal].grid span {
    max-width: 9rem !important;
    font-size: .9rem !important;
    line-height: 1.05 !important;
  }

  /* Mobile product callouts repeat nearby content, so keep the pack clean. */
  body:has(#product) #product .grid.grid-cols-2 { display: none !important; }

  body:has(#product) [data-benefit-card] {
    width: calc(50% - .4rem) !important;
    min-height: 145px !important;
    padding: .85rem .55rem !important;
  }
  body:has(#product) [data-benefit-card] img {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: .5rem !important;
  }
  body:has(#product) [data-benefit-card] h2 {
    min-height: 0 !important;
    font-size: .76rem !important;
    line-height: 1.16 !important;
  }
  body:has(#product) [data-benefit-card] p {
    min-height: 0 !important;
    margin-top: .4rem !important;
    font-size: .7rem !important;
    line-height: 1.25 !important;
  }
  body:has(#product) [data-benefit-card] + [data-benefit-card] {
    margin-left: 0 !important;
  }
  body:has(#product) [data-benefit-card]:first-child {
    margin-left: 0 !important;
  }
  body:has(#product) [data-benefit-card] {
    opacity: 1 !important;
    transform: none !important;
  }
  body:has(#product) [data-benefit-card]:nth-child(even) {
    transform: none !important;
  }
  body:has(#product) [data-benefit-card]::before { display: none !important; }
  body:has(#product) [data-benefit-card] {
    flex-shrink: 0 !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(6,31,47,.08) !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Keep desktop navigation centered to the page, independent of side actions. */
@media (min-width: 1024px) {
  body > header > .section-shell { position: relative; }
  body > header nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
  }
}

/* Give the desktop product visual a little breathing room before its features. */
@media (min-width: 768px) {
  #product + .fn-home-benefits { margin-top: 2rem; }
}

@media (max-width: 767px) {
  /* Six technology items: three columns and two compact rows. */
  .fn-technology-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .55rem !important;
  }
  .fn-technology-card {
    min-height: 132px !important;
    padding: .7rem .4rem !important;
  }
  .fn-technology-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: .4rem !important;
  }
  .fn-technology-icon svg { width: 26px !important; height: 26px !important; }
  .fn-technology-card > p {
    font-size: .64rem !important;
    line-height: 1.18 !important;
  }

  /* Homepage use cases: compact two-by-two cards on mobile. */
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) > a > div:first-child {
    height: 122px !important;
  }
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) > a > div:first-child > div:last-child {
    left: .65rem !important;
    bottom: .65rem !important;
    gap: .45rem !important;
    font-size: .82rem !important;
    line-height: 1.05 !important;
  }
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) > a > div:last-child {
    padding: .75rem !important;
  }
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) > a > div:last-child > p {
    min-height: 3.3rem !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) .fn-use-case-button,
  main .grid:has(> a[class*="group"][class*="overflow-hidden"]) > a > div:last-child > span {
    margin-top: .65rem !important;
    padding: .5rem .65rem !important;
    font-size: .66rem !important;
  }
}

/* Keep custom content sections on the same compact 50% vertical rhythm. */
.fn-facility-benefits,
.fn-facility-environments,
.fn-commercial-products {
  padding-block: clamp(1.75rem, 3vw, 3rem) !important;
}
body.fn-home .fn-home-benefits { padding-block: 2rem !important; }
body.fn-home .fn-use-ritual { padding-block: 2.5rem !important; }
.fn-centered-alcohol-section { padding-block: clamp(1.75rem, 3vw, 2.75rem) !important; }
.fn-selling-story { padding-block: clamp(2rem, 3.5vw, 3.5rem) !important; }
.fn-marketplace-section { padding-block: clamp(1.75rem, 3vw, 2.75rem) !important; }
body[data-route="/about-us"] #main-content > .fn-marketplace-section {
  padding-block: 2rem !important;
}
body[data-route="/products"] #main-content > section:nth-child(2) {
  padding-bottom: 2.25rem !important;
}

@media (max-width: 900px) {
  body.fn-home .fn-home-benefits { padding-block: 1.25rem !important; }
}
@media (max-width: 767px) {
  body.fn-home .fn-use-ritual { padding-block: 1.75rem !important; }
}

/* Shared Order Now header CTA. */
header .fn-order-now > span > span {
  background: #1379b8 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(19, 121, 184, .22) !important;
}
header .fn-order-now:hover > span > span {
  background: #0b4778 !important;
}

/* Contact page: balanced, top-aligned content and form columns. */
body[data-route="/contact"] main > section:first-child,
body[data-route="/contact-us"] main > section:first-child {
  width: min(1320px, calc(100% - 48px)) !important;
  min-height: auto !important;
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr) !important;
  align-items: start !important;
  gap: clamp(2.5rem, 5vw, 5rem) !important;
  margin-inline: auto !important;
  padding-block: 3rem !important;
}
body[data-route="/contact"] main > section:first-child > div:first-child,
body[data-route="/contact-us"] main > section:first-child > div:first-child {
  align-self: start !important;
  min-height: 0 !important;
  padding: 0 !important;
}
body[data-route="/contact"] main > section:first-child h1,
body[data-route="/contact-us"] main > section:first-child h1 {
  max-width: 590px !important;
  font-size: clamp(2.65rem, 3.2vw, 3.35rem) !important;
  line-height: 1.02 !important;
}
body[data-route="/contact"] main > section:first-child > div:first-child > p:last-child,
body[data-route="/contact-us"] main > section:first-child > div:first-child > p:last-child {
  max-width: 560px !important;
}
body[data-route="/contact"] form,
body[data-route="/contact-us"] form {
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  body[data-route="/contact"] main > section:first-child,
  body[data-route="/contact-us"] main > section:first-child {
    display: grid !important;
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.75rem !important;
    padding-block: 2rem !important;
  }
  body[data-route="/contact"] main > section:first-child h1,
  body[data-route="/contact-us"] main > section:first-child h1 {
    max-width: 680px !important;
    font-size: clamp(2.25rem, 7vw, 3rem) !important;
  }
  body[data-route="/contact"] form,
  body[data-route="/contact-us"] form {
    padding: 1.5rem !important;
  }
}

/* Final responsive guard for the merged Facilities industry grid. */
body[data-route="/facilities"] .fn-merged-industries,
body[data-route="/multipurposewipes"] .fn-merged-industries {
  width: min(100%, 1120px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-inline: auto !important;
}
body[data-route="/facilities"] .fn-merged-industries > :last-child:nth-child(odd),
body[data-route="/multipurposewipes"] .fn-merged-industries > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, 552px);
  justify-self: center;
}
@media (max-width: 767px) {
  body[data-route="/facilities"] .fn-merged-industries,
  body[data-route="/multipurposewipes"] .fn-merged-industries {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-route="/facilities"] .fn-merged-industries > :last-child:nth-child(odd),
  body[data-route="/multipurposewipes"] .fn-merged-industries > :last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

/* Fix floating feature badges width to fit content */
.pointer-events-none > .pointer-events-auto.backdrop-blur-md.rounded-full {
  width: fit-content !important;
  max-width: max-content !important;
}

/* Homepage hero: remove the secondary "Get Free Samples" button. */
main > section:first-child [data-hero-reveal="true"].mt-8 > a[href="/contact-us/"] {
  display: none !important;
}

/* Secondary homepage CTA beside Order Now. */
body:has(#product) main > section:first-child [data-hero-reveal].mt-8 > a:last-child,
.fn-home main > section:first-child [data-hero-reveal].mt-8 > a:last-child {
  display: inline-block !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].mt-8 > a:last-child > span > span,
.fn-home main > section:first-child [data-hero-reveal].mt-8 > a:last-child > span > span {
  border-color: #52b84c !important;
  background: #52b84c !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(82, 184, 76, .22) !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].mt-8 > a:last-child:hover > span > span,
.fn-home main > section:first-child [data-hero-reveal].mt-8 > a:last-child:hover > span > span {
  background: #3c9d43 !important;
}

/* Homepage hero benefits: large icons with centered labels underneath. */
@media (min-width: 768px) {
  body:has(#product) main > section:first-child [data-hero-reveal].grid,
  .fn-home main > section:first-child [data-hero-reveal].grid {
    margin-left: 0 !important;
  }

  body:has(#product) main > section:first-child [data-hero-reveal].grid > div,
  .fn-home main > section:first-child [data-hero-reveal].grid > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  body:has(#product) main > section:first-child [data-hero-reveal].grid svg,
  .fn-home main > section:first-child [data-hero-reveal].grid svg {
    width: 46px !important;
    height: 46px !important;
  }

  body:has(#product) main > section:first-child [data-hero-reveal].grid span,
  .fn-home main > section:first-child [data-hero-reveal].grid span {
    max-width: 105px !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }
}

/* Lock the homepage visual section order. */
html body.fn-home main#main-content > * {
  order: 4 !important;
}

html body.fn-home main#main-content > #fn-mobile-hero {
  order: 0 !important;
}

html body.fn-home main#main-content > #product.fn-three-steps {
  order: 1 !important;
}

html body.fn-home main#main-content > #industries {
  order: 2 !important;
}

html body.fn-home main#main-content > .fn-home-benefits {
  order: 3 !important;
}

/* Functional mobile header navigation panel. */
.fn-mobile-nav-panel {
  display: none;
}

@media (max-width: 1023px) {
  html body > header .fn-mobile-nav-panel:not(#fn-mobile-menu-a):not(#fn-mobile-menu-b):not(#fn-mobile-menu-c) {
    position: fixed !important;
    top: 76px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    max-height: calc(100vh - 76px) !important;
    padding: .75rem 1rem 1rem !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    gap: .25rem !important;
    background: rgba(255, 255, 255, .98) !important;
    border-top: 1px solid #d9e3e7 !important;
    border-bottom: 1px solid #d9e3e7 !important;
    backdrop-filter: blur(12px) !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
    clip-path: none !important;
    pointer-events: none !important;
  }

  html body > header .fn-mobile-nav-panel.is-open:not(#fn-mobile-menu-a):not(#fn-mobile-menu-b):not(#fn-mobile-menu-c) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body > header .fn-mobile-nav-panel > a:not(#fn-mobile-menu-a):not(#fn-mobile-menu-b):not(#fn-mobile-menu-c) {
    width: 100% !important;
    min-height: 46px !important;
    padding: .75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0b4778 !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-transform: none !important;
    border-radius: 10px !important;
  }

  html body > header .fn-mobile-nav-panel > a:hover,
  html body > header .fn-mobile-nav-panel > a:focus {
    background: #eef8f1 !important;
    color: #3d9f45 !important;
  }

  html body > header .fn-mobile-nav-panel > .fn-mobile-nav-sample:not(#fn-mobile-menu-a):not(#fn-mobile-menu-b):not(#fn-mobile-menu-c) {
    margin-top: .35rem !important;
    color: #fff !important;
    background: #4fba49 !important;
    border-radius: 999px !important;
  }
}

/* Center the four numbered homepage story cards. */
html body.fn-home main#main-content .fn-selling-story-grid article:not(#fn-story-center-a):not(#fn-story-center-b):not(#fn-story-center-c) {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body.fn-home main#main-content .fn-selling-story-grid article h3:not(#fn-story-center-a):not(#fn-story-center-b):not(#fn-story-center-c),
html body.fn-home main#main-content .fn-selling-story-grid article p:not(#fn-story-center-a):not(#fn-story-center-b):not(#fn-story-center-c) {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body.fn-home main#main-content .fn-selling-story-grid article::before {
  width: 100% !important;
  text-align: center !important;
}

/* Short centered divider above the homepage benefit icons. */
body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid {
  position: relative !important;
  border-top: 0 !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].grid::before,
.fn-home main > section:first-child [data-hero-reveal].grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 68%;
  height: 1px;
  background: rgba(8, 47, 73, .2);
  transform: none;
}

/* Keep every homepage hero content block on one shared left edge. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body:has(#product) main > section:first-child .eyebrow,
body:has(#product) main > section:first-child h1,
body:has(#product) main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
.fn-home main > section:first-child .eyebrow,
.fn-home main > section:first-child h1,
.fn-home main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].mt-8 {
  align-self: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].grid > div,
.fn-home main > section:first-child [data-hero-reveal].grid > div {
  align-items: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
  transform: none !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].grid span,
.fn-home main > section:first-child [data-hero-reveal].grid span {
  text-align: left !important;
}

/* Product benefit badges positioned around the pack in the homepage hero. */
body:has(#product) main > section:first-child {
  overflow: hidden !important;
}

body.fn-home main {
  display: flex;
  flex-direction: column;
}

body.fn-home main > * {
  width: 100%;
  order: 2;
}

body.fn-home main > section:first-child {
  order: 0;
}

body.fn-home main > .fn-home-benefits {
  order: 1;
}

body.fn-home .fn-home-benefits {
  min-height: 300px;
  padding-block: 1.25rem !important;
}

body.fn-home .fn-home-benefits .fn-facility-benefit-grid {
  gap: 1.1rem;
}

body.fn-home .fn-home-benefits [data-benefit-card] {
  min-height: 215px;
  padding: 1rem !important;
}

body.fn-home .fn-home-benefits [data-benefit-card] img {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: .65rem;
}

body.fn-home .fn-home-benefits [data-benefit-card] h2 {
  min-height: 2.35rem;
  font-size: 1rem !important;
}

body.fn-home .fn-home-benefits [data-benefit-card] p {
  min-height: 2.2rem;
  margin-top: .4rem;
  font-size: .88rem;
}

body[data-route="/facilities"] .fn-facility-benefits,
body[data-route="/multipurposewipes"] .fn-facility-benefits {
  padding-block: 1.25rem !important;
}

body[data-route="/facilities"] .fn-facility-benefit-grid,
body[data-route="/multipurposewipes"] .fn-facility-benefit-grid {
  gap: 1.1rem;
}

body[data-route="/facilities"] .fn-facility-benefits [data-benefit-card],
body[data-route="/multipurposewipes"] .fn-facility-benefits [data-benefit-card] {
  min-height: 215px;
  padding: 1rem !important;
}

body[data-route="/facilities"] .fn-facility-benefits [data-benefit-card] img,
body[data-route="/multipurposewipes"] .fn-facility-benefits [data-benefit-card] img {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: .65rem;
}

body[data-route="/facilities"] .fn-facility-benefits [data-benefit-card] h2,
body[data-route="/multipurposewipes"] .fn-facility-benefits [data-benefit-card] h2 {
  min-height: 2.35rem;
  font-size: 1rem !important;
}

body[data-route="/facilities"] .fn-facility-benefits [data-benefit-card] p,
body[data-route="/multipurposewipes"] .fn-facility-benefits [data-benefit-card] p {
  min-height: 2.2rem;
  margin-top: .4rem;
  font-size: .88rem;
}

.hero-product-badges {
  display: none !important;
  position: absolute;
  inset: auto auto -78px 50%;
  display: flex;
  width: min(1180px, 94vw);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero-product-badge {
  position: relative;
  display: flex;
  width: min(260px, 22vw);
  box-sizing: border-box;
  align-items: center;
  gap: .55rem;
  min-height: 50px;
  padding: .55rem .9rem .55rem .6rem;
  border: 1px solid rgba(11, 71, 120, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 36px rgba(8, 47, 73, .13);
  color: #0b4778;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.hero-product-badge-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  background: #eefbf4;
  color: #52b84c;
  font-size: 1rem;
  font-weight: 900;
}

.hero-product-badge-top-left,
.hero-product-badge-top-right,
.hero-product-badge-bottom-left,
.hero-product-badge-bottom-right {
  inset: auto;
}

.hero-product-badge-top-left,
.hero-product-badge-top-right,
.hero-product-badge-bottom-left,
.hero-product-badge-bottom-right { top: auto; }

@media (max-width: 1199px) {
  .hero-product-badges {
    right: auto;
    left: 50%;
    width: 96vw;
    gap: 12px;
  }
  .hero-product-badge {
    width: min(230px, 22.5vw);
    min-height: 48px;
    padding: .5rem .85rem .5rem .55rem;
    font-size: .63rem;
  }
  .hero-product-badge-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: .95rem;
  }
}

@media (max-width: 767px) {
  .hero-product-badges { display: none; }
}

/* Homepage three-step product ritual. */
#product.fn-three-steps {
  padding: clamp(3rem, 4vw, 4rem) 0 !important;
  background: #ffffff !important;
}

#product.fn-three-steps .section-shell {
  display: block !important;
}

#product.fn-three-steps .fn-three-steps-heading {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

#product.fn-three-steps .fn-three-steps-heading .eyebrow {
  margin: 0 0 .8rem !important;
  color: #52b84c !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

#product.fn-three-steps .fn-three-steps-heading h2 {
  max-width: 900px !important;
  margin: 0 auto !important;
  color: #082f49 !important;
  font-size: clamp(2.1rem, 3.3vw, 3.7rem) !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

#product.fn-three-steps .fn-three-steps-grid {
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  margin-top: clamp(1.75rem, 2.5vw, 2.5rem) !important;
  padding: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.75rem) !important;
  text-align: left !important;
  overflow: visible !important;
}

#product.fn-three-steps .fn-step-card {
  min-width: 0;
  position: relative;
}

#product.fn-three-steps .fn-step-card > img {
  display: block !important;
  width: 100% !important;
  height: clamp(210px, 18vw, 300px) !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  box-shadow: 0 16px 40px rgba(8, 47, 73, .1) !important;
  transform: none !important;
}

#product.fn-three-steps .fn-step-copy {
  display: block;
  margin-top: 1.9rem;
  padding-inline: .75rem;
  text-align: center;
}

#product.fn-three-steps .fn-step-number {
  display: grid;
  position: absolute;
  top: calc(clamp(210px, 18vw, 300px) - 26px);
  left: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: #52b84c;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 12px 24px rgba(82, 184, 76, .26);
}

#product.fn-three-steps .fn-step-copy h3 {
  display: inline-block;
  margin: 0 !important;
  padding-bottom: .25rem;
  border-bottom: 3px solid #52b84c;
  color: #082f49 !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#product.fn-three-steps .fn-step-copy p {
  max-width: 320px;
  margin: .65rem auto 0 !important;
  color: #4e6672 !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

@media (max-width: 767px) {
  #product.fn-three-steps {
    padding: 3.75rem 0 !important;
  }

  #product.fn-three-steps .fn-three-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  #product.fn-three-steps .fn-step-card > img {
    height: clamp(120px, 24vw, 210px) !important;
  }

  #product.fn-three-steps .fn-step-copy {
    margin-top: 1.3rem;
    padding-inline: .25rem;
  }

  #product.fn-three-steps .fn-step-number {
    top: calc(clamp(120px, 24vw, 210px) - 18px);
    width: 36px;
    height: 36px;
    font-size: .9rem;
  }

  #product.fn-three-steps .fn-step-copy h3 {
    font-size: clamp(.95rem, 3.2vw, 1.25rem) !important;
  }

  #product.fn-three-steps .fn-step-copy p {
    font-size: clamp(.68rem, 2.2vw, .85rem) !important;
    line-height: 1.35 !important;
  }
}

/* Override the legacy homepage product flex layout: these three steps stay in one row. */
body:has(#product) #product.fn-three-steps .section-shell > .fn-three-steps-grid,
.fn-home #product.fn-three-steps .section-shell > .fn-three-steps-grid {
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  flex-direction: initial !important;
  align-items: initial !important;
  justify-content: initial !important;
  text-align: left !important;
  overflow: visible !important;
}

body:has(#product) #product.fn-three-steps .section-shell > .fn-three-steps-heading,
.fn-home #product.fn-three-steps .section-shell > .fn-three-steps-heading {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Consolidated industry lineup based on the approved commercial audience. */
.fn-approved-industries {
  padding-block: clamp(3rem, 5vw, 5rem) !important;
  background: #f7faf8 !important;
}

.fn-approved-industries-heading {
  max-width: 850px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.fn-approved-industries-heading .eyebrow {
  margin-bottom: .75rem;
  color: #52b84c !important;
}

.fn-approved-industries-heading h2 {
  color: #0b4778 !important;
  font-size: clamp(2rem, 4vw, 3.8rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.fn-approved-industries-heading > p:last-child {
  max-width: 700px;
  margin: 1rem auto 0;
  color: #4e6672;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
}

.fn-approved-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.fn-approved-industry-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(11, 71, 120, .10);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 71, 120, .07);
  color: inherit;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fn-approved-industry-card:hover {
  z-index: 2;
  border-color: rgba(82, 184, 76, .38);
  box-shadow: 0 20px 42px rgba(11, 71, 120, .13);
  transform: translateY(-6px);
}

.fn-approved-industry-image {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #eaf1ed;
}

.fn-approved-industry-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 25, 37, .12));
  pointer-events: none;
}

.fn-approved-industry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.fn-approved-industry-card:hover .fn-approved-industry-image img {
  transform: scale(1.045);
}

.fn-approved-industry-copy {
  display: flex;
  min-height: 205px;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

.fn-approved-industry-copy h3 {
  margin: 0;
  color: #0b4778 !important;
  font-size: 1.06rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
}

.fn-approved-industry-copy p {
  margin: .75rem 0 1rem;
  color: #5c707a !important;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.55;
}

.fn-approved-industry-copy > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  color: #28773b;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fn-approved-industry-copy > span > span {
  transition: transform .25s ease;
}

.fn-approved-industry-card:hover .fn-approved-industry-copy > span > span {
  transform: translateX(4px);
}

.fn-approved-industries-note {
  margin: 1.5rem auto 0;
  color: #71838b;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}

/* Compact homepage industry gallery. */
.fn-home .fn-approved-industries.fn-home-industries-compact,
body:has(#product) .fn-approved-industries.fn-home-industries-compact {
  padding-block: clamp(2.75rem, 4vw, 4rem) !important;
  background: #ffffff !important;
}

.fn-home-industries-compact .fn-approved-industries-heading {
  max-width: 900px !important;
  margin: 0 auto 2rem !important;
  text-align: center !important;
}

.fn-home-industries-compact .fn-approved-industries-heading .eyebrow {
  display: none !important;
}

.fn-home-industries-compact .fn-approved-industries-heading h2 {
  margin: 0 !important;
  color: #082f49 !important;
  font-size: clamp(1.65rem, 2.8vw, 2.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

.fn-home-industry-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.fn-home-industry-card {
  position: relative !important;
  display: block !important;
  height: 220px !important;
  overflow: hidden !important;
  border: 1px solid rgba(8, 47, 73, .12) !important;
  border-radius: 12px !important;
  background: #dfe8e3 !important;
  box-shadow: 0 12px 28px rgba(8, 47, 73, .1) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.fn-home-industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(4, 22, 34, .82) 100%);
  pointer-events: none;
}

.fn-home-industry-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .35s ease !important;
}

.fn-home-industry-card:hover img {
  transform: scale(1.04) !important;
}

.fn-home-industry-card > span {
  position: absolute !important;
  right: 1.1rem;
  bottom: 1rem;
  left: 1.1rem;
  z-index: 1;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.fn-home-industries-button {
  display: table !important;
  margin: 1.75rem auto 0 !important;
  padding: .85rem 1.6rem !important;
  border: 1px solid #0b4778 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #0b4778 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background .25s ease, color .25s ease !important;
}

.fn-home-industries-button:hover {
  background: #0b4778 !important;
  color: #ffffff !important;
}

/* Products page technology story: centered copy with feature cards underneath. */
.fn-product-technology {
  padding-block: clamp(3.5rem, 5vw, 5rem) !important;
}

.fn-product-technology-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

.fn-product-technology-copy {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.fn-product-technology-copy h2 {
  max-width: 820px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.fn-product-technology-copy > p {
  max-width: 780px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.fn-product-technology-copy > div {
  max-width: 780px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.fn-product-technology-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 2.5rem auto 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  text-align: left !important;
}

@media (max-width: 639px) {
  .fn-product-technology-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@media (max-width: 767px) {
  .fn-home-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
  .fn-home-industry-card {
    height: 145px !important;
  }
  .fn-home-industry-card > span {
    right: .75rem;
    bottom: .7rem;
    left: .75rem;
    font-size: .78rem !important;
  }
}

@media (max-width: 1023px) {
  .fn-approved-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final heading-color guard: navy on light content, white on dark sections. */
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6 {
  color: #0b4778 !important;
}

html body main section.text-white h1,
html body main section.text-white h2,
html body main section.text-white h3,
html body main section.text-white h4,
html body main section.text-white h5,
html body main section.text-white h6 {
  color: #ffffff !important;
}

/* Homepage hero uses natural title case. */
html body.fn-home main#main-content > section:first-child h1 {
  text-transform: none !important;
}

/* About story: centered introduction with the two detail boxes underneath. */
html body[data-route="/about-us"] main#main-content > .fn-about-story-stacked {
  display: block !important;
  width: min(1180px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.fn-about-story-stacked > div:first-child {
  max-width: 900px !important;
  margin: 0 auto 2.25rem !important;
  text-align: center !important;
}

.fn-about-story-stacked > div:first-child > p:not(.eyebrow) {
  max-width: 860px !important;
  margin-inline: auto !important;
}

.fn-about-story-stacked > div:last-child {
  display: grid !important;
  max-width: 920px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  margin-inline: auto !important;
  text-align: left !important;
}

/* About marketplaces: navy heading and a centered wrapping logo row. */
html body[data-route="/about-us"] main#main-content > .fn-marketplace-section h2 {
  color: #0b4778 !important;
}

/* Final mobile composition: portrait hero plus compact two-card rows. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-bg] .hero-static-image,
  html body:has(#product) main#main-content > section:first-child [data-hero-bg] .hero-static-image {
    content: url('/images/hero-product-banner-mobile.jpeg') !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .fn-selling-story-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  .fn-selling-story-grid article {
    min-height: 250px !important;
    padding: 1.1rem .7rem !important;
  }

  .fn-selling-story-grid article::before {
    margin-bottom: .65rem !important;
    font-size: .68rem !important;
  }

  .fn-selling-story-grid h3 {
    font-size: .86rem !important;
    line-height: 1.16 !important;
  }

  .fn-selling-story-grid p {
    margin-top: .6rem !important;
    font-size: .7rem !important;
    line-height: 1.42 !important;
  }

  body.fn-home .fn-home-benefits .fn-facility-benefit-grid,
  body[data-route="/facilities"] .fn-facility-benefit-grid,
  body[data-route="/multipurposewipes"] .fn-facility-benefit-grid {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  body.fn-home .fn-home-benefits [data-benefit-card],
  body[data-route="/facilities"] .fn-facility-benefits [data-benefit-card],
  body[data-route="/multipurposewipes"] .fn-facility-benefits [data-benefit-card] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 155px !important;
    margin: 0 !important;
    padding: .85rem .5rem !important;
  }
}

/* About marketplaces: force a centered wrapping logo group on every row. */
html body[data-route="/about-us"] .fn-marketplace-section h2,
html body[data-route="/about-us"] .fn-marketplace-section h2 * {
  color: #0b4778 !important;
}

.fn-marketplace-section .fn-marketplace-logo-grid {
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

.fn-marketplace-section .fn-marketplace-logo-grid > * {
  width: min(180px, calc(50% - .5rem)) !important;
  flex: 0 0 min(180px, calc(50% - .5rem)) !important;
}

@media (max-width: 767px) {
  /* Match the mobile hero to the portrait artwork instead of a viewport-height crop. */
  html body.fn-home main#main-content > section:first-child,
  html body:has(#product) main#main-content > section:first-child {
    height: clamp(760px, 133.93vw, 980px) !important;
    min-height: 760px !important;
    max-height: 980px !important;
  }

  html body.fn-home main#main-content > section:first-child .section-shell,
  html body:has(#product) main#main-content > section:first-child .section-shell {
    padding-top: 5rem !important;
    padding-bottom: 1.25rem !important;
  }

  html body.fn-home main#main-content > section:first-child h1,
  html body:has(#product) main#main-content > section:first-child h1 {
    font-size: clamp(2.15rem, 9vw, 3rem) !important;
    line-height: .95 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-5,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-5 {
    max-width: 290px !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    margin-top: .7rem !important;
    column-gap: .65rem !important;
    row-gap: .4rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid svg {
    width: 27px !important;
    height: 27px !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    font-size: .7rem !important;
    line-height: 1.05 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 {
    gap: .65rem !important;
    margin-top: .85rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    min-height: 46px !important;
    padding: .75rem 1.25rem !important;
    font-size: .7rem !important;
  }

  /* Defeat the legacy half-width flex rule inside the new two-column grid. */
  html body.fn-home:has(#product) .fn-home-benefits .fn-facility-benefit-grid > [data-benefit-card],
  html body[data-route="/facilities"] .fn-facility-benefits .fn-facility-benefit-grid > [data-benefit-card],
  html body[data-route="/multipurposewipes"] .fn-facility-benefits .fn-facility-benefit-grid > [data-benefit-card] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  html body.fn-home:has(#product) .fn-home-benefits .section-shell,
  html body[data-route="/facilities"] .fn-facility-benefits .section-shell,
  html body[data-route="/multipurposewipes"] .fn-facility-benefits .section-shell {
    width: min(100% - 24px, 1280px) !important;
  }
}

@media (max-width: 767px) {
  /* Short mobile banner requested: keep the full message without a page-tall hero. */
  html body.fn-home main#main-content > section:first-child,
  html body:has(#product) main#main-content > section:first-child {
    height: clamp(560px, 118vw, 640px) !important;
    min-height: 560px !important;
    max-height: 640px !important;
  }

  html body.fn-home main#main-content > section:first-child .section-shell,
  html body:has(#product) main#main-content > section:first-child .section-shell {
    align-items: flex-end !important;
    padding-top: 4.5rem !important;
    padding-bottom: .8rem !important;
  }

  html body.fn-home main#main-content > section:first-child h1,
  html body:has(#product) main#main-content > section:first-child h1 {
    max-width: 340px !important;
    font-size: clamp(1.8rem, 8vw, 2.3rem) !important;
    line-height: .92 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-5,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-5 {
    max-width: 250px !important;
    margin-top: .55rem !important;
    font-size: .78rem !important;
    line-height: 1.17 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    max-width: 330px !important;
    margin-top: .55rem !important;
    column-gap: .5rem !important;
    row-gap: .3rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    gap: .25rem !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid svg {
    width: 22px !important;
    height: 22px !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    max-width: 7rem !important;
    font-size: .58rem !important;
    line-height: 1.05 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    margin-top: .65rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    min-height: 40px !important;
    padding: .6rem .9rem !important;
    font-size: .58rem !important;
  }

  /* Technology benefits: two readable cards per row on phones. */
  html body.fn-home .fn-technology-grid,
  html body:has(#product) .fn-technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  html body.fn-home .fn-technology-card,
  html body:has(#product) .fn-technology-card {
    min-height: 150px !important;
    padding: .85rem .65rem !important;
  }

  html body.fn-home .fn-technology-card > p,
  html body:has(#product) .fn-technology-card > p {
    font-size: .74rem !important;
    line-height: 1.25 !important;
  }
}

.fn-marketplace-section .section-shell > div.grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

.fn-marketplace-section .section-shell > div.grid > div {
  width: min(180px, calc(50% - .5rem)) !important;
  flex: 0 0 min(180px, calc(50% - .5rem)) !important;
}

@media (max-width: 639px) {
  html body[data-route="/about-us"] main#main-content > .fn-about-story-stacked {
    width: min(100% - 28px, 1180px) !important;
  }

  .fn-about-story-stacked > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* Use-case pages begin with a clean, centered comparison after hero removal. */
html body.fn-inner[data-route] main#main-content > section.fn-use-case-comparison:first-child {
  position: relative !important;
  display: block !important;
  align-items: initial !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2.75rem 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0d2b3c !important;
}

html body.fn-inner[data-route] main#main-content > section.fn-use-case-comparison:first-child::before {
  display: none !important;
  content: none !important;
}

html body.fn-inner[data-route] main#main-content > section.fn-use-case-comparison:first-child > .section-shell {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.fn-comparison-row > div {
  justify-content: center;
  text-align: center;
}

.fn-comparison-row:not(.fn-comparison-header) .fn-comparison-cloths {
  justify-content: flex-start !important;
  text-align: left !important;
}

.fn-use-case-mid-cta {
  padding: 1.35rem 0 1.75rem !important;
  background: #ffffff !important;
}

.fn-use-case-mid-cta > .section-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.fn-use-case-mid-cta a {
  display: inline-flex;
  min-width: 220px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: .9rem 1.6rem;
  border-radius: 7px;
  color: #ffffff !important;
  font-size: .83rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(13, 43, 60, .13);
  transition: transform 180ms ease, filter 180ms ease;
}

.fn-use-case-mid-cta a:hover {
  transform: translateY(-2px);
  filter: brightness(.94);
}

.fn-use-case-buy-button {
  background: #0f4f7f;
}

.fn-use-case-buy-button span {
  font-size: 1.35rem;
  line-height: 1;
}

.fn-use-case-sample-button {
  background: #52b84c;
}

@media (max-width: 540px) {
  .fn-use-case-mid-cta > .section-shell {
    width: min(100% - 28px, 460px) !important;
    flex-direction: column;
  }

  .fn-use-case-mid-cta a {
    width: 100%;
  }
}

@media (max-width: 639px) {
  html body.fn-inner[data-route] main#main-content > section.fn-use-case-comparison:first-child {
    padding: 2rem 0 !important;
  }

  html body.fn-inner[data-route] main#main-content > section.fn-use-case-comparison:first-child > .section-shell {
    width: min(100% - 28px, 1180px) !important;
  }
}

/* Stack the use-case surface heading above a centered grid of cards. */
.fn-use-case-surfaces > .section-shell {
  display: block !important;
  width: min(1180px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.fn-use-case-surfaces > .section-shell > div:first-child {
  max-width: 900px !important;
  margin: 0 auto 1.75rem !important;
  text-align: center !important;
}

.fn-use-case-surfaces > .section-shell > div:first-child h2 {
  max-width: none !important;
  margin-inline: auto !important;
  font-size: clamp(2.25rem, 4vw, 3.75rem) !important;
  line-height: 1.02 !important;
}

.fn-use-case-surfaces > .section-shell > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
}

.fn-use-case-surfaces > .section-shell > div:last-child > div {
  min-height: 138px !important;
  padding: 1.4rem !important;
  text-align: center !important;
}

.fn-use-case-surfaces > .section-shell > div:last-child svg {
  margin-inline: auto !important;
}

.fn-surface-check {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 2px solid #48b84f;
  border-radius: 999px;
  color: #48b84f;
  font-size: .78rem;
  font-weight: 900;
}

@media (max-width: 639px) {
  .fn-use-case-surfaces > .section-shell {
    width: min(100% - 28px, 1180px) !important;
  }

  .fn-use-case-surfaces > .section-shell > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fn-use-case-surfaces > .section-shell > div:last-child > div {
    min-height: 118px !important;
    padding: 1rem !important;
  }
}

/* One uniform Freshnaps navy for headings across all main page content. */
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6 {
  color: #0b4778 !important;
}

html body main section.text-white h1,
html body main section.text-white h2,
html body main section.text-white h3,
html body main section.text-white h4,
html body main section.text-white h5,
html body main section.text-white h6 {
  color: #ffffff !important;
}

/* Compact Products-page cards without removing product details. */
html body[data-route="/products"] main#main-content > section:nth-child(2) article > div:first-child {
  height: 180px !important;
  aspect-ratio: auto !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article > div:first-child img {
  object-fit: contain !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article > div:nth-child(2) {
  padding: 1.25rem !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article h3 + p {
  margin-top: .5rem !important;
  font-size: .8rem !important;
  line-height: 1.45 !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article h3 + p + div {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article h4 {
  margin-bottom: .75rem !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article ul {
  gap: .55rem !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article li span:last-child {
  font-size: .78rem !important;
  line-height: 1.3 !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article > div:nth-child(2) > div:last-child {
  margin-top: 1rem !important;
  padding-top: 0 !important;
}

html body[data-route="/products"] main#main-content > section:nth-child(2) article > div:nth-child(2) > div:last-child a > span > span {
  min-height: 44px !important;
  padding-block: .65rem !important;
}

/* Shared hero actions on every individual use-case page. */
.fn-use-case-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem !important;
}

.fn-use-case-order {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.6rem;
  border-radius: 6px;
  background: #52b84c;
  color: #ffffff !important;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color 180ms ease, transform 180ms ease;
}

.fn-use-case-order:hover {
  background: #3c9150;
  transform: translateY(-2px);
}

/* Text-only comparison used across individual use-case pages. */
.fn-use-case-comparison {
  padding: 2.75rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.fn-comparison-heading {
  margin-bottom: 1.5rem;
  text-align: center;
}

.fn-comparison-heading .eyebrow {
  color: #3c9150;
}

.fn-comparison-heading h2 {
  margin-top: .45rem;
  color: #0d2b3c;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 900;
  line-height: 1.08;
  text-transform: none;
}

.fn-comparison-table {
  overflow: hidden;
  border: 1px solid #dbe5eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(13, 43, 60, .08);
}

.fn-comparison-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border-bottom: 1px solid #e3eaee;
  color: #314d5c;
  font-size: .98rem;
  line-height: 1.35;
}

.fn-comparison-row:last-child {
  border-bottom: 0;
}

.fn-comparison-row > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.15rem;
}

.fn-comparison-feature {
  color: #0d2b3c;
  font-weight: 750;
}

.fn-comparison-freshnaps {
  border-inline: 1px solid #e3eaee;
  background: rgba(11, 71, 120, .045);
}

.fn-comparison-header {
  color: #0d2b3c;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.fn-comparison-header > div {
  min-height: 58px;
}

.fn-comparison-header .fn-comparison-freshnaps {
  color: #0b4778;
}

.fn-comparison-yes,
.fn-comparison-no {
  display: inline-flex;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

.fn-comparison-yes {
  background: #48b84f;
}

.fn-comparison-no {
  background: #ef513f;
}

@media (max-width: 700px) {
  .fn-use-case-comparison {
    padding: 2rem 0;
  }

  .fn-comparison-heading {
    margin-bottom: 1.15rem;
  }

  .fn-comparison-row {
    grid-template-columns: 1fr 1fr;
    font-size: .84rem;
  }

  .fn-comparison-row > div {
    padding: .72rem .7rem;
  }

  .fn-comparison-row:not(.fn-comparison-header) .fn-comparison-feature {
    grid-column: 1 / -1;
    border-bottom: 1px solid #edf2f4;
    background: #f8fafb;
    padding-block: .58rem;
  }

  .fn-comparison-header {
    grid-template-columns: 1fr 1fr;
    font-size: .68rem;
  }

  .fn-comparison-header .fn-comparison-feature {
    display: none;
  }

  .fn-comparison-freshnaps {
    border-left: 0;
  }

  .fn-comparison-cloths {
    border-left: 1px solid #e3eaee;
  }
}

@media (max-width: 639px) {
  .fn-approved-industries {
    padding-block: 2.5rem !important;
  }
  .fn-approved-industries-heading {
    margin-bottom: 1.75rem;
  }
  .fn-approved-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .fn-approved-industry-image {
    height: 118px;
  }
  .fn-approved-industry-copy {
    min-height: 205px;
    padding: .85rem;
  }
  .fn-approved-industry-copy h3 {
    font-size: .9rem !important;
    line-height: 1.18 !important;
  }
  .fn-approved-industry-copy p {
    margin: .6rem 0 .8rem;
    font-size: .7rem;
    line-height: 1.45;
  }
  .fn-approved-industry-copy > span {
    gap: .3rem;
    font-size: .58rem;
    letter-spacing: .055em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-approved-industry-card,
  .fn-approved-industry-image img,
  .fn-approved-industry-copy > span > span {
    transition: none !important;
  }
}

/* Final site-wide compact spacing rhythm. */
body:not(.fn-home) main {
  padding-top: 98px !important;
}

body.fn-home main > section:not(:first-child),
body.fn-home main > div > section,
body.fn-inner main > section:not(:first-child) {
  padding-top: clamp(1.75rem, 2.25vw, 2.25rem) !important;
  padding-bottom: clamp(1.75rem, 2.25vw, 2.25rem) !important;
}

body.fn-home #product {
  padding-block: clamp(2rem, 2.5vw, 2.5rem) !important;
}

body.fn-home .fn-home-benefits,
body[data-route="/facilities"] .fn-facility-benefits,
body[data-route="/multipurposewipes"] .fn-facility-benefits {
  padding-block: 1.25rem !important;
}

body.fn-home .fn-selling-story,
body.fn-home .fn-use-ritual,
body[data-route="/facilities"] .fn-selling-story,
body[data-route="/multipurposewipes"] .fn-selling-story {
  padding-block: 2rem !important;
}

body[data-route="/industries"] main > section:first-child,
body[data-route="/about-us"] main > .fn-about-values-first,
body[data-route="/contact"] main > section:first-child,
body[data-route="/contact-us"] main > section:first-child,
body[data-route="/sample-request"] main > section:first-child {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

body[data-route="/facilities"] main > section:first-child,
body[data-route="/multipurposewipes"] main > section:first-child {
  padding-top: 2.25rem !important;
  padding-bottom: 2rem !important;
}

html body.fn-home main#main-content > #industries {
  padding-block: 2.25rem !important;
}

html body.fn-home main#main-content > .fn-home-benefits,
html body[data-route="/facilities"] main#main-content > .fn-facility-benefits,
html body[data-route="/multipurposewipes"] main#main-content > .fn-facility-benefits {
  padding-block: 1.25rem !important;
}

html body.fn-home main#main-content > .fn-selling-story,
html body.fn-home main#main-content > .fn-use-ritual,
html body[data-route="/facilities"] main#main-content > .fn-selling-story,
html body[data-route="/multipurposewipes"] main#main-content > .fn-selling-story {
  padding-block: 2rem !important;
}

html body[data-route="/facilities"] main#main-content > section:first-child,
html body[data-route="/multipurposewipes"] main#main-content > section:first-child {
  padding-top: 2.25rem !important;
  padding-bottom: 2rem !important;
}

main section > .section-shell > div[class~="mb-16"],
main section > .section-shell > div[class~="mb-12"],
main > section > div[class~="mb-16"],
main > section > div[class~="mb-12"] {
  margin-bottom: 2rem !important;
}

@media (max-width: 1023px) {
  body:not(.fn-home) main {
    padding-top: 72px !important;
  }

  body.fn-home main > section:not(:first-child),
  body.fn-home main > div > section,
  body.fn-inner main > section:not(:first-child) {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
}

/* Absolute final heading palette guard. */
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6 {
  color: #0b4778 !important;
}

html body main section.text-white:not(.fn-marketplace-section) h1,
html body main section.text-white:not(.fn-marketplace-section) h2,
html body main section.text-white:not(.fn-marketplace-section) h3,
html body main section.text-white:not(.fn-marketplace-section) h4,
html body main section.text-white:not(.fn-marketplace-section) h5,
html body main section.text-white:not(.fn-marketplace-section) h6 {
  color: #ffffff !important;
}

html body[data-route="/about-us"] main#main-content > .fn-marketplace-section h2 {
  color: #0b4778 !important;
}


/* Homepage hero: soft white tint behind the copy for clearer readability. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  padding: clamp(1.1rem, 2.1vw, 2rem) clamp(1rem, 2.7vw, 2.35rem) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .76) 62%, rgba(255, 255, 255, .42) 100%) !important;
  box-shadow: 0 22px 70px rgba(8, 47, 73, .13) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid {
  border-top-color: rgba(8, 47, 73, .16) !important;
}

@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child .section-shell > div,
  html body:has(#product) main#main-content > section:first-child .section-shell > div {
    padding: .9rem .95rem !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 14px 40px rgba(8, 47, 73, .12) !important;
  }
}

/* Homepage hero lead: two bold readable lines. */
body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child p[data-hero-reveal] {
  font-weight: 800 !important;
  line-height: 1.28 !important;
}

body:has(#product) main > section:first-child p[data-hero-reveal] strong,
.fn-home main > section:first-child p[data-hero-reveal] strong {
  display: block;
  font-weight: 800;
}

/* Homepage hero tint: keep the white overlay contained to the copy area only. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  padding: clamp(1rem, 1.8vw, 1.75rem) clamp(1rem, 2.25vw, 2rem) !important;
  background: rgba(255, 255, 255, .84) !important;
}

body:has(#product) main > section:first-child h1,
.fn-home main > section:first-child h1 {
  max-width: 660px !important;
}

body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
.fn-home main > section:first-child [data-hero-reveal].mt-8 {
  max-width: 610px !important;
}

@media (min-width: 1024px) {
  body:has(#product) main > section:first-child .section-shell,
  .fn-home main > section:first-child .section-shell {
    justify-content: flex-start !important;
  }
}

/* Homepage hero tint: shrink-wrap to content with minimal empty space. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  width: fit-content !important;
  max-width: min(calc(100vw - 32px), 610px) !important;
  padding: clamp(.95rem, 1.55vw, 1.45rem) clamp(1rem, 1.85vw, 1.55rem) !important;
}

body:has(#product) main > section:first-child h1,
.fn-home main > section:first-child h1 {
  max-width: 560px !important;
}

body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
.fn-home main > section:first-child [data-hero-reveal].mt-8 {
  max-width: 560px !important;
}

@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child .section-shell > div,
  html body:has(#product) main#main-content > section:first-child .section-shell > div {
    width: fit-content !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* Homepage hero tint: final tighter content fit. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  max-width: min(calc(100vw - 32px), 490px) !important;
  padding-left: clamp(.9rem, 1.25vw, 1.2rem) !important;
  padding-right: clamp(.9rem, 1.25vw, 1.2rem) !important;
}

body:has(#product) main > section:first-child h1,
.fn-home main > section:first-child h1,
body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
.fn-home main > section:first-child [data-hero-reveal].mt-8 {
  max-width: 460px !important;
}

/* Homepage hero tint: slightly narrower final fit. */
body:has(#product) main > section:first-child .section-shell > div,
.fn-home main > section:first-child .section-shell > div {
  max-width: min(calc(100vw - 32px), 465px) !important;
  padding-left: clamp(.8rem, 1vw, 1rem) !important;
  padding-right: clamp(.8rem, 1vw, 1rem) !important;
}

body:has(#product) main > section:first-child h1,
.fn-home main > section:first-child h1,
body:has(#product) main > section:first-child p[data-hero-reveal],
.fn-home main > section:first-child p[data-hero-reveal],
body:has(#product) main > section:first-child [data-hero-reveal].grid,
.fn-home main > section:first-child [data-hero-reveal].grid,
body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
.fn-home main > section:first-child [data-hero-reveal].mt-8 {
  max-width: 445px !important;
}

/* Homepage hero heading: uppercase title treatment. */
body:has(#product) main > section:first-child h1,
.fn-home main > section:first-child h1 {
  text-transform: uppercase !important;
}

/* Force homepage hero title uppercase on every rendered span. */
html body.fn-home main#main-content > section:first-child h1,
html body.fn-home main#main-content > section:first-child h1 span,
html body:has(#product) main#main-content > section:first-child h1,
html body:has(#product) main#main-content > section:first-child h1 span,
body:has(#product) main > section:first-child h1,
body:has(#product) main > section:first-child h1 span,
.fn-home main > section:first-child h1,
.fn-home main > section:first-child h1 span {
  text-transform: uppercase !important;
}

/* Three-step cards: keep all copy centered and improve mobile readability. */
#product.fn-three-steps .fn-step-card,
#product.fn-three-steps .fn-step-copy {
  text-align: center !important;
}

#product.fn-three-steps .fn-step-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#product.fn-three-steps .fn-step-copy h3,
#product.fn-three-steps .fn-step-copy p {
  text-align: center !important;
}

@media (max-width: 767px) {
  #product.fn-three-steps .fn-step-copy {
    margin-top: 1.45rem !important;
    padding-inline: .15rem !important;
  }

  #product.fn-three-steps .fn-step-copy h3 {
    font-size: clamp(1.08rem, 4.2vw, 1.35rem) !important;
  }

  #product.fn-three-steps .fn-step-copy p {
    max-width: 10.5rem !important;
    font-size: clamp(.82rem, 3.45vw, 1rem) !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
  }
}

/* Technology cards: larger mobile paragraph text while keeping headings unchanged. */
@media (max-width: 767px) {
  html body.fn-home .fn-technology-card,
  html body:has(#product) .fn-technology-card {
    min-height: 180px !important;
    padding: 1rem .75rem !important;
  }

  html body.fn-home .fn-technology-card > p,
  html body:has(#product) .fn-technology-card > p {
    font-size: clamp(.9rem, 3.9vw, 1.05rem) !important;
    line-height: 1.34 !important;
    font-weight: 600 !important;
  }
}

/* Hero benefit icons: center icon and label pairs. */
body:has(#product) main > section:first-child [data-hero-reveal].grid > div,
.fn-home main > section:first-child [data-hero-reveal].grid > div {
  align-items: center !important;
  text-align: center !important;
  margin-left: 0 !important;
}

body:has(#product) main > section:first-child [data-hero-reveal].grid span,
.fn-home main > section:first-child [data-hero-reveal].grid span {
  text-align: center !important;
}

/* Mobile hero: lower the image focal point. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-bg] .hero-static-image,
  html body:has(#product) main#main-content > section:first-child [data-hero-bg] .hero-static-image {
    object-position: center 78% !important;
  }
}

/* Footer links: keep Industries, More Uses, and Company beside each other on mobile. */
footer .section-shell > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(.85rem, 3vw, 2rem) !important;
}

@media (max-width: 639px) {
  footer .section-shell {
    gap: 1.75rem !important;
  }

  footer .section-shell > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .8rem !important;
  }

  footer .section-shell > div:last-child h3 {
    font-size: .86rem !important;
    line-height: 1.2 !important;
  }

  footer .section-shell > div:last-child a {
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }
}

/* Mobile hero: use the supplied portrait pack image at its natural ratio. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child,
  html body:has(#product) main#main-content > section:first-child {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3584 / 5804 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-bg] .hero-static-image,
  html body:has(#product) main#main-content > section:first-child [data-hero-bg] .hero-static-image {
    content: url('/images/hero-mobile-freshnaps-pack.webp') !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Mobile hero: exact section height from the supplied image dimensions. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child,
  html body:has(#product) main#main-content > section:first-child {
    width: 100% !important;
    height: calc(100vw * 5804 / 3584) !important;
    min-height: calc(100vw * 5804 / 3584) !important;
    max-height: calc(100vw * 5804 / 3584) !important;
    aspect-ratio: 3584 / 5804 !important;
    overflow: hidden !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-bg],
  html body:has(#product) main#main-content > section:first-child [data-hero-bg],
  html body.fn-home main#main-content > section:first-child [data-hero-bg] .hero-static-image,
  html body:has(#product) main#main-content > section:first-child [data-hero-bg] .hero-static-image {
    height: 100% !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-bg] .hero-static-image,
  html body:has(#product) main#main-content > section:first-child [data-hero-bg] .hero-static-image {
    content: url('/images/hero-mobile-freshnaps-pack.webp') !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Mobile hero: center all card content and improve small text readability. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child .section-shell,
  html body:has(#product) main#main-content > section:first-child .section-shell {
    justify-content: center !important;
  }

  html body.fn-home main#main-content > section:first-child .section-shell > div,
  html body:has(#product) main#main-content > section:first-child .section-shell > div {
    margin-inline: auto !important;
    text-align: center !important;
    align-items: center !important;
  }

  html body.fn-home main#main-content > section:first-child h1,
  html body:has(#product) main#main-content > section:first-child h1 {
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(2.15rem, 9.4vw, 2.8rem) !important;
    line-height: .96 !important;
  }

  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: clamp(1.05rem, 4.35vw, 1.3rem) !important;
    line-height: 1.18 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: center !important;
    gap: .72rem 1.2rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    align-items: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid svg {
    width: 2.05rem !important;
    height: 2.05rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    max-width: 8.5rem !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(.8rem, 3.35vw, .98rem) !important;
    line-height: 1.1 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 {
    justify-content: center !important;
    align-items: center !important;
    gap: .65rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    font-size: clamp(.82rem, 3.25vw, .98rem) !important;
  }
}

/* Mobile hero: keep CTA buttons side by side. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .65rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a {
    flex: 1 1 0 !important;
    max-width: 10.25rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    width: 100% !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].mt-8 > a > span > span {
    padding: .85rem .55rem !important;
    white-space: nowrap !important;
    font-size: clamp(.72rem, 3vw, .9rem) !important;
  }
}

/* Mobile hero: show CLEAN RESET on one line. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child h1,
  html body:has(#product) main#main-content > section:first-child h1 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: .35rem !important;
    white-space: nowrap !important;
    font-size: clamp(1.95rem, 8.5vw, 2.55rem) !important;
    line-height: .95 !important;
  }

  html body.fn-home main#main-content > section:first-child h1 span,
  html body:has(#product) main#main-content > section:first-child h1 span {
    display: inline !important;
    white-space: nowrap !important;
  }
}

/* Mobile hero: center benefit icon grid precisely. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    width: min(100%, 18rem) !important;
    max-width: 18rem !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    justify-self: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile hero: center the divider above benefits. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-top-color: rgba(8, 47, 73, .16) !important;
    width: min(100%, 18rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile hero: replace drifting divider with a centered rule. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    position: relative !important;
    border-top: 0 !important;
    padding-top: 1.15rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid::before,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 68% !important;
    height: 1px !important;
    background: rgba(8, 47, 73, .18) !important;
    transform: none !important;
  }
}

/* Mobile hero: larger intro copy. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] {
    font-size: clamp(1.22rem, 5.15vw, 1.5rem) !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }
}

/* Mobile hero: increase section height for more breathing room. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child,
  html body:has(#product) main#main-content > section:first-child {
    height: calc(100vw * 5804 / 3584 * 1.13) !important;
    min-height: calc(100vw * 5804 / 3584 * 1.13) !important;
    max-height: none !important;
  }
}

/* Mobile hero: make intro copy larger and consistent across bold lines. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal],
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal] strong,
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] strong {
    font-size: clamp(1.34rem, 5.65vw, 1.62rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }
}

/* Mobile hero: hide headline inside card. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child h1,
  html body:has(#product) main#main-content > section:first-child h1 {
    display: none !important;
  }
}

/* Mobile hero: slightly larger benefit labels. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    font-size: clamp(.92rem, 3.8vw, 1.08rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
  }
}

/* Mobile hero: center benefits as one compact group. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid {
    display: grid !important;
    width: 15.75rem !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, 7rem) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 1.75rem !important;
    row-gap: .78rem !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    width: 7rem !important;
    align-items: center !important;
    justify-self: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    width: 7rem !important;
    max-width: 7rem !important;
    text-align: center !important;
  }
}

/* Mobile hero: tune intro copy to three readable lines. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] {
    max-width: 16rem !important;
    font-size: clamp(1.08rem, 4.65vw, 1.28rem) !important;
    line-height: 1.13 !important;
  }

  html body.fn-home main#main-content > section:first-child p[data-hero-reveal] strong,
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] strong {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* Mobile hero: larger three-line intro copy. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] {
    max-width: 19.75rem !important;
    font-size: clamp(1.18rem, 5vw, 1.4rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  html body.fn-home main#main-content > section:first-child p[data-hero-reveal] strong,
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] strong {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
  }
}

/* Mobile hero: force intro copy into three larger centered lines. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child p[data-hero-reveal],
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] {
    max-width: 18rem !important;
    font-size: clamp(1.32rem, 5.8vw, 1.62rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  html body.fn-home main#main-content > section:first-child p[data-hero-reveal] .fn-hero-copy-line,
  html body:has(#product) main#main-content > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) {
  .fn-hero-copy-line {
    display: block;
  }
}

/* Mobile hero: make benefit labels easier to read. */
@media (max-width: 767px) {
  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid span,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid span {
    font-size: clamp(1.02rem, 4.35vw, 1.22rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
  }

  html body.fn-home main#main-content > section:first-child [data-hero-reveal].grid svg,
  html body:has(#product) main#main-content > section:first-child [data-hero-reveal].grid svg {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}

/* Mobile hero repair: broad selectors for the live exported page. */
@media (max-width: 767px) {
  body.fn-home main > section:first-child h1,
  body:has(#product) main > section:first-child h1 {
    display: none !important;
  }

  body.fn-home main > section:first-child .eyebrow,
  body:has(#product) main > section:first-child .eyebrow {
    display: none !important;
  }

  body.fn-home main > section:first-child .section-shell,
  body:has(#product) main > section:first-child .section-shell {
    justify-content: center !important;
  }

  body.fn-home main > section:first-child .section-shell > div,
  body:has(#product) main > section:first-child .section-shell > div {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body.fn-home main > section:first-child p[data-hero-reveal],
  body:has(#product) main > section:first-child p[data-hero-reveal] {
    max-width: 18rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.22rem, 5.3vw, 1.48rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  body.fn-home main > section:first-child p[data-hero-reveal] .fn-hero-copy-line,
  body:has(#product) main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].grid,
  body:has(#product) main > section:first-child [data-hero-reveal].grid {
    display: grid !important;
    position: relative !important;
    width: 15.75rem !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 1.15rem !important;
    border-top: 0 !important;
    grid-template-columns: repeat(2, 7rem) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 1.75rem !important;
    row-gap: .78rem !important;
    text-align: center !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].grid::before,
  body:has(#product) main > section:first-child [data-hero-reveal].grid::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 68% !important;
    height: 1px !important;
    background: rgba(8, 47, 73, .18) !important;
    transform: none !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].grid > div,
  body:has(#product) main > section:first-child [data-hero-reveal].grid > div,
  body.fn-home main > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  body:has(#product) main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    width: 7rem !important;
    align-items: center !important;
    justify-self: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].grid svg,
  body:has(#product) main > section:first-child [data-hero-reveal].grid svg {
    width: 2.25rem !important;
    height: 2.25rem !important;
    margin-inline: auto !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].grid span,
  body:has(#product) main > section:first-child [data-hero-reveal].grid span {
    width: 7rem !important;
    max-width: 7rem !important;
    margin-inline: auto !important;
    font-size: clamp(1.02rem, 4.35vw, 1.22rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].mt-8,
  body:has(#product) main > section:first-child [data-hero-reveal].mt-8 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .65rem !important;
  }

  body.fn-home main > section:first-child [data-hero-reveal].mt-8 > a,
  body:has(#product) main > section:first-child [data-hero-reveal].mt-8 > a {
    flex: 1 1 0 !important;
    max-width: 10.25rem !important;
  }
}

/* Mobile hero: final readable text sizing on the live export. */
@media (max-width: 767px) {
  main > section:first-child p[data-hero-reveal] {
    max-width: 18.25rem !important;
    font-size: clamp(1.25rem, 5.4vw, 1.42rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
  }

  main > section:first-child [data-hero-reveal].grid {
    width: min(100%, 17.25rem) !important;
    grid-template-columns: repeat(2, minmax(7.55rem, 1fr)) !important;
    column-gap: .9rem !important;
    row-gap: .85rem !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > section:first-child [data-hero-reveal].grid > div,
  main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    width: 7.55rem !important;
    align-items: center !important;
    justify-self: center !important;
    text-align: center !important;
    gap: .42rem !important;
    margin: 0 !important;
  }

  main > section:first-child [data-hero-reveal].grid svg {
    width: 2.6rem !important;
    height: 2.6rem !important;
    margin-inline: auto !important;
  }

  main > section:first-child [data-hero-reveal].grid span {
    width: 7.55rem !important;
    max-width: 7.55rem !important;
    font-size: clamp(1.08rem, 4.8vw, 1.28rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  main > section:first-child [data-hero-reveal].mt-8 span span {
    font-size: .88rem !important;
    line-height: 1 !important;
  }
}

/* Mobile hero: left-align the card content. */
@media (max-width: 767px) {
  main > section:first-child .section-shell > div {
    text-align: left !important;
  }

  main > section:first-child p[data-hero-reveal] {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    text-align: left !important;
  }

  main > section:first-child [data-hero-reveal].grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  main > section:first-child [data-hero-reveal].grid::before {
    left: 0 !important;
    transform: none !important;
  }

  main > section:first-child [data-hero-reveal].grid > div,
  main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    align-items: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
  }

  main > section:first-child [data-hero-reveal].grid svg {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  main > section:first-child [data-hero-reveal].grid span {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main > section:first-child [data-hero-reveal].mt-8 {
    justify-content: flex-start !important;
  }
}

/* Mobile hero: force true left alignment inside the white card. */
@media (max-width: 767px) {
  html body:has(#product) main > section:first-child .section-shell > div,
  html body.fn-home main > section:first-child .section-shell > div {
    text-align: left !important;
  }

  html body:has(#product) main > section:first-child p[data-hero-reveal],
  html body.fn-home main > section:first-child p[data-hero-reveal] {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html body:has(#product) main > section:first-child p[data-hero-reveal] .fn-hero-copy-line,
  html body.fn-home main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    text-align: left !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].grid,
  html body.fn-home main > section:first-child [data-hero-reveal].grid {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(7.6rem, 1fr)) !important;
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].grid::before,
  html body.fn-home main > section:first-child [data-hero-reveal].grid::before {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].grid > div,
  html body:has(#product) main > section:first-child [data-hero-reveal].grid > div:nth-child(even),
  html body.fn-home main > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    width: 7.6rem !important;
    align-items: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].grid svg,
  html body.fn-home main > section:first-child [data-hero-reveal].grid svg {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].grid span,
  html body.fn-home main > section:first-child [data-hero-reveal].grid span {
    width: 7.6rem !important;
    max-width: 7.6rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body:has(#product) main > section:first-child [data-hero-reveal].mt-8,
  html body.fn-home main > section:first-child [data-hero-reveal].mt-8 {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}

/* Mobile hero: left alignment without :has so mobile browsers apply it. */
@media (max-width: 767px) {
  html body.fn-home main > section:first-child .section-shell > div {
    text-align: left !important;
  }

  html body.fn-home main > section:first-child p[data-hero-reveal] {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html body.fn-home main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    text-align: left !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].grid {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(7.6rem, 1fr)) !important;
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].grid::before {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    width: 7.6rem !important;
    align-items: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].grid svg {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].grid span {
    width: 7.6rem !important;
    max-width: 7.6rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body.fn-home main > section:first-child [data-hero-reveal].mt-8 {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}

/* Mobile hero: override older ID-strength center rules. */
@media (max-width: 767px) {
  html body.fn-home:not(#fn-left-align) main > section:first-child .section-shell > div {
    text-align: left !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child p[data-hero-reveal] {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child p[data-hero-reveal] .fn-hero-copy-line {
    display: block !important;
    text-align: left !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(7.6rem, 1fr)) !important;
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid::before {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid > div,
  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid > div:nth-child(even) {
    width: 7.6rem !important;
    align-items: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid svg {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].grid span {
    width: 7.6rem !important;
    max-width: 7.6rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body.fn-home:not(#fn-left-align) main > section:first-child [data-hero-reveal].mt-8 {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}

/* Mobile hero: ID-targeted left alignment. */
@media (max-width: 767px) {
  html body.fn-home main > section#fn-mobile-hero .section-shell > div {
    text-align: left !important;
  }

  html body.fn-home main > section#fn-mobile-hero p[data-hero-reveal] {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html body.fn-home main > section#fn-mobile-hero p[data-hero-reveal] .fn-hero-copy-line {
    text-align: left !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(7.6rem, 1fr)) !important;
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid::before {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid > div,
  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid > div:nth-child(even) {
    width: 7.6rem !important;
    align-items: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid svg {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid span {
    width: 7.6rem !important;
    max-width: 7.6rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].mt-8 {
    width: 100% !important;
    max-width: 18.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  html body main#main-content > section#fn-mobile-hero [data-hero-reveal].grid::before,
  html body main > section#fn-mobile-hero [data-hero-reveal].grid::before {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
    width: 68% !important;
  }
}

@media (max-width: 767px) {
  body > header img[src*="brand-freshnaps-transparent"] {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
  }
}

@media (max-width: 767px) {
  body > header > .section-shell {
    position: relative !important;
    justify-content: flex-end !important;
  }

  body > header > .section-shell > a[aria-label="Freshnaps home"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 767px) {
  html body.fn-home main > section#fn-mobile-hero .section-shell > div {
    padding-top: .78rem !important;
    padding-bottom: .78rem !important;
  }

  html body.fn-home main > section#fn-mobile-hero p[data-hero-reveal] {
    margin-top: .25rem !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].grid {
    margin-top: .82rem !important;
    row-gap: .55rem !important;
    padding-top: .9rem !important;
  }

  html body.fn-home main > section#fn-mobile-hero [data-hero-reveal].mt-8 {
    margin-top: .95rem !important;
  }
}

.fn-mobile-header-order {
  display: none !important;
}

@media (max-width: 767px) {
  body > header .fn-mobile-header-order {
    display: inline-flex !important;
    position: absolute !important;
    left: -4px !important;
    top: 50% !important;
    z-index: 60 !important;
    height: 42px !important;
    min-width: 124px !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    padding: 0 .72rem !important;
    border-radius: 6px !important;
    background: #1379b8 !important;
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 22px rgba(19, 121, 184, .22) !important;
  }

  body > header .fn-mobile-header-order svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 370px) {
  body > header .fn-mobile-header-order {
    min-width: 112px !important;
    padding-inline: .55rem !important;
    font-size: .66rem !important;
  }
}

/* Final CTA shape: rounded neumorphic pill buttons. */
body > header a[href*="sample-request"] span span,
body > header .fn-mobile-header-order,
main a.inline-block > span.group > span,
main a[class*="group"][class*="overflow-hidden"] .fn-use-case-button,
.fn-commercial-content > a {
  border-radius: 50px !important;
  clip-path: none !important;
  border: 2px solid rgba(206, 206, 206, .65) !important;
  box-shadow:
    inset 4px 4px 10px rgba(6, 31, 47, .16),
    inset -4px -4px 10px rgba(255, 255, 255, .26),
    0 10px 22px rgba(11, 71, 120, .12) !important;
  transition: all .2s ease-in-out !important;
}

body > header a[href*="sample-request"]:hover span span,
body > header .fn-mobile-header-order:hover,
main a.inline-block:hover > span.group > span,
main a[class*="group"][class*="overflow-hidden"]:hover .fn-use-case-button,
.fn-commercial-content > a:hover {
  box-shadow:
    inset 2px 2px 5px rgba(6, 31, 47, .18),
    inset -2px -2px 5px rgba(255, 255, 255, .34),
    2px 2px 5px rgba(11, 71, 120, .18),
    -2px -2px 5px rgba(255, 255, 255, .72) !important;
}

@media (max-width: 767px) {
  body > header .fn-mobile-header-order {
    height: 34px !important;
    min-width: 96px !important;
    left: -4px !important;
    padding: 0 .52rem !important;
    border-radius: 50px !important;
    font-size: .62rem !important;
    gap: .28rem !important;
    letter-spacing: .035em !important;
  }

  body > header .fn-mobile-header-order svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Final global button layout consistency. */
a.inline-block > span.group > span,
a[class*="group"] > span[class*="inline-flex"],
body > header .fn-mobile-header-order,
body > header a[href*="sample-request"] span span,
main a.inline-block > span.group > span,
main a[class*="group"][class*="overflow-hidden"] .fn-use-case-button,
.fn-commercial-content > a {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  padding: .78rem 1.45rem !important;
  border-radius: 50px !important;
  clip-path: none !important;
  white-space: nowrap !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

a.inline-block > span.group > span svg,
a[class*="group"] > span[class*="inline-flex"] svg,
main a.inline-block > span.group > span svg {
  width: 1rem !important;
  height: 1rem !important;
  flex: 0 0 auto !important;
}

@media (max-width: 767px) {
  main a.inline-block > span.group > span,
  main a[class*="group"] > span[class*="inline-flex"],
  main a[class*="group"][class*="overflow-hidden"] .fn-use-case-button,
  .fn-commercial-content > a {
    min-height: 42px !important;
    padding: .72rem 1rem !important;
    font-size: .74rem !important;
    gap: .42rem !important;
  }

  body > header .fn-mobile-header-order {
    min-height: 34px !important;
    height: 34px !important;
    min-width: 96px !important;
    padding: 0 .52rem !important;
    font-size: .62rem !important;
    gap: .28rem !important;
  }
}

@media (max-width: 767px) {
  body > header .fn-mobile-header-order svg {
    display: none !important;
  }
}

/* Exact Uiverse-style neumorphic buttons across the whole website. */
body > header .fn-mobile-header-order,
body > header a[href*="sample-request"] span span,
main a.inline-block > span.group > span,
main a[class*="inline-flex"][href],
main a[class*="justify-center"][href],
main a[class*="rounded"][href]:not([class*="overflow-hidden"]),
main button[class*="inline-flex"],
main button[class*="justify-center"],
main .fn-use-case-button,
.fn-commercial-content > a {
  background-color: #e0e0e0 !important;
  background-image: none !important;
  border-radius: 50px !important;
  box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff !important;
  color: #4d4d4d !important;
  cursor: pointer !important;
  font-size: 18px !important;
  padding: 15px 40px !important;
  transition: all .2s ease-in-out !important;
  border: 2px solid rgb(206, 206, 206) !important;
  clip-path: none !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  white-space: nowrap !important;
}

body > header .fn-mobile-header-order:hover,
body > header .fn-mobile-header-order:focus,
body > header a[href*="sample-request"]:hover span span,
body > header a[href*="sample-request"]:focus span span,
main a.inline-block:hover > span.group > span,
main a.inline-block:focus > span.group > span,
main a[class*="inline-flex"][href]:hover,
main a[class*="inline-flex"][href]:focus,
main a[class*="justify-center"][href]:hover,
main a[class*="justify-center"][href]:focus,
main a[class*="rounded"][href]:not([class*="overflow-hidden"]):hover,
main a[class*="rounded"][href]:not([class*="overflow-hidden"]):focus,
main button[class*="inline-flex"]:hover,
main button[class*="inline-flex"]:focus,
main button[class*="justify-center"]:hover,
main button[class*="justify-center"]:focus,
main .fn-use-case-button:hover,
main .fn-use-case-button:focus,
.fn-commercial-content > a:hover,
.fn-commercial-content > a:focus {
  outline: none !important;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff !important;
}

@media (max-width: 767px) {
  body > header .fn-mobile-header-order {
    left: -4px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 96px !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
  }

  main a.inline-block > span.group > span,
  main a[class*="inline-flex"][href],
  main a[class*="justify-center"][href],
  main a[class*="rounded"][href]:not([class*="overflow-hidden"]),
  main button[class*="inline-flex"],
  main button[class*="justify-center"],
  main .fn-use-case-button,
  .fn-commercial-content > a {
    font-size: 14px !important;
    padding: 13px 24px !important;
  }
}

@media (min-width: 768px) {
  body > header .fn-mobile-header-order {
    display: none !important;
  }
}

/* Final repair: one visible neumorphic button face only, no nested button shells. */
main a:has(> span.group > span),
main a:has(> span.group > span) > span.group,
body > header a[href*="sample-request"],
body > header a[href*="sample-request"] > span.group {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

main a:has(> span.group > span) > span.group,
body > header a[href*="sample-request"] > span.group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body > header .fn-mobile-header-order,
body > header a[href*="sample-request"] > span.group > span,
main a:has(> span.group > span) > span.group > span,
main button[class*="inline-flex"],
main button[class*="justify-center"],
main .fn-use-case-button,
.fn-commercial-content > a,
.fn-home-industries-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 15px 40px !important;
  border: 2px solid rgb(206, 206, 206) !important;
  border-radius: 50px !important;
  background: #e0e0e0 !important;
  background-color: #e0e0e0 !important;
  background-image: none !important;
  box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff !important;
  color: #4d4d4d !important;
  clip-path: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: all .2s ease-in-out !important;
}

body > header .fn-mobile-header-order:hover,
body > header .fn-mobile-header-order:focus,
body > header a[href*="sample-request"]:hover > span.group > span,
body > header a[href*="sample-request"]:focus > span.group > span,
main a:has(> span.group > span):hover > span.group > span,
main a:has(> span.group > span):focus > span.group > span,
main button[class*="inline-flex"]:hover,
main button[class*="inline-flex"]:focus,
main button[class*="justify-center"]:hover,
main button[class*="justify-center"]:focus,
main .fn-use-case-button:hover,
main .fn-use-case-button:focus,
.fn-commercial-content > a:hover,
.fn-commercial-content > a:focus,
.fn-home-industries-button:hover,
.fn-home-industries-button:focus {
  outline: none !important;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff !important;
}

@media (max-width: 767px) {
  body > header .fn-mobile-header-order {
    left: -4px !important;
    height: 34px !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
  }

  body > header .fn-mobile-header-order svg,
  main a:has(> span.group > span) > span.group > span svg {
    display: none !important;
  }

  main a:has(> span.group > span) > span.group > span,
  main button[class*="inline-flex"],
  main button[class*="justify-center"],
  main .fn-use-case-button,
  .fn-commercial-content > a,
  .fn-home-industries-button {
    padding: 13px 24px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 768px) {
  body > header .fn-mobile-header-order {
    display: none !important;
  }
}

/* Final repair: make section headings use the same clean centered style. */
.fn-selling-story-heading,
.fn-product-technology-copy,
#product.fn-three-steps .fn-three-steps-heading,
.fn-approved-industries-heading,
.fn-comparison-heading,
.fn-facility-section-heading,
.fn-marketplace-section > .section-shell > div:first-child {
  text-align: center !important;
}

.fn-selling-story-heading .eyebrow,
.fn-product-technology-copy .eyebrow,
#product.fn-three-steps .fn-three-steps-heading .eyebrow,
.fn-approved-industries-heading .eyebrow,
.fn-comparison-heading .eyebrow,
.fn-facility-section-heading .eyebrow,
.fn-marketplace-section .eyebrow {
  color: #3c9150 !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

body .fn-selling-story-heading h2,
.fn-product-technology-copy h2,
#product.fn-three-steps .fn-three-steps-heading h2,
.fn-approved-industries-heading h2,
.fn-comparison-heading h2,
.fn-facility-section-heading h2,
.fn-marketplace-section h2 {
  max-width: 900px !important;
  margin: .8rem auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #082f49 !important;
  font-size: clamp(2.1rem, 3.4vw, 3.65rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  text-align: center !important;
  text-transform: none !important;
}

.fn-selling-story-heading h2 span {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: normal !important;
}

@media (max-width: 767px) {
  body .fn-selling-story-heading h2,
  .fn-product-technology-copy h2,
  #product.fn-three-steps .fn-three-steps-heading h2,
  .fn-approved-industries-heading h2,
  .fn-comparison-heading h2,
  .fn-facility-section-heading h2,
  .fn-marketplace-section h2 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.05 !important;
  }
}

.fn-selling-story-heading h2 span + span::before {
  content: " " !important;
}

/* Final typography system: keep headings and supporting text uniform site-wide. */
main section .section-shell > div:first-child:has(.eyebrow),
main section .section-shell > .text-center,
main section .section-shell > .max-w-4xl,
main section .section-shell > .fn-selling-story-heading,
main section .section-shell > .fn-product-technology-copy,
main section .section-shell > .fn-approved-industries-heading,
main section .section-shell > .fn-facility-section-heading,
.fn-centered-alcohol-copy,
body.fn-home .fn-use-ritual .section-shell > div:first-child {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

main section .eyebrow,
.fn-centered-alcohol-copy > span,
main .fn-site-section-eyebrow {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #3c9150 !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body main section h2:not(#three-steps-title),
body main section h2#three-steps-title,
body.fn-home .fn-use-ritual h2,
.fn-centered-alcohol-copy h2,
.fn-selling-story-heading h2,
.fn-product-technology-copy h2,
.fn-approved-industries-heading h2,
.fn-facility-section-heading h2,
.fn-marketplace-section h2,
.fn-comparison-heading h2 {
  max-width: 900px !important;
  margin: .85rem auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0b4778 !important;
  font-size: clamp(2.05rem, 3.6vw, 3.75rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

main section .section-shell > div:first-child:has(.eyebrow) > p:not(.eyebrow),
main section .section-shell > .text-center > p:not(.eyebrow),
main section .section-shell > .max-w-4xl > p:not(.eyebrow),
.fn-selling-story-heading > p:last-child,
.fn-product-technology-copy > p,
.fn-approved-industries-heading > p:last-child,
.fn-facility-section-heading p:not(.eyebrow),
.fn-centered-alcohol-copy p,
body.fn-home .fn-use-ritual h2 + p,
main .fn-site-section-intro {
  max-width: 760px !important;
  margin: 1.15rem auto 0 !important;
  color: #4e6672 !important;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

.fn-use-ritual article h3,
.fn-selling-story-grid h3,
.fn-approved-industry-copy h3,
.fn-commercial-content h3,
.fn-technology-card h3,
body.fn-home .fn-home-benefits [data-benefit-card] h2,
main article h3:not([class*="text-white"]),
main [data-benefit-card] h3 {
  color: #0b4778 !important;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.16 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.fn-use-ritual article p,
.fn-selling-story-grid p,
.fn-approved-industry-copy p,
.fn-commercial-content > p,
.fn-technology-card p,
body.fn-home .fn-home-benefits [data-benefit-card] p,
main article p:not(.eyebrow):not([class*="text-white"]),
main [data-benefit-card] p {
  color: #4e6672 !important;
  font-size: clamp(.95rem, 1.35vw, 1.05rem) !important;
  font-weight: 600 !important;
  line-height: 1.62 !important;
  text-align: center !important;
}

.fn-home-industries-button {
  display: flex !important;
  width: fit-content !important;
  margin: 1.75rem auto 0 !important;
}

@media (max-width: 767px) {
  body main section h2:not(#three-steps-title),
  body main section h2#three-steps-title,
  body.fn-home .fn-use-ritual h2,
  .fn-centered-alcohol-copy h2,
  .fn-selling-story-heading h2,
  .fn-product-technology-copy h2,
  .fn-approved-industries-heading h2,
  .fn-facility-section-heading h2,
  .fn-marketplace-section h2,
  .fn-comparison-heading h2 {
    max-width: 94vw !important;
    font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }

  main section .section-shell > div:first-child:has(.eyebrow) > p:not(.eyebrow),
  main section .section-shell > .text-center > p:not(.eyebrow),
  main section .section-shell > .max-w-4xl > p:not(.eyebrow),
  .fn-selling-story-heading > p:last-child,
  .fn-product-technology-copy > p,
  .fn-approved-industries-heading > p:last-child,
  .fn-facility-section-heading p:not(.eyebrow),
  .fn-centered-alcohol-copy p,
  body.fn-home .fn-use-ritual h2 + p,
  main .fn-site-section-intro {
    max-width: 92vw !important;
    font-size: 1.04rem !important;
    line-height: 1.6 !important;
  }

  .fn-use-ritual article h3,
  .fn-selling-story-grid h3,
  .fn-approved-industry-copy h3,
  .fn-commercial-content h3,
  .fn-technology-card h3,
  body.fn-home .fn-home-benefits [data-benefit-card] h2,
  main article h3:not([class*="text-white"]),
  main [data-benefit-card] h3 {
    font-size: 1.08rem !important;
  }

  .fn-use-ritual article p,
  .fn-selling-story-grid p,
  .fn-approved-industry-copy p,
  .fn-commercial-content > p,
  .fn-technology-card p,
  body.fn-home .fn-home-benefits [data-benefit-card] p,
  main article p:not(.eyebrow):not([class*="text-white"]),
  main [data-benefit-card] p {
    font-size: .98rem !important;
  }
}

/* Exact match for the Simple Surface Reset heading to the Wipe Technology style. */
html body.fn-home main #product.fn-three-steps .fn-three-steps-heading {
  max-width: 900px !important;
  margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
  text-align: center !important;
}

html body.fn-home main #product.fn-three-steps .fn-three-steps-heading .eyebrow {
  display: block !important;
  margin: 0 auto .9rem !important;
  color: #3c9150 !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html body.fn-home main #product.fn-three-steps .fn-three-steps-heading #three-steps-title {
  max-width: 900px !important;
  margin: 0 auto !important;
  color: #0b4778 !important;
  font-size: clamp(2.45rem, 4.2vw, 4rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  html body.fn-home main #product.fn-three-steps .fn-three-steps-heading #three-steps-title {
    max-width: 96vw !important;
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: 1.03 !important;
  }
}

/* Larger homepage material-benefit icons. */
body.fn-home .fn-home-benefits [data-benefit-card] img,
body.fn-home section [data-benefit-card] img {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  max-height: 82px !important;
  object-fit: contain !important;
  margin-bottom: .7rem !important;
}

@media (max-width: 767px) {
  body.fn-home .fn-home-benefits [data-benefit-card] img,
  body.fn-home section [data-benefit-card] img {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
}

/* Final correction: headings use natural casing; only labels and buttons stay uppercase. */
body main section h2,
body main section h3,
body main section article h3,
body main section [data-benefit-card] h2,
body main section [data-benefit-card] h3,
.fn-selling-story-heading h2,
.fn-product-technology-copy h2,
.fn-approved-industries-heading h2,
.fn-facility-section-heading h2,
.fn-marketplace-section h2,
.fn-comparison-heading h2,
.fn-centered-alcohol-copy h2,
#product.fn-three-steps .fn-three-steps-heading #three-steps-title,
.fn-use-ritual article h3,
.fn-selling-story-grid h3,
.fn-approved-industry-copy h3,
.fn-commercial-content h3,
.fn-technology-card h3 {
  text-transform: none !important;
}

body main section .eyebrow,
body main a,
body main button,
body > header a,
.fn-approved-industry-copy > span,
.fn-use-case-button,
.fn-home-industries-button {
  text-transform: uppercase !important;
}

/* Final fix: card/link headings must keep natural casing. */
body main a,
body main a *,
body main section h1,
body main section h2,
body main section h3,
.fn-approved-industries,
.fn-approved-industries *,
.fn-home-industry-card,
.fn-home-industry-card *,
.fn-three-steps,
.fn-three-steps *,
.fn-use-ritual h2,
.fn-use-ritual h3,
.fn-selling-story-heading h2,
.fn-selling-story-grid h3,
.fn-centered-alcohol-copy h2,
.fn-product-technology-copy h2,
.fn-facility-section-heading h2,
.fn-marketplace-section h2,
.fn-comparison-heading h2 {
  text-transform: none !important;
}

body main section .eyebrow,
body main .eyebrow,
body main button,
body > header a,
body main a:has(> span.group > span) > span.group > span,
body main .fn-home-industries-button,
body main .fn-use-case-button,
body main .fn-commercial-content > a,
body main .fn-approved-industry-copy > span,
body main .fn-use-case-order,
body main .fn-use-case-sample-button,
body main .fn-use-case-buy-button {
  text-transform: uppercase !important;
}

/* Site-wide final heading guard: headings and card titles must not render uppercase. */
html body main h1,
html body main h1 *,
html body main h2,
html body main h2 *,
html body main h3,
html body main h3 *,
html body main h4,
html body main h4 *,
html body main h5,
html body main h5 *,
html body main h6,
html body main h6 *,
html body main .fn-home-industry-card > span,
html body main .fn-home-industry-card > span *,
html body main .fn-approved-industry-copy h3,
html body main .fn-approved-industry-copy h3 *,
html body main [data-benefit-card] h2,
html body main [data-benefit-card] h2 *,
html body main [data-benefit-card] h3,
html body main [data-benefit-card] h3 * {
  text-transform: none !important;
}

html body main .eyebrow,
html body main .eyebrow *,
html body main button,
html body main button *,
html body main a:has(> span.group > span) > span.group > span,
html body main a:has(> span.group > span) > span.group > span *,
html body main .fn-home-industries-button,
html body main .fn-home-industries-button *,
html body main .fn-use-case-button,
html body main .fn-use-case-button *,
html body main .fn-commercial-content > a,
html body main .fn-commercial-content > a *,
html body main .fn-approved-industry-copy > span,
html body main .fn-approved-industry-copy > span * {
  text-transform: uppercase !important;
}

/* Absolute final fix for generated Wipe Technology headings. */
html body main .fn-selling-story-heading,
html body main .fn-selling-story-heading h1,
html body main .fn-selling-story-heading h1 *,
html body main .fn-selling-story-heading h2,
html body main .fn-selling-story-heading h2 *,
html body main .fn-selling-story-heading h3,
html body main .fn-selling-story-heading h3 * {
  text-transform: none !important;
}

html body main .fn-selling-story-heading .eyebrow,
html body main .fn-selling-story-heading .eyebrow * {
  text-transform: uppercase !important;
}

/* Brute-force normal casing for any heading explicitly marked natural. */
html body main .fn-natural-heading,
html body main .fn-natural-heading * {
  text-transform: none !important;
}

/* Final site-wide button colors: blue and green, no grey pills. */
html body > header .fn-mobile-header-order,
html body > header a[href*="sample-request"] > span.group > span,
html body main a:has(> span.group > span) > span.group > span,
html body main button[class*="inline-flex"],
html body main button[class*="justify-center"],
html body main .fn-use-case-button,
html body main .fn-home-industries-button,
html body main .fn-commercial-content > a,
html body main .fn-use-case-order,
html body main .fn-use-case-buy-button {
  border: 0 !important;
  border-radius: 50px !important;
  background: linear-gradient(180deg, #1691d0 0%, #0f78b6 100%) !important;
  background-color: #1379b8 !important;
  box-shadow: inset 3px 3px 8px rgba(255, 255, 255, .24), inset -3px -3px 8px rgba(3, 55, 92, .32), 0 10px 22px rgba(19, 121, 184, .22) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

html body main a[href*="sample-request"]:has(> span.group > span) > span.group > span,
html body main a[href*="sample"]:has(> span.group > span) > span.group > span,
html body main .fn-use-case-sample-button {
  color: #ffffff !important;
}

html body main a[href*="sample-request"] > span.group > span,
html body main a[href*="sample"] > span.group > span,
html body main .fn-use-case-sample-button {
  border: 0 !important;
  background: linear-gradient(180deg, #55c851 0%, #42ad3e 100%) !important;
  background-color: #52b84c !important;
  box-shadow: inset 3px 3px 8px rgba(255, 255, 255, .26), inset -3px -3px 8px rgba(28, 111, 35, .30), 0 10px 22px rgba(82, 184, 76, .22) !important;
  color: #ffffff !important;
}

html body > header a[href*="sample-request"] > span.group > span {
  background: linear-gradient(180deg, #55c851 0%, #42ad3e 100%) !important;
  background-color: #52b84c !important;
  color: #ffffff !important;
}

html body > header .fn-mobile-header-order:hover,
html body > header .fn-mobile-header-order:focus,
html body > header a[href*="sample-request"]:hover > span.group > span,
html body > header a[href*="sample-request"]:focus > span.group > span,
html body main a:has(> span.group > span):hover > span.group > span,
html body main a:has(> span.group > span):focus > span.group > span,
html body main button[class*="inline-flex"]:hover,
html body main button[class*="inline-flex"]:focus,
html body main button[class*="justify-center"]:hover,
html body main button[class*="justify-center"]:focus,
html body main .fn-use-case-button:hover,
html body main .fn-use-case-button:focus,
html body main .fn-home-industries-button:hover,
html body main .fn-home-industries-button:focus,
html body main .fn-commercial-content > a:hover,
html body main .fn-commercial-content > a:focus {
  filter: brightness(.96) !important;
  box-shadow: inset 2px 2px 6px rgba(255, 255, 255, .20), inset -2px -2px 6px rgba(3, 55, 92, .28), 0 8px 18px rgba(11, 71, 120, .20) !important;
}

/* Final testimonial theme cleanup: remove dark panel and use site colors. */
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden {
  background: #ffffff !important;
  color: #0b2f47 !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden > .absolute.inset-0 {
  display: none !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden .eyebrow {
  color: #34984f !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden h2 {
  color: #0b4778 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden p {
  color: #18384c !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden .grid > div {
  background: #ffffff !important;
  border: 1px solid rgba(11, 71, 120, .12) !important;
  box-shadow: 0 16px 36px rgba(11, 47, 71, .08) !important;
  backdrop-filter: none !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden svg {
  color: #52b84c !important;
}
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden h3,
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden strong,
html body main section.bg-\[\#0b4778\].py-20.text-white.relative.overflow-hidden a {
  color: #0b4778 !important;
}

/* Reliable testimonial cleanup hook. */
html body main .fn-testimonials-clean {
  background: #ffffff !important;
  color: #0b2f47 !important;
}
html body main .fn-testimonials-clean > .absolute.inset-0 {
  display: none !important;
}
html body main .fn-testimonials-clean .eyebrow {
  color: #34984f !important;
}
html body main .fn-testimonials-clean h2 {
  color: #0b4778 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main .fn-testimonials-clean p {
  color: #18384c !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main .fn-testimonials-clean .grid > div {
  background: #ffffff !important;
  border: 1px solid rgba(11, 71, 120, .12) !important;
  box-shadow: 0 16px 36px rgba(11, 47, 71, .08) !important;
  backdrop-filter: none !important;
}
html body main .fn-testimonials-clean svg {
  color: #52b84c !important;
}
html body main .fn-testimonials-clean h3,
html body main .fn-testimonials-clean strong,
html body main .fn-testimonials-clean a {
  color: #0b4778 !important;
}

/* Final homepage alignment and button cleanup. */
html body.fn-home main section,
html body.fn-home main section * {
  text-align: left !important;
}

html body.fn-home main .section-shell,
html body.fn-home main .fn-three-steps-heading,
html body.fn-home main .fn-selling-story-heading,
html body.fn-home main .fn-approved-industries-heading,
html body.fn-home main .fn-product-technology-copy,
html body.fn-home main .fn-marketplace-section > .section-shell > div:first-child,
html body.fn-home main section .text-center,
html body.fn-home main section [class*="text-center"] {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html body.fn-home main h1,
html body.fn-home main h2,
html body.fn-home main h3,
html body.fn-home main h4,
html body.fn-home main p,
html body.fn-home main .eyebrow,
html body.fn-home main .fn-three-steps-heading,
html body.fn-home main .fn-three-steps-heading h2,
html body.fn-home main .fn-three-steps-heading .eyebrow,
html body.fn-home main .fn-selling-story-heading,
html body.fn-home main .fn-selling-story-heading h2,
html body.fn-home main .fn-selling-story-heading p,
html body.fn-home main .fn-approved-industries-heading,
html body.fn-home main .fn-approved-industries-heading h2,
html body.fn-home main .fn-marketplace-section h2 {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body.fn-home main [data-benefit-card],
html body.fn-home main .fn-technology-card,
html body.fn-home main .fn-selling-story-grid article,
html body.fn-home main .fn-step-card,
html body.fn-home main .fn-step-copy,
html body.fn-home main .fn-home-industry-card {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html body.fn-home main [data-benefit-card] h2,
html body.fn-home main [data-benefit-card] h3,
html body.fn-home main [data-benefit-card] p,
html body.fn-home main .fn-technology-card h3,
html body.fn-home main .fn-technology-card p,
html body.fn-home main .fn-selling-story-grid h3,
html body.fn-home main .fn-selling-story-grid p,
html body.fn-home main .fn-step-copy h3,
html body.fn-home main .fn-step-copy p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main [data-benefit-card] > div,
html body.fn-home main .fn-technology-icon {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main .fn-three-steps-grid,
html body.fn-home main .fn-selling-story-grid,
html body.fn-home main .fn-approved-industries-grid,
html body.fn-home main .fn-marketplace-logo-grid,
html body.fn-home main .flex.flex-wrap {
  justify-content: flex-start !important;
}

/* Final button rule: blue/green faces only, no grey shells and no shadows. */
html body a:has(> span.group > span),
html body a:has(> span.group),
html body a.inline-block.w-full,
html body a[class*="text-center"][href]:has(span.group),
html body span.group {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

html body > header .fn-mobile-header-order,
html body main a:has(> span.group > span) > span.group > span,
html body main a.inline-block.w-full > span.group > span,
html body main .fn-home-industries-button,
html body main .fn-use-case-button,
html body main .fn-use-case-order,
html body main .fn-use-case-buy-button,
html body main .fn-commercial-content > a,
html body main button[class*="inline-flex"],
html body main button[class*="justify-center"] {
  border: 0 !important;
  border-radius: 50px !important;
  background: linear-gradient(180deg, #1691d0 0%, #0f78b6 100%) !important;
  background-color: #1379b8 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

html body main a[href*="sample"]:has(> span.group > span) > span.group > span,
html body main .fn-use-case-sample-button,
html body > header a[href*="sample-request"] > span.group > span {
  border: 0 !important;
  border-radius: 50px !important;
  background: linear-gradient(180deg, #55c851 0%, #42ad3e 100%) !important;
  background-color: #52b84c !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html body > header .fn-mobile-header-order:hover,
html body > header .fn-mobile-header-order:focus,
html body main a:has(> span.group > span):hover > span.group > span,
html body main a:has(> span.group > span):focus > span.group > span,
html body main .fn-home-industries-button:hover,
html body main .fn-home-industries-button:focus,
html body main .fn-use-case-button:hover,
html body main .fn-use-case-button:focus,
html body main .fn-use-case-order:hover,
html body main .fn-use-case-order:focus,
html body main .fn-use-case-buy-button:hover,
html body main .fn-use-case-buy-button:focus,
html body main .fn-use-case-sample-button:hover,
html body main .fn-use-case-sample-button:focus,
html body main .fn-commercial-content > a:hover,
html body main .fn-commercial-content > a:focus {
  box-shadow: none !important;
  filter: brightness(.96) !important;
}

/* Absolute final home left alignment: beat older ID and component rules. */
html body.fn-home main#main-content #product.fn-three-steps .fn-three-steps-heading,
html body.fn-home main#main-content #product.fn-three-steps .fn-three-steps-heading .eyebrow,
html body.fn-home main#main-content #product.fn-three-steps .fn-three-steps-heading h2,
html body.fn-home main#main-content #product.fn-three-steps .fn-three-steps-heading p,
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card],
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] h2,
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] h3,
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] p,
html body.fn-home main#main-content .fn-selling-story,
html body.fn-home main#main-content .fn-selling-story-heading,
html body.fn-home main#main-content .fn-selling-story-heading .eyebrow,
html body.fn-home main#main-content .fn-selling-story-heading h2,
html body.fn-home main#main-content .fn-selling-story-heading p,
html body.fn-home main#main-content .fn-selling-story-grid article,
html body.fn-home main#main-content .fn-selling-story-grid article h3,
html body.fn-home main#main-content .fn-selling-story-grid article p,
html body.fn-home main#main-content .fn-approved-industries-heading,
html body.fn-home main#main-content .fn-approved-industries-heading .eyebrow,
html body.fn-home main#main-content .fn-approved-industries-heading h2,
html body.fn-home main#main-content .fn-approved-industries-heading p,
html body.fn-home main#main-content .fn-marketplace-section,
html body.fn-home main#main-content .fn-marketplace-section .eyebrow,
html body.fn-home main#main-content .fn-marketplace-section h2,
html body.fn-home main#main-content .fn-marketplace-section p,
html body.fn-home main#main-content .fn-site-section-heading,
html body.fn-home main#main-content .fn-site-section-eyebrow,
html body.fn-home main#main-content .fn-site-section-intro {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main#main-content .fn-home-benefits [data-benefit-card],
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] > div,
html body.fn-home main#main-content .fn-selling-story-grid article,
html body.fn-home main#main-content .fn-step-card,
html body.fn-home main#main-content .fn-step-copy {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html body.fn-home main#main-content .fn-selling-story-grid article {
  align-content: flex-start !important;
  padding-top: 1.35rem !important;
}

html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] > div,
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] img,
html body.fn-home main#main-content .fn-technology-icon,
html body.fn-home main#main-content .fn-step-number {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main#main-content #product.fn-three-steps .fn-three-steps-grid,
html body.fn-home main#main-content .fn-home-benefits .flex,
html body.fn-home main#main-content .fn-home-benefits [class*="flex-wrap"],
html body.fn-home main#main-content .fn-selling-story-grid,
html body.fn-home main#main-content .fn-approved-industries-grid,
html body.fn-home main#main-content .fn-marketplace-logo-grid {
  justify-content: flex-start !important;
}

/* Absolute final home industry card left alignment. */
html body.fn-home main#main-content .fn-approved-industry-card,
html body.fn-home main#main-content .fn-approved-industry-card *,
html body.fn-home main#main-content .fn-approved-industry-copy,
html body.fn-home main#main-content .fn-approved-industry-copy *,
html body.fn-home main#main-content .fn-approved-industries-grid article,
html body.fn-home main#main-content .fn-approved-industries-grid article * {
  text-align: left !important;
}

html body.fn-home main#main-content .fn-approved-industry-card,
html body.fn-home main#main-content .fn-approved-industry-copy,
html body.fn-home main#main-content .fn-approved-industries-grid article {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html body.fn-home main#main-content .fn-approved-industry-card svg,
html body.fn-home main#main-content .fn-approved-industry-card img,
html body.fn-home main#main-content .fn-approved-industry-copy svg,
html body.fn-home main#main-content .fn-approved-industries-grid article svg,
html body.fn-home main#main-content .fn-approved-industries-grid article img {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main#main-content .fn-approved-industry-copy h3,
html body.fn-home main#main-content .fn-approved-industry-copy p,
html body.fn-home main#main-content .fn-approved-industries-grid article h3,
html body.fn-home main#main-content .fn-approved-industries-grid article p {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Absolute final: mobile header Buy Now button on every page, blue only. */
html body > header .fn-mobile-header-order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 60 !important;
  left: -4px !important;
  height: 34px !important;
  min-height: 34px !important;
  min-width: 96px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 50px !important;
  background: linear-gradient(180deg, #1691d0 0%, #0f78b6 100%) !important;
  background-color: #1379b8 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body > header .fn-mobile-header-order:hover,
html body > header .fn-mobile-header-order:focus {
  background: linear-gradient(180deg, #1588c6 0%, #0d6fa9 100%) !important;
  background-color: #1379b8 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  filter: none !important;
}

@media (min-width: 768px) {
  html body > header .fn-mobile-header-order {
    display: none !important;
  }
}

/* Absolute final: left-align the homepage use-case cards with generic exported classes. */
html body.fn-home main#main-content article[class*="items-center"][class*="text-center"],
html body.fn-home main#main-content article[class*="items-center"][class*="text-center"] *,
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"],
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] * {
  text-align: left !important;
}

html body.fn-home main#main-content article[class*="items-center"][class*="text-center"],
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

html body.fn-home main#main-content article[class*="items-center"][class*="text-center"] svg,
html body.fn-home main#main-content article[class*="items-center"][class*="text-center"] img,
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] svg,
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] img {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main#main-content article[class*="items-center"][class*="text-center"] h3,
html body.fn-home main#main-content article[class*="items-center"][class*="text-center"] p,
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] h3,
html body.fn-home main#main-content div[class*="items-center"][class*="text-center"][class*="justify-between"] p {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Industries page: keep the top feature cards in a 2x2 grid on mobile. */
@media (max-width: 767px) {
  html body[data-route="/industries"] main > section:first-child > .grid,
  html body[data-route="/industries"] main > section:first-child div.grid:has(> div.group.flex.flex-col) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  html body[data-route="/industries"] main > section:first-child div.grid:has(> div.group.flex.flex-col) > div {
    padding: 1rem !important;
    border-radius: 8px !important;
  }

  html body[data-route="/industries"] main > section:first-child div.grid:has(> div.group.flex.flex-col) > div > div:first-child {
    width: 2.6rem !important;
    height: 2.6rem !important;
    margin-bottom: .8rem !important;
  }

  html body[data-route="/industries"] main > section:first-child div.grid:has(> div.group.flex.flex-col) h3 {
    font-size: .92rem !important;
    line-height: 1.15 !important;
  }

  html body[data-route="/industries"] main > section:first-child div.grid:has(> div.group.flex.flex-col) p {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }
}

/* Absolute final: uniform left-aligned content across every page. */
html body main,
html body main section,
html body main section .section-shell,
html body main section [class*="text-center"],
html body main section [class*="mx-auto"] {
  text-align: left !important;
}

html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6,
html body main p,
html body main li,
html body main .eyebrow,
html body main .fn-site-section-heading,
html body main .fn-site-section-eyebrow,
html body main .fn-site-section-intro,
html body main .fn-three-steps-heading,
html body main .fn-approved-industries-heading,
html body main .fn-selling-story-heading,
html body main .fn-product-technology-copy,
html body main .fn-facility-section-heading,
html body main .fn-comparison-heading,
html body main .fn-marketplace-section h2 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body main article,
html body main article[class*="text-center"],
html body main article[class*="items-center"],
html body main div[class*="rounded"][class*="text-center"],
html body main div[class*="rounded"][class*="items-center"],
html body main a.fn-approved-industry-card,
html body main .fn-approved-industry-card,
html body main .fn-approved-industry-copy,
html body main .fn-technology-card,
html body main [data-benefit-card],
html body main .fn-step-card,
html body main .fn-step-copy,
html body main .fn-commercial-card,
html body main .glass-panel {
  text-align: left !important;
  align-items: flex-start !important;
}

html body main article h1,
html body main article h2,
html body main article h3,
html body main article h4,
html body main article p,
html body main div[class*="rounded"] h1,
html body main div[class*="rounded"] h2,
html body main div[class*="rounded"] h3,
html body main div[class*="rounded"] h4,
html body main div[class*="rounded"] p,
html body main .fn-approved-industry-card h3,
html body main .fn-approved-industry-card p,
html body main .fn-approved-industry-copy h3,
html body main .fn-approved-industry-copy p,
html body main .fn-technology-card h3,
html body main .fn-technology-card p,
html body main [data-benefit-card] h2,
html body main [data-benefit-card] h3,
html body main [data-benefit-card] p,
html body main .fn-step-copy h3,
html body main .fn-step-copy p,
html body main .glass-panel h2,
html body main .glass-panel p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body main article > svg,
html body main article svg:first-child,
html body main div[class*="rounded"] > svg,
html body main div[class*="rounded"] svg:first-child,
html body main article > img,
html body main div[class*="rounded"] > img,
html body main .fn-approved-industry-card svg,
html body main .fn-approved-industry-card img,
html body main .fn-technology-icon,
html body main [data-benefit-card] > div,
html body main [data-benefit-card] img,
html body main .fn-step-number {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body main .justify-center:not(a):not(button):not([role="button"]):not(.group),
html body main [class*="justify-center"]:not(a):not(button):not([role="button"]):not(.group) {
  justify-content: flex-start !important;
}

html body main .items-center:not(a):not(button):not([role="button"]):not(.group),
html body main [class*="items-center"]:not(a):not(button):not([role="button"]):not(.group) {
  align-items: flex-start !important;
}

html body main a:has(> span.group),
html body main a:has(> span.group) *,
html body main button,
html body main button * {
  text-align: center !important;
}

/* Emergency final mobile header layout: button left, logo center, menu right. */
@media (max-width: 767px) {
  html body > header > .section-shell {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: .45rem !important;
    height: 76px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body > header .fn-mobile-header-order {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    left: auto !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 .65rem !important;
    font-size: 10px !important;
    line-height: 1 !important;
    z-index: 62 !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 128px !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 61 !important;
  }

  html body > header a[aria-label="Freshnaps home"] img {
    height: 48px !important;
    max-width: 118px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  html body > header button[aria-label="Open menu"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 62 !important;
  }
}

/* Emergency final: restore full-width industry card images while keeping copy left aligned. */
html body main .fn-approved-industry-card,
html body main .fn-home-industry-card,
html body main .fn-merged-industries > a {
  align-items: stretch !important;
  overflow: hidden !important;
}

html body main .fn-approved-industry-image,
html body main .fn-home-industry-card > div:first-child,
html body main .fn-merged-industries > a > div:first-child {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body main .fn-approved-industry-image img,
html body main .fn-home-industry-card img,
html body main .fn-merged-industries > a img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html body main .fn-approved-industry-copy,
html body main .fn-approved-industry-copy *,
html body main .fn-home-industry-card > span,
html body main .fn-home-industry-card > span *,
html body main .fn-merged-industries > a > div:last-child,
html body main .fn-merged-industries > a > div:last-child * {
  text-align: left !important;
}

/* Emergency final: vertically center the mobile header controls. */
@media (max-width: 767px) {
  html body > header,
  html body > header > .section-shell {
    min-height: 76px !important;
  }

  html body > header .fn-mobile-header-order {
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
  }
}

/* Absolute final: stronger left alignment for exported component text. */
html body main article[class] h1[class],
html body main article[class] h2[class],
html body main article[class] h3[class],
html body main article[class] h4[class],
html body main article[class] p[class],
html body main div[class*="rounded"][class] h1[class],
html body main div[class*="rounded"][class] h2[class],
html body main div[class*="rounded"][class] h3[class],
html body main div[class*="rounded"][class] h4[class],
html body main div[class*="rounded"][class] p[class],
html body main section[class] h1[class],
html body main section[class] h2[class],
html body main section[class] h3[class],
html body main section[class] p[class],
html body main .fn-site-section-heading[class],
html body main .fn-site-section-intro[class],
html body main .fn-site-section-eyebrow[class],
html body main .fn-approved-industries-heading[class] h2,
html body main .fn-approved-industries-heading[class] p,
html body main .fn-facility-section-heading[class] h2,
html body main .fn-facility-section-heading[class] p,
html body main .fn-marketplace-section[class] h2,
html body main .fn-marketplace-section[class] p,
html body main [data-benefit-card][class] h2,
html body main [data-benefit-card][class] h3,
html body main [data-benefit-card][class] p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.fn-home main #product.fn-three-steps article.fn-step-card,
html body.fn-home main #product.fn-three-steps article.fn-step-card h3,
html body.fn-home main #product.fn-three-steps article.fn-step-card p,
html body.fn-home main #product.fn-three-steps article.fn-step-card .fn-step-copy,
html body.fn-home main #product.fn-three-steps article.fn-step-card .fn-step-copy * {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body main article[class] {
  text-align: left !important;
}

/* Absolute final: beat legacy ID/not() centered text rules everywhere. */
html body main h1:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main h2:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main h3:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main h4:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main h5:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main h6:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main p:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main li:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main article:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b) {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body main article:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main div[class*="text-center"]:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b),
html body main div[class*="items-center"]:not(#fn-left-align-lock-a):not(#fn-left-align-lock-b) {
  align-items: flex-start !important;
}

html body main a:has(> span.group),
html body main a:has(> span.group) *,
html body main button,
html body main button * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Absolute final: uniform header across all mobile/tablet pages. */
@media (max-width: 1023px) {
  html body > header {
    background: rgba(255, 255, 255, .96) !important;
    color: #0b4778 !important;
    border-bottom: 1px solid rgba(11, 71, 120, .12) !important;
  }

  html body > header > .section-shell {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: .45rem !important;
    height: 76px !important;
    min-height: 76px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body > header nav,
  html body > header > .section-shell > div.hidden,
  html body > header > .section-shell > div[class*="lg:block"],
  html body > header > .section-shell > div:has(a[href*="sample-request"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  html body > header .fn-mobile-header-order {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 .65rem !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: linear-gradient(180deg, #1691d0 0%, #0f78b6 100%) !important;
    background-color: #1379b8 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    z-index: 70 !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 128px !important;
    margin: 0 !important;
    z-index: 69 !important;
  }

  html body > header a[aria-label="Freshnaps home"] img {
    height: 48px !important;
    max-width: 118px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  html body > header button[aria-label="Open menu"] {
    display: grid !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    z-index: 70 !important;
  }
}

@media (min-width: 1024px) {
  html body > header .fn-mobile-header-order {
    display: none !important;
  }
}

/* Absolute final: true-centered mobile logo with left-pinned Buy Now. */
@media (max-width: 1023px) {
  html body > header > .section-shell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 76px !important;
    min-height: 76px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body > header .fn-mobile-header-order {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 .7rem !important;
    z-index: 72 !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 118px !important;
    margin: 0 !important;
    justify-content: center !important;
    z-index: 71 !important;
  }

  html body > header a[aria-label="Freshnaps home"] img {
    height: 50px !important;
    max-width: 118px !important;
    width: auto !important;
  }

  html body > header button[aria-label="Open menu"] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    z-index: 72 !important;
  }
}

/* Absolute final: compact left button and exact centered logo image. */
@media (max-width: 1023px) {
  html body > header .fn-mobile-header-order {
    left: 0 !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 38px !important;
    padding: 0 .55rem !important;
    font-size: 10px !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 116px !important;
    max-width: 116px !important;
    min-width: 116px !important;
    padding: 0 !important;
  }

  html body > header a[aria-label="Freshnaps home"] img {
    display: block !important;
    height: 50px !important;
    width: auto !important;
    max-width: 104px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body > header button[aria-label="Open menu"] {
    right: 8px !important;
  }
}

/* Absolute final: compensate mobile header shell gutter for true viewport-centered logo. */
@media (max-width: 1023px) {
  html body > header .fn-mobile-header-order {
    left: -8px !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    left: calc(50% + 8px) !important;
  }
}

/* Absolute final: nudge visible mobile logo onto true viewport center. */
@media (max-width: 1023px) {
  html body > header a[aria-label="Freshnaps home"] {
    left: 50% !important;
    transform: translate(calc(-50% + 8px), -50%) !important;
  }
}

/* v141: desktop hero card left alignment, comparison rows left, and final mobile header geometry. */
@media (min-width: 1024px) {
  html body:has(#product) main > section:first-child > .section-shell,
  html body.fn-home main > section:first-child > .section-shell {
    justify-content: flex-start !important;
    align-items: center !important;
  }

  html body:has(#product) main > section:first-child > .section-shell > div,
  html body.fn-home main > section:first-child > .section-shell > div {
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
  }
}

html body main .fn-use-case-comparison,
html body main .fn-use-case-comparison * {
  text-align: left !important;
}

html body main .fn-comparison-table,
html body main .fn-comparison-row,
html body main .fn-comparison-feature,
html body main .fn-comparison-freshnaps,
html body main .fn-comparison-cloths {
  text-align: left !important;
  justify-items: start !important;
  justify-content: start !important;
  align-items: center !important;
}

html body main .fn-comparison-freshnaps,
html body main .fn-comparison-cloths {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: .75rem !important;
}

@media (max-width: 767px) {
  html body main .fn-comparison-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body main .fn-comparison-feature {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  html body main .fn-comparison-freshnaps,
  html body main .fn-comparison-cloths {
    min-width: 0 !important;
    padding-left: 1rem !important;
    padding-right: .75rem !important;
  }
}

@media (max-width: 1023px) {
  html body > header > .section-shell {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 76px !important;
    min-height: 76px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body > header .fn-mobile-header-order {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 38px !important;
    min-height: 38px !important;
    box-shadow: none !important;
  }

  html body > header a[aria-label="Freshnaps home"] {
    position: absolute !important;
    left: calc(50% + 8px) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body > header a[aria-label="Freshnaps home"] img {
    height: 50px !important;
    width: auto !important;
    max-width: 104px !important;
  }

  html body > header button[aria-label="Open menu"] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* v142: Facilities material-benefit cards match the compact homepage cards. */
body[data-route="/facilities"] main [data-benefit-card],
body[data-route="/multipurposewipes"] main [data-benefit-card] {
  min-height: 145px !important;
  height: auto !important;
  padding: .85rem !important;
  gap: 0 !important;
}

body[data-route="/facilities"] main [data-benefit-card] img,
body[data-route="/multipurposewipes"] main [data-benefit-card] img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin-bottom: .5rem !important;
}

body[data-route="/facilities"] main [data-benefit-card] h2,
body[data-route="/multipurposewipes"] main [data-benefit-card] h2,
body[data-route="/facilities"] main [data-benefit-card] h3,
body[data-route="/multipurposewipes"] main [data-benefit-card] h3 {
  color: #0b4778 !important;
  font-size: .76rem !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  margin-top: .85rem !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
}

body[data-route="/facilities"] main [data-benefit-card] p,
body[data-route="/multipurposewipes"] main [data-benefit-card] p {
  color: #4e6672 !important;
  font-size: .7rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin-top: .4rem !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  body[data-route="/facilities"] main [data-benefit-card],
  body[data-route="/multipurposewipes"] main [data-benefit-card] {
    min-height: 165px !important;
    padding: 1rem !important;
  }

  body[data-route="/facilities"] main [data-benefit-card] h2,
  body[data-route="/multipurposewipes"] main [data-benefit-card] h2,
  body[data-route="/facilities"] main [data-benefit-card] h3,
  body[data-route="/multipurposewipes"] main [data-benefit-card] h3 {
    font-size: .95rem !important;
    line-height: 1.16 !important;
  }

  body[data-route="/facilities"] main [data-benefit-card] p,
  body[data-route="/multipurposewipes"] main [data-benefit-card] p {
    font-size: .88rem !important;
    line-height: 1.35 !important;
  }
}

/* v143: hard lock compact Facilities benefit-card headings against global mobile h2 rules. */
html body[data-route="/facilities"] main#main-content section [data-benefit-card] h2.fn-reveal:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] h2.fn-reveal:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b),
html body[data-route="/facilities"] main#main-content section [data-benefit-card] h3:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] h3:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b) {
  color: #0b4778 !important;
  font-size: .76rem !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  margin-top: .85rem !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

html body[data-route="/facilities"] main#main-content section [data-benefit-card] p:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] p:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b) {
  font-size: .7rem !important;
  line-height: 1.25 !important;
}

html body[data-route="/facilities"] main#main-content section [data-benefit-card]:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card]:not(#fn-benefit-lock-a):not(#fn-benefit-lock-b) {
  min-height: 145px !important;
  padding: .85rem !important;
}

/* v144: remove old Facilities benefit-card text minimums so cards stay homepage-sized. */
html body[data-route="/facilities"] main#main-content section [data-benefit-card]:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card]:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d) {
  min-height: 145px !important;
  height: 145px !important;
  max-height: 145px !important;
  padding: 13.6px 8.8px !important;
  overflow: hidden !important;
}

html body[data-route="/facilities"] main#main-content section [data-benefit-card] h2.fn-reveal:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] h2.fn-reveal:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d),
html body[data-route="/facilities"] main#main-content section [data-benefit-card] h3:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] h3:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d) {
  min-height: 0 !important;
  max-height: 28.4px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body[data-route="/facilities"] main#main-content section [data-benefit-card] p:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d),
html body[data-route="/multipurposewipes"] main#main-content section [data-benefit-card] p:not(#fn-benefit-lock-c):not(#fn-benefit-lock-d) {
  min-height: 0 !important;
  max-height: 28px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* v145: keep three-step number badges centered inside their green circles. */
html body main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number,
html body main #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number,
html body.fn-home main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number {
  display: grid !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(clamp(210px, 18vw, 300px) - 26px) !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: #52b84c !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  z-index: 5 !important;
}

html body main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number::before,
html body main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number::after {
  display: none !important;
}

@media (max-width: 767px) {
  html body main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number,
  html body main #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number,
  html body.fn-home main#main-content #product.fn-three-steps .fn-step-card .fn-step-copy > .fn-step-number {
    top: calc(clamp(120px, 24vw, 210px) - 18px) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    font-size: .9rem !important;
  }
}

/* Keep homepage material-benefit labels compact instead of inheriting section-heading sizing. */
html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] h2 {
  min-height: 2.5rem !important;
  margin: 0 !important;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem) !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  html body.fn-home main#main-content .fn-home-benefits [data-benefit-card] h2 {
    min-height: 2.25rem !important;
    font-size: 1rem !important;
  }
}

/* Final site-wide section-intro alignment: eyebrow, heading, then supporting copy. */
html body main :is(
  .fn-three-steps-heading,
  .fn-approved-industries-heading,
  .fn-selling-story-heading,
  .fn-product-technology-copy,
  .fn-facility-section-heading,
  .fn-comparison-heading,
  .fn-centered-alcohol-copy,
  .fn-use-ritual .section-shell > div:first-child,
  .fn-testimonials-clean > .section-shell > div:first-child,
  .fn-marketplace-section > .section-shell > div:first-child
) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  align-items: center !important;
}

html body main :is(
  .fn-three-steps-heading,
  .fn-approved-industries-heading,
  .fn-selling-story-heading,
  .fn-product-technology-copy,
  .fn-facility-section-heading,
  .fn-comparison-heading,
  .fn-centered-alcohol-copy,
  .fn-use-ritual .section-shell > div:first-child,
  .fn-testimonials-clean > .section-shell > div:first-child,
  .fn-marketplace-section > .section-shell > div:first-child
) :is(.eyebrow, h2, h2 *, p:not(.eyebrow)),
html body main :is(.fn-site-section-eyebrow, .fn-site-section-heading, .fn-site-section-intro) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body main .fn-site-section-eyebrow {
  display: block !important;
}

/* Specificity lock for section intros; overrides the legacy global left-align lock. */
html body main#main-content :is(
  .fn-three-steps-heading,
  .fn-approved-industries-heading,
  .fn-selling-story-heading,
  .fn-product-technology-copy,
  .fn-facility-section-heading,
  .fn-comparison-heading,
  .fn-centered-alcohol-copy,
  .fn-use-ritual .section-shell > div:first-child,
  .fn-testimonials-clean > .section-shell > div:first-child,
  .fn-marketplace-section > .section-shell > div:first-child
):not(#fn-section-center-a):not(#fn-section-center-b):not(#fn-section-center-c) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

html body main#main-content :is(
  .fn-three-steps-heading,
  .fn-approved-industries-heading,
  .fn-selling-story-heading,
  .fn-product-technology-copy,
  .fn-facility-section-heading,
  .fn-comparison-heading,
  .fn-centered-alcohol-copy,
  .fn-use-ritual .section-shell > div:first-child,
  .fn-testimonials-clean > .section-shell > div:first-child,
  .fn-marketplace-section > .section-shell > div:first-child
) :is(.eyebrow, h2, h2 *, p:not(.eyebrow)):not(#fn-section-center-a):not(#fn-section-center-b):not(#fn-section-center-c),
html body main#main-content :is(.fn-site-section-eyebrow, .fn-site-section-heading, .fn-site-section-intro):not(#fn-section-center-a):not(#fn-section-center-b):not(#fn-section-center-c) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Compact, centered material-benefit cards on Home and Facilities. */
html body main#main-content .fn-facility-benefits .fn-facility-benefit-grid {
  gap: 1rem !important;
  justify-content: center !important;
}

html body main#main-content .fn-facility-benefits .fn-facility-benefit-grid > [data-benefit-card]:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
  width: 240px !important;
  min-width: 0 !important;
  max-width: 240px !important;
  min-height: 175px !important;
  height: auto !important;
  flex: 0 0 240px !important;
  padding: .75rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

html body main#main-content .fn-facility-benefits [data-benefit-card] img:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  margin: 0 auto .45rem !important;
}

html body main#main-content .fn-facility-benefits [data-benefit-card] :is(h2, h3):not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
  min-height: 2.1rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html body main#main-content .fn-facility-benefits [data-benefit-card] p:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
  max-width: 205px !important;
  min-height: 0 !important;
  margin: .25rem auto 0 !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  html body main#main-content .fn-facility-benefits .fn-facility-benefit-grid > [data-benefit-card]:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
    width: 100% !important;
    max-width: none !important;
    min-height: 150px !important;
    flex: none !important;
    padding: .75rem .55rem !important;
  }

  html body main#main-content .fn-facility-benefits [data-benefit-card] img:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  html body main#main-content .fn-facility-benefits [data-benefit-card] :is(h2, h3):not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
    min-height: 2rem !important;
    font-size: .9rem !important;
  }

  html body main#main-content .fn-facility-benefits [data-benefit-card] p:not(#fn-benefit-center-a):not(#fn-benefit-center-b):not(#fn-benefit-center-c) {
    min-height: 0 !important;
    font-size: .78rem !important;
  }
}

/* Match the two-word homepage hero treatment: Clean / Reset. */
html body.fn-home main#main-content #fn-mobile-hero h1 > span:not(#fn-hero-word-a):not(#fn-hero-word-b):not(#fn-hero-word-c) {
  display: table !important;
  width: fit-content !important;
  color: #52b84c !important;
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: .03em !important;
  font-weight: 900 !important;
}

/* Keep the homepage Order Now CTA flat at every breakpoint and interaction state. */
html body.fn-home main#main-content a.fn-order-now-cta:not(#fn-order-shadow-a):not(#fn-order-shadow-b):not(#fn-order-shadow-c),
html body.fn-home main#main-content a.fn-order-now-cta:not(#fn-order-shadow-a):not(#fn-order-shadow-b):not(#fn-order-shadow-c) *,
html body.fn-home main#main-content a.fn-order-now-cta:not(#fn-order-shadow-a):not(#fn-order-shadow-b):not(#fn-order-shadow-c)::before,
html body.fn-home main#main-content a.fn-order-now-cta:not(#fn-order-shadow-a):not(#fn-order-shadow-b):not(#fn-order-shadow-c)::after {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Keep the homepage hero card on the left and vertically centered. */
html body.fn-home main#main-content section#fn-mobile-hero > .section-shell:not(#fn-hero-card-a):not(#fn-hero-card-b):not(#fn-hero-card-c) {
  justify-content: flex-start !important;
  align-items: center !important;
}

html body.fn-home main#main-content section#fn-mobile-hero > .section-shell > div:first-child:not(#fn-hero-card-a):not(#fn-hero-card-b):not(#fn-hero-card-c) {
  width: min(465px, 100%) !important;
  max-width: 465px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 767px) {
  html body.fn-home main#main-content section#fn-mobile-hero > .section-shell > div:first-child:not(#fn-hero-mobile-offset-a):not(#fn-hero-mobile-offset-b):not(#fn-hero-mobile-offset-c) {
    transform: translateY(133px) !important;
  }

  html body.fn-home main#main-content section#fn-mobile-hero h1:not(#fn-hero-mobile-left-a):not(#fn-hero-mobile-left-b):not(#fn-hero-mobile-left-c) {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body.fn-home main#main-content section#fn-mobile-hero h1 > span:not(#fn-hero-mobile-color-a):not(#fn-hero-mobile-color-b):not(#fn-hero-mobile-color-c) {
    color: #52b84c !important;
  }

  html body.fn-home main#main-content section#fn-mobile-hero h1 + p:not(#fn-hero-mobile-color-a):not(#fn-hero-mobile-color-b):not(#fn-hero-mobile-color-c),
  html body.fn-home main#main-content section#fn-mobile-hero [data-hero-reveal].grid span:not(#fn-hero-mobile-color-a):not(#fn-hero-mobile-color-b):not(#fn-hero-mobile-color-c) {
    color: #082f49 !important;
  }
}

/* Display the highlighted Clean / Reset words horizontally. */
html body.fn-home main#main-content section#fn-mobile-hero h1:not(#fn-hero-horizontal-a):not(#fn-hero-horizontal-b):not(#fn-hero-horizontal-c) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .12em !important;
  width: fit-content !important;
  max-width: 100% !important;
}

html body.fn-home main#main-content section#fn-mobile-hero h1 > span:not(#fn-hero-horizontal-a):not(#fn-hero-horizontal-b):not(#fn-hero-horizontal-c) {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Preserve sentence case in the homepage hero supporting copy. */
html body.fn-home main#main-content section#fn-mobile-hero p[data-hero-reveal]:not(#fn-hero-sentence-case-a):not(#fn-hero-sentence-case-b):not(#fn-hero-sentence-case-c),
html body.fn-home main#main-content section#fn-mobile-hero p[data-hero-reveal] .fn-hero-copy-line {
  text-transform: none !important;
}

/* Center the homepage Order Now label within its button. */
html body.fn-home main#main-content section#fn-mobile-hero a.fn-order-now-cta > span > span {
  justify-content: center !important;
  text-align: center !important;
}

/* Center the homepage surface-use cards. */
html body.fn-home main#main-content section.fn-use-ritual article:not(#fn-use-card-center-a):not(#fn-use-card-center-b):not(#fn-use-card-center-c),
html body.fn-home main#main-content section.fn-use-ritual article > div:first-child:not(#fn-use-card-center-a):not(#fn-use-card-center-b):not(#fn-use-card-center-c) {
  align-items: center !important;
  text-align: center !important;
}

html body.fn-home main#main-content section.fn-use-ritual article > div:first-child > div:first-child:not(#fn-use-card-center-a):not(#fn-use-card-center-b):not(#fn-use-card-center-c) {
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.fn-home main#main-content section.fn-use-ritual article h3:not(#fn-use-card-center-a):not(#fn-use-card-center-b):not(#fn-use-card-center-c),
html body.fn-home main#main-content section.fn-use-ritual article p:not(#fn-use-card-center-a):not(#fn-use-card-center-b):not(#fn-use-card-center-c) {
  width: 100% !important;
  text-align: center !important;
}

/* Center the footer brand block. */
html body footer .section-shell > div:first-child:not(#fn-footer-center-a):not(#fn-footer-center-b):not(#fn-footer-center-c) {
  text-align: center !important;
}

html body footer .section-shell > div:first-child > a:not(#fn-footer-center-a):not(#fn-footer-center-b):not(#fn-footer-center-c),
html body footer .section-shell > div:first-child > p:not(#fn-footer-center-a):not(#fn-footer-center-b):not(#fn-footer-center-c) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Persistent homepage ordering actions. */
html body.fn-home {
  padding-bottom: 72px !important;
}

html body.fn-home .fn-home-sticky-actions:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
  position: fixed !important;
  z-index: 1000 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  min-height: 72px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  background: rgba(255, 255, 255, .96) !important;
  border-top: 1px solid #d9e3e7 !important;
  backdrop-filter: blur(10px) !important;
}

html body.fn-home .fn-home-sticky-actions > a:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body.fn-home .fn-home-sticky-order:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
  min-width: 220px !important;
  padding: 0 1.5rem !important;
  gap: .8rem !important;
  color: #fff !important;
  background: #1592cf !important;
}

html body.fn-home .fn-home-sticky-sample:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
  min-width: 220px !important;
  padding: 0 1.5rem !important;
  color: #fff !important;
  background: #4fba49 !important;
  border: 0 !important;
  border-radius: 999px !important;
}

@media (max-width: 767px) {
  html body.fn-home {
    padding-bottom: 68px !important;
  }

  html body.fn-home .fn-home-sticky-actions:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
    min-height: 68px !important;
    padding: 8px 10px !important;
    gap: .6rem !important;
  }

  html body.fn-home .fn-home-sticky-actions > a:not(#fn-sticky-actions-a):not(#fn-sticky-actions-b):not(#fn-sticky-actions-c) {
    width: calc(50% - .3rem) !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 .7rem !important;
    font-size: .72rem !important;
  }
}

/* Let the mobile hero copy fill the card width and wrap naturally. */
@media (max-width: 767px) {
  html body.fn-home main#main-content section#fn-mobile-hero p[data-hero-reveal]:not(#fn-hero-copy-width-a):not(#fn-hero-copy-width-b):not(#fn-hero-copy-width-c) {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(.7rem, 3.6vw, .95rem) !important;
    line-height: 1.25 !important;
  }

  html body.fn-home main#main-content section#fn-mobile-hero p[data-hero-reveal] .fn-hero-copy-line:not(#fn-hero-copy-width-a):not(#fn-hero-copy-width-b):not(#fn-hero-copy-width-c) {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
}



/* Center complete and partial marketplace-logo rows. */
html body main#main-content .fn-marketplace-logo-grid:not(#fn-market-grid-a):not(#fn-market-grid-b):not(#fn-market-grid-c) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

html body main#main-content .fn-marketplace-logo-grid > * {
  width: 183px !important;
  max-width: 183px !important;
  flex: 0 1 183px !important;
}

@media (max-width: 767px) {
  html body main#main-content .fn-marketplace-logo-grid > * {
    width: calc(50% - .5rem) !important;
    max-width: none !important;
    flex: 0 0 calc(50% - .5rem) !important;
  }
}

/* Keep each testimonial's five rating stars together as one centered group. */
html body main#main-content .fn-testimonials-clean .grid > div .flex.gap-1:not(#fn-rating-a):not(#fn-rating-b):not(#fn-rating-c) {
  display: flex !important;
  width: fit-content !important;
  margin: 0 auto 1.5rem !important;
  gap: .25rem !important;
  justify-content: center !important;
  align-items: center !important;
}

html body main#main-content .fn-testimonials-clean .grid > div .flex.gap-1 > svg:not(#fn-rating-a):not(#fn-rating-b):not(#fn-rating-c) {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 20px !important;
}

/* Keep the four numbered selling-story cards equal, compact, and centered. */
html body main#main-content .fn-selling-story .fn-selling-story-grid:not(#fn-story-grid-a):not(#fn-story-grid-b):not(#fn-story-grid-c) {
  width: 100% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: stretch !important;
}

html body main#main-content .fn-selling-story .fn-selling-story-grid > article:not(#fn-story-card-a):not(#fn-story-card-b):not(#fn-story-card-c) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 180px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  align-self: stretch !important;
  align-content: start !important;
}

@media (max-width: 767px) {
  html body main#main-content .fn-selling-story .fn-selling-story-grid:not(#fn-story-grid-a):not(#fn-story-grid-b):not(#fn-story-grid-c) {
    max-width: 560px !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: .75rem !important;
  }

  html body main#main-content .fn-selling-story .fn-selling-story-grid > article:not(#fn-story-card-a):not(#fn-story-card-b):not(#fn-story-card-c) {
    min-height: 155px !important;
    padding: 1.1rem 1.15rem !important;
  }
}

/* Center the title and description below each three-step image. */
html body.fn-home main#main-content #product.fn-three-steps article.fn-step-card .fn-step-copy:not(#fn-step-center-a):not(#fn-step-center-b):not(#fn-step-center-c) {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body.fn-home main#main-content #product.fn-three-steps article.fn-step-card .fn-step-copy > div:not(#fn-step-center-a):not(#fn-step-center-b):not(#fn-step-center-c) {
  width: 100% !important;
  text-align: center !important;
}

html body.fn-home main#main-content #product.fn-three-steps article.fn-step-card .fn-step-copy :is(h3, p):not(#fn-step-center-a):not(#fn-step-center-b):not(#fn-step-center-c) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body.fn-home main#main-content #product.fn-three-steps article.fn-step-card .fn-step-copy p:not(#fn-step-center-a):not(#fn-step-center-b):not(#fn-step-center-c) {
  max-width: 330px !important;
}

/* Compact Buy on Amazon buttons inside product cards. */
html body[data-route="/products"] main#main-content article a[href*="amazon.com"]:not(#fn-amazon-button-a):not(#fn-amazon-button-b):not(#fn-amazon-button-c) {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body[data-route="/products"] main#main-content article a[href*="amazon.com"] > span.group > span:not(#fn-amazon-button-a):not(#fn-amazon-button-b):not(#fn-amazon-button-c) {
  width: auto !important;
  min-width: 190px !important;
  min-height: 42px !important;
  padding: .65rem 1.15rem !important;
  gap: .45rem !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

html body[data-route="/products"] main#main-content article a[href*="amazon.com"] svg {
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 1024px) {
  html body[data-route="/products"] main#main-content > section.section-shell.pb-16 > div.grid:not(#fn-product-grid-a):not(#fn-product-grid-b):not(#fn-product-grid-c) {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }
}

/* Repair the original Facilities cloths-vs-wipes comparison card. */
html body[data-route="/facilities"] main#main-content .fn-facility-compare-header:not(#fn-facility-compare-a):not(#fn-facility-compare-b):not(#fn-facility-compare-c) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  gap: .65rem !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
}

html body[data-route="/facilities"] main#main-content .fn-facility-compare-header .fn-facility-compare-label:not(#fn-facility-compare-a):not(#fn-facility-compare-b):not(#fn-facility-compare-c) {
  width: 100% !important;
  height: 48px !important;
  padding: .5rem .65rem !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
}

html body[data-route="/facilities"] main#main-content .fn-facility-compare-header .fn-facility-compare-vs:not(#fn-facility-compare-a):not(#fn-facility-compare-b):not(#fn-facility-compare-c) {
  position: static !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  transform: none !important;
  translate: none !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

html body[data-route="/facilities"] main#main-content .fn-facility-compare-row:not(#fn-facility-compare-a):not(#fn-facility-compare-b):not(#fn-facility-compare-c) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  padding: .8rem 0 !important;
  align-items: stretch !important;
}

html body[data-route="/facilities"] main#main-content .fn-facility-compare-row .fn-facility-compare-cell:not(#fn-facility-compare-a):not(#fn-facility-compare-b):not(#fn-facility-compare-c) {
  min-width: 0 !important;
  padding-left: .25rem !important;
  padding-right: .25rem !important;
  gap: .65rem !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
}

html body[data-route="/facilities"] main#main-content .fn-facility-compare-row .fn-facility-compare-cell > span:first-child {
  margin: 0 !important;
}

/* Center and compact the three About Us value cards. */
html body[data-route="/about-us"] main .fn-about-values-grid:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c) {
  width: 100% !important;
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: stretch !important;
}

html body[data-route="/about-us"] main .fn-about-value-card:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c) {
  min-height: 190px !important;
  padding: 1.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body[data-route="/about-us"] main .fn-about-value-card .fn-about-value-icon:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c) {
  width: 48px !important;
  height: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: .75rem !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body[data-route="/about-us"] main .fn-about-value-card .fn-about-value-icon > svg:not(#fn-about-icon-a):not(#fn-about-icon-b):not(#fn-about-icon-c) {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
}

html body[data-route="/about-us"] main .fn-about-value-card .fn-about-value-heading:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c),
html body[data-route="/about-us"] main .fn-about-value-card .fn-about-value-copy:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c) {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body[data-route="/about-us"] main .fn-about-value-card .fn-about-value-copy:not(#fn-about-values-a):not(#fn-about-values-b):not(#fn-about-values-c) {
  max-width: 290px !important;
  margin-top: .55rem !important;
}