/* The main homepage's Groovy-inspired art direction. Content and commerce
   remain in home.css/home.js; this layer owns only presentation and motion. */
@font-face {
  font-family: "Fraunces Soft";
  src: url("./fonts/fraunces-soft-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Fraunces italic (soft, 36pt optical size), self-hosted and trimmed to basic
   Latin, for the hero's sub line. */
@font-face {
  font-family: "Fraunces Italic";
  src: url("./fonts/fraunces-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --forest: #303e30;
  --sage: #cdd3bd;
  --sage-light: #e7e9dd;
  --cream: #faf7ee;
  --paper: #fffdf6;
  --yellow: #efd457;
  --butter: #eee5b5;
  --yellow-light: #f5edcd;
  --gold: #b68a19;
  --ink: #303e30;
  --muted: #59604f;
  --line: #dedccf;
  --display: "Fraunces Soft", Georgia, serif;
  --h2: clamp(38px, 4.25vw, 62px);
  --groove-ease: cubic-bezier(0.2, 0, 0, 1);
  --wave-phase: 0px;
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 20Q60 0 120 20T240 20V40H0Z'/%3E%3C/svg%3E");
}

::selection { background: var(--yellow); color: var(--forest); }
main h1, main h2, .signup h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.announcement { background: var(--forest); color: var(--cream); }
.site-header { height: 94px; padding-inline: clamp(22px, 3.5vw, 64px); }
.desktop-nav a, .header-actions > a { font-size: 12px; }
.brand img { width: 250px; }
.brand { transition: rotate 250ms var(--groove-ease); }
.brand:hover { rotate: -1.5deg; }
.header-actions { gap: 24px; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgb(36 63 49 / 0.12); }

/* Full photographic hero, framed with our packaging colors. */
.hero {
  --hero-height: min(780px, max(660px, calc(100svh - 126px)));
  min-height: 660px;
  height: var(--hero-height);
  padding: 46px var(--edge) 64px;
  background: var(--butter);
  isolation: isolate;
}
.hero-copy { width: 44%; text-align: center; align-items: center; }
.hero h1 {
  font-size: clamp(76px, 7.7vw, 118px);
  line-height: 0.94;
  margin: 0;
  padding: 0 0.08em;
  text-align: center;
  letter-spacing: -0.055em;
}
.hero-sweep { flex-direction: column; align-items: center; gap: 0.015em; white-space: normal; }
.hero-sweep-word { padding: 0 0 0.06em; transition: color 200ms; }
.hero-sweep-word:nth-child(1) { rotate: -5deg; }
.hero-sweep-word:nth-child(2) { rotate: 3deg; }
.hero-sweep-word:nth-child(3) { rotate: -3deg; }
.hero-sweep-word.is-glowing { text-shadow: none; }
.hero-sweep-swash { display: none; }
.hero-period { color: var(--gold); margin-left: 0.015em; }
/* Each gesture has its own moment, followed by a long, quiet rest.
   Individual rotate keeps the original typography's tilt intact. */
.hero-motion-ready .hero-sweep-word {
  animation-duration: 12s;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}
.hero-motion-ready [data-sweep-kind="twist"] {
  transform-origin: 50% 65%;
  animation-name: word-twist;
}
.hero-motion-ready [data-sweep-kind="swipe"] { animation-name: word-swipe; }
[data-sweep-kind="glow"]::after {
  content: attr(data-glow);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: transparent;
  text-shadow:
    0 0 0.1em rgb(206 163 41 / 0.72),
    0 0 0.28em rgb(239 212 87 / 0.55),
    0 0 0.55em rgb(239 212 87 / 0.28);
  opacity: 0;
  pointer-events: none;
}
.hero-motion-ready [data-sweep-kind="glow"]::after {
  animation: word-glow 12s 1.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@keyframes word-twist {
  0%, 14%, 100% { transform: rotate(0deg); }
  4% { transform: rotate(-4deg); }
  8% { transform: rotate(1.8deg); }
  11% { transform: rotate(-0.6deg); }
}
@keyframes word-swipe {
  0%, 18%, 34%, 100% { transform: translateX(0); }
  23% { transform: translateX(0.11em); }
  28% { transform: translateX(0.04em); }
}
@keyframes word-glow {
  0%, 38%, 58%, 100% { opacity: 0; }
  44% { opacity: 0.55; }
  48% { opacity: 1; }
  52% { opacity: 0.7; }
}
/* The sub line answers the headline in the same family's italic: a softer,
   editorial voice under the bold stack. */
.hero-copy > p:not(.hero-note) {
  max-width: 31ch;
  margin-top: 26px;
  color: var(--forest);
  font-family: "Fraunces Italic", var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.38;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.hero .wave-button { margin-top: 23px; min-height: 76px; min-width: 280px; }
.hero-secondary { margin-top: 8px; }
.hero-note {
  margin-top: 18px;
  padding: 0;
  border: 0;
  max-width: 38ch;
  text-align: center;
  color: var(--forest);
  font-size: 11px;
}
.hero-image {
  inset: 5% 7% auto auto;
  width: min(44%, calc(var(--hero-height) * 0.72));
  height: 90%;
  background: #d5d0c3;
  overflow: hidden;
  border-radius: 46% 46% 10px 10px;
}
.hero-image :is(img, .hero-twist) {
  object-fit: cover;
  object-position: center 48%;
  mix-blend-mode: normal;
  transform: scale(1.035);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: clamp(50px, 6vw, 100px);
  aspect-ratio: 1;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 58% 30%, 75% 7%, 72% 35%, 93% 25%, 78% 45%, 100% 50%, 78% 58%, 93% 75%, 68% 69%, 75% 93%, 57% 77%, 50% 100%, 42% 77%, 25% 93%, 31% 68%, 7% 75%, 23% 56%, 0% 50%, 25% 43%, 7% 25%, 31% 30%, 25% 7%, 43% 29%);
  pointer-events: none;
  transform: rotate(calc(var(--scroll-turn, 0deg) + 12deg));
}
.hero::before { left: 48%; top: 10%; background: var(--gold); opacity: 0.7; }
.hero::after { right: 5%; bottom: 10%; width: 54px; background: var(--cream); }

/* A slow, full ripple keeps every edge alive without moving the sections. */
.wave { overflow: hidden; height: 44px; }
.wave path { transform-box: view-box; transform-origin: 50% 100%; }
.waves-ready .wave path {
  animation: wave-drift 8s -4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  animation-play-state: paused;
}
.waves-ready .wave.is-wave-visible path { animation-play-state: running; }
.waves-ready .wave-top path { animation-delay: -11s; }
.waves-ready .wave-header path { animation-delay: -4s; }
@keyframes wave-drift {
  from { transform: translateX(-8%) scale(1.18, 0.78); }
  to { transform: translateX(8%) scale(1.18, 1.18); }
}
.wave-header { height: 32px; }
.hero > .wave-bottom { fill: var(--forest); }
.benefit-ribbon {
  background: var(--forest);
  color: var(--cream);
  border: 0;
  padding: 19px 0;
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  mask-image: none;
  -webkit-mask-image: none;
  font: 14px/1.5 var(--mono);
}
.ribbon-track, .benefit-ribbon > .ribbon-track[aria-hidden="true"] {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  animation: ribbon-marquee 64s linear infinite;
}
.ribbon-track span { gap: 0; padding-inline: 24px; }
.ribbon-track span::after { content: "✳"; color: var(--yellow); margin-left: 48px; font-size: 20px; }
.benefit-ribbon span + span::before { content: none; }
.benefit-ribbon:hover .ribbon-track { animation-play-state: paused; }

/* The same sections and grids, with a more physical, colorful treatment. */
.routine { background: var(--cream); padding-block: 100px 116px; }
.routine > .wave-top { fill: var(--forest); }
.routine > .wave-bottom { fill: var(--yellow-light); }
.demo-media { border-radius: 46% 46% 10px 10px; overflow: hidden; }
.demo-media video { aspect-ratio: 1 / 1.13; }
.routine-steps { gap: 22px; }
.routine-steps li > span, .benefit-row > span, .refer-steps li > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  padding: 0;
  font: 13px var(--mono);
}
.routine-steps li > span { background: var(--yellow); border-color: transparent; }
.routine-steps h3 { font-family: var(--display); font-size: 28px; }
.story { background: var(--yellow-light); padding-block: 90px 118px; }
.benefits-image { rotate: -3deg; }
.benefits-image img { aspect-ratio: 1 / 1.12; border: 9px solid var(--cream); border-radius: 42% 42% 9px 9px; }
.benefit-row { border-color: rgb(36 63 49 / 0.25); gap: 18px; }
.benefit-row:last-child { border: 0; }
.benefit-row > span { width: 36px; height: 36px; min-width: 36px; }
.formula { padding-block: 100px; align-items: start; }
.formula-photo { position: sticky; top: 130px; }
.formula-photo .gallery-stage {
  background: var(--sage-light);
  border-radius: 18px;
  overflow: hidden;
}
.formula-photo .gallery-stage img { object-fit: cover; mix-blend-mode: multiply; border-radius: 0; }
.gallery-controls { margin-top: 18px; gap: 12px; }
.gallery-controls button { border-radius: 50%; overflow: hidden; width: 58px; height: 58px; }
.gallery-controls img { border-radius: 50%; }
.gallery-controls button[aria-pressed="true"] { outline: 2px solid var(--forest); outline-offset: 3px; }
.ingredient-tabs { column-gap: 18px; }
.ingredient-tabs button { font-size: 14px; }
.ingredient-panel {
  background: var(--sage-light);
  padding: 22px;
  border-radius: 0 28px 28px 28px;
  margin-top: 22px;
}
.ingredient-panel h3 { font-size: 22px; }
.pack-option input:checked + span { background: var(--sage-light); border-color: var(--forest); }

.carry {
  position: relative;
  max-width: none;
  padding: 104px var(--edge);
  background: var(--sage);
}
.carry::before, .refer::before, .photo-journal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 31px;
  background: inherit;
  mask: var(--wave-mask) var(--wave-phase) 0 / 240px 40px repeat-x;
  pointer-events: none;
}
.waves-ready :is(.carry, .refer, .photo-journal)::before {
  animation: wave-edge-drift 8s -4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  animation-play-state: paused;
}
.waves-ready :is(.carry, .refer, .photo-journal).is-wave-visible::before { animation-play-state: running; }
.waves-ready .refer::before { animation-delay: -11s; }
@keyframes wave-edge-drift {
  from { mask-position: calc(var(--wave-phase) - 44px) 0; }
  to { mask-position: calc(var(--wave-phase) + 44px) 0; }
}
.carry figure { rotate: 3deg; }
.carry figure img { border: 8px solid var(--cream); border-radius: 10px; aspect-ratio: 4 / 4.5; }
.carry figcaption { padding-top: 12px; text-align: center; }
.carry-list li { border-color: rgb(36 63 49 / 0.25); }
/* Largest size that keeps the line on one row, capped at 19px. */
.carry-copy { container-type: inline-size; }
.carry-copy > p {
  max-width: none; font-size: clamp(17px, 4cqi, 19px); line-height: 1.5;
  letter-spacing: -0.01em; text-wrap: pretty;
}
@media (max-width: 760px) { .carry-copy > p { font-size: 18px; } }
.carry-list p { color: var(--forest); }
.pairings {
  max-width: none;
  padding: 36px var(--edge) 100px;
  background: var(--sage);
}
#why-peptides .pairings-heading { display: block; }
#why-peptides .pairings-heading > p {
  max-width: 48ch;
  margin-top: 20px;
  color: var(--forest);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.pairing-grid { border: 0; gap: 14px; }
.pairing-grid article, .pairing-grid article:first-child {
  background: var(--cream);
  border: 0;
  border-radius: 8px 8px 40px 8px;
  padding: 26px 22px;
}
.pairing-grid article:first-child { background: var(--forest); color: var(--cream); }
.pairing-grid article:first-child p { color: var(--cream); }
.pairing-grid h3 { font-family: var(--display); font-size: 27px; line-height: 1.1; min-height: 60px; }
.pairing-grid span { font-family: var(--mono); font-size: 11px; }
.pairings > .fine { margin-top: 22px; }
/* Pairing cards: on hover each lifts and a sticker for its ingredient springs
   from the top corner, then comes alive: peptide beads bob, stars twinkle by
   retinol's moon, the citrus slice turns, and calm ripples spread under the drop.
   Touch screens get the pop once as each card scrolls into view. */
.pairing-grid article {
  position: relative;
  transition: transform 360ms var(--groove-ease), box-shadow 360ms var(--groove-ease);
}
.pairing-charm {
  position: absolute; top: -24px; right: 16px; z-index: 1;
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 1px rgb(48 62 48 / 0.06), 0 12px 26px -12px rgb(48 62 48 / 0.5);
  opacity: 0; transform: translateY(14px) scale(0.4) rotate(-24deg);
  transition: opacity 220ms ease, transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.pairing-charm svg { width: 52px; height: 52px; overflow: visible; }
.pairing-charm * { transform-box: fill-box; transform-origin: center; }
.charm-bond { fill: none; stroke: var(--forest); stroke-width: 2.5; stroke-linecap: round; }
.charm-ripple { fill: none; stroke: #8fa98f; stroke-width: 1.5; opacity: 0; }
.charm-bead, .charm-star, .charm-citrus, .charm-ripple, .charm-drop {
  animation-play-state: paused;
}
.charm-bead { animation: charm-bob 1.6s ease-in-out infinite; }
.charm-bead:nth-of-type(2) { animation-delay: -0.3s; }
.charm-bead:nth-of-type(3) { animation-delay: -0.6s; }
.charm-star { animation: charm-twinkle 1.8s ease-in-out infinite; }
.charm-star + .charm-star { animation-delay: -0.9s; }
.charm-citrus { animation: charm-turn 9s linear infinite; }
.charm-drop { animation: charm-drip 2.4s ease-in-out infinite; }
.charm-ripple { animation: charm-ripple 2.4s ease-out infinite; }
.charm-ripple + .charm-ripple { animation-delay: -1.2s; }
@keyframes charm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes charm-twinkle { 0%, 100% { transform: scale(0.55); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes charm-turn { to { transform: rotate(360deg); } }
@keyframes charm-drip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes charm-ripple { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.pairing-grid article.is-charmed .pairing-charm {
  opacity: 1; transform: none;
}
.pairing-grid article.is-charmed .pairing-charm * { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .pairing-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgb(48 62 48 / 0.55); }
  .pairing-grid article:hover .pairing-charm { opacity: 1; transform: none; }
  .pairing-grid article:hover .pairing-charm * { animation-play-state: running; }
  .charm-retinol, .charm-niacinamide { transform: translateY(14px) scale(0.4) rotate(24deg); }
}
html.motion-paused .pairing-charm * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pairing-grid article, .pairing-grid article:hover { transition: none; transform: none; }
  .pairing-charm { transform: none; transition: opacity 200ms ease; }
  .pairing-charm * { animation: none !important; }
  .charm-ripple { opacity: 0.5; }
}

.shop { padding-block: 90px 112px; }
.shop .center-heading { max-width: 840px; }
.pack-grid { gap: 22px; }
.pack-card, .pack-card:nth-child(2), .pack-card:nth-child(3) {
  background: var(--sage-light);
  border: 0;
  border-radius: 18px;
  padding: 30px 16px 16px;
  box-shadow: none;
  transition: rotate 300ms var(--groove-ease);
}
.pack-card:nth-child(2) { background: var(--butter); }
.pack-card:nth-child(3) { background: var(--sage); }
.pack-card-head { min-height: 120px; }
.pack-card h3 { font-family: var(--display); font-size: 36px; letter-spacing: -0.045em; }
.pack-card-head .pack-lede {
  margin-top: 10px;
  font: 600 15px/1.4 var(--font);
  letter-spacing: -0.015em;
  color: var(--forest);
  text-wrap: pretty;
}
.pack-caption .pack-formula {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  font: 600 13px/1.35 var(--font);
  letter-spacing: 0.01em;
  color: var(--forest);
  opacity: 0.82;
}
.pack-formula-plus {
  color: #876719;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}
.pack-card > img {
  height: 280px;
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: multiply;
  object-fit: contain;
  margin: 4px 0 18px;
  transform: translate3d(0, var(--pack-rise, 0px), 0) rotate(var(--pack-turn, 0deg));
  transition: transform 420ms var(--groove-ease);
}
.pack-tag, .pack-card:not(:first-child) .pack-tag {
  background: var(--cream);
  color: var(--forest);
  padding: 5px 12px;
  font-size: 11px;
  border: 0;
  rotate: -3deg;
}
.pack-caption {
  min-height: 40px;
  padding-inline: 12px;
  color: var(--forest);
  text-align: center;
}
/* The button carries the per-stick price, the number that improves as the
   pack grows. */
.pack-add-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.pack-add-unit {
  font-weight: 500;
  opacity: 0.7;
}
.pack-card .button {
  background: var(--forest);
  color: var(--cream);
  border-radius: 8px;
  min-height: 56px;
  gap: 8px;
  font: 700 15px/1.2 var(--font);
  text-transform: none;
  letter-spacing: -0.01em;
}
.pack-card .button:hover { background: var(--yellow); color: var(--forest); }
.pack-card .button [aria-hidden="true"] {
  opacity: 0.55;
  font-weight: 500;
}
/* The pack total sits quietly under the per-stick button, so the number paid
   at checkout is never a surprise. */
.pack-total {
  margin: 10px 0 0;
  text-align: center;
  font: 500 13px/1.4 var(--font);
  letter-spacing: -0.005em;
  color: var(--forest);
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.refer {
  position: relative;
  background: var(--forest);
  color: var(--cream);
  padding: 94px var(--edge);
}
.refer .refer-copy > p, .refer-steps p { color: inherit; }
.refer-steps li > span { color: var(--yellow); }
.refer-input-row input { border-color: var(--cream); background: transparent; color: var(--cream); }
.refer-input-row input::placeholder { color: #cbd4ba; }
.refer :focus-visible { outline-color: var(--yellow); }
.refer .button { color: var(--forest); }
.faq { padding-block: 104px; }
.faq-group-title { font-family: var(--mono); letter-spacing: 0.03em; padding-bottom: 20px; }
.faq-list summary { font-weight: 600; padding-block: 23px; }
.faq-list summary::after {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--sage-light);
  border-radius: 50%;
  font-weight: 400;
  font-size: 22px;
  transition: background-color 160ms, rotate 200ms var(--groove-ease);
}
.faq-list details[open] summary::after { background: var(--yellow); }
.faq-list details[open] { border-color: var(--forest); }
.photo-journal {
  position: relative;
  max-width: none;
  background: var(--sage-light);
  padding: 72px var(--edge) 112px;
}
.photo-journal .center-heading a {
  margin-top: 18px;
  font: 700 17px/1.3 var(--font);
  letter-spacing: 0.03em;
}
.journal-grid { gap: 28px; align-items: center; padding: 10px 4px; }
.journal-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.08;
  border: 8px solid var(--cream);
  border-radius: 8px;
  rotate: -4deg;
  transition: rotate 300ms var(--groove-ease);
}
.journal-grid img:nth-child(2) { rotate: 3deg; }
.journal-grid img:nth-child(3) { rotate: -2deg; }
.site-footer { background: var(--butter); padding-top: 96px; }
.site-footer > .wave-top { fill: var(--sage-light); }
.signup { max-width: 850px; }
.footer-brand { margin-top: 74px; }
.footer-brand img { width: clamp(150px, 19vw, 260px); height: auto; }
.closing-buy { min-height: 74px; border: 0; border-radius: 0; background: transparent; isolation: isolate; position: relative; }
.closing-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest);
  z-index: -1;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 80' preserveAspectRatio='none'%3E%3Cpath d='M8 8Q18 -1 32 8T60 8T88 8T116 8T144 8T172 8T200 8T228 8T256 8Q278 -2 276 16Q266 30 275 42Q282 57 273 71Q260 80 246 72T218 72T190 72T162 72T134 72T106 72T78 72T50 72T22 72Q0 80 4 62Q13 48 5 35Q-2 20 8 8Z'/%3E%3C/svg%3E") center / 100% 100%;
}
.closing-buy:hover { background: transparent; }
.closing-buy:hover::before { background: #375640; }

/* A compact purchase bar, using the same forest, butter and serif palette. */
#stickyBuy {
  display: block;
  padding: 14px var(--edge) max(14px, env(safe-area-inset-bottom));
  background: var(--forest);
  color: var(--cream);
  border-top: 1px solid rgb(250 247 238 / 0.18);
  box-shadow: 0 -3px 16px rgb(0 0 0 / 0.08);
  font-family: var(--font);
}
#stickyBuy .sticky-buy-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 36px;
  max-width: 1216px;
  margin: auto;
}
#stickyBuy .sticky-product { display: flex; align-items: center; gap: 16px; min-width: 0; }
#stickyBuy .sticky-product img {
  width: 52px; height: 56px; border-radius: 5px;
  object-fit: cover; background: var(--cream);
}
#stickyBuy .sticky-product-name {
  font: 700 24px/1.15 var(--display);
  letter-spacing: -0.035em;
}
#stickyBuy .sticky-product-detail {
  margin-top: 5px;
  color: var(--butter);
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
#stickyBuy .sticky-action {
  min-width: 200px; min-height: 52px;
  padding: 14px 20px; border: 1px solid transparent; border-radius: 6px;
  background: var(--yellow); color: var(--forest);
  font: 600 15px/1.3 var(--font); text-transform: none; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
#stickyBuy .sticky-action::after { content: none; }
#stickyBuy .sticky-action svg {
  width: 20px; height: 20px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#stickyBuy .sticky-action:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
#stickyBuy .sticky-action:disabled { opacity: 0.65; cursor: default; }
#stickyBuy .sticky-action[aria-busy="true"] { cursor: wait; }
#stickyBuy .sticky-status { grid-column: 1 / -1; color: var(--cream); font-size: 13px; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  #stickyBuy .sticky-action:not(:disabled):hover { background: var(--butter); }
}
@media (max-width: 760px) {
  #stickyBuy { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
  #stickyBuy .sticky-buy-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
  #stickyBuy .sticky-product { gap: 12px; }
  #stickyBuy .sticky-product-name { font-size: 20px; }
  #stickyBuy .sticky-product-detail { font-size: 12px; }
  #stickyBuy .sticky-action { min-width: 132px; min-height: 50px; padding: 12px 14px; gap: 12px; font-size: 14px; }
}
@media (max-width: 540px) {
  #stickyBuy .sticky-product img { display: none; }
  #stickyBuy .sticky-product-name { font-size: 19px; }
  #stickyBuy .sticky-product-detail { font-size: 11px; }
}
@media (max-width: 360px) {
  #stickyBuy { padding-inline: 14px; }
  #stickyBuy .sticky-buy-inner { column-gap: 12px; }
  #stickyBuy .sticky-product-name { font-size: 18px; }
  #stickyBuy .sticky-action { min-width: 120px; padding-inline: 12px; gap: 8px; }
}

/* Only reveal elements if their observer was installed successfully. */
.groove-reveal { transition: opacity 550ms var(--groove-ease), translate 550ms var(--groove-ease); }
.groove-reveal.is-pending { opacity: 0; translate: 0 12px; }
.groove-reveal.is-visible { opacity: 1; translate: 0 0; }
.button, .wave-button, .bag-button {
  transition: scale 150ms var(--groove-ease), background-color 160ms, color 160ms;
}
.button:active, .wave-button:active, .bag-button:active { scale: 0.96; }
.wave-button::before { transition: rotate 250ms var(--groove-ease), background-color 160ms; }
.wave-button:hover::before { rotate: -1.5deg; }
html.page-idle .ribbon-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .pack-card:hover { rotate: -0.4deg; }
  .pack-card:nth-child(2):hover { rotate: 0.4deg; }
  .pack-card:hover > img { --pack-rise: -5px; --pack-turn: -1.5deg; }
  .journal-grid img:hover { rotate: 0deg; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero { min-height: 640px; height: 680px; padding-inline: 5%; }
  .hero-copy { width: 47%; }
  .hero h1 { font-size: 92px; }
  .hero-image { width: 44%; right: 4%; }
  .hero-copy > p:not(.hero-note) { font-size: 20px; }
  .pairing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .pack-card > img { height: 220px; }
  .pack-card h3 { font-size: 30px; }
  .pack-caption { min-height: 58px; }
  .header-actions { gap: 12px; }
}
@media (max-width: 760px) {
  :root { --h2: clamp(35px, 9.2vw, 50px); }
  .announcement { font-size: 10px; padding: 8px 24px; }
  .site-header { height: 74px; padding-inline: 18px; gap: 10px; }
  .menu-button { justify-self: start; width: 44px; }
  .brand img { width: 176px; }
  .header-actions { gap: 4px; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
    padding: 36px 22px 42px;
    gap: 18px;
  }
  .hero-copy { display: contents; }
  .hero h1 { font-size: clamp(28px, 10vw, 64px); line-height: 1.12; letter-spacing: -0.05em; grid-row: 1; }
  .hero-sweep { flex-direction: row; justify-content: center; gap: 0.24em; white-space: nowrap; }
  .hero-copy > p:not(.hero-note) { grid-row: 2; max-width: 27ch; font-size: 18px; line-height: 1.4; margin: 0 auto; }
  .hero-image {
    position: relative;
    grid-row: 3;
    inset: auto;
    /* The photo's own 4:5 shape, so nothing is cropped and the stick keeps
       its headroom under the arch instead of touching the curve. Narrower
       than the column so the taller arch costs no extra scroll. */
    width: min(84%, 380px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 14px auto 0;
    transform: none;
    border-radius: 999px 999px 12px 12px;
  }
  .hero-image :is(img, .hero-twist) { object-fit: cover; object-position: center 100%; transform-origin: 50% 100%; }
  .hero::before { left: auto; right: 4%; top: 29%; width: 57px; }
  .hero::after { left: 2%; top: 58%; right: auto; bottom: auto; width: 44px; }
  .hero .wave-button { grid-row: 4; justify-self: center; width: min(100%, 330px); min-height: 70px; margin: 0; }
  .hero-secondary { grid-row: 5; margin: -4px auto 0; }
  .hero-note { grid-row: 6; font-size: 11px; margin: -2px auto 0; max-width: 35ch; }
  .wave { height: 30px; }
  .wave-header { height: 24px; }
  .benefit-ribbon { padding-block: 16px; font-size: 13px; }
  .ribbon-track span { padding-inline: 16px; }
  .ribbon-track span::after { margin-left: 32px; }
  .routine, .story { padding: 64px 24px 76px; }
  .routine-layout, .benefits-layout { row-gap: 38px; }
  .routine-copy, .benefits-copy { text-align: left; }
  .demo-media, .benefits-image img, .carry figure img, .formula-photo .gallery-stage {
    left: auto;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    transform: none;
  }
  .demo-media { border-radius: 46% 46% 8px 8px; }
  .demo-media video { aspect-ratio: 1 / 1.04; }
  .benefits-image img { aspect-ratio: 1; border-width: 6px; }
  .routine-steps h3 { font-size: 26px; }
  .routine-steps li > span { min-width: 36px; width: 36px; height: 36px; }
  .formula { padding-block: 62px 78px; }
  .formula-photo { position: static; }
  .formula-photo .gallery-stage { border-radius: 14px; }
  .formula-photo .gallery-stage img { aspect-ratio: 1; }
  .ingredient-tabs { gap: 12px; }
  .ingredient-tabs button { font-size: clamp(11px, 3.3vw, 14px); }
  .ingredient-panel { padding: 20px; }
  .carry { padding: 62px 24px 42px; }
  .carry figure { margin: 10px 5px 0; }
  .carry figure img { border-width: 6px; aspect-ratio: 1; }
  .carry::before, .refer::before, .photo-journal::before { mask-size: 160px 40px; }
  .pairings { padding: 26px 24px 66px; }
  .pairings-heading { gap: 20px; }
  .pairing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .pairing-grid article { padding: 20px 15px; border-radius: 8px 8px 28px 8px; }
  .pairing-grid h3 { font-size: 22px; min-height: 55px; }
  .pairing-grid p { font-size: 13px; }
  .pairing-grid span { font-size: 10px; }
  .pairing-charm { top: -18px; right: 10px; width: 46px; height: 46px; }
  .pairing-charm svg { width: 38px; height: 38px; }
  .shop { padding: 62px 24px 80px; }
  .pack-grid { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .pack-card, .pack-card:nth-child(2), .pack-card:nth-child(3) { padding: 24px 16px 16px; }
  .pack-card-head { min-height: 110px; }
  .pack-card h3 { font-size: 34px; }
  .pack-card > img { height: auto; max-height: 320px; margin: 0 0 16px; }
  .pack-caption { min-height: 0; font-size: 16px; }
  .pack-card .button { font-size: 16px; }
  .refer { padding: 64px 24px; row-gap: 40px; }
  .refer-input-row { flex-direction: column; }
  .refer-input-row .button { min-height: 48px; }
  .refer-steps li { gap: 18px; }
  .faq { padding: 64px 24px 82px; }
  .faq-list summary { padding-block: 18px; }
  .photo-journal { padding: 54px 24px 70px; }
  .photo-journal .center-heading a { font-size: 15px; }
  .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; }
  .journal-grid img { border-width: 3px; min-width: 0; width: 100%; height: auto; border-radius: 4px; aspect-ratio: 1 / 1.5; }
  .site-footer { padding-top: 70px; }
  .footer-brand { margin-top: 50px; }
  .footer-brand img { width: 170px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 12px; }
  .brand img { width: 158px; }
  .header-actions { gap: 0; }
  .header-actions .bag-button { min-width: 42px; }
  .hero .wave-button { min-width: 0; }
  .pairing-grid { grid-template-columns: minmax(0, 1fr); }
  .pairing-grid h3 { font-size: 26px; min-height: 0; }
}

/* System reduced-motion pauses ambient effects. */
html.motion-paused { scroll-behavior: auto; }
html.motion-paused .ribbon-track { animation-play-state: paused; }
html.motion-paused .wave path,
html.motion-paused :is(.carry, .refer, .photo-journal)::before { animation: none; }
html.page-idle .wave path,
html.page-idle :is(.carry, .refer, .photo-journal)::before { animation-play-state: paused; }
html.motion-paused .hero-sweep-word,
html.motion-paused [data-sweep-kind="glow"]::after { animation: none; }
html.page-idle .hero-sweep-word,
html.page-idle [data-sweep-kind="glow"]::after,
.hero.is-offscreen .hero-sweep-word,
.hero.is-offscreen [data-sweep-kind="glow"]::after { animation-play-state: paused; }
html.motion-paused .groove-reveal { opacity: 1; translate: none; transition: none; }
html.motion-paused .hero-image :is(img, .hero-twist) { transform: none; }
html.motion-paused .pack-card, html.motion-paused .pack-card > img,
html.motion-paused .wave-button::before, html.motion-paused .journal-grid img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .waves-ready .wave path,
  .waves-ready :is(.carry, .refer, .photo-journal)::before { animation: none; }
  .ribbon-track { animation: none; }
  .hero-motion-ready .hero-sweep-word,
  .hero-motion-ready [data-sweep-kind="glow"]::after { animation: none; }
  .benefit-ribbon { overflow-x: auto; }
  .benefit-ribbon > .ribbon-track[aria-hidden="true"] { display: none; }
  .groove-reveal.is-pending { opacity: 1; translate: none; }
  .hero-image :is(img, .hero-twist) { transform: none; }
  .pack-card:hover, .pack-card:hover > img { rotate: none; transform: none; }
  .groove-reveal, .button, .wave-button, .wave-button::before, .journal-grid img { transition: none; }
}

/* Section intros center on phones, where a single column gives them the whole
   width. Only the heading and its lead line move: the lists, tabs and forms
   below keep a left edge so they stay easy to scan. The lead is held to a
   short, balanced measure so it reads as a tidy block rather than ragged
   centered prose. */
@media (max-width: 760px) {
  :is(.routine-copy, .benefits-copy, .formula-copy, .carry-copy, .pairings-heading, .refer-copy, .faq-intro) > h2 {
    text-align: center;
    margin-inline: auto;
    text-wrap: balance;
  }
  :is(.routine-copy, .benefits-copy, .formula-copy, .carry-copy, .pairings-heading, .refer-copy, .faq-intro) > h2 + p {
    max-width: 32ch;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  #formula .formula-copy > h2 + p { max-width: 32ch; text-align: center; }
  .faq-intro { text-align: center; }
  .faq-intro > .text-link { margin-inline: auto; }
}

/* Hero twist, drawn by hero-twist.js. The canvas sits exactly over the photo
   and takes the same transforms as the img above. */
.hero-image .hero-twist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}