/* fonts/fonts.css */


@font-face {
  font-family: "Geist";
  
  src:
    url("/fonts/Geist/Geist-VariableFont_wght.woff2") format("woff2"),
    url("/fonts/Geist/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* css/tokens.css */

:root {

  --gray-0:   #ffffff;
  --gray-200: #dcdcdc;
  --gray-400: #a0a0a0;
  --gray-500: #767676;
  --gray-700: #3d3d3d;
  --gray-900: #111111;

  --brand-100: #f6e4e4;
  --brand-500: #c76367;
  --brand-700: #9e4649;

  --blue-600: #4a72a8;

  --red-700: #b23b3b;

  --alpha-frost:     rgba(255, 255, 255, 0.82);
  --alpha-scrim:     rgba(17, 17, 17, 0.45);
  --alpha-wash:      rgba(17, 17, 17, 0.05);
  --alpha-rule:      rgba(0, 0, 0, 0.05);
  --alpha-edge:      rgba(0, 0, 0, 0.08);
  --alpha-dot:       rgba(0, 0, 0, 0.16);
  --alpha-dot-hover: rgba(0, 0, 0, 0.32);

  --text-primary:  var(--gray-900);
  --text-muted:    var(--gray-500); 
  --text-disabled: var(--gray-400);
  --text-inverse:  var(--gray-0);
  --text-accent:   var(--blue-600); 

  --bg-primary: var(--gray-0);
  --bg-surface: var(--gray-0);
  --bg-announce: var(--blue-600); 
  --bg-frost:    var(--alpha-frost);
  --bg-hover:    var(--alpha-wash);

  --border-default: var(--gray-200);
  --border-faint:   var(--alpha-rule);
  --border-card:    var(--alpha-edge);
  --border-accent:  var(--blue-600); 

  --primary-hover:  var(--brand-700);
  --primary-subtle: var(--brand-100);
  --focus-brand:    var(--brand-500);
  --danger:         var(--red-700);

  --ink:      var(--text-primary);
  --paper:    var(--bg-primary);
  --hairline: var(--border-default);

  --scrim-card:  linear-gradient(to top, rgba(250,250,248,0.96) 0%, rgba(250,250,248,0.6) 42%, rgba(250,250,248,0) 70%);
  
  --scrim-fade-light: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-24: 24px;

  --flow-2xs: clamp(9px,  1.4svh, 12px);
  --flow-xs:  clamp(14px, 2.2svh, 20px);
  --flow-sm:  clamp(16px, 2.5svh, 28px);
  --flow-md:  clamp(24px, 4svh,   40px);
  --flow-lg:  clamp(28px, 4.5svh, 44px);
  --flow-xl:  clamp(28px, 5svh,   52px);
  --flow-2xl: clamp(34px, 5svh,   55px);

  --gap-inline: clamp(10px, 1.4vw, 16px);

  --container: min(100% - 80px, 1120px);

  --col-copy-lead:    min(620px, 55%); 
  --col-copy-balanced: min(560px, 46%); 
  --col-copy-support: min(460px, 40%); 

  --grid-gap:    clamp(40px, 6vw, 96px);
  --grid-gap-sm: clamp(24px, 3vw, 40px);

  --bottle-gap: clamp(18px, 3.6vw, 64px);

  --t-overline: 11px; 
  --t-label:    12px; 
  --t-body-sm:  14px; 
  --t-body:     16px; 
  --t-lead:     20px; 
  --t-mark:     22px; 

  --t-sub:        min(clamp(19px, 2.6svh, 23px), 3.4vw);
  --t-sub-mobile: clamp(21px, 5.2vw, 25px);

  --t-title:    40px;
  --t-title-sm: 34px;
  --t-title-xs: 24px;

  --t-headline: clamp(48px, 7.2svh, 88px);

  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-card: 32px; 
  --radius-full: 999px;

  --control-h-lg: 64px;
  --control-h-sm: 58px;

  --topbar-h: 28px;

  --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.10);

  --shadow-float:
      drop-shadow(0 24px 48px rgba(90, 72, 50, 0.08))
      drop-shadow(0 60px 120px rgba(90, 72, 50, 0.04));
  --shadow-card:
      0 2px 4px    rgba(0, 0, 0, 0.07),
      0 14px 40px  rgba(0, 0, 0, 0.06),
      0 50px 110px rgba(0, 0, 0, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);

  --figure-hero-h:  min(calc((100svh - 64px) * 0.9775), 1035px);
  --figure-pouch-h: clamp(260px, 40svh, 460px);
  --figure-hero-w-mobile:  clamp(240px, 80vw,  380px);
  --figure-crop-w-mobile:  clamp(300px, 96vw,  460px);
  --figure-pouch-w-mobile: clamp(280px, 108vw, 460px);

  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 300ms;
  --duration-fade: 0.8s; 
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root {
    --container: calc(100% - 64px);
    --t-body: 14px;
    --t-lead: 16px;
  }
}
@media (max-width: 767px) {
  :root {
    --container: calc(100% - 40px);
    --t-lead: 14px;
  }
}

@media (max-width: 480px) {
  :root { --topbar-h: 46px; }
}

@media (min-width: 1600px) {
  :root {
    --container: min(100% - 120px, 1440px);
    --figure-hero-h: min(calc((100svh - 64px) * 0.9775), 1240px);
  }
}

/* css/base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: var(--paper); overflow: hidden; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  position: relative;
  
  opacity: 0;
  transition: opacity var(--duration-fade) ease;
}
body.ready { opacity: 1; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.reserve-email:focus-visible, .reserve-btn:focus-visible { outline: none; }

h1, h2, h3, h4,
.section-title, .card-title, .card-text, .cta-head, .faq-q,
.eyebrow, .transparency-eyebrow, .editorial-intro-label,
.emphasis, .final-lead, .hero-sub,
.faq-title, .signup-head {
  text-wrap-style: balance;
}
p, li, .faq-a, .faq-note, .signup-sub, .signup-outro {
  text-wrap-style: pretty;
}

.scroll-stage {
  height: 100svh;
  height: 100dvh;
  overflow-y: auto;
  
  overflow-x: hidden;
  
  padding-top: var(--topbar-h);
  
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-stage { scroll-behavior: auto; }
  body { transition: none; }
}

.wrap {
  width: var(--container);
  margin-inline: auto;
}

.panel {
  --band: 0;
  --section-pad-bottom: clamp(32px, 5svh, 60px);
  position: relative;
  width: 100%;
  min-height: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  padding-bottom: var(--section-pad-bottom);
  
  padding-top: max(108px, clamp(64px, 12svh, 140px));
}

.panel-hero { --band: 100svh; padding-top: 0; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 767px) {
  .panel {
    
    padding-top: max(100px, clamp(88px, 13svh, 124px));
    --section-pad-bottom: clamp(28px, 4svh, 48px);
    padding-bottom: var(--section-pad-bottom);
  }

}

.line-group { display: block; }

/* css/utilities.css */


.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lg-default { display: contents; }
.lg-landscape { display: none; white-space: nowrap; }
@media (min-width: 768px) and (max-height: 600px) {
  .lg-default { display: none; }
  .lg-landscape { display: contents; }
}

.sm-default { display: contents; }
.sm-mobile { display: none; white-space: nowrap; }
@media (max-width: 767px) {
  .sm-default { display: none; }
  .sm-mobile { display: contents; }
}

/* css/components/type.css */


.cta-head-lg,
.card-title,
.feature-title,
.editorial-intro-label,
.transparency-body .transparency-eyebrow {
  font-weight: 500;
  font-size: var(--t-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cta-head,
.signup-eyebrow,
.reserve-btn-label {
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.eyebrow {
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.type-label {
  font-weight: 500;
  font-size: var(--t-overline);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-text,
.caps-body p,
.editorial-intro-body p,
.transparency-body p,
.feature-caption,
.cta-benefit,
.faq-a-body {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.hero-sub,
.story-statement p,
.membership-head .eyebrow {
  font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  .hero-sub,
  .story-statement p,
  .membership-head .eyebrow { font-size: var(--t-sub-mobile); }
}

.site-nav-logo,
.final-footer-brand {
  font-weight: 200;
  font-size: var(--t-mark);
  line-height: 1;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* css/components/nav.css */

.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 41; 
  
  transition: top var(--duration) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-announce);
  
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.top-bar-text {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-inverse);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 480px) {
  .top-bar { padding-block: 6px; }
  .top-bar-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
}

.site-nav {
  
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  height: 64px;
  z-index: 40;
  transition: top var(--duration) var(--ease-standard);
}

html.chrome-condensed .top-bar { top: calc(-1 * var(--topbar-h)); }
html.chrome-condensed .site-nav { top: 0; }
@media (prefers-reduced-motion: reduce) {
  .top-bar, .site-nav { transition: none; }
}

.site-nav::before {
  content: "";
  position: absolute;
  
  inset: -2px 0 0 0;
  background: var(--bg-frost);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-faint);
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  pointer-events: none;
}
.site-nav.scrolled::before { opacity: 1; }

.site-nav-inner {
  position: relative; 
  height: 100%;
  width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.site-nav-brand {
  display: flex;
  align-items: center;
}

.site-nav-logo {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-nav-cta {
  font-family: inherit;
  height: 44px;
  padding: 0 22px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: none;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-indent: 0.09em; 
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-full);
  transition: background 200ms ease;
}
.site-nav-cta:hover { background: var(--bg-hover); }

@media (max-width: 767px) {
  .site-nav { height: 56px; }
  .site-nav-cta { height: 44px; padding: 0 16px; font-size: var(--t-overline); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .site-nav { height: 56px; }
  .site-nav-cta { height: 44px; padding: 0 18px; font-size: var(--t-overline); }
}

html.at-final-chrome-hide .top-bar,
html.at-final-chrome-hide .site-nav {
  display: none;
}

/* css/components/footer-controls.css */

.lang-switch {
  margin-top: var(--flow-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}
.lang-btn {
  position: relative; 
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-disabled);
  text-decoration: none; 
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: color var(--duration) var(--ease-standard);
  white-space: nowrap;
}

.lang-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 44px;
}
.lang-btn.active { color: var(--text-muted); }
.lang-btn:hover:not(.active) { color: var(--gray-400); }
.lang-flag { font-style: normal; letter-spacing: 0; font-size: var(--t-body-sm); line-height: 1; }

.lang-text { display: none; }
@media (min-width: 768px) {
  .lang-text { display: inline; }
}

.social-links {
  margin-top: var(--flow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
}
.social-links a {
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 28px;
  height: 28px;
  opacity: 0.9;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.social-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.social-links a:hover { opacity: 1; }
.social-links img { width: 20px; height: 20px; object-fit: contain; }

.footer-row {
  margin-top: var(--flow-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px);
}
.footer-row .lang-switch,
.footer-row .social-links { margin-top: 0; }
.footer-sep {
  color: var(--border-default);
  font-size: var(--t-label);
  line-height: 1;
  user-select: none;
}

/* css/components/cta-form.css */

.cta {
  
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-height: 150px; 
}
@media (min-width: 768px) {
  .cta.done .reserve-msg { order: -1; margin-top: 0; }
}
@media (max-width: 767px) {
  .cta.done .reserve-msg { position: absolute; margin-top: 0; }
}

.cta-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flow-2xs);
}
.cta-top .cta-badge { margin-top: 0; }
@media (min-width: 768px) {
  .cta-top { flex-direction: row; align-items: center; gap: 18px; }
}

.cta-offer {
  
  margin-top: 0;
  text-align: left;
  width: min(520px, 100%); 
}

.cta-badge {
  display: inline-block;
  margin-top: var(--flow-2xs);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--primary-subtle);
  font-weight: 600;
  font-size: var(--t-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-hover);
}

.cta-benefit-list {
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
@media (max-width: 767px) {
  
  .cta-benefit-list { gap: 18px 14px; }
}
.cta-benefit {
  display: flex;
  gap: 14px;
  align-items: center;
}
.cta-benefit::before {
  content: "✓";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border-accent);
  border-radius: 50%;
  color: var(--text-accent);
  display: grid;
  place-items: center;
  font-size: 14px; 
  line-height: 1;
}
.cta-offer-note {
  margin-top: 14px;
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.reserve-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reserve {
  margin-top: var(--flow-xs);
  display: flex;
  align-items: stretch;
  width: min(520px, 100%);
  height: var(--control-h-lg);
  border: 1.5px solid var(--text-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-surface);
  transition: box-shadow var(--duration) var(--ease-standard),
              opacity 400ms var(--ease-standard);
}
@media (max-width: 767px) {
  .reserve {
    width: 100%;
    max-width: 360px;
    height: var(--control-h-sm);
    margin-inline: auto;
  }
}
.reserve:focus-within { box-shadow: var(--focus-ring); }
.reserve.invalid { border-color: var(--danger); }

.reserve.invalid:focus-within { box-shadow: none; }
.reserve-email {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-inline: 22px;
  font-family: inherit;
  font-size: 16px; 
  font-weight: 300;
  color: var(--text-primary);
}
.reserve-email::placeholder { color: var(--text-muted); }
.reserve-btn {
  flex: 0 0 auto;
  padding: 0 24px;
  border: 0;
  background: var(--text-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--duration) var(--ease-standard),
              opacity var(--duration) var(--ease-standard);
}
.reserve-btn-label { color: var(--text-inverse); white-space: nowrap; letter-spacing: 0.14em; }
@media (max-width: 767px) {
  .reserve-btn { padding: 0 18px; gap: 8px; }
}
.reserve-btn:hover { background: var(--gray-700); }
.reserve.loading .reserve-btn { opacity: 0.55; cursor: default; }
.reserve.done { visibility: hidden; opacity: 0; }
.cta.done .cta-head,
.cta.done .cta-badge,
.cta.done .cta-offer { visibility: hidden; }

.reserve-msg {
  transition: opacity 400ms var(--ease-standard);
  margin-top: var(--flow-2xs);
  min-height: 1em;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.reserve-msg.ok {
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: 0.16em;
  align-self: center;
  text-align: center;
}
.reserve-msg.err { color: var(--danger); }

.reserve-msg-number { color: var(--text-accent); }
.reserve-msg.fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .reserve-msg, .reserve { transition: none; }
}

/* css/components/product-figure.css */

.product-figure {
  position: relative;
  display: grid;
  place-items: center;
}
.pf-img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

[data-cycle] .pf-img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--duration-fade) ease;
}
[data-cycle] .pf-img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-cycle] .pf-img { transition: none; }
}

@media (min-width: 768px) {
  .product-figure-hero .pf-img { width: auto; height: var(--figure-hero-h); }
  
  .product-figure-pouch .pf-img { height: var(--figure-pouch-h); }
}

.product-figure-crop {
  position: relative;
}
.product-figure-crop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--scrim-fade-light);
  pointer-events: none;
}

@media (max-width: 767px) {
  .product-figure-hero .pf-img {
    width: var(--figure-hero-w-mobile);
    height: auto;
  }
  
  .product-figure-sticky .pf-img {
    width: var(--figure-crop-w-mobile);
    max-width: none;
    height: auto;
  }
  
  .product-figure-pouch .pf-img {
    width: var(--figure-pouch-w-mobile);
    max-width: none;
    height: auto;
  }
  .membership-figure {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden; 
  }
}

/* css/components/editorial-card.css */


.card { position: relative; }

.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 767px) {
  
  .card-media { aspect-ratio: auto; height: clamp(360px, 52svh, 440px); }
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-card);
  pointer-events: none;
}
.card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--grid-gap-sm);
}
.card-text {
  margin-top: var(--space-8);
  max-width: 30ch;
}

/* css/components/benefit-row.css */

.benefit-icon {
  flex: 0 0 auto;
  
  width: 52px;
  height: 52px;
}
.benefit-copy { display: flex; flex-direction: column; }
.feature-caption {
  margin-top: var(--space-8);
  text-align: left;
}

/* css/components/signup-dialog.css */


.signup-dialog {
  
  margin: auto;
  width: min(440px, 100% - 40px);
  max-width: 440px;
  
  max-height: min(640px, 100svh - 48px);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--text-primary);
  overflow: hidden; 
  
  display: none;
  flex-direction: column;
  
}

.signup-dialog:focus,
.signup-dialog:focus-visible {
  outline: none;
}

.signup-dialog::backdrop {
  background: var(--alpha-scrim);
}

.signup-dialog {
  opacity: 0;
  translate: 0 12px;
  scale: 0.98;
}
.signup-dialog[open] {
  display: flex; 
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 0.26s var(--ease-standard), translate 0.26s var(--ease-standard),
              scale 0.26s var(--ease-standard),
              overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
@starting-style {
  .signup-dialog[open] { opacity: 0; translate: 0 12px; scale: 0.98; }
}

.signup-dialog::backdrop { opacity: 0; }
.signup-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 0.26s var(--ease-standard),
              overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
@starting-style {
  .signup-dialog[open]::backdrop { opacity: 0; }
}

.signup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px; 
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color var(--duration) var(--ease-standard);
  z-index: 1; 
}
.signup-close:hover { color: var(--text-primary); }
.signup-close:focus-visible { box-shadow: var(--focus-ring); }

.signup-inner {
  min-height: 0;
  overflow-y: auto;
  
  overscroll-behavior: contain;
  padding: 44px 40px 40px;
  text-align: center;
}

.signup-head {
  margin-top: var(--space-8); 
  font-weight: 300;
  font-size: var(--t-title);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.signup-number { color: var(--text-accent); }

.signup-sub {
  margin-top: var(--space-8); 
  font-weight: 300;
  
  font-size: 16px; 
  line-height: 1.45;
  color: var(--text-muted);
}

.signup-outro {
  
  max-width: 36ch;
  margin-inline: auto;
  margin-top: var(--space-24); 
  font-weight: 300;
  font-size: var(--t-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.signup-email { color: var(--text-primary); }

.signup-done {
  margin-top: var(--space-24); 
  height: 48px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-family: inherit;
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-indent: 0.09em; 
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration) var(--ease-standard);
}
.signup-done:hover { background: var(--gray-700); }
.signup-done:focus-visible { box-shadow: var(--focus-ring); }

@media (max-width: 767px) {
  .signup-dialog {
    margin: auto auto 0;
    width: 100%;
    max-width: 100%;
    max-height: 92svh;
    border: 0; 
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    translate: 0 100%; 
    scale: 1;
  }
  .signup-inner {
    
    padding: 44px 28px calc(28px + env(safe-area-inset-bottom));
  }
  .signup-head { font-size: var(--t-title-sm); }
  
  .signup-done { margin-top: var(--space-24); width: 100%; height: 54px; }
}

@media (max-width: 767px) {
  @starting-style {
    .signup-dialog[open] { translate: 0 100%; scale: 1; }
  }
}

.signup-dialog.is-compact { max-height: calc(100svh - 32px); }
.signup-dialog.is-compact .signup-inner { padding: 24px 32px 22px; }
.signup-dialog.is-compact .signup-eyebrow { letter-spacing: 0.14em; }
.signup-dialog.is-compact .signup-head { font-size: var(--t-title-xs); margin-top: 6px; }
.signup-dialog.is-compact .signup-sub { font-size: var(--t-body-sm); margin-top: 6px; }

.signup-dialog.is-compact .signup-outro {
  font-size: var(--t-label);
  margin-top: 18px; 
  line-height: 1.5;
  max-width: none;
}
.signup-dialog.is-compact .signup-done { margin-top: 18px; height: 42px; padding: 0 28px; }

@media (prefers-reduced-motion: reduce) {
  .signup-dialog,
  .signup-dialog[open],
  .signup-dialog::backdrop,
  .signup-dialog[open]::backdrop {
    transition: none;
    translate: none;
    scale: none;
  }
  @starting-style {
    .signup-dialog[open] { opacity: 1; translate: none; scale: none; }
    .signup-dialog[open]::backdrop { opacity: 1; }
  }
}

/* css/sections/hero.css */

.panel-hero {
  --band: 100svh;
  
  padding-bottom: clamp(32px, 4svh, 48px);
}
@media (min-width: 768px) {
  
  .panel-hero { padding-bottom: clamp(16px, 2svh, 24px); }
}

.hero-grid {
  text-align: center;
  gap: var(--flow-xl);
}

@media (max-width: 767px) {
  
  .panel-hero .cta { align-items: center; text-align: center; }
  
  .panel-hero .cta-offer { margin-inline: auto; max-width: 360px; text-align: left; }
}

@media (min-width: 768px) {
  
  .panel-hero { justify-content: flex-end; }
  
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--col-copy-lead)) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "text figure" "cta figure";
    
    column-gap: var(--grid-gap);
    row-gap: clamp(20px, 3vh, 36px);
    text-align: left;
  }
  .hero-copy-top { grid-area: text; align-self: start; padding-top: clamp(64px, 9svh, 120px); }
  
  .hero-grid .cta { grid-area: cta; align-self: end; width: 100%; transform: translateY(-44px); }
  .hero-figure { grid-area: figure; justify-self: center; align-self: center; }
}

@media (min-width: 768px) and (orientation: portrait) {
  .hero-grid .cta { align-self: start; margin-top: var(--flow-xs); transform: none; }
  .hero-figure { align-self: center; }
}

@media (min-width: 768px) and (max-height: 600px) {
  
  .panel-hero {
    --band: calc(100svh - 28px);
    height: calc(100svh - 28px);
    justify-content: flex-start;
    padding-bottom: clamp(12px, 3vh, 20px);
  }
  
  .hero-copy-top { padding-top: 64px; }
  .hero-grid { gap: clamp(12px, 2vw, 18px); }
  
  .hero-grid .cta { min-height: 110px; transform: none; }
  
  .panel-hero .cta-offer { display: none; }
  
  .hero-figure { align-self: end; height: 333px; position: relative; }
  .hero-figure .product-figure { height: 100%; position: relative; }
  
  .product-figure-hero .pf-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) and (max-height: 520px) {
  .panel-hero {
    --band: calc(100svh - 28px);
    height: calc(100svh - 28px);
    justify-content: flex-start;
    
    padding-top: 0;
    padding-bottom: clamp(8px, 2.5vh, 14px);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text figure" "cta figure";
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
    text-align: left;
  }
  
  .hero-copy-top { grid-area: text; align-self: start; padding-top: 52px; }
  .hero-grid .cta { grid-area: cta; align-self: end; min-height: 92px; }
  .hero-figure { grid-area: figure; align-self: end; justify-self: center; height: min(calc(100svh - 104px), 320px); position: relative; }
  .hero-figure .product-figure { height: 100%; position: relative; }
  .product-figure-hero .pf-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) and (max-height: 360px) {
  .panel-hero .cta-offer { display: none; }
  .hero-copy-top { padding-top: 48px; }
}

.product-figure-hero { animation: heroBottleIn 0.6s var(--ease-standard); }
@keyframes heroBottleIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .product-figure-hero { animation: none; }
}

.hero-headline {
  font-weight: 300;
  font-size: var(--t-headline);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--text-primary);
}

.hero-headline .line-group + .line-group { margin-top: var(--flow-2xs); }

.hero-sub {
  margin-top: var(--flow-xs);
  max-width: 34ch;
}

@media (min-width: 768px) {
  
  .hero-copy-top .hero-headline { white-space: nowrap; }
}

@media (max-width: 767px) {
  
  .hero-headline { font-size: min(clamp(40px, 11.5vw, 68px), 34svh); line-height: 1.02; letter-spacing: -0.045em; }
}

@media (max-width: 348px) {
  .hero-headline { font-size: min(clamp(30px, 9.4vw, 40px), 34svh); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .hero-headline { font-size: clamp(28px, 8.2vh, 46px); line-height: 1.02; white-space: normal; }
  .hero-sub { font-size: clamp(15px, 3.4vh, 18px); margin-top: 10px; } 
  
  .hero-copy-top .hero-headline { font-size: clamp(28px, 8.2vh, 46px); }
}
@media (max-width: 767px) and (max-height: 520px) {
  .hero-headline { font-size: clamp(22px, 7vh, 36px); line-height: 1.04; letter-spacing: -0.03em; white-space: normal; }
  .hero-sub { font-size: clamp(12px, 3vh, 15px); margin-top: 8px; } 
}

/* css/sections/simplicity.css */

.panel-simplicity {
  padding-top: max(124px, clamp(64px, 10svh, 116px));
  padding-bottom: var(--section-pad-bottom);
}
@media (max-width: 767px) {
  .panel-simplicity { padding-top: max(116px, clamp(32px, 4svh, 48px)); }
}

.simplicity-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(40px, 6svh, 64px);
}
@media (min-width: 768px) {
  
  .simplicity-top {
    display: grid;
    grid-template-columns: minmax(0, var(--col-copy-support)) 1fr;
    align-items: start;
    gap: clamp(40px, 5vw, 72px);
    text-align: left;
  }
}

.product-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3svh, 28px);
}
.stage-track {
  position: relative;
  width: 100%;
  
  height: calc(var(--stage-card-w) * 5 / 4);
  
  --stage-card-w: min(52vw, 270px);
  --stage-shift: calc(var(--stage-card-w) * 0.42);
  touch-action: pan-y;
}
@media (min-width: 768px) {
  .stage-track {
    --stage-card-w: clamp(230px, 25vw, 290px);
    
    --stage-shift: calc(var(--stage-card-w) * 0.62);
  }
  .stage-card { border-radius: 36px; }
}

@media (min-width: 768px) and (max-height: 600px) {
  .stage-track { --stage-card-w: clamp(120px, 38vh, 200px); }
}
.stage-card {
  
  appearance: none;
  border: none;
  font: inherit;
  cursor: pointer;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-card-w);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
  padding: clamp(26px, 3.6vw, 38px) clamp(16px, 2.2vw, 26px);
  
  background: radial-gradient(ellipse at 50% 28%, rgba(248, 248, 248, 0.95) 0%, rgba(255, 255, 255, 1) 60%);
  
  border: 1px solid var(--border-card);
  outline: 1px solid rgba(255, 255, 255, 0.95);
  outline-offset: -1px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard);
  will-change: transform, opacity;
}

.stage-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(248, 248, 248, 0.9), rgba(255, 255, 255, 0));
  filter: blur(24px);
  opacity: 0.5;
  pointer-events: none;
}
.stage-card[data-pos="prev"] {
  transform: translate(calc(-50% - var(--stage-shift)), -50%) scale(0.94);
  opacity: 0.72;
  z-index: 2;
}
.stage-card[data-pos="next"] {
  transform: translate(calc(-50% + var(--stage-shift)), -50%) scale(0.94);
  opacity: 0.72;
  z-index: 2;
}
.stage-card[data-pos="active"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
}

.stage-card[data-pos="active"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -36px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0));
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
}
.stage-count {
  font-weight: 300;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.stage-ingredients {
  margin-top: var(--space-12);
  color: var(--text-muted);
}
.stage-bottle {
  margin-block: auto;
  
  height: calc(var(--stage-card-w) * 0.54);
  width: auto;
  object-fit: contain;
  display: block;
}
.stage-name { color: var(--text-primary); }

@media (min-width: 768px) and (max-height: 600px) {
  .stage-card { padding: clamp(10px, 3vh, 18px) clamp(8px, 2vh, 14px); }
  .stage-count { font-size: clamp(16px, 5.5vh, 28px); }
}

@media (max-width: 767px) {
  .stage-card {
    background: radial-gradient(ellipse at 50% 42%, #fff 0%, #fff 54%, rgba(248, 248, 248, 0.9) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-card { transition: none; }
}

.stage-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stage-dot {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--alpha-dot);
  transition: width var(--duration-slow) var(--ease-standard),
    background var(--duration-slow) var(--ease-standard);
}
.stage-dot:hover { background: var(--alpha-dot-hover); }
.stage-dot[aria-current="true"] {
  width: 22px;
  background: var(--text-primary);
}

.simplicity-bottom {
  margin-top: clamp(64px, 9svh, 112px);
}

.simplicity-bottom .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-sm);
}
@media (min-width: 768px) {
  
  .simplicity-bottom .cards {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
  .simplicity-bottom .card-media { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  
  .simplicity-bottom .card {
    display: grid;
    grid-template-columns: minmax(0, 42%) 1fr;
    align-items: stretch;
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .simplicity-bottom .card--fragrance { background: #f7f5f4; }
  .simplicity-bottom .card--sulfates { background: #f6f4f4; }
  .simplicity-bottom .card--dyes { background: #f6f4f4; }
  
  .simplicity-bottom .card-media {
    aspect-ratio: 5 / 4;
    height: auto;
    border-radius: 0;
  }
  .simplicity-bottom .card-scrim { display: none; }
  .simplicity-bottom .card-caption {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(16px, 4.5vw, 24px);
    text-align: left;
  }
  .simplicity-bottom .card-text { max-width: none; }
}

.editorial-intro-body {
  margin-top: clamp(14px, 1.8vw, 20px);
}

/* css/sections/transparency.css */

.panel-transparency {
  padding-top: max(124px, clamp(24px, 4svh, 56px));
  padding-bottom: var(--section-pad-bottom);
}

.transparency-grid {
  text-align: center;
  gap: clamp(32px, 6svh, 64px);
}

.transparency-body .transparency-eyebrow {
  margin-top: clamp(4px, 0.8vw, 8px);
  line-height: 1.25;
}
.transparency-body {
  margin-top: var(--flow-md);
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

@media (min-width: 768px) {
  .transparency-grid {
    display: grid;
    
    grid-template-columns: minmax(0, var(--col-copy-balanced)) 1fr;
    align-items: start;
    gap: var(--grid-gap);
    text-align: left;
  }
  
  .transparency-figure {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: start;
    height: clamp(371px, 56.37svh, 542px);
    overflow: hidden;
    transform: translateY(-10%);
  }
  
  .transparency-figure .product-figure-sticky { position: static; }
  .product-figure-crop .pf-img { height: clamp(481px, 72.74svh, 698px); }
  
  .product-figure-crop::after { display: none; }
}

@media (min-width: 768px) and (max-height: 600px) {
  .transparency-figure {
    height: clamp(140px, 68vh, 371px);
    transform: none;
  }
  .product-figure-crop .pf-img { height: clamp(180px, 87.7vh, 481px); }
}

@media (max-width: 767px) {
  
  .transparency-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    grid-template-areas:
      "head  head"
      "figure benefits";
    align-items: start;
    column-gap: clamp(12px, 3vw, 20px);
    row-gap: clamp(24px, 5svh, 44px);
    text-align: left;
  }
  .transparency-copy { display: contents; }
  .transparency-head { grid-area: head; }
  .transparency-body { grid-area: benefits; margin: 0; width: 100%; align-self: start; }

  .transparency-figure {
    grid-area: figure;
    aspect-ratio: 218 / 515;
    overflow: hidden;
    position: relative;
  }
  .product-figure-crop { position: relative; width: 100%; height: 100%; }
  .product-figure-sticky .pf-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 161%;
    height: auto;
    max-width: none;
  }
  .product-figure-crop::after { display: none; }
}

/* css/sections/story.css */

.story-grid {
  display: flex;
  flex-direction: column;
}
.story-title { margin-bottom: clamp(20px, 3.5svh, 40px); }

.story-row {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}
.story-statement {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4svh, 22px);
}

.story-statement p.emphasis { font-weight: 500; }

.story-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  
  filter: var(--shadow-float);
}
.story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  object-position: center;
}

@media (min-width: 768px) {
  
  .story-row {
    display: grid;
    grid-template-columns: minmax(0, 22%) 1fr;
    gap: var(--grid-gap-sm);
    align-items: center;
  }
  
  .story-statement { gap: clamp(16px, 2.6svh, 26px); align-self: start; }
  
  .story-photo-frame { aspect-ratio: 3 / 2; width: 90%; justify-self: end; }
  .story-photo { object-position: center bottom; }
}

@media (min-width: 768px) and (max-height: 600px) {
  .story-photo { object-position: center top; }
  .story-photo-frame { width: auto; height: clamp(180px, 55vh, 380px); }
  .story-title { margin-bottom: clamp(10px, 2.5vh, 16px); }
  .story-row { align-items: start; gap: clamp(14px, 3vh, 22px); }
  .story-statement { gap: clamp(6px, 1.6vh, 12px); }
  .story-statement p { font-size: clamp(13px, 3.8vh, 17px); } 
}

/* css/sections/products.css */

.products-head {
  text-align: center;
  margin-bottom: clamp(36px, 6svh, 80px);
}

.products-head .hero-headline,
.products-head .hero-sub {
  margin-inline: auto;
}

.products-head .hero-sub {
  max-width: 46ch;
  white-space: normal;
  text-wrap-style: balance;
}

.trio {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--bottle-gap);
}
.trio-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trio-item img {
  height: clamp(240px, 45.6svh, 528px);
  width: auto;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) and (max-height: 600px) {
  .trio-item img { height: clamp(130px, 40vh, 240px); }
}
@media (max-width: 767px) {
  
  .trio { gap: clamp(8px, 3.2vw, 18px); }
  .trio-item img {
    width: clamp(72px, 24vw, 112px);
    height: auto;
  }
}

/* css/sections/membership.css */

.membership-grid {
  display: flex;
  flex-direction: column-reverse; 
  align-items: center;
  text-align: center;
  gap: var(--flow-xl);
}

.membership-product { width: 100% }

@media (min-width: 768px) {
  
  .membership-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--col-copy-support));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head     figure"
      "benefits figure";
    align-items: start;
    column-gap: clamp(56px, 7vw, 112px);
    row-gap: clamp(24px, 3.5svh, 44px);
    text-align: left;
  }
  .membership-product { display: contents; }
  .membership-head { grid-area: head; display: flex; flex-direction: column; }
  
  .membership-head .hero-headline { order: 1; }
  .membership-head .eyebrow {
    order: 2;
    margin-top: var(--flow-xs);
    max-width: 34ch;
  }
  .membership-benefits { grid-area: benefits; margin-top: 0; }
  
  .membership-figure {
    grid-area: figure;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-30%);
  }
  
  .membership-figure .pf-img { height: min(calc((100svh - 120px) * 0.78), 760px); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .membership-figure { align-items: flex-start; transform: none; }
  .membership-figure .pf-img { height: clamp(200px, 78vh, 400px); }
  .membership-benefits { margin-top: var(--space-12); }
  .membership-benefits li { margin-top: clamp(10px, 3vh, 16px); gap: var(--space-12); }
  .membership-benefits .benefit-icon { width: 28px; height: 28px; }
  .membership-benefits .feature-title { font-size: var(--t-overline); }
  .membership-benefits .feature-caption { margin-top: 2px; font-size: var(--t-label); line-height: 1.3; }
}

.membership-benefits {
  margin-top: var(--flow-md);
  width: min(460px, 100%);
}
.membership-benefits li {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 20px);
  
  margin-top: clamp(40px, 4.5svh, 48px);
}
.membership-benefits li:first-child { margin-top: 0; }

@media (max-width: 767px) {
  
  .membership-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    grid-template-areas:
      "head    figure"
      "benefits figure";
    align-items: start;
    column-gap: clamp(8px, 2vw, 16px);
    row-gap: clamp(28px, 5svh, 48px);
    text-align: left;
  }
  .membership-product { display: contents; }
  .membership-head { grid-area: head; display: flex; flex-direction: column; }
  .membership-head .hero-headline { order: 1; }
  .membership-head .eyebrow { order: 2; margin-top: var(--flow-xs); max-width: 34ch; }

  .membership-benefits {
    grid-area: benefits;
    margin: 0;
    width: 100%;
    text-align: left;
  }
  .membership-benefits li { margin-top: clamp(26px, 4svh, 38px); }
  .membership-benefits li:first-child { margin-top: 0; }
  
  .membership-benefits .benefit-icon { width: 38px; height: 38px; }
  .membership-benefits .feature-title { font-size: var(--t-label); letter-spacing: 0.16em; }
  .membership-benefits .feature-caption { margin-top: 6px; }

  .membership-figure {
    grid-area: figure;
    align-self: stretch;
    position: relative;
    display: block;
    overflow: hidden;
    margin-right: -20px;
  }
  .membership-figure .product-figure {
    position: static;
    display: block;
    height: 100%;
  }
  .membership-figure .pf-img {
    position: absolute;
    top: 0;
    right: 0;
    
    transform: translateX(50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}

/* css/sections/caps.css */

.caps-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5svh, 48px);
}
.caps-title { margin-top: 0; }

.caps-sub { white-space: normal; }
.caps-body {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  max-width: 46ch;
}
.caps-figure { width: 100%; }

.caps-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 883 / 615;
}

.cap-piece {
  position: absolute;
  display: block;
  --cap-x: 0px;
  --cap-y: 0px;
  --cap-r: 0deg;
  --cap-s: 1;
  transform: translate3d(var(--cap-x), var(--cap-y), 0) rotate(var(--cap-r)) scale(var(--cap-s));
  will-change: transform;
}

.cap-piece[data-cap="pink"]   { left: 18.57%; top:  5.21%; width: 25.71%; height: 39.02%; }
.cap-piece[data-cap="white"]  { left: 50.28%; top:  3.41%; width: 26.39%; height: 40.49%; }
.cap-piece[data-cap="blue"]   { left: 12.00%; top: 45.20%; width: 26.50%; height: 34.15%; }
.cap-piece[data-cap="orange"] { left: 37.48%; top: 59.60%; width: 26.27%; height: 40.33%; }
.cap-piece[data-cap="black"]  { left: 60.70%; top: 40.66%; width: 28.88%; height: 38.21%; }

@media (min-width: 768px) {
  .caps-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--col-copy-balanced)) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "head figure"
      "body figure";
    column-gap: var(--grid-gap);
    row-gap: var(--flow-sm);
    align-items: center;
    text-align: left;
  }
  .caps-head { grid-area: head; align-self: end; }
  .caps-body { grid-area: body; align-self: start; }
  .caps-figure { grid-area: figure; }
  
  .caps-scene { transform: scale(1.2); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .caps-sub { font-size: var(--t-sub); }
}

/* css/sections/faq.css */

.faq-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5svh, 52px);
}

.faq-head {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.faq-title {
  margin: 0;
  
  white-space: normal;
}
.faq-sub {
  white-space: normal;
  margin-inline: auto;
}

.faq-list {
  width: 100%;
  list-style: none;
  padding: 0;
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--hairline);
}
.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-q-heading {
  margin: 0;
  font: inherit;
  font-weight: inherit;
}
.faq-q {
  
  font: inherit;
  color: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.6svh, 28px) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faq-q-text {
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  transition: color 200ms var(--ease-standard);
}
.faq-q:hover .faq-q-text { color: var(--text-primary); }
.faq-q:focus-visible {
  outline: 2px solid var(--focus-brand);
  outline-offset: 4px;
  border-radius: 6px;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--ease-standard), opacity 320ms var(--ease-standard);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-standard);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}
.faq-item.open .faq-a-inner {
  visibility: visible;
  transition-delay: 0s;
}

.faq-a-body {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding-bottom: clamp(18px, 2.6svh, 28px);
  max-width: 62ch;
}
.faq-a-body p { margin: 0; }

.faq-ingredients {
  list-style: none;
  margin: 0.15em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}
.faq-ingredients li { line-height: 1.55; }
.faq-ing-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
}
.faq-note {
  font-style: italic;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-a-inner,
  .faq-q-text,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }
}

/* css/sections/final-cta.css */

.panel-final {
  min-height: 100svh;
  
  padding-top: clamp(140px, 20svh, 260px);
  
  padding-bottom: var(--flow-md);
}

.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  gap: clamp(40px, 7svh, 80px);
  flex: 1;
  min-height: 0;
}
.final-footer { margin-top: auto; width: 100%; }

.final-copy { width: 100%; }
.final-copy .hero-headline { margin-inline: auto; }
.final-lead {
  margin-top: var(--flow-xs);
  max-width: 680px;
  margin-inline: auto;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
}

.final-cta-form {
  align-items: center;
  text-align: center;
  
  min-height: 120px;
}

.final-inner > .final-cta-form { margin-top: clamp(20px, 4.5svh, 56px); }

.final-footer-divider {
  width: 100%;
  height: 1px;
  background: var(--border-default);
}
.final-footer-row {
  margin-top: var(--flow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: clamp(18px, 2.5svh, 28px);
  column-gap: clamp(20px, 3vw, 40px);
}

.final-footer-meta {
  margin-top: var(--flow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  font-size: var(--t-label);
  color: var(--text-disabled);
}

@media (min-width: 768px) {
  .panel-final { padding-top: clamp(200px, 24svh, 320px); }
}

@media (max-height: 600px) {
  .panel-final { padding-top: clamp(20px, 5vh, 32px); }
  .final-inner { gap: clamp(10px, 2.4vh, 18px); }
  
  .final-inner > .final-cta-form { margin-top: clamp(6px, 1.6vh, 14px); }
  .final-lead { margin-top: 6px; }
  .final-footer-row { margin-top: clamp(10px, 2vh, 16px); }
  .final-footer-meta { margin-top: clamp(8px, 1.6vh, 12px); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .final-lead { font-size: var(--t-sub); }
}

@media (max-width: 767px) {
  
  .final-lead { max-width: 300px; }

  .final-footer-row { row-gap: clamp(20px, 4svh, 32px); }
  .final-footer-row .lang-switch { margin-top: 0; }
  .final-footer-meta { margin-top: clamp(24px, 4svh, 36px); }
}