*,*::before,*::after{box-sizing:border-box}
/* Every CTA on this page is an in-page anchor. Without smooth scroll the jump to
   #offer reads as a page reload; scroll-padding keeps the desktop sticky header
   from covering the heading it just jumped to. */
html{scroll-behavior:smooth; scroll-padding-top:var(--space-8)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--cream-100); color:var(--navy-700);
  font-family:'Outfit',system-ui,sans-serif; font-weight:300;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:500; line-height:1.2; margin:0 0 var(--space-2)}
h1{font-size:40px} h2{font-size:29px} h3{font-size:21px}
/* Headings were running the full 1140px container on desktop. A heading that
   wide has to be read, not scanned — the eye loses the line. */
h2{max-width:20ch}
p{margin:0 0 var(--space-2); max-width:68ch}
a{color:inherit}
/* height:auto is load-bearing. Every img carries width/height attributes to
   reserve layout space, but with only a CSS width set the browser honours the
   height ATTRIBUTE literally — a square 900x900 photo rendered 342x900 and
   stretched the subject. Any rule that sets an explicit height (#ritual) is
   more specific and still wins. */
img{max-width:100%; height:auto; display:block}

/* The default UA focus ring is a thin dark outline — invisible on the navy and
   night surfaces, which is where half the CTAs live. Gold reads on both. */
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px; border-radius:2px}

/* Weight 500, not 400: the design system permits 400 below 14px, but only
   300 and 500 are self-hosted — 400 would leave the browser font-matching. */
.eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay-600); font-weight:500; margin:0 0 var(--space-1);
}
.body-l{font-size:18px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-3)}
.section{padding:var(--space-8) 0}
.section--navy{background:var(--navy-700); color:var(--cream-100)}
.section--navy .eyebrow{color:var(--sand-300)}
/* cream-50 is the system's "raised surface" token. Alternating it with the
   default cream-100 gives the long middle stretch a rhythm — five identical
   cream sections in a row read as one undifferentiated block. */
.section--raised{background:var(--cream-50)}

/* Every section opens the same way: eyebrow, heading, optional intro. Giving
   that group one shared bottom margin is what makes the page scan as a series
   of chapters rather than a wall. */
.sec-head{margin-bottom:var(--space-4)}
.sec-head > :last-child{margin-bottom:0}
.sec-head .body-l{margin-top:var(--space-2)}
/* Section CTAs sit under full-width content, so left-aligning them left the
   button orphaned against a wide block. Centred, it reads as the section's
   closing action. The hero CTA is deliberately NOT centred — it belongs to the
   left-aligned copy column beside the product shot.
   Compounded as .btn.sec-cta because .btn sets display:inline-flex further down
   this file; a bare .sec-cta ties on specificity and loses on source order. */
.btn.sec-cta{display:flex; width:max-content; max-width:100%; margin:var(--space-4) auto 0}

/* Design-system icons: monoline, 1.5px on a 24px grid, rounded caps and joins,
   outline only. Set once here so no icon can drift. */
.ico{
  width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* Light surface = navy fill + cream text. Navy surface = gold fill + navy-900 text. */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 var(--space-4); border-radius:var(--radius-sm);
  background:var(--navy-700); color:var(--cream-100);
  font-weight:500; font-size:16px; text-decoration:none; border:0;
  cursor:pointer; transition:background 200ms var(--ease);
}
.btn:hover{background:var(--navy-800)}
.section--navy .btn{background:var(--gold-500); color:var(--navy-900)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media (min-width:768px){ h1{font-size:52px} }

/* Solid navy-900 is the gradient's own 0% stop, so the masthead reads as one
   continuous field with the hero below it rather than a separate bar. */
#masthead{background:var(--navy-900); padding:var(--space-3) 0 0}
#masthead img{width:118px; height:auto}
@media (min-width:768px){
  #masthead{padding-top:var(--space-4)}
  #masthead img{width:140px}
}

/* The gradient box is 2.8x the hero's height, anchored top, so only stops
   0-36% are visible — solid dark navy. The washed-out 40-76% band never
   renders behind text. The horizon and the Disc live inside the product
   image, which is where the design system puts them anyway. */
#hero{
  background:var(--grad-night); background-size:100% 280%;
  background-position:0 0; background-repeat:no-repeat;
  color:var(--cream-100); padding:var(--space-3) 0 var(--space-2);
}
.hero__inner{display:flex; flex-direction:column; gap:var(--space-2)}
#hero h1{font-size:34px; margin-bottom:var(--space-1)}
#hero .body-l{font-size:16px; color:var(--sand-300); margin-bottom:var(--space-3)}
#hero .eyebrow{color:var(--sand-300)}
#hero .btn{background:var(--gold-500); color:var(--navy-900); width:100%}
.hero__micro{
  font-size:12px; color:var(--sand-300); letter-spacing:.02em;
  margin:var(--space-2) 0 0; text-align:center;
}
@media (min-width:768px){ .hero__micro{text-align:left} }
/* 280px, not 200px. The hero image is the product shot — on a direct-response
   page it is the first thing a cold click has to recognise, so it earns the
   space. The old 200px cap came from a hero-height budget set when this slot
   held a placeholder; the CTA sits above the image in source order, so growing
   it pushes nothing off the fold. The radius matches every other photo on the
   page — the hero shot was the only one left with square corners. */
/* 86%, up from 78%/max-280px. This is the product shot and it earns size, but
   the hero has a hard ceiling: iPhone 13's viewport is 390x664, and the whole
   hero including the shot has to fit it. Measured at 390w — 100% width puts the
   hero at 701px (over), 88% at 660px (4px of margin, too tight to trust across
   font loading), 86% at ~653px. Going edge-to-edge was rejected separately:
   every other photo on the page carries this radius, so a square full-bleed
   hero would read as a mistake rather than a choice. */
.hero__img{
  width:86%; margin:0 auto; height:auto;
  border-radius:var(--radius-md);
}

@media (min-width:768px){
  #hero{padding:var(--space-8) 0}
  .hero__inner{flex-direction:row; align-items:center; gap:var(--space-8)}
  .hero__copy{flex:1}
  #hero h1{font-size:52px}
  #hero .body-l{font-size:18px}
  #hero .btn{width:auto}
  .hero__img{flex:0 0 40%; max-width:420px}
}

/* Mobile: pinned to the bottom above the safe area. Desktop: flips to a slim
   top header (see media query below) so it never competes with the hero CTA. */
#sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:8px; align-items:center;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--navy-700);
  transition:transform 400ms var(--ease); transform:translateY(0);
}
#sticky-cta.is-hidden{transform:translateY(110%)}
.sticky__wa{
  flex:0 0 auto; width:44px; height:44px; border-radius:var(--radius-sm);
  border:1px solid rgba(239,231,218,.4); color:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
}
.sticky__buy{
  flex:1; min-height:44px; flex-direction:column; gap:0; line-height:1.15;
  background:var(--gold-500); color:var(--navy-900);
}
.sticky__buy span{font-size:11px; font-weight:400; opacity:.8}

@media (min-width:768px){
  #sticky-cta{
    top:0; bottom:auto; padding:10px var(--space-4);
    justify-content:flex-end; gap:var(--space-2);
  }
  #sticky-cta.is-hidden{transform:translateY(-110%)}
  .sticky__buy{flex:0 0 auto; flex-direction:row; gap:8px; padding:0 var(--space-3)}
}

#trust{background:var(--sand-200); padding:var(--space-2) 0}
.trust__list{
  display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3);
  list-style:none; margin:0; padding:0 var(--space-3);
  font-size:13px; color:var(--navy-700); justify-content:center;
}
/* align-items:flex-start, not center: the melatonin point wraps to two lines on
   a narrow screen, and centring pushed its icon to the middle of the block while
   the single-line points kept theirs on the first line. The icons have to sit on
   a common baseline or the strip reads as three unrelated fragments. */
.trust__list li{display:flex; align-items:flex-start; gap:8px; text-align:left}
.trust__list .ico{flex:0 0 auto; margin-top:2px}
.trust__note{color:var(--clay-600); font-size:12px}

/* Below 768px the strip stacks, so it is centred as a block with the rows left
   aligned inside it — that keeps the three icons in one vertical line. */
@media (max-width:767px){
  .trust__list{
    flex-direction:column; align-items:flex-start;
    width:max-content; max-width:100%; margin:0 auto;
  }
}

/* Shared two-column layout for #problem, #third-path and #calm. min-width:0 on
   both children is load-bearing, not defensive. A flex item's default min-width
   is auto, so it refuses to shrink below its intrinsic content width — the
   images declare width="900", so `flex:0 0 42%` lost to a 900px intrinsic floor
   and the row blew out past the viewport, crushing the text column. width:42%
   pins the box; the min-width:0 pair lets it actually hold. */
.split{display:flex; flex-direction:column; gap:var(--space-4)}
.split img{border-radius:var(--radius-md); width:100%}
.problem__list{padding-left:1.1em; margin:0 0 var(--space-2)}
.problem__list li{margin-bottom:var(--space-1)}
@media (min-width:768px){
  .split{flex-direction:row; align-items:center; gap:var(--space-8)}
  .split__copy{flex:1; min-width:0}
  .split img{flex:0 0 42%; width:42%; min-width:0}
  .split--reverse .split__copy{order:2}
}

.ingredients{
  display:grid; gap:var(--space-2); margin:0 0 var(--space-4);
  grid-template-columns:1fr;
}
.ingredient{
  background:var(--cream-50); border:1px solid var(--sand-400);
  border-radius:var(--radius-md); padding:var(--space-3);
  box-shadow:var(--shadow-soft);
}
.section--raised .ingredient{background:var(--cream-100)}
/* Ingredients and steps were three consecutive text-only sections, which put a
   long unbroken wall of prose in the exact stretch carrying the persuasion load.
   Monoline icons at the design system's 1.5 stroke break it without adding
   photography, which would have started fighting the minimalist shell. */
.ingredient__ico,.step__ico{
  width:32px; height:32px; color:var(--clay-600);
  margin-bottom:var(--space-1); stroke-width:1.25;
}
.ingredient h3{margin-bottom:2px}
.ingredient__src{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay-600); margin-bottom:var(--space-1);
}
.ingredient p:last-child{margin:0}
.callout{
  background:var(--navy-700); color:var(--cream-100);
  border-radius:var(--radius-md); padding:var(--space-4);
}
.callout h3{margin-bottom:var(--space-1)}
.callout p{margin:0}
@media (min-width:768px){ .ingredients{grid-template-columns:repeat(3,1fr)} }

.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:var(--space-3); grid-template-columns:1fr;
}
.step{
  border-top:1px solid var(--sand-400); padding-top:var(--space-2);
}
/* The icon carries the visual weight, so the number shrinks to a quiet ordinal
   beside it rather than competing as a second badge. */
.step__ico{margin-bottom:4px}
.step__n{
  display:block; font-size:11px; letter-spacing:.24em;
  color:var(--clay-600); margin-bottom:var(--space-1);
}
.step p{margin:0}
@media (min-width:768px){ .steps{grid-template-columns:repeat(3,1fr)} }

/* The caption sits directly on a dark night photograph, so it is cream over a
   scrim rather than navy on the bare image — legibility no longer depends on
   the photo being light in the bottom third. Two things the old rule got wrong:
   the caption was centred, which dropped it straight onto the printed text on
   the pack, and it was anchored at space-4 from the bottom, which on mobile put
   it underneath the sticky buy bar and clipped the last word. It now sits
   bottom-left over the calm part of the frame, clear of the bar. z-index is
   required: ::after is generated last and would otherwise paint over it. */
#ritual{position:relative}
/* object-position, not the default centre: the portrait crop on mobile shows
   only about half the width of a 16:9 frame, and centred it puts the carton —
   printed text and all — directly under the caption. Biasing left brings the
   bedding into the bottom-left corner, which is dark and empty, and pushes the
   carton to the right half where nothing overlaps it. */
#ritual img{
  width:100%; height:52vh; min-height:280px; display:block;
  object-fit:cover; object-position:12% center;
}
@media (min-width:768px){ #ritual img{object-position:center} }
#ritual::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:70%;
  background:linear-gradient(180deg,rgba(13,20,35,0) 0%,rgba(13,20,35,.55) 45%,rgba(13,20,35,.86) 100%);
  pointer-events:none; z-index:1;
}
.ritual__copy{
  position:absolute; left:0; right:0; z-index:2;
  bottom:calc(var(--space-6) + env(safe-area-inset-bottom));
  color:var(--cream-100);
}
/* The inner .wrap aligns the caption to the same left edge as every other
   section. The ch cap is what keeps it off the carton: unconstrained, the line
   runs across the pack's own printed name at desktop width. */
.ritual__copy p{margin:0; max-width:22ch; font-size:21px}
@media (min-width:768px){
  #ritual .ritual__copy{bottom:var(--space-6)}
  .ritual__copy p{font-size:29px; max-width:15ch}
}

/* The table now renders at every width. It used to collapse into per-competitor
   cards below 480px, but the cards restate each column as a sentence, which
   loses the thing a comparison is for: reading one row across and seeing who
   wins it. Most traffic here is mobile, so the argument was only ever landing
   for the minority on desktop. Below 768px the table scrolls sideways inside
   .compare__scroll with the row-label column pinned. */
.compare__scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 var(--space-2);
}
.compare__table{
  display:table; width:100%; border-collapse:collapse; min-width:560px;
}
.compare__table th,.compare__table td{
  padding:var(--space-2); text-align:left; font-size:14px;
  border-bottom:1px solid var(--sand-400);
}
/* Column headers only. Row headers stay body-sized — they are the questions
   being answered, not labels. */
.compare__table thead th{
  font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clay-600);
}
.compare__table tbody th{font-weight:300}
/* Pinned while the table scrolls sideways. Needs an opaque background or the
   scrolling columns show through it. */
.compare__table th:first-child{
  position:sticky; left:0; z-index:1; background:var(--cream-100);
  min-width:150px;
}
.section--raised .compare__table th:first-child{background:var(--cream-50)}
.compare__table thead th:nth-child(2){color:var(--navy-700)}
.compare__table th:nth-child(2),.compare__table td:nth-child(2){
  background:var(--sand-200); font-weight:500;
}
.compare__table thead th:nth-child(2){border-top:2px solid var(--navy-700)}

/* Scroll hint, mobile only — a cut-off column is easy to miss otherwise. */
.compare__hint{
  font-size:12px; color:var(--clay-600); margin:0 0 var(--space-3);
}
/* Tightened so the phone shows the label, all of Monvoi and a slice of the next
   column at rest. A table whose first scroll-step is still inside your own
   column gives the reader nothing to compare against. */
@media (max-width:767px){
  .compare__table{min-width:470px}
  .compare__table th,.compare__table td{padding:var(--space-1); font-size:13px}
  .compare__table th:first-child{min-width:112px}
  .compare__table thead th{font-size:11px; letter-spacing:.06em}
}
@media (min-width:768px){
  .compare__scroll{overflow-x:visible}
  .compare__table{min-width:0}
  .compare__table th:first-child{position:static}
  .compare__hint{display:none}
}

/* Fixed row order, and every card carries every row — Discovery's badge and
   shipping slots are empty but present (aria-hidden, so nothing is announced).
   Without them its title, price and button all sat at different heights from
   the other two cards and the three could not be compared by scanning. */
.tiers{display:grid; gap:var(--space-3); grid-template-columns:1fr}
.tier{
  background:var(--cream-50); border:1px solid var(--sand-400);
  border-radius:var(--radius-md); padding:var(--space-3); text-align:center;
  display:flex; flex-direction:column;
}
.section--raised .tier{background:var(--cream-100)}
.tier--featured{
  background:var(--navy-700); color:var(--cream-100); border-color:var(--navy-700);
}
.tier--featured .btn{background:var(--gold-500); color:var(--navy-900)}
/* max-width keeps the kit shot from dominating the card on a wide desktop
   column; width:100% keeps it from overflowing a narrow one. Both are needed —
   see the .split note above for what happens when an image sizes itself from
   its intrinsic width. The cream plate stops the featured card's navy from
   showing through the shot's own pale background as a floating rectangle. */
/* The plate is on all three, not just the featured card, so the image boxes stay
   exactly the same height — the alignment above depends on it. On the two cream
   cards the plate is the same colour as the card and reads as nothing; on the
   navy featured card it turns the shot's pale background into a deliberate
   product tile instead of a rectangle floating on navy. */
.tier__img{
  display:block; width:100%; max-width:200px; height:auto;
  margin:0 auto var(--space-2); border-radius:var(--radius-sm);
  background:var(--cream-50); padding:6px;
}
.tier__badge{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  /* 1.6em, matching the inherited line-height: an empty slot reserved at 1.2em
     is 4px shorter than a filled one, which pushed Discovery's whole card out
     of alignment with the other two. */
  color:var(--gold-500); margin:0 0 var(--space-1); min-height:1.6em;
}
.tier:not(.tier--featured) .tier__badge{color:var(--clay-600)}
.tier h3{margin-bottom:var(--space-1)}
.tier__qty{font-size:13px; color:var(--clay-600); margin:0 0 var(--space-2)}
.tier--featured .tier__qty{color:var(--sand-300)}
.tier__price{font-size:29px; font-weight:500; margin:0}
.tier__night{font-size:13px; color:var(--clay-600); margin:0 0 var(--space-1); min-height:2.6em}
.tier--featured .tier__night{color:var(--sand-300)}
.tier__ship{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 var(--space-2); min-height:1.6em;
}
/* margin-top:auto pins the button to the card floor, so the three buttons line
   up even if a card's copy runs a line longer. */
.tier .btn{width:100%; margin-top:auto}

@media (min-width:768px){
  .tiers{grid-template-columns:repeat(3,1fr); align-items:stretch}
  .tier__night{min-height:3.9em}
}

.reassure{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3);
  font-size:14px; color:var(--clay-600);
}
.reassure a{color:var(--navy-700); text-underline-offset:3px}

/* Was a dashed placeholder box. Now real quotes from the sampling round, so it
   is a solid card: the dashed border read as "unfinished" and undercut the
   thing it was holding. */
.testimonials{display:grid; gap:var(--space-2); grid-template-columns:1fr}
.testimonial{
  background:var(--cream-50); border:1px solid var(--sand-300);
  border-radius:var(--radius-md); padding:var(--space-3);
  margin:0; display:flex; flex-direction:column; gap:var(--space-2);
}
.testimonial blockquote{margin:0; color:var(--navy-700); font-size:15px; line-height:1.65}
.testimonial figcaption{margin-top:auto; line-height:1.4}
.testimonial__name{display:block; font-weight:500; color:var(--navy-700); font-size:14px}
.testimonial__meta{display:block; color:var(--clay-600); font-size:12px}

/* summary's list-style is removed to drop the native triangle, which left no
   affordance at all — seven rows that look like static text but expand. The
   chevron is the design system's monoline stroke and rotates on open. */
#faq details{border-bottom:1px solid var(--sand-400)}
#faq summary{
  cursor:pointer; font-weight:500; list-style:none; min-height:44px;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); padding:var(--space-2) 0;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{
  content:''; flex:0 0 auto; width:10px; height:10px; margin-right:4px;
  border-right:1.5px solid var(--clay-600); border-bottom:1.5px solid var(--clay-600);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform 200ms var(--ease);
}
#faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
#faq details p{margin:0 0 var(--space-2); color:var(--clay-600)}
.faq__wa{margin-top:var(--space-3); font-size:14px}

/* Anchored exactly like #hero, and for the same reason. The original rule
   assumed the tagline would land below the 76% stop, in the cream zone — but
   that only holds if the section is tall. It renders 279px, so the gradient
   compressed and "Feel Better, Live Brighter." sat at 34-47%: navy-700 text
   in the washed-out band, the worst contrast on the page. Stretching the
   gradient to 280% shows only its solid dark top, so the section closes the
   page on night the same way the hero opens it — cream text, gold button. */
#final-cta{
  background:var(--grad-night); background-size:100% 280%;
  background-position:0 0; background-repeat:no-repeat;
  text-align:center;
  padding:var(--space-12) 0 var(--space-8); color:var(--cream-100);
}
#final-cta h2{margin:0 auto var(--space-2)}
.final__sub{
  max-width:44ch; margin:0 auto var(--space-4); color:var(--sand-300);
  font-size:15px;
}
#final-cta .btn{background:var(--gold-500); color:var(--navy-900)}

#footer{background:var(--navy-700); color:var(--sand-300); padding:var(--space-4) 0 96px}
#footer .wrap{display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:13px;
  justify-content:center}
@media (min-width:768px){
  .testimonials{grid-template-columns:repeat(3,1fr)}
  #footer{padding-bottom:var(--space-4)}
}