/* 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;

  --job-base:      #b9d3e2;
  --job-clean:     #4a72a8;
  --job-condition: #c76367;
  --job-hydrate:   #5f9e98;
  --job-care:      #e3a07a;
  --job-texture:   #c8b48c;
  --job-protect:   #3d3d3d;
  --job-ph:        #9fb46a;

  --cap-pink:   #f8c2c8;
  --cap-orange: #fda469;
  --cap-blue:   #c3dfef;
  --cap-black:  #050505;

  --red-700: #b23b3b;

  --alpha-frost:     rgba(255, 255, 255, 0.82);
  --alpha-scrim:     rgba(17, 17, 17, 0.45);
  --alpha-scrim-deep: rgba(17, 17, 17, 0.78); 
  --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);

  --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);
  --bg-plate:    var(--alpha-wash); 

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

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

  --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%);

  --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);

  --section-top:       clamp(100px, 12svh, 128px);
  --section-bottom:    clamp(32px, 5svh, 56px);
  --section-top-final: clamp(160px, 22svh, 280px);

  --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-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);

  --fw-display: 300;
  --fw-text:    400;
  --fw-strong:  500;
  --fw-mark:    200;

  --lh-display: 1.02;
  --lh-title:   1.2;
  --lh-text:    1.5;

  --ls-display: -0.05em;
  --ls-title:   -0.03em;
  --ls-caps:    0.12em;
  --ls-mark:    0.45em;

  --radius-sm:      4px;  
  --radius-surface: 24px; 
  --radius-thumb:   16px; 
  --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-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-lineup-h: clamp(300px, 100svh - 400px, 820px);
  --figure-hero-w-mobile:  clamp(240px, 80vw,  380px);
  --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-lead: 18px;
  }
}
@media (max-width: 767px) {
  :root {
    --container: calc(100% - 40px);
  }
}

@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(--bg-primary); overflow: hidden; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  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: var(--radius-sm);
}

.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, .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;
  position: relative;
  width: 100%;
  min-height: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}

.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; }
}

.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 */


.card-title,
.feature-title,
.editorial-intro-label {
  font-weight: var(--fw-strong);
  font-size: var(--t-body);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}

.signup-eyebrow,
.reserve-btn-label {
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}

.text-link,
.faq-a-body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--brand-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-link:hover,
.faq-a-body a:hover { color: var(--primary-hover); }

.section-link {
  display: inline-block;
  margin-top: calc(var(--flow-md) - 12px);
  padding-top: 12px;
  font-size: var(--t-body);
}

.list-link {
  color: var(--text-primary);
  text-decoration: none;
}
.list-link:hover,
a:hover > .list-link {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--brand-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.eyebrow {
  font-weight: var(--fw-text);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.type-label {
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.card-text,
.caps-body p,
.editorial-intro-body p,
.story-text p,
.feature-caption,
.cta-benefit,
.faq-a-body {
  font-weight: var(--fw-text);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.hero-sub,
.membership-head .eyebrow {
  font-weight: var(--fw-text);
  font-size: var(--t-sub);
  line-height: var(--lh-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  .hero-sub,
  .membership-head .eyebrow { font-size: var(--t-sub-mobile); }
}

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

.site-nav-logo span { display: inline-block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-nav-logo:hover span,
  .site-nav-logo:focus-visible span {
    animation: mark-caps 1100ms var(--ease-standard) both;
  }
  .site-nav-logo span:nth-child(2) { animation-delay: 90ms; }
  .site-nav-logo span:nth-child(3) { animation-delay: 180ms; }
  .site-nav-logo span:nth-child(4) { animation-delay: 270ms; }
}
@keyframes mark-caps {
  0%, 100% { color: var(--text-primary); -webkit-text-stroke: 0 currentColor; }
  18%      { color: var(--cap-pink);   -webkit-text-stroke: 0.9px currentColor; }
  40%      { color: var(--cap-orange); -webkit-text-stroke: 0.9px currentColor; }
  62%      { color: var(--cap-blue);   -webkit-text-stroke: 0.9px currentColor; }
  84%      { color: var(--cap-black);  -webkit-text-stroke: 0.6px currentColor; }
}

/* 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: var(--fw-strong);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  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: var(--lh-title);
  }
}

.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-crumbs {
  min-width: 0; 
  margin-right: var(--space-24);
}
.site-nav-crumbs ol {
  list-style: none;
  display: flex;
  align-items: center;
  margin-left: var(--space-12);
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.site-nav-crumbs li::before {
  content: "/";
  margin-inline: var(--space-8) var(--space-12);
  color: var(--text-disabled);
}
.site-nav-crumbs li + li::before { margin-left: var(--space-12); }
.site-nav-crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .site-nav-crumbs { display: none; }
}

.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: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  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-label); }
}

@media (max-width: 340px) {
  .site-nav-cta { padding: 0 12px; letter-spacing: 0; white-space: nowrap; }
}

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

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: var(--fw-strong);
  letter-spacing: var(--ls-caps);
  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-body-sm);
  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-offer {
  
  margin-top: 0;
  text-align: left;
  width: min(520px, 100%); 
}

.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; }
}

@media (max-width: 360px) {
  .cta-benefit-list { grid-template-columns: 1fr; gap: var(--space-12); }
}
.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(--text-primary);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  font-size: 14px; 
  line-height: 1;
}
.cta-offer-note {
  margin-top: 14px;
  font-size: var(--t-label);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
  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: var(--fw-display);
  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: var(--ls-caps); }
@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-offer { visibility: hidden; }

.reserve-msg {
  transition: opacity 400ms var(--ease-standard);
  margin-top: var(--flow-2xs);
  min-height: 1em;
  font-weight: var(--fw-text);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}
.reserve-msg.ok {
  font-size: var(--t-lead);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-caps);
  align-self: center;
  text-align: center;
}
.reserve-msg.err { color: var(--danger); }
.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); }
}

@media (max-width: 767px) {
  .product-figure-hero .pf-img {
    width: var(--figure-hero-w-mobile);
    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-surface);
  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-surface);
  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: var(--fw-display);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  color: var(--text-primary);
}

.signup-sub {
  margin-top: var(--space-8); 
  font-weight: var(--fw-display);
  
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.signup-outro {
  
  max-width: 36ch;
  margin-inline: auto;
  margin-top: var(--space-24); 
  font-weight: var(--fw-display);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  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: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  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-surface) var(--radius-surface) 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: var(--ls-caps); }
.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: var(--lh-text);
  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/components/exit-banner.css */

.exit {
  margin: auto; 
  width: min(880px, 100% - 32px);
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-surface);
  background: var(--bg-surface);
  color: var(--text-primary);
  overflow-y: auto;
  display: none; 
}
.exit[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  animation: exit-in 320ms var(--ease-standard);
}
.exit:focus { outline: none; }
.exit::backdrop { background: var(--alpha-scrim); }
@keyframes exit-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.exit-close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.exit-close:hover { background: var(--alpha-wash); }

.exit-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-24);
  background: var(--alpha-wash);
}
.exit-media img {
  display: block;
  height: min(420px, 52svh);
  width: auto;
  mix-blend-mode: multiply;
}
.exit-tag {
  position: absolute;
  top: var(--space-24);
  left: var(--space-24);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--t-body-sm);
}

.exit-body { padding: clamp(32px, 4vw, 52px); }
.exit-head {
  font-weight: var(--fw-text);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.exit-sub {
  margin-top: var(--space-12);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.exit-gets {
  list-style: none;
  margin-top: var(--space-24);
  display: grid;
  gap: var(--space-8);
}
.exit-gets li {
  position: relative;
  padding-left: var(--space-24);
  font-size: var(--t-body);
  line-height: var(--lh-text);
}
.exit-gets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--text-primary);
}
.exit-cta { width: 100%; min-height: 0; }
.exit-cta .reserve { width: 100%; max-width: none; }
.exit-fine {
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  text-align: center;
}
.exit-no {
  display: block;
  margin: var(--space-8) auto 0;
  padding: var(--space-8);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .exit {
    margin: auto 0 0;
    width: 100%;
    max-height: calc(100svh - 24px);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  }
  .exit[open] { grid-template-columns: minmax(0, 1fr); }
  .exit-media { padding: var(--space-12); }
  .exit-media img { height: 150px; }
  .exit-tag { top: var(--space-12); left: var(--space-12); }
  .exit-body { padding: var(--space-24) 20px calc(var(--space-12) + env(safe-area-inset-bottom)); }
  .exit-head { font-size: var(--t-title-sm); }
  .exit-cta .reserve { margin-inline: 0; }
  .exit-cta .reserve-btn svg { display: none; }
  .exit-cta .reserve-email { padding-inline: var(--space-24) var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
  .exit[open] { animation: none; }
}

/* 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 { padding-top: var(--section-top); }
  
  .panel-hero .reserve { margin-top: 0; }
  
  .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: var(--fw-display);
  font-size: var(--t-headline);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  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: var(--lh-display); letter-spacing: var(--ls-display); }
}

@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: var(--lh-display); 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: var(--lh-display); letter-spacing: var(--ls-title); white-space: normal; }
  .hero-sub { font-size: clamp(12px, 3vh, 15px); margin-top: 8px; } 
}

/* css/sections/simplicity.css */


.simplicity-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--flow-2xl);
}
@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: var(--flow-sm);
}
.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);
  }
}

@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-surface);
  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: var(--radius-full);
  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: var(--radius-full);
  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: var(--fw-display);
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: var(--ls-title);
  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: var(--section-top);
}

.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-surface);
    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 */

.transparency-figure { overflow: hidden; }

@media (min-width: 768px) {
  .transparency-figure {
    display: flex;
    align-items: flex-start;
    height: clamp(371px, 56.37svh, 542px);
  }
  .product-figure-crop .pf-img { height: clamp(481px, 72.74svh, 698px); }
}

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

@media (max-width: 767px) {
  
  .ing-headline.transparency-title { font-size: min(clamp(36px, 5.4svh, 56px), 11.2vw); }
  
  .transparency-figure {
    width: min(100%, 351px);
    aspect-ratio: 351 / 518;
  }
  .product-figure-crop { grid-template-columns: minmax(0, 1fr); }
  .product-figure-crop .pf-img { width: 100%; height: auto; }
}

/* css/sections/story.css */

.story-title { margin-bottom: clamp(20px, 3.5svh, 40px); }

.story-row {
  display: flex;
  flex-direction: column;
  gap: var(--flow-md);
}

.story-sub {
  max-width: none;
  white-space: normal;
  text-wrap: balance;
}

@media (max-width: 1199px) {
  .story-sub br,
  .story-text p:not(:last-child) br { display: none; }
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: var(--flow-xs);
  margin-top: var(--flow-md);
}

.story-text p:last-child {
  font-weight: var(--fw-strong);
  color: var(--text-primary);
}

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

@media (min-width: 768px) {
  
  .story-row {
    display: grid;
    --story-photo-w: calc(min(74svh, 800px) * 4 / 5);
    grid-template-columns: minmax(0, var(--col-copy-balanced)) minmax(0, var(--story-photo-w));
    justify-content: start;
    gap: var(--grid-gap);
    align-items: start;
  }
}

@media (min-width: 1600px) {
  .story-row { --story-photo-w: calc(min(78svh, 1000px) * 4 / 5); }
}

@media (min-width: 768px) and (max-height: 600px) {
  .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-text { gap: clamp(6px, 1.6vh, 12px); margin-top: clamp(8px, 2vh, 14px); }
}

/* 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-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.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: fit-content(var(--col-copy-lead)) fit-content(var(--col-copy-support));
    justify-content: center;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head     figure"
      "benefits figure";
    align-items: start;
    column-gap: clamp(56px, 7vw, 112px);
    row-gap: var(--flow-md);
    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;
  }
  
  .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-label); }
  .membership-benefits .feature-caption { margin-top: 2px; font-size: var(--t-label); line-height: var(--lh-title); }
}

.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: var(--flow-lg);
}
.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: var(--flow-xl);
    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: var(--flow-md); }
  .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: var(--ls-caps); }
  .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: var(--flow-xl);
}
.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: var(--flow-xl);
}

.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(--border-default);
}
.faq-item { border-bottom: 1px solid var(--border-default); }

.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: var(--fw-text);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  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: var(--radius-sm);
}

.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(--text-primary);
  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: var(--lh-text); }
.faq-ing-label {
  display: block;
  font-weight: var(--fw-strong);
  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/ingredients.css */


a.site-nav-logo {
  display: inline-block;
  text-decoration: none;
}

.ing-section,
.ing-hero { align-items: stretch; }
.ing-section[id] { scroll-margin-top: 96px; }

.ing-headline {
  font-size: clamp(36px, 5.4svh, 56px);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  white-space: normal;
}
.ing-sub {
  margin-top: var(--flow-xs);
  max-width: 56ch;
}
.ing-note {
  margin-top: var(--flow-xs);
  max-width: 56ch;
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.ing-note-wide { max-width: 80ch; margin-top: var(--flow-lg); }

.ing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--grid-gap);
  align-items: start;
}

.ing-hero-copy {
  max-width: var(--col-copy-lead);
  margin-inline: auto;
  text-align: center;
}
.ing-hero-copy .ing-headline { text-wrap: balance; }
.ing-hero-bottles {
  list-style: none;
  margin-top: var(--flow-lg);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--bottle-gap);
}
.ing-hero-bottles img {
  display: block;
  height: var(--figure-lineup-h);
  width: auto;
}

.principles { list-style: none; }
.principles li {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--flow-xs);
  border-top: 1px solid var(--border-default);
}
.principles li:last-child { border-bottom: 1px solid var(--border-default); }
.principle-n {
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.principle-t {
  font-size: var(--t-sub);
  line-height: var(--lh-text);
  color: var(--text-primary);
}

.claims {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-md) var(--grid-gap-sm);
}
.claim {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.claim-icon {
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

.claim-icon g { stroke-width: 0.7; }
.claim-title {
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}
.claim-caption {
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.ing-index-head .ing-headline { margin-top: 0; }
.ing-index-head {
  position: sticky;
  top: 96px; 
}
.ing-letter + .ing-letter { margin-top: var(--flow-md); }
.ing-letter-mark {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--fw-display);
  font-size: var(--t-title-xs);
  line-height: var(--lh-title);
  color: var(--text-primary);
}
.ing-entries {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap-sm);
  padding-top: var(--space-4);
}
.ing-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block: var(--space-8);
  text-decoration: none;
}
.ing-entry-name {
  align-self: start;
  font-size: var(--t-body);
  line-height: var(--lh-text);
}
.ing-entry-meta {
  font-size: var(--t-label);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ing-not {
  margin-top: var(--flow-lg);
  padding-top: var(--flow-xs);
  border-top: 1px solid var(--border-default);
}
.ing-not-lead {
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.ing-not-list {
  list-style: none;
  margin-top: var(--space-12);
  columns: 2;
  column-gap: var(--grid-gap-sm);
}
.ing-not-list li {
  break-inside: avoid;
  hyphens: auto;           
  overflow-wrap: anywhere; 
  padding-block: var(--space-4);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.job-base      { --job: var(--job-base); }
.job-clean     { --job: var(--job-clean); }
.job-condition { --job: var(--job-condition); }
.job-hydrate   { --job: var(--job-hydrate); }
.job-care      { --job: var(--job-care); }
.job-texture   { --job: var(--job-texture); }
.job-protect   { --job: var(--job-protect); }
.job-ph        { --job: var(--job-ph); }
.job-swatch {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.5em;
  border-radius: var(--radius-sm);
  background: var(--job);
  vertical-align: 0.02em;
}

.job-map {
  width: max-content;
  max-width: 100%;
  --job-cols: 14;
}
.job-rows {
  list-style: none;
  border-top: 1px solid var(--border-default);
}
.job-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: var(--grid-gap-sm);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--border-default);
}
.job-row-n {
  margin-left: var(--space-4);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.job-strip {
  display: grid;
  grid-template-columns: repeat(var(--job-cols), minmax(0, 28px));
  gap: var(--space-4);
}

.job-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--job);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.job-cell:hover,
.job-cell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--job);
}
.job-cell::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + var(--space-8));
  left: 0;
  z-index: 1;
  width: max-content;
  max-width: 220px;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.job-cell:nth-child(n+7)::after { left: auto; right: 0; }
.job-cell:hover::after,
.job-cell:focus-visible::after { opacity: 1; transform: none; }

.job-row-name {
  font: inherit;
  font-size: var(--t-body);
  text-align: left;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration) var(--ease-standard);
}
.job-row-name:hover,
.job-row.is-on .job-row-name { color: var(--text-primary); }
.job-row-name:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }
.job-map.is-live .job-strip { transition: clip-path 900ms var(--ease-standard), opacity var(--duration) var(--ease-standard); }
.job-map.is-live .job-row:not(.is-on) .job-strip { opacity: 0.35; }
.job-map.is-live .job-row:not(.is-on):hover .job-strip { opacity: 0.7; }

.job-groups {
  contain: inline-size;
  list-style: none;
  margin-top: var(--flow-sm);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.job-groups li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--grid-gap-sm);
  padding-block: var(--space-8);
}
.job-groups li + li { border-top: 1px solid var(--border-faint); }
.job-group-name { color: var(--text-primary); }

.ing-formula-section[data-reveal] .job-strip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-standard);
}
.ing-formula-section[data-reveal].in .job-strip { clip-path: inset(-64px -240px -8px -240px); }
.job-row:nth-child(2) .job-strip { transition-delay: 150ms, 0s; } 
.job-row:nth-child(3) .job-strip { transition-delay: 300ms, 0s; }
@media (prefers-reduced-motion: reduce) {
  .ing-formula-section[data-reveal] .job-strip,
  .ing-formula-section[data-reveal].in .job-strip { clip-path: none; transition: none; }
}

.ing-line {
  display: block;
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.ing-sheet {
  --sheet-pad: clamp(24px, 4vw, 56px);
  padding: var(--sheet-pad);
}

.ing-sheet-top {
  position: sticky;
  top: var(--sheet-pad);
  z-index: 2;
  height: 0;
  display: flex;
  justify-content: flex-end;
  margin-right: calc(var(--space-12) - var(--sheet-pad));
}
.ing-sheet-close {
  width: 40px; 
  height: 40px;
  flex: none;
  margin-top: calc(var(--space-12) - var(--sheet-pad));
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  transition: color var(--duration) var(--ease-standard),
              background-color var(--duration) var(--ease-standard);
}
.ing-sheet-close:hover { color: var(--text-primary); background: var(--primary-subtle); }
.ing-detail-side {
  position: sticky;
  top: var(--space-24);
}

.ing-dialog {
  margin: auto; 
  width: min(var(--container), 1120px);
  max-width: none;
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-surface);
  background: var(--bg-surface);
  color: var(--text-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  
  display: none;
  opacity: 0;
  translate: 0 16px;
}
.ing-dialog:focus,
.ing-dialog:focus-visible { outline: none; }
.ing-dialog[open] {
  display: block;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.26s var(--ease-standard), translate 0.26s var(--ease-standard),
              overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
@starting-style {
  .ing-dialog[open] { opacity: 0; translate: 0 16px; }
}
.ing-dialog::backdrop { background: var(--alpha-scrim-deep); opacity: 0; }
.ing-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 0.26s var(--ease-standard),
              overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
@starting-style {
  .ing-dialog[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ing-dialog, .ing-dialog[open] { translate: none; }
}

.ing-sheet-page { padding: clamp(24px, 6svh, 64px) 0; }
.ing-sheet-page .ing-sheet {
  width: min(var(--container), 1120px);
  margin-inline: auto;
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
}
.ing-detail-title {
  font-weight: var(--fw-display);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.ing-detail-lead {
  margin-top: var(--space-12);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  color: var(--text-primary);
}
.ing-facts { margin-top: var(--flow-md); }
.ing-facts div {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border-default);
}
.ing-facts dt {
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}
.ing-facts dd {
  margin-top: var(--space-4);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.ing-detail-h {
  margin-top: var(--flow-md);
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-primary);
}
.ing-detail-h:first-child { margin-top: 0; }
.ing-detail-body p {
  margin-top: var(--space-8);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.ing-refs {
  list-style: none;
  margin-top: var(--space-8);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
}

@media (max-width: 1279px) {
  .ing-entries { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ing-split { grid-template-columns: minmax(0, 1fr); }
  
  .ing-hero-copy { max-width: none; }
  .ing-hero-bottles li { width: calc((100% - 2 * var(--bottle-gap)) / 3); }
  .ing-hero-bottles img { height: auto; width: 100%; }
  .principle-t { font-size: var(--t-sub-mobile); }
  .ing-split { gap: var(--flow-md); }
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-row,
  .job-groups li { grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-8); }
  .job-strip { gap: 3px; }
  .job-cell { border-radius: var(--radius-sm); }
  .ing-detail-side,
  .ing-index-head { position: static; }
  .ing-detail-title { font-size: var(--t-title-sm); }
  
  .ing-dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    translate: 0 32px;
  }
  @starting-style {
    .ing-dialog[open] { translate: 0 32px; }
  }
  .ing-sheet-page { padding: 0; }
  .ing-sheet-page .ing-sheet { width: 100%; border-radius: 0; background: none; }
}

.ing-in-link {
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
}

/* css/sections/product-page.css */


.prod-buy-grid {
  
  --prod-gallery-w: min(calc(min(640px, 70svh) * 0.8), 50vw);
  display: grid;
  grid-template-columns: var(--prod-gallery-w) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.prod-gallery { position: sticky; top: 96px; }
.prod-stage {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
  overflow: hidden;
}
.prod-stage img,
.prod-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod-thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.prod-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-thumb);
  background: var(--bg-plate);
  overflow: hidden;
  cursor: pointer;
}
.prod-thumb.is-on { border-color: var(--text-primary); }

.prod-name {
  font-weight: var(--fw-text);
  font-size: var(--t-headline);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.prod-for {
  margin-top: var(--space-12);
  font-size: var(--t-lead);
  color: var(--text-muted);
}
.prod-pitch {
  margin-top: var(--space-24);
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: var(--lh-text);
}
.prod-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-24);
}
.prod-pills li {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--bg-plate);
  font-size: var(--t-body-sm);
}
.prod-pills b { font-weight: var(--fw-strong); }

.prod-label,
.prod-inci-label,
.prod-card-facts dt {
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.prod-format {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--flow-md);
  border: 0;
}
.prod-format legend { margin-bottom: var(--space-8); }
.prod-option {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-24);
  border: 1.5px solid var(--alpha-dot);
  border-radius: var(--radius-surface);
  cursor: pointer;
}
.prod-option:has(input:checked) { border-color: var(--text-primary); }
.prod-option input { margin-top: var(--space-4); accent-color: var(--text-primary); }
.prod-option-name {
  display: block;
  font-weight: var(--fw-strong);
  font-size: var(--t-body);
}
.prod-option-name span { font-weight: var(--fw-text); color: var(--text-muted); }
.prod-option-note {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.prod-caps { margin-top: var(--flow-sm); }
.prod-caps-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-8);
}
.prod-caps figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.prod-caps img { display: block; height: 52px; width: auto; }
.prod-caps figcaption {
  font-size: var(--t-body-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.prod-caps figcaption b { font-weight: var(--fw-strong); color: var(--text-primary); }
.prod-caps-stack { display: flex; }
.prod-caps-stack img + img { margin-left: calc(-1 * var(--space-12)); }
.prod-caps .prod-plus { padding-bottom: var(--space-24); }
.prod-plus { color: var(--text-disabled); font-size: var(--t-title-xs); }

.prod-notify {
  margin-top: var(--flow-md);
  padding: var(--space-24);
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
}
.prod-notify-head {
  font-size: var(--t-title-xs);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.prod-notify-sub {
  margin-top: var(--space-8);
  font-size: var(--t-body);
  line-height: var(--lh-text);
}
.prod-notify-cta { width: 100%; min-height: 0; }
.prod-notify-cta .reserve {
  width: 100%;
  max-width: none;
}
.prod-notify-fine { font-size: var(--t-body-sm); }

.prod-statement-title {
  font-weight: var(--fw-text);
  font-size: var(--t-headline);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.prod-statement-sub {
  max-width: 46ch;
  margin-top: var(--space-24);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.prod-does {
  list-style: none;
  display: flex;
  gap: var(--grid-gap-sm);
  margin-top: var(--flow-lg);
}
.prod-does > li {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-24);
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
}
.prod-does-title {
  font-weight: var(--fw-strong);
  font-size: var(--t-sub);
  line-height: var(--lh-title);
}
.prod-does-line {
  margin-top: var(--space-8);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.prod-does-line strong { font-weight: var(--fw-text); color: inherit; }
.prod-does-ings {
  list-style: none;
  margin-top: var(--space-12);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
}

.prod-who {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--grid-gap-sm);
  margin-top: var(--flow-lg);
}
.prod-who > li {
  position: relative;
  padding-block: var(--space-12);
  padding-left: calc(2 * var(--space-24));
  border-top: 1px solid var(--border-default);
}
.prod-who > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-size: var(--t-body);
  color: var(--text-primary);
}
.prod-who h3 { font-weight: var(--fw-strong); font-size: var(--t-body); }
.prod-who p {
  margin-top: var(--space-4);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.prod-muted { color: var(--text-muted); }
.prod-center { text-align: center; }
.prod-formula {
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
}

.prod-strip {
  display: flex;
  gap: var(--space-4);
  height: 56px;
  margin-top: var(--flow-lg);
}
.prod-strip i {
  flex: 1 1 0;
  border-radius: var(--radius-sm);
  background: var(--job);
}
.prod-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-24);
  font-size: var(--t-body-sm);
}
.prod-legend li { white-space: nowrap; }
.prod-legend span:last-child { color: var(--text-muted); }
.prod-formula .claims { margin-top: var(--flow-lg); }
@media (min-width: 768px) {
  .prod-formula .claims { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.prod-all {
  margin-top: var(--flow-lg);
  border-top: 1px solid var(--border-default);
}
.prod-all summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
  padding-top: var(--space-24);
  font-size: var(--t-body);
  cursor: pointer;
  list-style: none;
}
.prod-all summary::-webkit-details-marker { display: none; }
.prod-all summary::after { content: "+"; color: var(--text-muted); }
.prod-all[open] summary::after { content: "−"; }
.prod-all .prod-groups { margin-top: var(--space-24); }

.prod-groups { list-style: none; }
.prod-groups > li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-areas: "name line" ". ings";
  gap: var(--space-4) var(--grid-gap-sm);
  padding-block: var(--space-12);
  border-top: 1px solid var(--border-default);
}
.prod-groups > li:last-child { border-bottom: 1px solid var(--border-default); }
.prod-group-name {
  grid-area: name;
  white-space: nowrap;
  font-size: var(--t-body);
  color: var(--text-primary);
}
.prod-group-line {
  grid-area: line;
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.prod-group-line strong { font-weight: var(--fw-strong); color: var(--text-primary); }

.prod-group-ings {
  grid-area: ings;
  list-style: none;
  font-size: var(--t-body);
  line-height: var(--lh-text);
}
.prod-group-ings li { display: inline; }
.prod-group-ings li + li::before {
  content: "·";
  margin-inline: var(--space-8);
  color: var(--text-disabled);
}
.prod-group-ings .list-link {
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
}
.prod-inci {
  margin-top: var(--flow-md);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.prod-inci-label { margin-right: var(--space-8); }

.prod-link {
  display: inline-block;
  margin-top: var(--flow-sm);
  font-size: var(--t-body);
}

.prod-keep {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 48px);
  margin-top: var(--flow-lg);
}
.prod-keep figure { text-align: center; }
.prod-keep img {
  display: block;
  height: clamp(220px, 32svh, 340px);
  width: auto;
  margin-inline: auto;
}
.prod-keep-pouch img { height: clamp(240px, 35svh, 370px); }

.prod-keep-caps img { height: auto; width: clamp(200px, 22vw, 300px); mix-blend-mode: multiply; }
.prod-keep figcaption {
  margin-top: var(--space-24);
  font-size: var(--t-body-sm);
  line-height: var(--lh-text);
  color: var(--text-muted);
}
.prod-keep figcaption b { font-weight: var(--fw-strong); color: var(--text-primary); }
.prod-keep > .prod-plus { align-self: center; }
.prod-ways {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-sm);
  margin-top: var(--flow-lg);
}
.prod-ways h3 { font-weight: var(--fw-strong); font-size: var(--t-sub); }
.prod-ways p {
  margin-top: var(--space-4);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.prod-pairs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-sm);
  margin-top: var(--flow-lg);
}
.prod-pairs a {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  height: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-surface);
  background: var(--bg-plate);
  color: inherit;
  text-decoration: none;
}
.prod-pairs img {
  display: block;
  flex: none;
  height: clamp(180px, 26svh, 280px);
  width: auto;
  mix-blend-mode: multiply;
}
.prod-pair-name {
  display: block;
  font-size: var(--t-title-xs);
  letter-spacing: var(--ls-title);
}
.prod-pair-line {
  display: block;
  margin-block: var(--space-8) var(--space-12);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  color: var(--text-muted);
}

.prod-pouches {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: var(--grid-gap-sm);
}
.prod-pouches li { flex: 1 1 0; min-width: 0; }
.prod-pouches a { display: block; text-decoration: none; }
.prod-pouches img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

.prod-hub-copy {
  max-width: var(--col-copy-lead);
  margin-inline: auto;
  text-align: center;
}
.prod-hub-copy .ing-headline { text-wrap: balance; }
.prod-hub-copy .ing-sub { margin-inline: auto; }
.prod-cards {
  list-style: none;
  margin-top: var(--flow-lg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--bottle-gap);
}
.prod-card {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.prod-card-figure img {
  display: block;
  height: clamp(260px, 44svh, 520px);
  width: auto;
}
.prod-card-name {
  margin-top: var(--space-24);
  font-weight: var(--fw-text);
  font-size: var(--t-sub);
  line-height: var(--lh-title);
}
.prod-card-facts {
  margin-top: var(--space-12);
  display: flex;
  gap: var(--space-24);
}
.prod-card-facts dd {
  margin-top: var(--space-4);
  font-size: var(--t-body);
  color: var(--text-primary);
}
.prod-card .prod-link { margin-top: var(--space-12); }

.prod-pouches span {
  display: block;
  margin-top: var(--space-12);
  font-size: var(--t-body);
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .prod-buy-grid { grid-template-columns: minmax(0, 1fr); gap: var(--flow-md); }
  
  .prod-name { font-size: var(--t-title); line-height: var(--lh-display); }
  .prod-gallery { position: static; }
  .prod-pitch { max-width: none; }
  .prod-caps-row { gap: var(--space-12); }
  .prod-notify-cta .reserve { margin-inline: 0; }
  
  .prod-notify-cta .reserve-btn svg { display: none; }
  .prod-notify-cta .reserve-email { padding-inline: var(--space-24) var(--space-8); }

  .prod-statement-title { font-size: var(--t-title); line-height: var(--lh-display); }

  .prod-who { grid-auto-flow: row; gap: 0; }
  .prod-who > li:last-child { border-bottom: 1px solid var(--border-default); }

  .prod-does { flex-direction: column; }
  .prod-does > li { flex: none; }
  .prod-does-title,
  .prod-ways h3 { font-size: var(--t-sub-mobile); }

  .prod-formula { padding: var(--space-24); }
  .prod-formula .ing-headline { font-size: min(var(--t-title-sm), 8.4vw); }

  .prod-groups > li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "line" "ings";
  }
  .prod-keep { gap: var(--space-8); }
  .prod-keep img { height: 150px; }
  .prod-keep-pouch img { height: 165px; }
  .prod-keep-caps img { height: auto; width: 110px; }
  
  .prod-keep figcaption { min-height: 7.5em; margin-top: var(--space-12); }
  .prod-keep figcaption b { display: block; }
  .prod-ways,
  .prod-pairs { grid-template-columns: minmax(0, 1fr); }
  .prod-pairs img { height: 160px; }

  .prod-hub-copy { max-width: none; text-align: left; }
  .prod-hub-copy .ing-sub { margin-inline: 0; }
  .prod-pouches span { font-size: var(--t-body-sm); }
  .prod-cards { gap: clamp(8px, 3.2vw, 18px); }
  .prod-card { flex: 1 1 0; min-width: 0; }
  .prod-card-figure img { height: auto; width: 100%; max-width: 120px; }
  .prod-card-name { font-size: var(--t-body); margin-top: var(--space-12); }
  
  .prod-card-facts { flex-direction: column; gap: var(--space-8); }
  .prod-card-facts dt { letter-spacing: var(--ls-caps); }
  .prod-card-facts dd { margin-top: 0; font-size: var(--t-body-sm); }
}

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

.panel-final {
  min-height: 100svh;
  
  padding-top: var(--section-top-final);
  
  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: var(--fw-text);
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  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-body-sm);
  color: var(--text-disabled);
}

@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); }
}

.final-footer-crumbs { display: none; }
@media (max-width: 767px) {
  .final-footer-crumbs { display: block; }
}
.final-footer-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-weight: var(--fw-strong);
  font-size: var(--t-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.final-footer-crumbs li + li::before {
  content: "/";
  margin-inline: var(--space-8);
  color: var(--text-disabled);
}
.final-footer-crumbs a {
  display: inline-block;
  padding-block: var(--space-12); 
}

.final-footer-nav { margin-top: var(--space-12); }
.final-footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-24);
  font-size: var(--t-body-sm);
}