/* Geometry foundation inherited from the original composition. LUNERA colors begin below. */
:root{--pine:oklch(39% .075 326);--pine-dark:oklch(27% .055 326);--mist:oklch(92% .018 326);--sage:oklch(67% .035 326);--cream:oklch(97% .012 326);--ink:oklch(27% .026 326);--line:oklch(73% .027 326);--eunoia-accent:oklch(56% .09 22);--eunoia-paper:oklch(98% .009 326);--eunoia-muted:oklch(43% .025 326)}
body{background:var(--eunoia-paper)}
.hero{background:linear-gradient(115deg,oklch(98% .009 326),oklch(94% .016 326) 50%,oklch(98% .008 326))}.hero h1{color:var(--pine-dark)}.hero-orbit{border-color:oklch(48% .07 326/.18)}.cta{background:linear-gradient(100deg,oklch(48% .082 326),var(--pine) 56%,var(--pine-dark));box-shadow:0 12px 24px oklch(28% .045 326/.2)}.hero-signature,.results{background:var(--pine-dark)}.ticker-track,.wordmark{color:var(--pine)}.ticker-track span{border-color:var(--sage)}.brand-strip,footer,.simplify{background:var(--mist)}
.audience{background:var(--mist);padding-top:76px}.audience-ribbon{color:oklch(42% .045 326);opacity:.68}.collage{height:522px;margin-bottom:32px}.collage>div{border:7px solid var(--eunoia-paper);border-radius:20px;background:linear-gradient(145deg,oklch(88% .025 326),oklch(75% .035 326));box-shadow:0 18px 42px oklch(28% .035 326/.12)}.collage>div:nth-child(1){width:278px;height:410px;flex-basis:278px;margin-right:-50px;transform:rotate(-7deg) translateY(14px)}.collage>div:nth-child(2){width:278px;height:390px;flex-basis:278px;margin-right:-50px;transform:rotate(1.5deg) translateY(34px)}.collage>div:nth-child(3){width:300px;height:430px;flex-basis:300px;z-index:2;transform:translateY(-2px)}.collage>div:nth-child(4){width:278px;height:390px;flex-basis:278px;margin-left:-50px;transform:rotate(-1.5deg) translateY(34px)}.collage>div:nth-child(5){width:278px;height:410px;flex-basis:278px;margin-left:-50px;transform:rotate(7deg) translateY(14px)}
.audience .section-title{margin-bottom:38px;color:var(--ink);font-size:clamp(2.4rem,3.1vw,3.15rem);letter-spacing:-.045em}.audience-grid{gap:16px 18px}.audience-grid article{height:218px;padding:20px 21px;border:1px solid oklch(48% .06 326);border-radius:19px;background:oklch(56% .055 326);box-shadow:0 10px 26px oklch(30% .035 326/.08);font-size:18px;line-height:1.28;transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .25s cubic-bezier(.22,1,.36,1)}
/* Keep the four-card first row on one optical baseline. The reference uses no stagger here. */
.audience-grid article:nth-child(even){transform:none}.audience-grid article:hover{background:var(--pine);transform:translateY(-4px)}.audience-grid article:nth-child(even):hover{transform:translateY(-4px)}
.audience-grid article i{width:48px;height:48px;border-radius:11px;color:var(--pine);background:var(--eunoia-paper)}.audience-grid article i svg{width:35px;height:35px}.audience-grid article p{margin-top:18px}
.science{background:var(--eunoia-paper)}.science-card{min-height:880px;padding:82px clamp(40px,10vw,164px) 68px;border-color:var(--line);border-radius:58px 58px 24px 24px;background:var(--mist)}.science-card .seal{top:-57px;width:114px;height:114px;border:13px solid oklch(86% .025 326);background:var(--pine);font-size:0;box-shadow:0 0 0 1px var(--line)}.science-card .seal::after{content:"";width:54px;height:54px;background:currentColor;color:var(--eunoia-paper);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 24C18 19 18 7 24 6c6 1 6 13 0 18Z'/%3E%3Cpath d='M24 24C18 19 18 7 24 6c6 1 6 13 0 18Z' transform='rotate(45 24 24)'/%3E%3Cpath d='M24 24C18 19 18 7 24 6c6 1 6 13 0 18Z' transform='rotate(90 24 24)'/%3E%3Cpath d='M24 24C18 19 18 7 24 6c6 1 6 13 0 18Z' transform='rotate(135 24 24)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}.science-card h2{margin-bottom:14px;color:var(--pine-dark);font-size:clamp(2.4rem,3vw,3.2rem);letter-spacing:-.04em}.science-card>p{max-width:760px;margin:0 auto 24px;color:var(--eunoia-muted);line-height:1.58}.science-card ul{max-width:720px;gap:11px;margin:28px auto 30px}.science-card li{position:relative;min-height:52px;display:flex;align-items:center;padding:11px 25px 11px 68px;border:1px solid oklch(72% .028 326);border-radius:999px;background:oklch(84% .025 326);color:var(--pine-dark);font-size:17px;font-weight:600;text-align:left}.science-card li::before{content:"";position:absolute;left:-7px;width:50px;height:50px;border:7px solid var(--mist);border-radius:50%;background:var(--pine)}.science-card li::after{content:"✦";position:absolute;left:10px;color:var(--eunoia-paper);font-size:15px}.science-card li:nth-child(2),.science-card li:nth-child(4){width:92%;margin-inline:auto}.venn{margin:31px 0 24px}.venn span{border-color:var(--sage);background:oklch(96% .012 326/.72)}.formula{max-width:820px;margin-inline:auto;border-color:var(--sage);color:var(--pine-dark)}
@media(max-width:1199px){.collage>div:nth-child(n){width:220px;height:340px;flex-basis:220px;margin-inline:-30px}.science-card{padding-inline:8%}}
@media(max-width:767px){.audience{padding-top:58px}.collage{height:270px}.collage>div:nth-child(n){width:126px;height:224px;flex-basis:126px;margin-inline:-19px;border-width:4px}.collage>div:nth-child(3){height:246px}.audience-grid article,.audience-grid article:nth-child(even){height:auto;min-height:138px;transform:none}.audience-grid article:hover,.audience-grid article:nth-child(even):hover{transform:none}.science-card{padding:66px 18px 32px;border-radius:34px}.science-card .seal{top:-45px;width:90px;height:90px;border-width:10px}.science-card .seal::after{width:43px;height:43px}.science-card li,.science-card li:nth-child(n){width:100%;min-height:54px;padding:10px 12px 10px 57px;border-radius:18px;font-size:14px}.science-card li::before{left:4px;width:42px;height:42px;border-width:5px}.science-card li::after{left:18px}}html.motion-reduced .audience-grid article{transition:none}

/* LUNERA 30 visual DNA: color and asset treatment only; the reference geometry stays unchanged. */
:root{--pine:#24364f;--pine-dark:#15243a;--mist:#e9eef5;--sage:#7f96b5;--cream:#f8fafd;--ink:#1f2833;--line:#b9c6d8}
body{background:#f8fafd;color:var(--ink)}
.wordmark{height:72px;width:170px;overflow:hidden}.wordmark img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero h1{color:#24364f}.hero-orbit{border-color:rgba(75,100,135,.22)}.hero-signature,.results{background:#15243a}.ticker-track,.wordmark{color:#24364f}.ticker-track span{border-color:#7f96b5}.cta{background:linear-gradient(100deg,#4b6487,#24364f 60%,#15243a)}
.photo-slot>img{width:100%;height:100%;object-fit:cover}.hero-photo>img{object-position:center}.intro-photo img{object-position:center}.ritual-photo img{object-position:center}.collage>div>img{width:100%;height:100%;object-fit:cover}.product-photo{overflow:hidden}.product-photo>img{object-position:center}.subscription-banner .photo-slot>img,.subscription-benefits .photo-slot>img,.about-card .photo-slot>img{width:100%;height:100%;object-fit:cover}.about-card .photo-slot{overflow:hidden}
.product-jar{background:linear-gradient(115deg,#101f38,#314d74 60%,#0e1b30);box-shadow:0 20px 35px rgba(21,36,58,.28)}.jars{background-position:center;background-size:contain;background-repeat:no-repeat}.jars[data-image] span{visibility:hidden}.kit-card h3 b{background:#24364f}.carousel-controls button{background:#24364f}.brand-strip,footer,.simplify{background:#e9eef5}.audience{background:#e9eef5}.audience-ribbon{color:#4b6487}.audience-grid article{background:#4b6487;border-color:#24364f}.subscription-banner{background:#4b6487}.subscription-benefits article{background:#24364f}.accordion article.open button{background:#24364f}.accordion button b{background:#24364f}.accordion article.open button b{color:#24364f}.footer-contact p,.footer-company p{color:#40536d}

/* LUNERA 30 hero composition: full-bleed reference layout. */
.hero{background:linear-gradient(90deg,rgba(248,250,253,.98) 0%,rgba(248,250,253,.93) 28%,rgba(248,250,253,.48) 50%,rgba(248,250,253,0) 72%),url("IMAGENS PARA A PÁGINA/imagem de fundo seção hero.png") center/cover no-repeat!important}
.hero-copy{position:relative;z-index:5}.hero-photo{background:transparent!important}.hero-photo>img{opacity:0}.hero-photo .benefit-chip{z-index:6}.hero-grid{min-height:620px}
@media(max-width:767px){.hero{background:linear-gradient(90deg,rgba(248,250,253,.99) 0%,rgba(248,250,253,.96) 44%,rgba(248,250,253,.68) 70%,rgba(248,250,253,0) 100%),url("IMAGENS PARA A PÁGINA/imagem de fundo seção hero.png") 72% center/auto 100% no-repeat!important;background-color:#f8fafd}.hero-photo{height:0;margin:0;overflow:visible}.hero-grid{gap:0}}

/* Reference geometry refinements, recolored with the LUNERA lunar palette. */
.intro-photo>img,.about-card .photo-slot>img{object-fit:cover;object-position:center}
.collage>div>img{object-fit:cover;object-position:center}
.ritual-inner{min-height:920px;background:#e9eef5;border-radius:56px 56px 0 0}
.ritual-photo{min-height:920px}.ritual-photo>img{object-position:center 42%}
.results{background:#24364f;color:#f8fafd}.results .ingredients article,.results .clean-formula{background:#7f96b5;color:#f8fafd}.results .ingredients h3{color:#15243a}.results .ingredients i{color:#24364f}.results .product-photo{background:#e9eef5}.results .product-photo>img{object-fit:cover;object-position:center 65%}.results .compare .before{background:#5b7392}.results .compare .after{background:#15243a}.results .product-stage{background-color:#24364f;background-repeat:no-repeat;background-position:center;background-size:cover}.results .product-stage .product-jar,.results .product-stage .stage-word,.results .product-stage .stage-box{display:none}.results .product-stage p{color:#24364f}
.results .ingredients .product-photo,.results .ingredients .clean-formula{width:auto;justify-self:stretch;border-radius:18px!important}.results .ingredients .product-photo>img{object-position:center center}
.science-card{background-color:#e9eef5;background-image:url("IMAGENS PARA A PÁGINA/imagem formula.png");background-repeat:no-repeat;background-position:left 62px;background-size:250px auto}.science-card .seal{background:#24364f}.science-card li{background:#b9c6d8;color:#24364f}.science-card .formula{border-color:#7f96b5;color:#24364f}
.subscription-banner{background:#4b6487}.subscription-banner>div:first-child{background:linear-gradient(135deg,#24364f,#4b6487)}.subscription-banner .photo-slot>img{object-fit:contain;object-position:center bottom}.subscription-banner h3{color:#f8fafd}.subscription-benefits article{background:#24364f}.subscription-benefits h3{color:#24364f}.subscription-benefits .photo-slot>img{object-fit:cover}
.simplify{background:#e9eef5}.simple-grid{background:#24364f}.simple-grid article{color:#1f2833}.simple-grid article:first-letter{color:#24364f;background:#e9eef5}
.kits{background:#f8fafd}.kit-card{background:#f8fafd;border:1px solid #e9eef5}.kit-card h3 b,.kit-card .cta{background:#24364f}.kit-card mark{background:#b9c6d8;color:#24364f}.jars{background-size:contain!important;background-position:center!important}.jars span{display:none}
.about-card{background:#e9eef5}.about-card h2 .serif{color:#24364f}.faq{background:#f8fafd}.accordion button{background:#e9eef5;color:#1f2833}.accordion article.open button,.accordion article.open .answer p{background:#24364f}.accordion button b{background:#24364f}.accordion article.open button b{color:#24364f;background:#f8fafd}
footer{background:#e9eef5}.footer-grid h3{color:#24364f}.footer-grid p{color:#40536d}.footer-bottom{border-color:#b9c6d8}.payment-badges span{color:#24364f}.payment-badges strong{color:#24364f}
@media(max-width:767px){.science-card{background-position:center 34px;background-size:150px auto;padding-top:190px}.ritual-inner{min-height:0}.ritual-photo{min-height:440px}.results .product-stage{min-height:470px}.subscription-banner .photo-slot>img{object-fit:contain}.about-card .photo-slot{min-height:320px}.about-card .photo-slot>img{object-position:center}}

/* Final visual refinements: lighter hero, stronger image compositions, and clearer offers. */
.hero {
  min-height: 680px;
  background-size: 100% 100%, auto 92% !important;
  background-position: center, right center !important;
}

.hero h1 {
  max-width: 640px;
  font-family: Inter, Arial, sans-serif;
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1.02;
}

.hero h1 .serif {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@media (min-width: 1200px) {
  .split-card {
    width: min(1088px, calc(100% - 48px));
    height: 620px;
    grid-template-columns: 48% 52%;
  }

  .intro-copy {
    padding: 72px 42px 48px;
  }

  .intro-photo {
    top: -54px;
    right: -26px;
    width: 560px;
    height: 710px;
  }
}

/* The reference asset carries the entire ritual composition, including its quiet left side. */
.ritual {
  position: relative;
  padding-top: 28px;
  background-color: #e9eef5;
  background-image: url("IMAGENS%20PARA%20A%20P%C3%81GINA/IMAGEM%20SE%C3%87%C3%83O%2002.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.ritual-inner {
  background: transparent !important;
}

.ritual-photo {
  opacity: 0;
  pointer-events: none;
}

.purchase-panel {
  background: rgba(248, 250, 253, .94);
  box-shadow: 0 18px 45px rgba(21, 36, 58, .12);
  backdrop-filter: blur(8px);
}

/* Give the product image the visual weight of the lower results panel and fade it into the section. */
@media (min-width: 1200px) {
  .results .ingredients {
    grid-template-areas: "ingredient-a ingredient-b ingredient-c" "ingredient-d product product" "formula formula formula";
  }

  .results .ingredients > article:nth-child(1) { grid-area: ingredient-a; }
  .results .ingredients > article:nth-child(2) { grid-area: ingredient-b; }
  .results .ingredients > article:nth-child(3) { grid-area: ingredient-c; }
  .results .ingredients > article:nth-child(4) { grid-area: ingredient-d; }
  .results .ingredients .product-photo { grid-area: product; }
  .results .ingredients .clean-formula { grid-area: formula; }
}

.results .ingredients .product-photo {
  position: relative;
  width: auto;
  height: 338px;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px !important;
  background: #e9eef5;
}

.results .ingredients .product-photo > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 61%;
  transform: scale(1.08);
}

.results .ingredients .product-photo::after {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(36, 54, 79, 0) 0%, rgba(36, 54, 79, .2) 42%, #24364f 100%);
}

.results .ingredients .clean-formula {
  min-height: 220px;
  border-radius: 22px !important;
}

/* The green ingredient image becomes a larger, softly masked botanical anchor. */
.science-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
}

.science-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -30px;
  bottom: -46px;
  width: 470px;
  height: 470px;
  background: url("IMAGENS%20PARA%20A%20P%C3%81GINA/imagem%20formula.png") center / cover no-repeat;
  opacity: .82;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 36%, #000 72%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, #000 36%, #000 72%, transparent 100%);
}

.science-card > * {
  position: relative;
  z-index: 1;
}

/* Keep the signature woman floating above the subscription card instead of defining its height. */
.subscription-banner {
  position: relative;
  min-height: 360px;
  overflow: visible;
  grid-template-columns: 38% 62%;
  margin-top: 124px;
}

.subscription-banner > div:first-child {
  position: absolute;
  z-index: 2;
  top: -132px;
  left: -28px;
  width: 42%;
  height: 492px;
  overflow: visible;
  background: transparent;
}

.subscription-banner > div:first-child > img {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 24px rgba(21, 36, 58, .12));
}

.subscription-banner > div:last-child {
  grid-column: 1 / -1;
  padding: 54px 58px 48px 39%;
}

/* Turn the cycle cards into a deliberate price comparison instead of a simple product row. */
.kits .section-heading h2 {
  color: #15243a;
  font-size: 44px;
  font-weight: 600;
}

.kits .section-heading p {
  max-width: 620px;
  margin-inline: auto;
  color: #40536d;
}

.kit-card {
  position: relative;
  display: flex;
  min-height: 735px;
  flex-direction: column;
  padding: 18px 20px 22px;
  border: 1px solid #9eafc7;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(21, 36, 58, .1);
}

.kit-card:hover {
  border-color: #24364f;
  box-shadow: 0 22px 44px rgba(21, 36, 58, .16);
}

.kit-card .jars {
  height: 285px;
  margin: -18px -20px 0;
  border-radius: 23px 23px 0 0;
  background-color: #edf2f7;
  background-size: 125% auto !important;
}

.kit-card .jars.six {
  background-size: 135% auto !important;
}

.kit-card h3 {
  margin: 23px 0 0;
  color: #15243a;
  font-size: 24px;
  line-height: 1.12;
}

.kit-card h3 b {
  margin-top: 11px;
  padding: 10px 12px;
  color: #fff;
  background: #24364f;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
}

.kit-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 0 !important;
  color: #15243a;
}

.kit-price span,
.kit-price small {
  color: #607693;
  font-size: 13px;
  font-weight: 500;
}

.kit-price strong {
  font-size: 34px;
  letter-spacing: -.03em;
}

.kit-details {
  min-height: 66px;
  margin: 11px 5px 0 !important;
  color: #40536d;
  font-size: 14px;
  line-height: 1.45;
}

.kit-card mark {
  margin: 12px 0 11px;
  padding: 8px 12px;
  border: 1px solid #9eafc7;
  border-radius: 999px;
  color: #24364f;
  background: #e8eef6;
  font-size: 12px;
  font-weight: 700;
}

.kit-benefits {
  display: grid;
  gap: 7px;
  margin: 0 0 20px;
  padding: 0;
  color: #40536d;
  list-style: none;
  text-align: left;
}

.kit-benefits li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.35;
}

.kit-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #24364f;
  font-weight: 700;
}

.kit-card .cta {
  margin-top: auto;
  min-height: 58px;
  border: 1px solid #15243a;
  background: #24364f;
}

@media (max-width: 1199px) {
  .hero { min-height: 620px; }
  .hero h1 { font-size: 50px; }
  .results .ingredients .product-photo { height: 300px; }
  .science-card::after { width: 390px; height: 390px; }
  .subscription-banner { min-height: 360px; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 650px;
    background-size: 100% 100%, auto 72% !important;
    background-position: center, 82% center !important;
  }

  .hero h1 {
    max-width: 360px;
    font-size: 40px;
    letter-spacing: -.7px;
  }

  .ritual {
    padding-top: 0;
    background-position: 68% top;
  }

  .ritual-copy {
    background: linear-gradient(90deg, rgba(233, 238, 245, .98), rgba(233, 238, 245, .7));
  }

  .results .ingredients .product-photo {
    height: 290px;
  }

  .science-card::after {
    right: -54px;
    bottom: -26px;
    width: 290px;
    height: 290px;
    opacity: .6;
  }

  .subscription-banner {
    display: block;
    min-height: 0;
    margin-top: 156px;
    padding-top: 170px;
  }

  .subscription-banner > div:first-child {
    top: -160px;
    left: 22%;
    width: 56%;
    height: 330px;
  }

  .subscription-banner > div:last-child {
    padding: 28px 22px 32px;
  }

  .kits .section-heading h2 { font-size: 34px; }
  .kit-card { min-height: 690px; }
  .kit-card .jars { height: 260px; }
}

@media (max-width: 374px) {
  .hero h1 { font-size: 35px; }
  .kit-card .jars { height: 230px; }
}

/* Final correction pass: restore the softer type, give the hero asset more presence,
   and keep the botanical and product transitions visible at their section edges. */
.wordmark {
  width: 230px;
  height: 96px;
  margin-bottom: 18px;
}

.wordmark img {
  object-fit: contain;
}

.hero {
  background-size: 100% 100%, auto 110% !important;
  background-position: center, 108% center !important;
}

.hero h1 {
  max-width: 680px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 72px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: .98;
}

.hero h1 .serif {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* The herb returns to the upper-left and remains echoed as a second botanical
   accent in the lower-right pseudo-element. The seal is allowed to breathe. */
.science-card {
  overflow: visible;
  background-image: url("IMAGENS%20PARA%20A%20P%C3%81GINA/imagem%20formula.png") !important;
  background-repeat: no-repeat;
  background-position: left 44px;
  background-size: 270px auto;
  background-clip: padding-box;
}

.science-card::after {
  right: -30px;
  bottom: -46px;
  width: 470px;
  height: 470px;
}

/* Complete the lower fade into the dark results field. */
.results .ingredients .product-photo::after {
  content: "";
  height: 64%;
  background: linear-gradient(180deg, rgba(36, 54, 79, 0) 0%, rgba(36, 54, 79, .34) 42%, #24364f 100%);
}

/* Give the floating signature image clear air from the benefit container below. */
.subscription-banner {
  margin-bottom: 92px;
}

.subscription-banner > div:first-child > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.subscription-banner > div:first-child {
  top: -168px;
  left: -18px;
  width: 40%;
  height: 430px;
}

.about-card h2 .serif {
  font-size: 56px;
}

@media (max-width: 1199px) {
  .hero h1 { font-size: 62px; }
  .wordmark { width: 210px; height: 88px; }
}

@media (max-width: 767px) {
  .hero {
    background-size: 100% 100%, auto 110% !important;
    background-position: center, 96% center !important;
  }

  .wordmark {
    width: 190px;
    height: 80px;
    margin-bottom: 14px;
  }

  .hero h1 {
    max-width: 390px;
    font-size: 48px;
    line-height: 1;
  }

  .science-card {
    overflow: visible;
    background-position: center 34px;
    background-size: 170px auto;
    padding-top: 210px;
  }

  .subscription-banner {
    margin-bottom: 76px;
  }
}

/* Motion8 visual consolidation: one final geometry contract for the reviewed
   sections. Earlier palette and responsive rules remain available underneath. */
.subscription {
  padding-bottom: 128px;
}

.subscription-banner {
  margin-top: 124px;
  margin-bottom: 126px;
  min-height: 360px;
  overflow: visible;
}

.subscription-banner > div:first-child {
  top: auto;
  right: auto;
  bottom: 0;
  left: -2%;
  width: 36%;
  height: 450px;
  overflow: visible;
}

.subscription-banner > div:first-child > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.subscription-banner > div:last-child {
  padding-left: 39%;
}

/* The product image and the Esqualano card share one grid baseline. */
.results .ingredients {
  align-items: stretch;
}

.results .ingredients > article:nth-child(4),
.results .ingredients .product-photo {
  align-self: stretch;
  margin-top: 0 !important;
  transform: none !important;
}

.results .ingredients .product-photo::after {
  display: none !important;
}

/* The fade belongs to the large guided-moment photograph and starts at its
   upper edge, where it meets the ingredient cards above. */
.results .product-stage {
  position: relative;
  isolation: isolate;
}

.results .product-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 42%;
  border-radius: 0;
  background: linear-gradient(180deg, #24364f 0%, rgba(36, 54, 79, .78) 25%, rgba(36, 54, 79, .2) 72%, transparent 100%);
  clip-path: none;
  transform: none;
  pointer-events: none;
}

.results .product-stage p {
  position: absolute;
  z-index: 4;
  max-width: 860px;
  background: rgba(248, 250, 253, .95);
  box-shadow: 0 14px 28px rgba(21, 36, 58, .18);
}

/* Refined offer hierarchy and controlled image overhang. */
.kits .section-heading h2 {
  font-size: 38px;
  font-weight: 500;
}

.kits .section-heading h2 .serif {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18em;
  font-weight: 500;
}

.kit-card {
  min-height: 700px;
  padding: 16px 18px 20px;
  border-radius: 20px;
}

.kit-card .jars {
  height: 252px;
  margin: -42px -18px 0;
  background-color: transparent;
  background-size: contain !important;
}

.kit-card:nth-child(1) .jars,
.kit-card:nth-child(3) .jars {
  width: calc(100% + 36px);
  margin-left: -24px;
  transform: translate(-8px, -4px);
  background-position: center top !important;
}

.kit-card:nth-child(2) .jars {
  transform: scale(.78) translateY(-4px);
  transform-origin: center top;
}

.kit-card h3 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.15;
}

.kit-card h3 b {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: .03em;
}

.kit-price {
  margin-top: 16px !important;
}

.kit-price strong {
  font-size: 30px;
}

.kit-details {
  min-height: 58px;
  font-size: 13px;
}

.kit-benefits {
  gap: 6px;
}

.kit-card .cta {
  min-height: 54px;
}

/* Make the brand statement quieter and more editorial. */
.about-card h2 {
  margin-bottom: 24px;
  color: #15243a;
  font-size: 36px;
  line-height: 1.05;
}

.about-card h2 .serif {
  font-size: 54px;
  font-weight: 500;
}

.about-card > div:last-child {
  padding: 64px 56px;
}

/* FAQ: a calm, narrow reading column with explicit active-state hierarchy. */
.faq {
  padding: 104px 0 90px;
}

.faq .narrow {
  width: min(900px, calc(100% - 48px));
}

.faq .section-title {
  margin-bottom: 38px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0;
}

.accordion {
  gap: 10px;
}

.accordion article {
  border-color: #d1dbe8;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(21, 36, 58, .045);
}

.accordion button {
  min-height: 72px;
  padding: 16px 68px 16px 56px;
  font-size: 15px;
  letter-spacing: .01em;
}

.accordion button::before {
  left: 20px;
  color: #7f96b5;
}

.accordion button b {
  position: absolute;
  right: 20px;
  width: 26px;
  height: 26px;
  font-size: 17px;
}

.accordion article .answer p {
  padding-inline: 56px;
  font-size: 14px;
}

/* Footer: stronger grouping, quieter labels, and a proper payment block. */
footer {
  padding-top: 82px;
  border-top: 1px solid #c5d1e1;
}

footer .footer-grid {
  width: min(1140px, calc(100% - 48px));
  grid-template-columns: 1.05fr .95fr 1fr;
  gap: 46px 60px;
}

footer h3 {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .12em;
}

footer p {
  font-size: 13px;
  line-height: 1.75;
}

footer .payment-security {
  padding: 22px 24px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(21, 36, 58, .05);
}

footer .payment-badges {
  gap: 8px;
}

footer .payment-badges span,
footer .payment-badges strong {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

footer .footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  padding-bottom: 30px;
  font-size: 12px;
}

@media (max-width: 1199px) {
  .subscription-banner > div:first-child {
    left: 0;
    width: 38%;
    height: 430px;
  }

  .kit-card .jars { height: 236px; }
}

@media (max-width: 767px) {
  .subscription {
    padding-bottom: 86px;
  }

  .subscription-banner {
    margin-top: 148px;
    margin-bottom: 104px;
  }

  .subscription-banner > div:first-child {
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 350px;
  }

  .kit-carousel,
  .carousel-track {
    overflow: hidden;
  }

  .kit-card {
    min-height: 680px;
  }

  .kit-card .jars { height: 236px; }

  .kit-card:nth-child(1) .jars,
  .kit-card:nth-child(3) .jars {
    width: calc(100% + 24px);
    margin-left: -14px;
    transform: translate(-4px, -2px);
  }

  .kit-card:nth-child(2) .jars {
    transform: scale(.82) translateY(-2px);
  }

  .about-card h2 {
    font-size: 30px;
  }

  .about-card h2 .serif { font-size: 46px; }

  .about-card > div:last-child {
    padding: 46px 24px;
  }

  .faq {
    padding: 76px 0 64px;
  }

  .faq .narrow { width: calc(100% - 32px); }
  .faq .section-title { font-size: 33px; }
  .accordion button { min-height: 66px; padding-left: 48px; }
  .accordion button::before { left: 16px; }
  .accordion button b { right: 16px; }
  .accordion article .answer p { padding-inline: 48px; }

  footer { padding-top: 60px; }
  footer .footer-grid {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    grid-template-areas: "company" "policies" "contact" "payment" "hours";
    gap: 28px;
  }

  footer .footer-bottom {
    width: calc(100% - 32px);
    margin-top: 42px;
  }
}

@media (max-width: 374px) {
  .hero h1 { font-size: 42px; }
}

/* Composition pass based on the latest visual review. */
.hero {
  min-height: 840px;
  padding-top: 124px;
  padding-bottom: 108px;
  background-position: center, 108% bottom !important;
}

.hero-grid {
  min-height: 690px;
}

.wordmark {
  margin-left: -4px;
  width: 248px;
  height: 104px;
}

.hero-signature {
  width: min(760px, calc(100% - 48px));
  min-height: 112px;
  gap: 32px;
  padding: 14px 34px;
}

.hero-signature .serif {
  flex: 0 0 auto;
  font-size: 58px;
}

.hero-signature p {
  max-width: 320px;
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

/* The large lifestyle image belongs to the guided-moment panel, not to the
   small ingredient card above it. */
.results .ingredients .product-photo::after {
  display: none;
}

.results .product-stage {
  isolation: isolate;
}

.results .product-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  width: auto;
  height: 58%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(36, 54, 79, 0) 0%, rgba(36, 54, 79, .38) 40%, #24364f 100%);
  transform: none;
  clip-path: none;
  pointer-events: none;
}

.results .product-stage p {
  z-index: 4;
  max-width: 880px;
  background: rgba(248, 250, 253, .94);
  box-shadow: 0 14px 28px rgba(21, 36, 58, .18);
}

/* Let the first and last offer images sit slightly beyond the top-left edge,
   while the continuity offer reads as the quieter middle choice. */
.kit-carousel,
.carousel-track {
  overflow: visible;
}

.kit-card {
  overflow: visible;
}

.kit-card .jars {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.kit-card:nth-child(1) .jars,
.kit-card:nth-child(3) .jars {
  width: calc(100% + 42px);
  margin-left: -32px;
  transform: translateY(-22px);
  background-position: 46% center !important;
}

.kit-card:nth-child(2) .jars {
  transform: scale(.86) translateY(-14px);
  transform-origin: center top;
}

.kit-card:nth-child(1) h3,
.kit-card:nth-child(3) h3 {
  margin-top: 1px;
}

/* More deliberate reading order for the FAQ and footer, without changing
   their established palette or section sequence. */
.faq {
  background: #f8fafd;
}

.faq .narrow {
  width: min(940px, calc(100% - 48px));
}

.faq .section-title {
  margin-bottom: 34px;
  color: #15243a;
  font-size: 46px;
  font-weight: 600;
}

.accordion {
  display: grid;
  gap: 12px;
  counter-reset: faq;
}

.accordion article {
  margin: 0;
  overflow: hidden;
  border: 1px solid #cbd6e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(21, 36, 58, .06);
}

.accordion button {
  min-height: 76px;
  padding: 18px 24px 18px 58px;
  position: relative;
  color: #15243a;
  background: #fff;
  font-size: 16px;
  text-align: left;
}

.accordion button::before {
  content: counter(faq, decimal-leading-zero);
  counter-increment: faq;
  position: absolute;
  left: 22px;
  color: #7f96b5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.accordion button b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #24364f;
  font-size: 19px;
  font-weight: 400;
}

.accordion article.open button {
  color: #fff;
  background: #24364f;
}

.accordion article.open button::before {
  color: #b9c6d8;
}

.accordion article.open button b {
  color: #24364f;
  background: #f8fafd;
}

.accordion article .answer p {
  color: #40536d;
  background: #edf2f7;
  font-size: 15px;
  line-height: 1.6;
}

footer {
  min-height: 0;
  padding: 88px 0 0;
  border-top: 1px solid #cbd6e5;
  background: #e9eef5;
}

footer .footer-grid {
  width: min(1140px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-areas: "company policies contact" "payment payment hours";
  gap: 52px 64px;
}

footer .footer-grid > div {
  min-width: 0;
}

footer h3 {
  margin: 0 0 16px;
  color: #15243a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

footer p {
  margin: 0;
  color: #40536d;
  font-size: 14px;
  line-height: 1.8;
}

footer .payment-security {
  padding: 24px 26px;
  border: 1px solid #cbd6e5;
  border-radius: 18px;
  background: rgba(248, 250, 253, .78);
}

footer .payment-badges {
  max-width: 720px;
  gap: 10px;
}

footer .payment-badges span,
footer .payment-badges strong {
  border: 1px solid #cbd6e5;
  border-radius: 6px;
  background: #fff;
}

footer .footer-bottom {
  width: min(1140px, calc(100% - 48px));
  margin-top: 72px;
  padding: 26px 0 34px;
  border-color: #b9c6d8;
  color: #607693;
}

@media (max-width: 1199px) {
  .hero { min-height: 780px; }
  .hero-grid { min-height: 640px; }
  .wordmark { width: 224px; height: 94px; }
  .kit-card:nth-child(1) .jars,
  .kit-card:nth-child(3) .jars { margin-left: -20px; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 760px;
    padding-top: 86px;
    padding-bottom: 120px;
    background-position: center, 96% bottom !important;
  }

  .hero-grid { min-height: 0; }

  .wordmark {
    width: 204px;
    height: 86px;
    margin-left: 0;
  }

  .hero-signature {
    width: calc(100% - 32px);
    min-height: 92px;
    gap: 14px;
    padding: 12px 18px;
  }

  .hero-signature .serif { font-size: 42px; }
  .hero-signature p { max-width: 190px; font-size: 12px; }

  .subscription-banner > div:first-child {
    top: -148px;
    left: 14%;
    width: 72%;
    height: 340px;
  }

  .about-card h2 .serif { font-size: 48px; }

  .results .product-stage::after { height: 54%; }

  .kit-carousel,
  .carousel-track { overflow: hidden; }

  .kit-card:nth-child(1) .jars,
  .kit-card:nth-child(3) .jars {
    width: calc(100% + 26px);
    margin-left: -18px;
    transform: translateY(-14px);
  }

  .kit-card:nth-child(2) .jars { transform: scale(.9) translateY(-10px); }

  .faq .narrow { width: calc(100% - 32px); }
  .faq .section-title { font-size: 35px; }
  .accordion button { min-height: 68px; padding-left: 50px; }
  .accordion button::before { left: 18px; }

  footer { padding-top: 64px; }
  footer .footer-grid {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    grid-template-areas: "company" "policies" "contact" "payment" "hours";
    gap: 32px;
  }

  footer .footer-bottom {
    width: calc(100% - 32px);
    margin-top: 48px;
  }
}

/* Final precedence layer. This intentionally lives after every legacy media
   query so the reviewed geometry cannot be reintroduced by older rules. */
.subscription {
  padding-bottom: 128px !important;
}

.subscription-banner {
  margin-top: 124px !important;
  margin-bottom: 126px !important;
  min-height: 360px !important;
  overflow: visible !important;
}

.subscription-banner > div:first-child {
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: -2% !important;
  width: 36% !important;
  height: 450px !important;
  overflow: visible !important;
}

.subscription-banner > div:first-child > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.subscription-banner > div:last-child {
  padding-left: 39% !important;
}

.results .ingredients {
  align-items: stretch !important;
}

.results .ingredients > article:nth-child(4),
.results .ingredients .product-photo {
  align-self: stretch !important;
  margin-top: 0 !important;
  transform: none !important;
}

.results .ingredients .product-photo::after {
  display: none !important;
}

.results .product-stage {
  position: relative !important;
  isolation: isolate;
}

.results .product-stage::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: auto !important;
  height: 42% !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #24364f 0%, rgba(36, 54, 79, .78) 25%, rgba(36, 54, 79, .2) 72%, transparent 100%) !important;
  clip-path: none !important;
  transform: none !important;
  pointer-events: none;
}

.results .product-stage p {
  position: absolute !important;
  z-index: 4 !important;
  max-width: 860px;
  background: rgba(248, 250, 253, .95);
  box-shadow: 0 14px 28px rgba(21, 36, 58, .18);
}

.kits .section-heading h2 {
  font-size: 38px !important;
  font-weight: 500 !important;
}

.kits .section-heading h2 .serif {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.18em !important;
  font-weight: 500 !important;
}

.kit-carousel,
.carousel-track,
.kit-card {
  overflow: visible !important;
}

.kit-card {
  min-height: 700px !important;
  padding: 16px 18px 20px !important;
  border-radius: 20px;
}

.kit-card .jars {
  position: relative;
  z-index: 2;
  height: 252px !important;
  margin: -42px -18px 0 !important;
  overflow: visible;
  background-color: transparent !important;
  background-size: contain !important;
}

.kit-card:nth-child(1) .jars,
.kit-card:nth-child(3) .jars {
  width: calc(100% + 36px) !important;
  margin-left: -24px !important;
  transform: translate(-8px, -4px) !important;
  background-position: center top !important;
}

.kit-card:nth-child(2) .jars {
  transform: scale(.78) translateY(-4px) !important;
  transform-origin: center top;
}

.kit-card h3 {
  margin-top: 14px !important;
  font-size: 20px !important;
  line-height: 1.15;
}

.kit-card h3 b {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

.kit-price { margin-top: 16px !important; }
.kit-price strong { font-size: 30px !important; }
.kit-details { min-height: 58px; font-size: 13px; }
.kit-card .cta { min-height: 54px; }

.about-card h2 {
  margin-bottom: 24px !important;
  color: #15243a;
  font-size: 36px !important;
  line-height: 1.05;
}

.about-card h2 .serif {
  font-size: 54px !important;
  font-weight: 500;
}

.about-card > div:last-child {
  padding: 64px 56px !important;
}

.faq {
  padding: 104px 0 90px !important;
}

.faq .narrow { width: min(900px, calc(100% - 48px)) !important; }
.faq .section-title { margin-bottom: 38px; font-size: 40px !important; font-weight: 500; letter-spacing: 0; }
.accordion { gap: 10px; }
.accordion article { margin: 0; border-color: #d1dbe8; border-radius: 12px; box-shadow: 0 8px 18px rgba(21, 36, 58, .045); }
.accordion button { min-height: 72px; padding: 16px 68px 16px 56px; font-size: 15px; }
.accordion button::before { left: 20px; color: #7f96b5; }
.accordion button b { position: absolute; right: 20px; width: 26px; height: 26px; font-size: 17px; }
.accordion article .answer p { padding-inline: 56px; color: #40536d; background: #edf2f7; font-size: 14px; line-height: 1.6; }

footer {
  min-height: 0 !important;
  padding-top: 82px !important;
  border-top: 1px solid #c5d1e1;
}

footer .footer-grid {
  width: min(1140px, calc(100% - 48px)) !important;
  grid-template-columns: 1.05fr .95fr 1fr;
  gap: 46px 60px;
}

footer h3 { margin-bottom: 14px; font-size: 12px; letter-spacing: .12em; }
footer p { font-size: 13px; line-height: 1.75; }
footer .payment-security { padding: 22px 24px; border-radius: 14px; box-shadow: 0 10px 24px rgba(21, 36, 58, .05); }
footer .payment-badges { gap: 8px; }
footer .payment-badges span,
footer .payment-badges strong { min-height: 28px; padding: 4px 8px; font-size: 10px; }
footer .footer-bottom { margin-top: 60px; padding-top: 24px; padding-bottom: 30px; font-size: 12px; }

@media (max-width: 1199px) {
  .subscription-banner > div:first-child { left: 0 !important; width: 38% !important; height: 430px !important; }
  .kit-card .jars { height: 236px !important; }
}

@media (max-width: 767px) {
  .subscription { padding-bottom: 86px !important; }
  .subscription-banner { margin-top: 148px !important; margin-bottom: 104px !important; }
  .subscription-banner > div:first-child { bottom: 0 !important; left: 10% !important; width: 80% !important; height: 350px !important; }
  .kit-carousel, .carousel-track { overflow: hidden !important; }
  .kit-card { min-height: 680px !important; }
  .kit-card .jars { height: 236px !important; }
  .kit-card:nth-child(1) .jars, .kit-card:nth-child(3) .jars { width: calc(100% + 24px) !important; margin-left: -14px !important; transform: translate(-4px, -2px) !important; }
  .kit-card:nth-child(2) .jars { transform: scale(.82) translateY(-2px) !important; }
  .about-card h2 { font-size: 30px !important; }
  .about-card h2 .serif { font-size: 46px !important; }
  .about-card > div:last-child { padding: 46px 24px !important; }
  .faq { padding: 76px 0 64px !important; }
  .faq .narrow { width: calc(100% - 32px) !important; }
  .faq .section-title { font-size: 33px !important; }
  .accordion button { min-height: 66px; padding-left: 48px; }
  .accordion button::before { left: 16px; }
  .accordion button b { right: 16px; }
  .accordion article .answer p { padding-inline: 48px; }
  footer { padding-top: 60px !important; }
  footer .footer-grid { width: calc(100% - 32px) !important; grid-template-columns: 1fr; grid-template-areas: "company" "policies" "contact" "payment" "hours"; gap: 28px; }
  footer .footer-bottom { width: calc(100% - 32px) !important; margin-top: 42px; }
}

/* Explicit image box: the transparent portrait must end at the card edge,
   rather than expanding to its intrinsic portrait ratio. */
.subscription-banner > div:first-child > img {
  width: 100% !important;
  height: 450px !important;
  max-height: 450px !important;
}

@media (max-width: 1199px) {
  .subscription-banner > div:first-child > img {
    height: 430px !important;
    max-height: 430px !important;
  }
}

@media (max-width: 767px) {
  .subscription-banner > div:first-child > img {
    height: 350px !important;
    max-height: 350px !important;
  }
}

/* Motion10 visual review: ritual labels, results grid height, cycle offers
   hierarchy and FAQ active-state colors. This layer sits last and wins. */
.ritual-list li i {
  color: #24364f !important;
  background: #ffffff !important;
  border: 1px solid #cbd6e5 !important;
  box-shadow: 0 4px 10px rgba(21, 36, 58, .08);
}

.ritual-list li span {
  color: #1f2833 !important;
  background: #ffffff !important;
  border: 1px solid #cbd6e5 !important;
  box-shadow: 0 6px 14px rgba(21, 36, 58, .1);
}

.ritual-list li i svg {
  stroke-width: 1.8;
}

/* The pot image shares the exact height of the Esqualano vegetal card beside it. */
.results .ingredients .product-photo {
  height: 248px !important;
  max-height: 248px !important;
  min-height: 0 !important;
}

.results .ingredients .product-photo > img {
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .results .ingredients .product-photo {
    height: 248px !important;
    max-height: 248px !important;
  }
}

/* Cycle offers: essential and continuity images grow, complete retreats. */
.kit-card .jars {
  height: 268px !important;
}

.kit-card:nth-child(1) .jars,
.kit-card:nth-child(3) .jars {
  width: calc(100% + 40px) !important;
  margin-left: -28px !important;
  transform: translate(-6px, -8px) !important;
  background-size: contain !important;
  background-position: center !important;
}

.kit-card:nth-child(2) .jars {
  transform: scale(1.02) translateY(-10px) !important;
  transform-origin: center top;
  background-size: contain !important;
  background-position: center !important;
}

.kit-card:nth-child(3) .jars {
  height: 220px !important;
  max-width: calc(100% - 60px) !important;
  margin-inline: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 82% !important;
  transform: translateY(-6px) !important;
}

/* Plan titles: serif typography, aligned left, smaller scale. */
.kit-card h3 {
  margin-top: 18px !important;
  text-align: left;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  line-height: 1.2;
}

.kit-card h3 b {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 7px 12px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .03em;
  line-height: 1.6;
}

.kit-card .kit-price strong {
  font-size: 28px !important;
}

/* FAQ: question and answer turn white on the open state. */
.accordion article.open button {
  color: #ffffff !important;
  background: #24364f !important;
}

.accordion article.open button::before {
  color: #b9c6d8 !important;
}

.accordion article.open button b {
  color: #24364f !important;
  background: #f8fafd !important;
}

.accordion article .answer p {
  color: #ffffff !important;
  background: #24364f !important;
  border-top: 1px solid rgba(248, 250, 253, .18);
}

/* Final cycle image scale: keep this after every legacy kit override. */
@media (min-width: 1024px) {
  .kit-card:nth-child(1) .jars {
    transform: translateY(-4px) scale(1.21) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(-3px) scale(1.177) !important;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    width: 82% !important;
    max-width: none !important;
    margin: -76px auto 0 !important;
    transform: translateY(4px) scale(1.144) !important;
    transform-origin: center bottom;
    background-position: center bottom !important;
  }
}

@media (max-width: 1023px) {
  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    transform: scale(1.10) !important;
    transform-origin: center bottom;
    background-size: 110% auto !important;
    background-position: center bottom !important;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    margin-right: auto !important;
    margin-left: auto !important;
    background-position: center bottom !important;
  }
}

/* Intro photo crop: remove the white gutters baked into the source asset. */
@media (min-width: 1200px) {
  .intro-photo {
    background: #cbd5e2;
  }

  .intro-photo img {
    width: 154%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-17.53%);
  }
}

/* Ritual entrance: soften the handoff from the white section into the image. */
.ritual {
  isolation: isolate;
  border-radius: 20px 20px 0 0;
}

.ritual::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 112px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .92) 24%, rgba(255, 255, 255, .48) 58%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.ritual-copy {
  position: relative;
  z-index: 2;
}

.ritual-copy h2 {
  margin-top: 0;
}

/* Moment cards: a quiet trace of the LUNERA night blue. */
.moment-card .day-grid article {
  background: rgba(36, 54, 79, .08);
}

/* Science closing composition: align botanicals, Venn and final formula. */
.science-card {
  overflow: hidden;
  background-position: 32px 42px !important;
  background-size: 220px auto !important;
}

.science-card::after {
  right: 18px;
  bottom: 42px;
  width: 250px;
  height: 250px;
  opacity: .78;
}

.science-card .venn,
.science-card .formula {
  width: min(680px, 100%);
  max-width: 680px;
  margin-inline: auto;
}

.science-card .venn {
  position: relative;
  z-index: 2;
  min-height: 150px;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 22px;
}

.science-card .venn span {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  margin: -5px;
}

.science-card .formula {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .science-card {
    overflow: hidden;
    background-position: center 34px !important;
    background-size: 150px auto !important;
  }

  .science-card::after {
    display: none;
  }

  .science-card .venn,
  .science-card .formula {
    width: 100%;
  }

  .science-card .venn {
    min-height: 104px;
  }

  .science-card .venn span {
    width: 104px;
    height: 104px;
    flex-basis: 104px;
    margin: -4px;
  }
}

/* Notebook contract: includes 13-inch displays commonly exposed by the
   operating system as 1440-1600px wide. Wide desktops remain untouched. */
@media (min-width: 1024px) and (max-width: 1600px) and (max-height: 950px) {
  .container {
    width: min(1180px, calc(100% - 64px));
  }

  .section-space {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .section-title {
    margin-bottom: 34px !important;
    font-size: 34px !important;
    letter-spacing: 0;
  }

  .section-heading h2 {
    font-size: 34px !important;
    letter-spacing: 0;
  }

  .section-heading p {
    margin-bottom: 32px !important;
    font-size: 15px;
  }

  .hero {
    height: 800px;
    min-height: 800px !important;
    padding: 68px 0 82px !important;
    background-size: 100% 100%, auto 94% !important;
  }

  .hero .container {
    width: min(1120px, calc(100% - 64px)) !important;
  }

  .hero-grid {
    min-height: 620px !important;
    height: 620px;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  }

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

  .wordmark {
    width: 220px;
    height: 92px;
    margin-bottom: 8px;
  }

  .hero h1 {
    max-width: 520px !important;
    margin-bottom: 18px;
    font-size: 50px !important;
    line-height: 1.03;
    letter-spacing: 0;
  }

  .hero-copy > p {
    max-width: 500px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-cta {
    min-height: 58px !important;
    margin-top: 4px;
  }

  .hero-signature {
    bottom: 14px;
    width: 650px;
    min-height: 92px;
    gap: 26px;
    padding: 12px 28px;
  }

  .hero-signature .serif {
    font-size: 50px;
  }

  .hero-signature p {
    font-size: 15px;
  }

  .benefit-chip {
    min-width: 138px;
    padding: 7px 14px;
    font-size: 11px;
  }

  .ticker {
    padding: 20px 0;
  }

  .ticker-track span {
    min-height: 46px;
    padding: 7px 18px;
    border-width: 3px;
    font-size: 14px;
  }

  .intro {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  .split-card {
    width: min(1080px, calc(100% - 72px));
    height: 550px !important;
    min-height: 550px;
    grid-template-columns: 50% 50%;
  }

  .intro-copy {
    padding: 54px 38px 40px;
  }

  .intro-copy::before {
    top: 130px;
    height: 210px;
  }

  .intro-copy h2 {
    margin-bottom: 20px;
    white-space: normal;
  }

  .intro-copy h2 .serif {
    font-size: 42px;
  }

  .intro-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  .intro-copy blockquote {
    width: 100%;
    margin-top: 14px;
    padding: 15px 18px;
    font-size: 13px;
  }

  .intro-photo {
    top: -32px;
    right: 26px;
    width: 450px;
    height: 614px;
  }

  .ritual {
    margin-top: 72px !important;
    padding-top: 20px;
    padding-bottom: 88px !important;
  }

  .ritual-inner {
    min-height: 930px !important;
    height: 930px;
  }

  .ritual-copy {
    padding: 76px 34px 38px 52px;
  }

  .ritual-copy > p {
    font-size: 18px;
  }

  .ritual-copy h2 {
    margin: 6px 0 18px !important;
    font-size: 82px !important;
    line-height: .95;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .ritual-list li {
    min-height: 52px;
    margin: 8px 0;
  }

  .ritual-list i {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .ritual-list span {
    min-height: 51px;
    padding: 9px 26px;
    font-size: 16px;
  }

  .outlined-note {
    margin-top: 16px;
    padding: 15px 26px;
    font-size: 14px;
  }

  .ritual-mantra {
    margin-top: 16px !important;
    font-size: 15px !important;
  }

  .ritual-photo {
    min-height: 930px;
  }

  .purchase-panel {
    width: min(980px, calc(100% - 72px));
    min-height: 0;
    margin-top: -44px !important;
    padding: 30px 52px 32px;
  }

  .purchase-panel p,
  .purchase-panel p:first-child {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.4;
  }

  .purchase-panel .cta {
    width: 420px;
    min-height: 62px;
  }

  .audience {
    min-height: 1080px;
    margin-top: 72px;
    padding-top: 52px !important;
    padding-bottom: 60px !important;
  }

  .collage {
    height: 470px;
    margin-bottom: -18px;
    transform: scale(.88);
    transform-origin: center top;
  }

  .audience .section-title {
    margin-bottom: 30px !important;
    font-size: 34px !important;
  }

  .audience-grid {
    gap: 14px 16px;
  }

  .audience-grid article {
    height: 190px;
    padding: 18px;
    font-size: 16px;
  }

  .audience-grid article p {
    margin-top: 12px;
  }

  .results {
    width: calc(100% - 64px) !important;
    margin-inline: auto !important;
    padding-top: 60px !important;
    border-radius: 42px 42px 0 0;
  }

  .results .container {
    width: min(1000px, calc(100% - 56px)) !important;
    transform: none !important;
  }

  .results .ingredients {
    gap: 16px 18px;
  }

  .results .ingredients > article,
  .results .ingredients .product-photo {
    height: 218px !important;
    min-height: 218px !important;
  }

  .results .ingredients > article {
    padding: 22px;
  }

  .results .ingredients i {
    width: 56px;
    height: 56px;
  }

  .results .ingredients h3 {
    margin: 14px 0 7px;
    font-size: 20px;
  }

  .results .ingredients p {
    font-size: 14px;
    line-height: 1.38;
  }

  .results .ingredients .clean-formula {
    height: 160px !important;
    min-height: 160px !important;
  }

  .compare {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 38px auto 28px;
    padding: 0;
  }

  .compare article {
    min-width: 0;
    min-height: 310px;
    height: auto;
    padding: 22px;
  }

  .compare h3 {
    margin-bottom: 18px;
    padding: 12px;
  }

  .compare p {
    padding: 8px 4px;
    font-size: 14px;
  }

  .compare p span {
    min-width: 0;
    white-space: normal;
  }

  .results .product-stage {
    width: 100% !important;
    min-height: 540px !important;
    height: 540px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .results .product-stage p {
    bottom: 46px !important;
    width: min(760px, 82%) !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
  }

  .consumption {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .tips {
    gap: 20px;
  }

  .tips article {
    min-height: 200px;
  }

  .tips article h3 {
    font-size: 23px;
  }

  .tips p {
    font-size: 13px;
  }

  .moment-card {
    margin-top: 42px;
    padding: 34px 40px;
  }

  .moment-card > h2 {
    margin-top: 0;
    font-size: 24px;
  }

  .day-grid {
    gap: 20px;
  }

  .day-grid article {
    padding: 20px;
  }

  .day-grid h3 {
    font-size: 19px;
  }

  .science {
    padding-top: 56px !important;
    padding-bottom: 58px !important;
  }

  .science-card {
    width: min(1000px, calc(100% - 80px));
    min-height: 0;
    padding: 72px 90px 54px;
    border-radius: 42px;
    background-size: 270px auto !important;
  }

  .science-card::after {
    width: 300px !important;
    height: 300px !important;
  }

  .science-card h2 {
    font-size: 38px;
  }

  .science-card p {
    font-size: 15px;
  }

  .science-card ul {
    gap: 8px;
    margin: 20px auto;
  }

  .science-card li,
  .science-card li:nth-child(n) {
    min-height: 48px;
    font-size: 14px;
  }

  .science-card .venn {
    min-height: 130px;
    margin-top: 22px;
    margin-bottom: 18px;
  }

  .science-card .venn span {
    width: 130px;
    height: 130px;
    flex-basis: 130px;
    font-size: 15px;
  }

  .science-card .formula {
    font-size: 15px;
  }

  .subscription {
    padding-top: 60px !important;
    padding-bottom: 86px !important;
  }

  .subscription > .container > .section-title:first-child {
    width: min(720px, 100%);
  }

  .subscription-banner {
    min-height: 390px !important;
    margin-top: 106px !important;
    margin-bottom: 96px !important;
  }

  .subscription-banner > div:first-child {
    left: -2% !important;
    width: 39% !important;
    height: 450px !important;
  }

  .subscription-banner > div:first-child > img {
    height: 450px !important;
    max-height: 450px !important;
  }

  .subscription-banner > div:last-child {
    padding: 34px 36px 32px 39% !important;
  }

  .subscription-banner h3 {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .subscription-banner h4 {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .subscription-banner > div:last-child p {
    font-size: 14px;
    line-height: 1.48;
  }

  .cycle-benefits-intro {
    margin-top: -12px;
    margin-bottom: 34px;
    font-size: 14px;
  }

  .subscription-benefits article {
    min-height: 350px;
    height: 350px;
  }

  .subscription-benefits .photo-slot {
    height: 190px;
  }

  .subscription-benefits p {
    padding: 0 22px 20px;
    font-size: 14px;
  }

  .simplify {
    min-height: 0;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .simplify .section-heading h2 {
    font-size: 34px !important;
  }

  .simple-grid {
    gap: 16px !important;
    padding: 28px !important;
  }

  .simple-grid article {
    min-height: 236px;
    height: 236px;
    padding: 22px 20px;
  }

  .simple-grid h3 {
    font-size: 16px;
  }

  .simple-grid p {
    font-size: 13px;
  }

  .kits {
    padding-top: 60px !important;
    padding-bottom: 72px !important;
  }

  .kits .section-heading {
    margin-bottom: 90px !important;
  }

  .kit-card {
    min-height: 560px !important;
    height: 560px !important;
    padding: 16px 16px 14px;
  }

  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    margin-bottom: -34px !important;
  }

  .kit-card:nth-child(1) .jars {
    transform: translateY(12px) scale(1.28) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(12px) scale(1.25) !important;
  }

  .kit-card:nth-child(3) .jars {
    transform: translateY(-5px) scale(1.25) !important;
  }

  .kit-card .kit-price strong {
    font-size: 28px !important;
  }

  .kit-card .cta {
    min-height: 56px !important;
    margin-bottom: 12px;
  }

  .kit-benefits {
    min-height: 54px;
    padding-top: 11px !important;
  }

  .about {
    padding-top: 58px !important;
    padding-bottom: 62px !important;
  }

  .about-card {
    min-height: 440px;
    height: 440px;
    padding: 20px;
  }

  .about-card > div:last-child {
    padding: 40px 34px !important;
  }

  .about-card h2 {
    margin-bottom: 22px;
  }

  .about-card h2 .serif {
    font-size: 50px !important;
  }

  .about-card p {
    margin: 0 0 10px;
    font-size: 14px;
  }

  .faq {
    padding-top: 88px !important;
    padding-bottom: 82px !important;
  }

  .faq .narrow {
    width: min(860px, calc(100% - 80px)) !important;
  }

  .faq .section-title {
    font-size: 40px !important;
  }

  .faq .section-title::after {
    margin-bottom: 38px !important;
  }

  .faq .accordion button,
  .faq .accordion article.open button {
    min-height: 74px;
  }

  .site-footer .footer-primary {
    min-height: 320px;
    gap: 64px;
    padding: 54px 0 44px !important;
  }

  .site-footer .footer-brand {
    padding-right: 48px;
  }

  .site-footer .footer-information {
    gap: 30px;
  }
}

@media (max-width: 1023px) {
  .kits {
    overflow-x: clip;
  }
}

/* Footer final: a single night-blue closing band, led by the LUNERA signature. */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border-top: 0 !important;
  color: #ffffff !important;
  background: #14243a !important;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, .28);
}

.site-footer .footer-primary {
  display: grid !important;
  width: min(1180px, calc(100% - 64px));
  min-height: 350px;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: 86px;
  padding: 68px 0 58px !important;
}

.site-footer .footer-brand {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 72px;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.site-footer .footer-logo {
  display: block;
  width: 248px;
  height: 112px;
  overflow: hidden;
  margin: 0 0 24px;
}

.site-footer .footer-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0) invert(1);
  transform: scale(1.84);
}

.site-footer .footer-brand > p {
  max-width: 390px;
  margin: 0;
  color: #c8d3e1 !important;
  font-size: 15px;
  line-height: 1.7;
}

.site-footer .footer-signature {
  display: block;
  margin-top: 22px;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.35;
}

.site-footer .footer-information {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 42px;
}

.site-footer .footer-information > div {
  min-width: 0;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.site-footer h3 {
  margin: 0 0 22px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.site-footer .footer-information p,
.site-footer .footer-information a {
  display: block;
  margin: 0 0 11px !important;
  color: #b9c7d8 !important;
  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
}

.site-footer .footer-information a {
  width: fit-content;
  color: #ffffff !important;
  transition: color .2s ease, opacity .2s ease;
}

.site-footer .footer-information a:hover {
  color: #dce5f0 !important;
  opacity: .82;
}

.site-footer .footer-bottom {
  display: flex !important;
  width: min(1180px, calc(100% - 64px));
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 auto !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  color: #91a3ba !important;
  font-size: 12px;
  line-height: 1.5;
}

.site-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer .footer-social strong {
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .site-footer .footer-primary {
    width: min(100% - 48px, 920px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 58px 0 48px !important;
  }

  .site-footer .footer-brand {
    padding: 0 0 42px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .site-footer .footer-bottom {
    width: min(100% - 48px, 920px);
  }
}

@media (max-width: 767px) {
  .site-footer .footer-primary {
    width: calc(100% - 40px);
    gap: 38px;
    padding: 48px 0 38px !important;
  }

  .site-footer .footer-brand {
    padding-bottom: 36px;
  }

  .site-footer .footer-logo {
    width: 218px;
    height: 98px;
    margin-bottom: 20px;
  }

  .site-footer .footer-brand > p {
    max-width: 330px;
    font-size: 14px;
  }

  .site-footer .footer-signature {
    margin-top: 18px;
    font-size: 17px;
  }

  .site-footer .footer-information {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }

  .site-footer .footer-hours {
    grid-column: 1 / -1;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .site-footer h3 {
    margin-bottom: 16px !important;
    font-size: 11px !important;
  }

  .site-footer .footer-information p,
  .site-footer .footer-information a {
    font-size: 13px;
  }

  .site-footer .footer-bottom {
    display: grid !important;
    width: calc(100% - 40px);
    min-height: 0;
    justify-content: stretch;
    gap: 10px;
    padding: 22px 0 28px !important;
  }

  .site-footer .footer-social {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .site-footer .footer-information {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-hours {
    grid-column: auto;
  }
}

/* Cycle imagery: ten-percent lift with a true center axis for the six-pot set. */
@media (min-width: 1024px) {
  .kit-card:nth-child(1) .jars {
    transform: translateY(-4px) scale(1.21) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(-3px) scale(1.177) !important;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    width: 82% !important;
    max-width: none !important;
    margin: -76px auto 0 !important;
    transform: translateY(4px) scale(1.144) !important;
    transform-origin: center bottom;
    background-position: center bottom !important;
  }
}

@media (max-width: 1023px) {
  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    transform: scale(1.10) !important;
    transform-origin: center bottom;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    margin-right: auto !important;
    margin-left: auto !important;
    background-position: center bottom !important;
  }
}

/* The former Tailwind runtime widened only the hero container after load.
   Own that reviewed geometry explicitly so it no longer depends on a CDN. */
@media (min-width: 768px) {
  .hero .container {
    width: calc(100% - 24px);
    max-width: none;
  }
}

/* 2026-08-12 refinement pass: hero, intro card and ritual controls. */
.benefit-chip {
  border: 2px solid #24364f !important;
  color: #24364f !important;
  background: #ffffff !important;
  box-shadow: 0 7px 18px rgba(21, 36, 58, .09);
}

.split-card {
  background: #cbd5e2 !important;
}

.ritual-list li i {
  border-color: #24364f !important;
  color: #ffffff !important;
  background: #24364f !important;
  box-shadow: 0 6px 15px rgba(21, 36, 58, .16);
}

@media (min-width: 1024px) {
  .hero {
    background-size: 100% 100%, auto 96% !important;
    background-position: center, right bottom !important;
  }

  .hero .container {
    width: min(1320px, calc(100% - 96px));
    max-width: 1320px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .hero-copy {
    max-width: 540px;
    padding-left: 0;
  }

  .hero h1 {
    max-width: 540px;
    font-size: clamp(58px, 4.25vw, 66px);
    line-height: 1;
  }

  .hero-copy > p {
    max-width: 520px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.58;
  }

  .hero-photo {
    margin-right: 0;
    overflow: visible;
  }

  .chip-a { left: 3%; top: 50%; }
  .chip-b { left: 8%; top: 61%; }
  .chip-c { left: 4%; top: 72%; }
  .chip-d { right: 5%; top: 49%; }
  .chip-e { right: 1%; top: 61%; }
  .chip-f { right: 5%; top: 73%; }
}

/* Audience and results: consistent geometry and high-contrast ingredient cards. */
.results .ingredients article {
  color: #111c2a !important;
  background: #ffffff !important;
}

.results .ingredients article h3 {
  color: #15243a !important;
}

.results .ingredients article p {
  color: #111c2a !important;
}

.results .ingredients article i {
  color: #ffffff !important;
  background: #24364f !important;
}

@media (min-width: 1024px) {
  .audience-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .audience-grid article {
    grid-column: span 2 !important;
  }

  .audience-grid article:nth-child(1) { grid-column: 2 / span 2 !important; }
  .audience-grid article:nth-child(2) { grid-column: 4 / span 2 !important; }
  .audience-grid article:nth-child(3) { grid-column: 6 / span 2 !important; }
  .audience-grid article:nth-child(4) { grid-column: 1 / span 2 !important; }
  .audience-grid article:nth-child(5) { grid-column: 3 / span 2 !important; }
  .audience-grid article:nth-child(6) { grid-column: 5 / span 2 !important; }
  .audience-grid article:nth-child(7) { grid-column: 7 / span 2 !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .audience-grid article {
    grid-column: auto !important;
  }
}

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

/* Kits and precision card: restrained type with deliberate product overlap. */
.kit-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
  text-align: left !important;
}

.kit-card h3 b {
  font-size: 10px !important;
}

@media (min-width: 1024px) {
  .kit-card:nth-child(1) .jars {
    transform: translate(-6px, -8px) scale(1.10) !important;
    transform-origin: center top;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(-10px) scale(1.07) !important;
    transform-origin: center top;
  }

  .kit-card:nth-child(3) .jars {
    transform: translateY(-2px) scale(1.04) !important;
    transform-origin: center top;
  }

  .about-card {
    height: 457px !important;
    min-height: 457px !important;
  }

  .about-card > div:last-child {
    padding: 42px 52px !important;
  }

  .about-card h2 {
    font-size: 30px !important;
  }

  .about-card h2 .serif {
    font-size: 46px !important;
  }

  .about-card p {
    font-size: 15px;
    line-height: 1.48;
  }
}

/* 2026-08-12 reference-led composition pass. */
.results .product-stage p {
  bottom: 78px !important;
  width: min(900px, 72%) !important;
  max-width: 900px !important;
  padding: 20px 36px !important;
  border: 1px solid rgba(185, 198, 216, .72);
  border-radius: 12px !important;
  font-size: 17px !important;
  line-height: 1.42;
}

.results .product-stage p strong {
  font-weight: 700;
}

.science-card .seal {
  top: -40px !important;
  width: 190px !important;
  height: 78px !important;
  padding: 7px 18px 7px 8px;
  border: 7px solid #e9eef5 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #ffffff;
  background: #24364f !important;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(21, 36, 58, .18) !important;
}

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

.science-card .seal i {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #24364f;
  background: #ffffff;
}

.science-card .seal svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.science-card ul {
  width: 100%;
  max-width: 760px;
  gap: 11px;
}

.science-card li,
.science-card li:nth-child(n) {
  min-height: 54px;
  margin-inline: auto;
  padding: 5px 22px 5px 5px;
  gap: 14px;
  border: 1px solid #aebdd0;
  border-radius: 999px;
  color: #24364f;
  background: #b9c6d8;
  font-size: 15px;
  font-weight: 600;
}

.science-card li::before,
.science-card li::after {
  display: none !important;
}

.science-card li > i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border: 5px solid #e9eef5;
  border-radius: 50%;
  color: #ffffff;
  background: #24364f;
}

.science-card li svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.science-card li > span {
  flex: 1;
  text-align: left;
}

.science-card li:nth-child(1) { width: 74%; }
.science-card li:nth-child(2) { width: 82%; }
.science-card li:nth-child(3) { width: 88%; }
.science-card li:nth-child(4) { width: 94%; }
.science-card li:nth-child(5) { width: 100%; }

.simplify .section-heading h2 {
  font-size: 38px !important;
  font-weight: 500;
  letter-spacing: 0;
}

.simplify .section-heading > p {
  max-width: 720px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.5;
}

.simple-grid {
  gap: 18px !important;
  padding: 36px !important;
  border-radius: 14px !important;
  background: #24364f !important;
}

.simple-grid article {
  min-height: 264px !important;
  padding: 26px 24px !important;
  border: 1px solid rgba(185, 198, 216, .72);
  border-radius: 12px !important;
  color: #1f2833 !important;
  background: #ffffff !important;
}

.simple-grid article > i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: #24364f;
}

.simple-grid article > i svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.simple-grid article:first-letter {
  all: unset;
}

.simple-grid h3 {
  margin: 17px 0 11px;
  color: #24364f;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.22;
}

.simple-grid p {
  margin: 0;
  color: #34465e;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

.kits .section-heading {
  margin-bottom: 82px;
}

.kits .section-heading h2 {
  font-size: 36px !important;
  letter-spacing: 0;
}

.carousel-track {
  align-items: stretch;
  gap: 18px;
}

.kit-card {
  min-height: 620px !important;
  padding: 18px 18px 16px !important;
  border: 1px solid #d7e0eb !important;
  border-radius: 14px !important;
  display: flex;
  flex-direction: column;
  color: #1f2833;
  background: #f3f6fa !important;
  box-shadow: 0 10px 24px rgba(21, 36, 58, .07);
}

.kit-card .jars {
  order: 1;
  width: calc(100% + 22px) !important;
  height: 220px !important;
  margin: -76px -11px 0 !important;
  max-width: none !important;
  flex: 0 0 220px;
  background-position: center bottom !important;
  background-size: contain !important;
}

.kit-card:nth-child(1) .jars {
  width: calc(100% + 34px) !important;
  margin-left: -17px !important;
  margin-right: -17px !important;
  transform: translateY(-4px) scale(1.10) !important;
  transform-origin: center bottom;
}

.kit-card:nth-child(2) .jars {
  transform: translateY(-3px) scale(1.07) !important;
  transform-origin: center bottom;
}

.kit-card:nth-child(3) .jars {
  width: calc(100% + 10px) !important;
  height: 210px !important;
  margin-right: -5px !important;
  margin-left: -5px !important;
  flex-basis: 210px;
  transform: translateY(4px) scale(1.04) !important;
  transform-origin: center bottom;
}

.kit-card h3 {
  order: 2;
  margin: 8px 0 0 !important;
  color: #15243a;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-align: center !important;
}

.kit-card h3 b {
  width: 68%;
  display: block !important;
  margin: 10px auto 0 !important;
  padding: 9px 14px !important;
  border-radius: 999px;
  color: #ffffff;
  background: #4b6487 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}

.kit-card .kit-details {
  order: 3;
  min-height: 52px;
  margin: 15px 7px 4px !important;
  color: #34465e;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  text-align: center;
}

.kit-card .kit-price {
  order: 4;
  min-height: 46px;
  margin: 5px 0 8px !important;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  color: #15243a;
  font-weight: 400 !important;
  line-height: 1;
}

.kit-card .kit-price span,
.kit-card .kit-price small {
  color: #40536d;
  font-size: 13px !important;
  font-weight: 400;
}

.kit-card .kit-price strong {
  color: #15243a;
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: 0;
}

.kit-card mark {
  order: 5;
  width: 72%;
  margin: 4px auto 12px !important;
  padding: 9px 14px !important;
  border-radius: 999px;
  color: #24364f;
  background: #cbd5e2 !important;
  font-size: 12px;
  font-weight: 600;
}

.kit-card .cta {
  order: 6;
  width: 90%;
  min-height: 60px !important;
  margin: 2px auto 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, #5b7392, #24364f 56%, #15243a) !important;
  box-shadow: 0 12px 24px rgba(21, 36, 58, .2);
}

.kit-card .cta span {
  font-size: 11px;
}

.kit-benefits {
  order: 7;
  min-height: 58px;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #d7e0eb;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
}

.kit-benefits li {
  min-width: 0;
  padding: 22px 2px 0 !important;
  position: relative;
  color: #40536d;
  font-size: 9px !important;
  line-height: 1.22;
  text-align: center;
}

.kit-benefits li::before {
  content: "✓" !important;
  position: absolute;
  top: 0;
  left: 50% !important;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #7f96b5;
  border-radius: 50%;
  color: #24364f;
  background: #ffffff;
  font-size: 10px;
  transform: translateX(-50%);
}

.kit-card .kit-cycle-note {
  order: 8;
  margin: auto 0 0 !important;
  padding-top: 13px;
  color: #24364f;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-align: center;
}

.kit-card .kit-cycle-note::before {
  content: "▣";
  margin-right: 7px;
  color: #4b6487;
}

@media (min-width: 1024px) {
  .hero .container {
    width: min(1360px, calc(100% - 120px));
    max-width: 1360px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
    align-items: start;
  }

  .hero-copy {
    width: 100%;
    max-width: 500px;
    margin-top: 24px;
    padding-left: 10px;
  }

  .wordmark {
    width: 238px;
    height: 92px;
    margin: 0 0 20px -8px;
  }

  .hero h1 {
    max-width: 500px;
    margin-bottom: 24px;
    font-size: clamp(56px, 4vw, 62px);
    line-height: 1.01;
  }

  .hero-copy > p {
    max-width: 480px;
    margin-bottom: 17px;
    font-size: 15px;
    line-height: 1.58;
  }

  .hero-copy .cta {
    width: 326px;
    margin-top: 3px;
  }

  .hero-photo {
    width: 100%;
    height: 640px;
    margin-top: 4px;
  }

  .benefit-chip {
    min-width: 164px;
    padding: 8px 14px;
    text-align: center;
    font-size: 12px;
  }

  .chip-a { left: 2%; top: 48%; }
  .chip-b { left: 6%; top: 59%; }
  .chip-c { left: 3%; top: 70%; }
  .chip-d { right: 2%; top: 48%; }
  .chip-e { right: 6%; top: 59%; }
  .chip-f { right: 3%; top: 70%; }
}

/* Hero layout authority. */
@media (min-width: 1024px) {
  .hero .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }

  .hero-copy {
    max-width: 620px;
  }

  .hero h1 {
    max-width: 610px;
  }

  .hero-photo {
    margin-left: -18px;
  }

  .chip-a { left: 0; top: 43%; }
  .chip-b { left: 3%; top: 55%; }
  .chip-c { left: 0; top: 67%; }
  .chip-d { right: 1%; top: 43%; }
  .chip-e { right: 4%; top: 55%; }
  .chip-f { right: 1%; top: 67%; }
}

/* Definitive hero geometry after legacy desktop overrides. */
@media (min-width: 1024px) {
  .hero .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }

  .hero-copy {
    max-width: 620px;
  }

  .hero h1 {
    max-width: 610px;
  }

  .hero-photo {
    margin-left: -18px;
  }

  .chip-a { left: 0; top: 43%; }
  .chip-b { left: 3%; top: 55%; }
  .chip-c { left: 0; top: 67%; }
  .chip-d { right: 1%; top: 43%; }
  .chip-e { right: 4%; top: 55%; }
  .chip-f { right: 1%; top: 67%; }
}

/* Definitive intro geometry: continuous blue behind and beyond the photo. */
@media (min-width: 1200px) {
  .split-card {
    width: min(1160px, calc(100% - 72px));
    height: 620px;
    overflow: visible;
    background: #cbd5e2 !important;
  }

  .intro-photo {
    top: -45px;
    right: 38px;
    width: 500px;
    height: 710px;
    overflow: hidden;
    border-radius: 16px;
    background: #cbd5e2 !important;
  }

  .intro-photo img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transform: scale(1.30) !important;
    transform-origin: center;
  }
}

/* Final hero and science alignment pass. */
.science-card {
  overflow: visible;
  background-size: 250px auto !important;
}

.science-card::after {
  width: 300px;
  height: 300px;
}

@media (min-width: 1024px) {
  .hero .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }

  .hero-copy {
    max-width: 620px;
  }

  .hero h1 {
    width: 100%;
    max-width: 610px;
  }

  .hero-photo {
    margin-left: -18px;
  }

  .benefit-chip {
    min-width: 150px;
  }

  .chip-a { left: 0; top: 43%; }
  .chip-b { left: 3%; top: 55%; }
  .chip-c { left: 0; top: 67%; }
  .chip-d { right: 1%; top: 43%; }
  .chip-e { right: 4%; top: 55%; }
  .chip-f { right: 1%; top: 67%; }
}

@media (max-width: 767px) {
  .science-card {
    overflow: visible;
    background-size: 180px auto !important;
  }
}

/* Definitive kit imagery geometry. */
@media (min-width: 1024px) {
  .kit-card:nth-child(1) .jars {
    transform: translateY(-4px) scale(1.21) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(-3px) scale(1.177) !important;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    width: 82% !important;
    max-width: none !important;
    margin: -76px auto 0 !important;
    transform: translateY(4px) scale(1.144) !important;
    transform-origin: center bottom;
    background-position: center bottom !important;
  }
}

@media (max-width: 1023px) {
  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    transform: scale(1.10) !important;
    transform-origin: center bottom;
  }

  .kit-card:nth-child(3) .jars {
    align-self: center;
    margin-right: auto !important;
    margin-left: auto !important;
    background-position: center bottom !important;
  }
}

/* Intro card: one continuous blue surface behind the elevated image. */
@media (min-width: 1200px) {
  .split-card {
    width: min(1160px, calc(100% - 72px));
    height: 620px;
    grid-template-columns: 49% 51%;
    overflow: visible;
    background: #cbd5e2 !important;
  }

  .intro-copy {
    padding: 72px 48px 48px 42px;
  }

  .intro-photo {
    top: -45px;
    right: 38px;
    width: 500px;
    height: 710px;
    border-radius: 16px;
    background: transparent;
  }

  .intro-photo img {
    width: 126%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-10.3%);
  }
}

@media (max-width: 1023px) {
  .science-card li,
  .science-card li:nth-child(n) {
    width: 100%;
  }

  .kits .section-heading {
    margin-bottom: 66px;
  }

  .kit-card {
    min-height: 640px !important;
  }

  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    width: calc(100% + 20px) !important;
    height: 210px !important;
    margin: -68px -10px 0 !important;
    max-width: none !important;
    flex-basis: 210px;
    transform: none !important;
    background-position: center bottom !important;
  }
}

@media (max-width: 767px) {
  .benefit-chip {
    display: none !important;
  }

  .results .product-stage p {
    bottom: 26px !important;
    width: calc(100% - 34px) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  .science-card .seal {
    top: -34px !important;
    width: 166px !important;
    height: 68px !important;
    font-size: 14px !important;
  }

  .science-card .seal i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .science-card {
    padding-top: 176px !important;
  }

  .science-card li,
  .science-card li:nth-child(n) {
    min-height: 58px;
    padding-right: 12px;
    border-radius: 16px;
    font-size: 13px;
  }

  .simple-grid {
    gap: 14px !important;
    padding: 18px !important;
  }

  .simple-grid article {
    min-height: 0 !important;
    padding: 23px 20px !important;
  }

  .kits .section-heading {
    margin-bottom: 70px;
  }

  .kit-card {
    min-height: 650px !important;
  }

  .kit-card h3 b {
    width: 76%;
  }
}

/* Hero-only alignment pass based on the supplied desktop reference. */
@media (min-width: 1024px) {
  .hero {
    background-position: center, right 0 bottom 74px !important;
  }

  .hero .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }

  .hero-copy {
    width: 100%;
    max-width: 620px;
    margin-top: -4px;
    padding-left: 14px;
  }

  .wordmark {
    width: 250px;
    height: 110px;
    margin: 0 0 14px;
    overflow: hidden;
  }

  .wordmark img {
    width: 390px;
    max-width: none;
    height: 260px;
    object-fit: contain;
    transform: translate(-96px, -53px);
  }

  .hero h1 {
    width: 100%;
    max-width: 610px;
    margin-bottom: 24px;
  }

  .hero-copy > p {
    width: 100%;
    max-width: 530px;
  }

  .hero-copy .cta {
    width: 360px;
    min-height: 58px;
    margin-top: 6px;
    padding: 12px 16px 12px 25px;
    justify-content: space-between;
    gap: 16px;
  }

  .hero-copy .cta span {
    white-space: nowrap;
  }

  .hero-photo {
    height: 640px;
    margin-top: -60px;
    margin-left: -18px;
  }

  .chip-a { left: 0; top: 43%; }
  .chip-b { left: 3%; top: 55%; }
  .chip-c { left: 0; top: 67%; }
  .chip-d { right: 1%; top: 43%; }
  .chip-e { right: 4%; top: 55%; }
  .chip-f { right: 1%; top: 67%; }
}

/* Hero exit: white fade into the next section, with chips shifted right. */
.hero::after {
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .74) 58%, #ffffff 100%);
  pointer-events: none;
}

.hero-orbit {
  display: none !important;
}

@media (min-width: 1024px) {
  .hero-photo {
    overflow: visible;
  }

  .benefit-chip {
    transform: translateX(38px);
  }
}

/* 2026-08-13 final composition consolidation. */
.hero::after {
  height: 220px;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 253, 0) 0%,
    rgba(248, 250, 253, .34) 28%,
    rgba(248, 250, 253, .9) 68%,
    #f8fafd 100%
  );
}

.results .ingredients .product-photo > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(.9) !important;
}

.results .ingredients .product-photo {
  position: relative;
}

.carousel-controls {
  display: none !important;
}

.science-card {
  background-position: -130px 76px !important;
  background-size: 312px auto !important;
}

.science-card::after {
  right: -28px;
  bottom: 18px;
  width: 375px;
  height: 375px;
}

.about-card {
  align-items: center;
  padding: 26px;
  gap: 8px;
}

.about-card > .photo-slot {
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  min-height: 0;
  margin: auto;
  border: 1px solid #cbd6e5;
  border-radius: 16px;
  background: #dfe5ed;
  box-shadow: 0 12px 28px rgba(21, 36, 58, .1);
}

.about-card > .photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-card > div:last-child {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.accordion article,
.accordion button,
.accordion .answer,
.accordion .answer > p {
  will-change: height, opacity, transform;
}

.accordion .answer {
  transition: height .62s cubic-bezier(.22, 1, .36, 1) !important;
}

.accordion .answer > p {
  transition: opacity .32s ease, transform .56s cubic-bezier(.22, 1, .36, 1) !important;
}

@media (min-width: 1024px) {
  .benefit-chip {
    transform: translateX(46px);
  }

  .kit-carousel,
  .carousel-track {
    overflow: visible !important;
  }

  .carousel-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .kit-card {
    width: auto !important;
    min-width: 0;
    flex-basis: auto !important;
  }

  .kit-card:nth-child(1) .jars {
    transform: translateY(-4px) scale(1.452) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(-3px) scale(1.4124) !important;
  }
}

@media (max-width: 1023px) {
  .kit-carousel,
  .carousel-track {
    overflow: visible !important;
  }

  .carousel-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 82px;
    transform: none !important;
  }

  .kit-card {
    width: 100% !important;
    min-width: 0;
    flex-basis: auto !important;
  }

  .kit-card:nth-child(1) .jars,
  .kit-card:nth-child(2) .jars {
    transform: scale(1.2) !important;
  }

  .science-card {
    background-position: -82px 54px !important;
    background-size: 225px auto !important;
  }

  .about-card {
    padding: 18px;
  }
}

@media (max-width: 767px) {
  .science-card {
    background-position: center -22px !important;
  }

  .about-card > .photo-slot {
    width: 100%;
    height: 310px;
  }
}

/* 2026-08-13 section 02, ritual spacing and CTA icon refinement. */
.intro-copy blockquote {
  border: 4px solid #24364f !important;
  color: #15243a;
  background: #ffffff !important;
  text-align: center;
}

.ritual-copy > p:first-child {
  margin-bottom: 14px;
}

.ritual-copy h2 {
  margin-top: 12px !important;
  margin-bottom: 28px;
}

.outlined-note {
  border: 4px solid #24364f !important;
  color: #15243a;
  background: rgba(233, 238, 245, .94) !important;
  box-shadow: 0 10px 24px rgba(21, 36, 58, .1);
}

.purchase-panel {
  margin: 24px auto 0 !important;
  border-color: #b9c6d8;
}

.ritual {
  padding-bottom: 140px;
}

.cta b svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .ritual-copy > p:first-child {
    margin-bottom: 10px;
  }

  .ritual-copy h2 {
    margin-top: 8px !important;
    margin-bottom: 22px;
  }

  .purchase-panel {
    margin-top: 28px !important;
  }

  .ritual {
    padding-bottom: 104px;
  }
}

/* 2026-08-13 product focus and clean science composition. */
.results .ingredients .product-photo > img {
  content: url("IMAGENS PARA A PÁGINA/foto-produto-lunera-30-v2.png");
  object-fit: cover !important;
  object-position: center 45% !important;
  transform: none !important;
}

.science {
  background: #f8fafd !important;
}

.science-card {
  overflow: hidden !important;
  background-color: #e9eef5 !important;
  background-position: 24px 152px !important;
  background-size: 210px auto !important;
}

.science-card::after {
  right: 18px;
  bottom: 20px;
  width: 230px;
  height: 230px;
}

.science-card .venn span {
  border-color: #7f96b5 !important;
  background: rgba(248, 250, 253, .94) !important;
}

.science-card .formula {
  background: rgba(248, 250, 253, .78);
}

@media (max-width: 767px) {
  .science-card {
    background-position: center 34px !important;
    background-size: 190px auto !important;
  }

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

/* Final kit geometry: equal visual weight and a shared baseline. */
@media (min-width: 1024px) {
  .kit-card:nth-child(3) .jars {
    align-self: auto;
    width: calc(100% + 22px) !important;
    max-width: none !important;
    height: 220px !important;
    margin: -76px -11px 0 !important;
    flex-basis: 220px;
    transform: translateY(-10px) scale(1.4124) !important;
    transform-origin: center bottom;
    background-position: center bottom !important;
  }
}

@media (max-width: 1023px) {
  .kit-card:nth-child(3) .jars {
    transform: translateY(-8px) scale(1.2) !important;
    transform-origin: center bottom;
  }
}

/* FAQ final: solid night-blue accordions with an editorial reading rhythm. */
.faq {
  padding: 118px 0 110px !important;
  background: #f8fafd !important;
}

.faq .narrow {
  display: grid;
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: none;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  align-items: start;
  gap: 72px;
}

.faq .section-title {
  position: sticky;
  top: 44px;
  margin: 3px 0 0 !important;
  color: #15243a;
  font-size: 46px !important;
  font-weight: 500;
  line-height: 1.04;
  text-align: left;
}

.faq .section-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 24px;
  background: #4b6487;
}

.faq .accordion {
  display: grid;
  gap: 12px;
  counter-reset: faq;
}

.faq .accordion article {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(185, 198, 216, .28);
  border-radius: 8px;
  background: #24364f;
  box-shadow: 0 12px 28px rgba(21, 36, 58, .09);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.faq .accordion article.open {
  border-color: rgba(185, 198, 216, .58);
  box-shadow: 0 18px 36px rgba(21, 36, 58, .16);
}

.faq .accordion button,
.faq .accordion article.open button {
  position: relative;
  min-height: 82px;
  padding: 20px 74px 20px 66px;
  border: 0;
  border-radius: 0;
  color: #ffffff !important;
  background: #24364f !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.faq .accordion button::before,
.faq .accordion article.open button::before {
  content: counter(faq, decimal-leading-zero);
  counter-increment: faq;
  position: absolute;
  left: 24px;
  color: #9fb0c8 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.faq .accordion button b,
.faq .accordion article.open button b {
  position: absolute;
  right: 22px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  color: #ffffff !important;
  background: transparent !important;
  transform: none !important;
}

.faq .accordion button b svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.faq .faq-icon-vertical {
  transform-origin: 12px 12px;
  transition: transform .3s ease, opacity .22s ease;
}

.faq article.open .faq-icon-vertical {
  opacity: 0;
  transform: scaleY(0);
}

.faq .accordion .answer,
.faq .accordion article.open .answer {
  background: #24364f;
}

.faq .accordion article .answer p,
.faq .accordion article.open .answer p {
  margin: 0 24px;
  padding: 0 42px 0 42px !important;
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: #dce5f0 !important;
  background: #24364f !important;
  font-size: 14px;
  line-height: 1.72;
}

.faq .accordion article.open .answer p {
  padding-top: 22px !important;
  padding-bottom: 26px !important;
}

.faq .accordion button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -5px;
}

@media (hover: hover) {
  .faq .accordion article:hover {
    border-color: rgba(185, 198, 216, .52);
    transform: translateY(-1px);
  }
}

@media (max-width: 767px) {
  .faq {
    padding: 78px 0 72px !important;
  }

  .faq .narrow {
    display: block;
    width: calc(100% - 32px) !important;
  }

  .faq .section-title {
    position: static;
    margin-bottom: 34px !important;
    font-size: 35px !important;
  }

  .faq .section-title::after {
    margin-top: 18px;
  }

  .faq .accordion {
    gap: 10px;
  }

  .faq .accordion button,
  .faq .accordion article.open button {
    min-height: 76px;
    padding: 18px 58px 18px 48px;
    font-size: 15px;
  }

  .faq .accordion button::before,
  .faq .accordion article.open button::before {
    left: 16px;
  }

  .faq .accordion button b,
  .faq .accordion article.open button b {
    right: 14px;
    width: 30px;
    height: 30px;
  }

  .faq .accordion article .answer p,
  .faq .accordion article.open .answer p {
    margin: 0 16px;
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}

/* 2026-08-13 final science, FAQ and footer framing pass. */
.science {
  overflow: clip;
}

.science-card {
  overflow: visible !important;
  background-size: 315px auto !important;
}

.science-card::after {
  width: 345px !important;
  height: 345px !important;
}

.faq .narrow {
  display: block !important;
  width: min(920px, calc(100% - 48px)) !important;
  max-width: 920px !important;
}

.faq .section-title {
  position: static !important;
  margin: 0 !important;
  text-align: center !important;
}

.faq .section-title::after {
  content: "Respostas claras sobre o ritual, a aplicação e a escolha dos ciclos LUNÉRA 30.";
  display: block;
  width: min(650px, 100%);
  height: auto;
  margin: 18px auto 48px !important;
  color: #526984;
  background: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
}

.site-footer .footer-logo {
  overflow: visible;
}

@media (max-width: 767px) {
  .science-card {
    background-size: 220px auto !important;
  }

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

  .faq .narrow {
    width: calc(100% - 32px) !important;
  }

  .faq .section-title::after {
    margin: 14px auto 34px !important;
    font-size: 14px;
  }
}

/* 2026-08-13 cycle offer, purchase freedom and compact plan geometry. */
.moment-card {
  border-color: #aebdd0 !important;
  background: #f2f5f9 !important;
}

.moment-card .day-grid article {
  background: rgba(36, 54, 79, .16) !important;
}

.subscription > .container > .section-title:first-child {
  width: min(780px, 100%);
  margin-right: auto !important;
  margin-left: auto !important;
}

.subscription-banner {
  min-height: 410px !important;
}

.subscription-banner > div:first-child {
  left: -4% !important;
  width: 42% !important;
  height: 500px !important;
}

.subscription-banner > div:first-child > img {
  height: 500px !important;
  max-height: 500px !important;
}

.subscription-banner > div:last-child {
  padding: 46px 48px 42px 40% !important;
}

.cycle-eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.subscription-banner h4 {
  margin: 8px 0 18px;
  color: #dce5f0;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.subscription-banner > div:last-child p {
  margin: 0 0 10px;
  line-height: 1.55;
}

.cycle-benefits-intro {
  width: min(700px, 100%);
  margin: -18px auto 42px;
  color: #526984;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}

@media (min-width: 1024px) {
  .kits .section-heading {
    margin-bottom: 110px !important;
  }

  .kit-card {
    min-height: 575px !important;
    height: 575px !important;
  }

  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    margin-bottom: -45px !important;
  }

  .kit-card:nth-child(1) .jars {
    transform: translateY(18px) scale(1.452) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(18px) scale(1.4124) !important;
  }

  .kit-card:nth-child(3) .jars {
    transform: translateY(-8px) scale(1.4124) !important;
  }

  .kit-card .kit-cycle-note {
    margin-top: 14px !important;
  }
}

@media (max-width: 1023px) {
  .subscription-banner > div:first-child {
    left: 0 !important;
    width: 40% !important;
    height: 460px !important;
  }

  .subscription-banner > div:first-child > img {
    height: 460px !important;
    max-height: 460px !important;
  }
}

@media (max-width: 767px) {
  .subscription-banner {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
  }

  .subscription-banner > div:first-child {
    position: relative !important;
    inset: auto !important;
    width: 86% !important;
    height: 380px !important;
    margin: -170px auto -24px;
    flex: 0 0 380px;
  }

  .subscription-banner > div:first-child > img {
    height: 380px !important;
    max-height: 380px !important;
  }

  .subscription-banner > div:last-child {
    padding: 46px 24px 34px !important;
  }

  .cycle-benefits-intro {
    margin-top: -10px;
    margin-bottom: 32px;
    padding-inline: 12px;
    font-size: 14px;
  }
}

/* Mobile Hero authority: intentionally isolated from tablet and desktop layouts. */
.hero-description-mobile,
.hero-mobile-visual {
  display: none;
}

@media (max-width: 767px) {
  .hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 0 54px !important;
    overflow: hidden !important;
    background: #f8fafd !important;
  }

  .hero::after {
    display: none;
  }

  .hero .container {
    width: calc(100% - 32px) !important;
  }

  .hero-grid {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-copy {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wordmark {
    width: 260px !important;
    height: 126px !important;
    margin: 0 0 4px -14px !important;
    overflow: hidden;
  }

  .wordmark img {
    width: 450px !important;
    max-width: none !important;
    height: 300px !important;
    object-fit: contain !important;
    transform: translate(-110px, -61px) !important;
  }

  .hero h1 {
    width: 100%;
    max-width: 430px !important;
    margin: 0 0 18px !important;
    font-size: 43px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  .hero-description-desktop {
    display: none !important;
  }

  .hero-copy > .hero-description-mobile {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 0 8px;
    color: #334964;
    font-size: 15px;
    line-height: 1.56;
  }

  .hero-mobile-visual {
    position: relative;
    display: block;
    width: calc(100% + 32px);
    height: clamp(470px, 132vw, 548px);
    margin: 2px 0 0 -16px;
    overflow: hidden;
  }

  .hero-mobile-visual::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 132px;
    background: linear-gradient(180deg, rgba(248, 250, 253, 0), #f8fafd 86%);
    content: "";
    pointer-events: none;
  }

  .hero-mobile-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero-photo {
    display: none !important;
  }

  .hero-copy .hero-cta {
    position: relative;
    z-index: 4;
    width: 100% !important;
    min-height: 56px !important;
    margin: -56px 0 0 !important;
  }

  .hero-signature {
    position: relative !important;
    z-index: 5;
    left: auto !important;
    bottom: auto !important;
    display: grid !important;
    width: calc(100% - 24px) !important;
    min-height: 92px !important;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 8px !important;
    margin: 24px auto 0 !important;
    padding: 14px 16px !important;
    border-radius: 48px !important;
    transform: none !important;
  }

  .hero-signature .serif {
    font-size: 34px !important;
    line-height: 1;
    white-space: nowrap;
  }

  .hero-signature p {
    width: 100%;
    max-width: none !important;
    margin: 0;
    font-size: 10.5px !important;
    line-height: 1.35;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .wordmark {
    margin-left: -18px !important;
  }

  .hero h1 {
    font-size: 38px !important;
  }

  .hero-mobile-visual {
    height: 455px;
  }

  .hero-signature {
    grid-template-columns: 80px minmax(0, 1fr);
    padding-inline: 13px !important;
  }

  .hero-signature .serif {
    font-size: 29px !important;
  }

  .hero-signature p {
    font-size: 8.7px !important;
  }
}

.ritual-timeline-mobile {
  display: none;
}

/* Mobile section architecture: independent from tablet, notebook and desktop. */
@media (max-width: 767px) {
  .intro {
    padding: 50px 0 34px !important;
  }

  .intro .split-card {
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    margin-inline: auto;
    border: 1px solid #b9c6d8;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #cbd5e2 !important;
    box-shadow: 0 16px 36px rgba(21, 36, 58, .1);
  }

  .intro-copy {
    width: 100%;
    padding: 32px 22px 24px !important;
  }

  .intro-copy::before {
    display: none !important;
  }

  .intro-copy h2 {
    display: block !important;
    margin: 0 0 22px !important;
    white-space: normal !important;
    font-size: 19px !important;
    line-height: 1.18;
  }

  .intro-copy h2 .serif {
    display: block;
    margin-bottom: 2px;
    font-size: 45px !important;
    line-height: .95;
  }

  .intro-copy p {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 9px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .intro-copy blockquote {
    width: 100% !important;
    margin: 19px 0 0 !important;
    padding: 17px 16px !important;
    border-width: 3px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
    line-height: 1.45;
  }

  .intro-photo {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 32px) !important;
    height: 330px !important;
    min-height: 330px !important;
    margin: 0 auto 16px !important;
    border: 0;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #d7dfe9 !important;
  }

  .intro-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34% !important;
    transform: none !important;
  }

  .ritual {
    margin-top: 22px !important;
    padding: 0 0 62px !important;
  }

  .ritual-inner {
    position: relative;
    width: calc(100% - 32px);
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin-inline: auto;
    border: 1px solid #c3cfde;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #e9eef5 !important;
  }

  .ritual-photo {
    position: absolute !important;
    z-index: 0;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    opacity: .13;
    pointer-events: none;
  }

  .ritual-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 67% center !important;
  }

  .ritual-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px 18px 24px !important;
  }

  .ritual-copy > p:first-child {
    margin: 0 0 5px !important;
    color: #40536d;
    font-size: 15px !important;
    line-height: 1.3;
  }

  .ritual-copy h2 {
    margin: 0 0 24px !important;
    color: #24364f;
    font-size: 49px !important;
    line-height: .96;
    white-space: nowrap;
  }

  .ritual-list {
    display: none !important;
  }

  .ritual-timeline-mobile {
    position: relative;
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ritual-timeline-mobile::before {
    position: absolute;
    z-index: 0;
    top: 24px;
    bottom: 24px;
    left: 21px;
    width: 2px;
    background: #9eafc5;
    content: "";
  }

  .ritual-timeline-mobile li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .ritual-timeline-mobile li > b {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 4px solid #e9eef5;
    border-radius: 50%;
    color: #ffffff;
    background: #24364f;
    font-size: 11px;
    font-weight: 700;
  }

  .ritual-timeline-mobile li > span {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 14px;
    border: 1px solid #c5d1df;
    border-radius: 15px;
    color: #40536d;
    background: rgba(248, 250, 253, .94);
    font-size: 12px;
    line-height: 1.35;
  }

  .ritual-timeline-mobile strong {
    display: block;
    margin-bottom: 2px;
    color: #15243a;
    font-size: 14px;
  }

  .outlined-note {
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 15px 16px !important;
    border-width: 2px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    line-height: 1.45;
  }

  .outlined-note br {
    display: none;
  }

  .ritual-mantra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0 !important;
    font-size: 12px !important;
    text-align: center;
  }

  .ritual-mantra br {
    display: none;
  }

  .ritual-mantra strong {
    padding: 9px 7px;
    border-radius: 10px;
    color: #24364f;
    background: rgba(203, 213, 226, .82);
  }

  .purchase-panel {
    width: calc(100% - 32px) !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    padding: 24px 19px 20px !important;
    border-radius: 20px !important;
    background: #f8fafd !important;
    box-shadow: 0 14px 30px rgba(21, 36, 58, .1);
  }

  .purchase-panel p,
  .purchase-panel p:first-child {
    margin: 0 0 13px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .purchase-panel p:first-child {
    font-size: 17px !important;
  }

  .purchase-panel .cta {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 5px;
  }

  .audience {
    padding-top: 46px !important;
  }

  .collage {
    width: calc(100% - 24px) !important;
    height: 226px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 7px;
    margin: 0 auto 24px !important;
    overflow: visible;
  }

  .collage > div:nth-child(n) {
    width: 100% !important;
    height: 194px !important;
    min-width: 0;
    margin: 0 !important;
    border-width: 3px !important;
    border-radius: 12px !important;
    transform: rotate(-3deg) !important;
  }

  .collage > div:nth-child(2) {
    z-index: 2;
    height: 222px !important;
    transform: translateY(-2px) !important;
  }

  .collage > div:nth-child(3) {
    height: 202px !important;
    transform: rotate(3deg) !important;
  }

  .collage > div:nth-child(n + 4) {
    display: none !important;
  }

  .audience .section-title {
    margin: 8px auto 28px !important;
    font-size: 32px !important;
    line-height: 1.05;
  }

  .audience-grid {
    gap: 12px !important;
  }

  .audience-grid article,
  .audience-grid article:nth-child(n) {
    min-height: 116px !important;
    padding: 17px !important;
    border-radius: 16px !important;
  }

  .audience-grid article i {
    width: 43px;
    height: 43px;
  }

  .audience-grid article p {
    margin-top: 12px !important;
    font-size: 14px;
    line-height: 1.35;
  }

  .science {
    padding-top: 62px !important;
  }

  .science-card {
    width: calc(100% - 32px) !important;
    min-height: 0 !important;
    padding: 218px 17px 28px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background-color: #e9eef5 !important;
    background-image: none !important;
  }

  .science-card::before {
    position: absolute;
    z-index: 0;
    top: 52px;
    left: 50%;
    width: 174px;
    height: 154px;
    background: url("IMAGENS%20PARA%20A%20P%C3%81GINA/imagem%20formula.png") center / cover no-repeat;
    content: "";
    opacity: .92;
    transform: translateX(-50%);
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 52%, transparent 78%);
    pointer-events: none;
  }

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

  .science-card h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 14px !important;
    font-size: 32px !important;
    line-height: 1.05;
  }

  .science-card > p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .science-card ul {
    margin: 22px auto !important;
  }

  .science-card li,
  .science-card li:nth-child(n) {
    min-height: 56px !important;
    padding-right: 11px !important;
    font-size: 12px !important;
  }

  .science-card .venn {
    margin: 24px 0 20px;
  }

  .science-card .venn span {
    width: 96px !important;
    height: 96px !important;
    margin: -5px !important;
    font-size: 12px !important;
  }

  .science-card .formula {
    padding: 11px 10px;
    border-width: 3px;
    border-radius: 17px;
    font-size: 14px;
    line-height: 1.25;
  }

  .subscription {
    padding-top: 52px !important;
  }

  .subscription > .container > .section-title:first-child {
    margin: 0 auto 22px !important;
    font-size: 32px !important;
    line-height: 1.08;
  }

  .subscription-banner {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    margin: 30px 0 54px !important;
    transform: none !important;
    border: 1px solid #6f88a9;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #4b6487 !important;
  }

  .subscription-banner > div:last-child {
    order: 1;
    padding: 27px 21px 4px !important;
  }

  .subscription-banner > div:last-child h3 {
    margin: 0 0 7px;
    font-size: 25px;
    line-height: 1.08;
  }

  .subscription-banner h4 {
    margin: 7px 0 15px;
    font-size: 14px;
    line-height: 1.4;
  }

  .subscription-banner > div:last-child p {
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.48;
  }

  .subscription-banner > div:first-child {
    position: relative !important;
    order: 2;
    inset: auto !important;
    width: 100% !important;
    height: 292px !important;
    min-height: 292px !important;
    flex: 0 0 292px !important;
    margin: 0 !important;
    overflow: hidden;
    background: transparent !important;
  }

  .subscription-banner > div:first-child::before {
    position: absolute;
    z-index: 0;
    right: 18px;
    bottom: 18px;
    left: 18px;
    height: 1px;
    background: rgba(255, 255, 255, .25);
    content: "";
  }

  .subscription-banner > div:first-child > img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 292px !important;
    max-height: 292px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .subscription > .container > .section-title:nth-of-type(2) {
    margin-top: 48px !important;
  }

  .kits {
    padding-top: 54px !important;
    overflow: hidden;
  }

  .kits .section-heading {
    margin-bottom: 40px !important;
  }

  .kits .section-heading h2 {
    font-size: 34px !important;
    line-height: 1.05;
  }

  .kits .section-heading p {
    margin: 12px auto 0 !important;
    font-size: 14px;
    line-height: 1.45;
  }

  .kit-carousel,
  .carousel-track {
    width: 100%;
    overflow: visible !important;
  }

  .carousel-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    transform: none !important;
  }

  .kit-card,
  .kit-card:nth-child(n) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 17px 20px !important;
    border-radius: 18px !important;
    overflow: hidden;
  }

  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    order: 1;
    width: calc(100% + 34px) !important;
    height: 208px !important;
    min-height: 0 !important;
    flex: 0 0 208px !important;
    margin: 0 -17px 2px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }

  .kit-card:nth-child(1) .jars {
    background-size: 300px auto !important;
  }

  .kit-card:nth-child(2) .jars {
    background-size: 330px auto !important;
  }

  .kit-card:nth-child(3) .jars {
    background-size: 272px auto !important;
  }

  .kit-card h3 {
    margin: 2px 0 0 !important;
    font-size: 17px !important;
  }

  .kit-card h3 b {
    width: 76% !important;
    margin-top: 9px !important;
    padding: 8px 12px !important;
  }

  .kit-card .kit-details {
    min-height: 0 !important;
    margin: 13px 4px 4px !important;
    font-size: 12px !important;
  }

  .kit-card .kit-price {
    min-height: 0 !important;
    margin: 9px 0 8px !important;
  }

  .kit-card .kit-price strong {
    font-size: 29px !important;
  }

  .kit-card mark {
    width: 76%;
    margin: 5px auto 12px !important;
    padding: 8px 12px !important;
  }

  .kit-card .cta {
    width: 94%;
    min-height: 56px !important;
    margin: 2px auto 14px;
  }

  .kit-benefits {
    min-height: 0 !important;
    padding-top: 12px !important;
  }

  .kit-card .kit-cycle-note {
    margin: 14px 0 0 !important;
    padding-top: 11px;
  }
}

@media (max-width: 359px) {
  .intro .split-card,
  .ritual-inner,
  .purchase-panel,
  .science-card {
    width: calc(100% - 24px) !important;
  }

  .ritual-copy h2 {
    font-size: 43px !important;
  }

  .science-card .venn span {
    width: 86px !important;
    height: 86px !important;
    font-size: 11px !important;
  }

  .kit-card:nth-child(1) .jars {
    background-size: 270px auto !important;
  }

  .kit-card:nth-child(2) .jars {
    background-size: 295px auto !important;
  }

  .kit-card:nth-child(3) .jars {
    background-size: 250px auto !important;
  }
}

/* Mobile visual polish after the responsive section rebuild. */
@media (max-width: 767px) {
  .wordmark {
    width: 198px !important;
    height: 92px !important;
    margin: 0 0 7px -10px !important;
  }

  .wordmark img {
    width: 344px !important;
    height: 229px !important;
    transform: translate(-84px, -47px) !important;
  }

  .hero-signature {
    display: none !important;
  }

  .intro-photo {
    width: 100% !important;
    height: 390px !important;
    min-height: 390px !important;
    margin: 0 !important;
    border-radius: 0 0 23px 23px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .intro-photo img {
    width: 154% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    transform: translateY(-10px) !important;
  }

  .ritual-inner {
    background: #e9eef5 !important;
  }

  .ritual {
    background: #f8fafd !important;
  }

  .ritual-photo {
    display: none !important;
  }

  .results .product-stage {
    background-size: auto 128% !important;
    background-position: center 48% !important;
  }

  .results .product-stage::after {
    top: auto !important;
    bottom: 0 !important;
    height: 76% !important;
    background: linear-gradient(
      180deg,
      rgba(36, 54, 79, 0) 0%,
      rgba(36, 54, 79, .18) 28%,
      rgba(36, 54, 79, .68) 72%,
      #24364f 100%
    ) !important;
  }

  .science {
    overflow: visible !important;
  }

  .science-card {
    overflow: visible !important;
  }

  .science-card .seal {
    z-index: 5 !important;
    top: -28px !important;
  }

  .science-card .seal span {
    line-height: 1.08 !important;
  }

  .subscription > .container > .section-title:first-child {
    margin-bottom: 0 !important;
  }

  .subscription-banner {
    margin-top: 40px !important;
  }
}

@media (max-width: 359px) {
  .wordmark {
    width: 184px !important;
    height: 86px !important;
    margin-left: -9px !important;
  }

  .wordmark img {
    width: 320px !important;
    height: 213px !important;
    transform: translate(-78px, -44px) !important;
  }

  .intro-photo {
    height: 350px !important;
    min-height: 350px !important;
  }
}

/* Notebook cascade lock: this stays last so later desktop refinements cannot
   undo the 1024-1600px short-viewport contract above. */
@media (min-width: 1024px) and (max-width: 1600px) and (max-height: 950px) {
  body,
  main {
    max-width: 100%;
    overflow-x: clip;
  }

  .hero .container {
    width: min(1120px, calc(100% - 64px)) !important;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  }

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

  .hero h1 {
    max-width: 520px !important;
    font-size: 50px !important;
  }

  .ritual {
    padding-bottom: 88px !important;
  }

  .ritual-copy h2 {
    margin: 6px 0 18px !important;
    font-size: 82px !important;
    white-space: nowrap;
  }

  .purchase-panel {
    width: min(980px, calc(100% - 96px));
    margin-top: -44px !important;
    padding: 30px 52px !important;
  }

  .science-card {
    overflow: clip !important;
    background-size: 270px auto !important;
  }

  .science-card::after {
    width: 300px !important;
    height: 300px !important;
  }

  .subscription-banner > div:first-child {
    left: -2% !important;
    width: 39% !important;
    height: 450px !important;
  }

  .subscription-banner > div:first-child > img {
    height: 450px !important;
    max-height: 450px !important;
  }

  .subscription-banner > div:last-child {
    padding: 34px 36px 32px 39% !important;
  }

  .kits {
    overflow-x: clip;
  }

  .kits .section-heading {
    margin-bottom: 90px !important;
  }

  .kit-card,
  .kit-card:nth-child(n) {
    min-height: 560px !important;
    height: 560px !important;
  }

  .kit-card .jars,
  .kit-card:nth-child(n) .jars {
    margin-bottom: -34px !important;
  }

  .kit-card:nth-child(1) .jars {
    transform: translate(32px, 12px) scale(1.28) !important;
  }

  .kit-card:nth-child(2) .jars {
    transform: translateY(12px) scale(1.25) !important;
  }

  .kit-card:nth-child(3) .jars {
    transform: translate(-32px, -5px) scale(1.25) !important;
  }

  .about-card {
    min-height: 440px !important;
    height: 440px !important;
    padding: 20px !important;
  }

  .about-card > div:last-child {
    padding: 32px 34px !important;
  }

  .faq {
    padding-top: 88px !important;
    padding-bottom: 82px !important;
  }

  .faq .narrow {
    width: min(860px, calc(100% - 80px)) !important;
    max-width: 860px !important;
  }

  .faq .section-title {
    font-size: 40px !important;
  }

  .faq .section-title::after {
    margin-bottom: 38px !important;
  }

  .faq .accordion button,
  .faq .accordion article.open button {
    min-height: 74px;
  }

  .site-footer .footer-primary {
    min-height: 320px;
    gap: 64px;
    padding: 54px 0 44px !important;
  }

  .site-footer .footer-brand {
    padding-right: 48px;
  }

  .site-footer .footer-information {
    gap: 30px;
  }
}

/* Hero benefits were removed from the visual language across every viewport. */
.benefit-chip {
  display: none !important;
}

/* Compact ritual card for short notebook displays. The mobile timeline and
   wide-desktop composition remain governed by their own contracts. */
@media (min-width: 1024px) and (max-width: 1600px) and (max-height: 950px) {
  .ritual {
    width: 100%;
    margin: 56px 0 0 !important;
    padding: 0 0 76px !important;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
  }

  .ritual::before {
    display: none;
  }

  .ritual-inner {
    width: min(1200px, calc(100% - 64px));
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto;
    border: none;
    border-radius: 26px !important;
    overflow: visible;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none;
  }

  .ritual-copy {
    padding: 48px 26px 28px 46px !important;
    background: linear-gradient(90deg, rgba(233, 238, 245, .98) 0%, rgba(233, 238, 245, .9) 73%, rgba(233, 238, 245, 0) 100%) !important;
  }

  .ritual-copy > p:first-child {
    margin: 0 0 4px !important;
    font-size: 15px !important;
  }

  .ritual-copy h2 {
    margin: 0 0 14px !important;
    font-size: 64px !important;
    line-height: .94;
    white-space: nowrap;
  }

  .ritual-list li {
    min-height: 42px;
    margin: 6px 0;
  }

  .ritual-list i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .ritual-list i svg {
    width: 24px;
    height: 24px;
  }

  .ritual-list span {
    width: min(360px, calc(100% - 52px));
    min-height: 42px;
    margin-left: 8px;
    padding: 8px 20px;
    font-size: 14px;
  }

  .outlined-note {
    width: min(480px, 100%);
    margin-top: 13px;
    padding: 12px 20px;
    border-width: 3px;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1.4;
  }

  .ritual-mantra {
    display: flex;
    gap: 18px;
    margin-top: 12px !important;
    font-size: 12px !important;
  }

  .ritual-mantra br {
    display: none;
  }

  .ritual-photo {
    min-height: 680px !important;
  }

  .purchase-panel {
    width: min(820px, calc(100% - 128px));
    margin: -54px auto 0 !important;
    padding: 18px 38px 20px !important;
    border-radius: 20px;
  }

  .purchase-panel p,
  .purchase-panel p:first-child {
    margin-bottom: 9px;
    font-size: 12px;
    line-height: 1.3;
  }

  .purchase-panel .cta {
    width: 360px;
    min-height: 50px;
  }
}

/* Final mobile composition lock. These rules intentionally remain isolated
   from tablet, notebook and desktop geometry. */
@media (max-width: 767px) {
  .hero-copy {
    text-align: center;
  }

  .wordmark {
    width: 150px !important;
    height: 70px !important;
    margin: 0 auto 10px !important;
  }

  .wordmark img {
    width: 260px !important;
    height: 173px !important;
    transform: translate(-63px, -35px) !important;
  }

  .hero h1 {
    max-width: 350px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .hero-copy > .hero-description-mobile {
    max-width: 344px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .intro-photo {
    width: calc(100% - 36px) !important;
    height: 350px !important;
    min-height: 350px !important;
    margin: 0 auto 18px !important;
    border-radius: 18px !important;
    background: #f8fafd !important;
    box-shadow: 0 14px 28px rgba(21, 36, 58, .12) !important;
  }

  .intro-photo img {
    width: 145% !important;
    object-position: center 30% !important;
    transform: none !important;
  }

  .results .product-stage {
    width: calc(100% + 40px) !important;
    min-height: 500px !important;
    height: 500px !important;
    margin-right: -20px !important;
    margin-left: -20px !important;
    padding: 20px !important;
    border-radius: 0 0 34px 34px !important;
    background-size: cover !important;
    background-position: center 48% !important;
  }

  .subscription-banner {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 24px !important;
    padding-top: 0 !important;
  }

  .subscription-banner > div:last-child {
    min-height: 0 !important;
    padding: 26px 21px 8px !important;
  }

  .subscription-banner > div:first-child {
    width: 100% !important;
    height: 318px !important;
    min-height: 318px !important;
    flex-basis: 318px !important;
  }

  .subscription-banner > div:first-child > img {
    width: 112% !important;
    height: 318px !important;
    max-height: 318px !important;
    margin-left: -6% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .simplify .section-heading h2 {
    max-width: 340px;
    margin-right: auto;
    margin-left: auto;
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .simplify .section-heading h2 .serif {
    font-size: 1.08em !important;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .wordmark {
    width: 140px !important;
    height: 66px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .wordmark img {
    width: 244px !important;
    height: 162px !important;
    transform: translate(-59px, -33px) !important;
  }

  .intro-photo {
    width: calc(100% - 28px) !important;
    height: 326px !important;
    min-height: 326px !important;
  }

  .simplify .section-heading h2 {
    font-size: 28px !important;
  }
}