:root {
  --cream: #f7f5ee;
  --paper: #fbfaf4;
  --yellow: #f0e040;
  --ink: #1a1a17;
  --black: #0f0f0f;
  --muted: #5f5e55;
  --line: #dcd9cf;
  --font: "Instrument Sans", sans-serif;
  --mono: "DM Mono", monospace;
  --gutter: clamp(22px, 5vw, 80px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
body:has(dialog[open]) {
  overflow: hidden;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--font);
  letter-spacing: -0.045em;
  line-height: 1.06;
  font-weight: 700;
}
h2 {
  font-size: clamp(38px, 4.5vw, 66px);
}
h3 {
  font-size: 26px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}
.routine :focus-visible {
  outline-color: var(--ink);
}
.sr-only {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 12px;
  background: var(--yellow);
  transform: translateY(-150%);
  z-index: 100;
}
.skip-link:focus {
  transform: none;
}
.announcement {
  background: #e5e8dc;
  color: var(--ink);
  text-align: center;
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.025em;
  padding: 8px 16px;
}
.site-header {
  height: 96px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding: 0 3.5%;
  background: var(--cream);
}
.brand img {
  width: 126px;
  height: auto;
}
.desktop-nav {
  display: flex;
  gap: 26px;
  align-items: center;
}
.desktop-nav a,
.header-actions > a {
  font: 11px/1.5 var(--mono);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.desktop-nav a:hover,
.header-actions > a:hover {
  text-decoration: underline;
}
.header-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-self: end;
}
.bag-button {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: none;
  padding: 4px;
  font: 12px var(--mono);
}
.bag-button svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.5;
}
.bag-button #bagN {
  background: var(--yellow);
  border-radius: 50%;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  align-self: flex-start;
  margin-top: 0;
}
.menu-button {
  display: none;
}
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 20px var(--gutter);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  z-index: 3;
}
.mobile-nav a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
}
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 64px;
  display: block;
  fill: var(--cream);
  pointer-events: none;
  z-index: 2;
}
.wave-bottom {
  bottom: -1px;
}
.wave-top {
  top: -1px;
  transform: rotate(180deg);
}
.wave-header {
  top: calc(100% - 2px);
  height: 22px;
  transform: rotate(180deg);
}
.hero {
  position: relative;
  min-height: 740px;
  background: #f2f1eb;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 7% 106px;
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: 44%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  font-size: clamp(68px, 6.3vw, 96px);
  line-height: 1.01;
  letter-spacing: -0.045em;
}
.hero-copy > p:not(.hero-note) {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
}
.hero-image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  background: #f2f1eb;
}
.hero-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 51%;
  mix-blend-mode: multiply;
}
.wave-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 260px;
  min-height: 72px;
  padding: 20px 28px;
  margin-top: 30px;
  font: 13px/1.4 var(--mono);
  font-weight: 500;
  text-decoration: none;
}
.wave-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  mask-image: 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");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  transition: background-color 150ms;
}
.wave-button:hover::before {
  background: #fff35a;
}
.wave-button span {
  font-size: 20px;
}
.hero-secondary {
  font: 11px var(--mono);
  margin-top: 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
}
.hero-secondary:hover {
  text-decoration: underline;
}
.hero-note {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 24px;
  color: var(--muted);
}
.section {
  max-width: 1360px;
  margin: auto;
  padding: 78px var(--gutter);
}
.center-heading {
  text-align: center;
  margin: 0 auto 42px;
}
.center-heading > p {
  font-size: 16px;
  margin-top: 17px;
}
.shop {
  padding-top: 56px;
  padding-bottom: 82px;
}
.shop h2 {
  font-size: 48px;
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pack-card {
  background: #eeece4;
  border: 1px solid #e2dfd4;
  border-radius: 14px;
  padding: 24px 12px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.pack-card:nth-child(2) {
  background: #e9e8de;
}
.pack-card:nth-child(3) {
  background: #efeddd;
}
.pack-card-head {
  min-height: 112px;
}
.pack-tag {
  display: inline-block;
  font: 10px/1.4 var(--mono);
  text-transform: uppercase;
  background: var(--yellow);
  padding: 5px 10px;
  margin-bottom: 15px;
}
.pack-card h3 {
  font-size: 25px;
  letter-spacing: -0.035em;
  max-width: 19ch;
  margin: 0 auto;
}
.pack-card-head p {
  font-size: 12px;
  margin-top: 10px;
}
.pack-card > img {
  width: 100%;
  height: 290px;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin: 12px 0 14px;
}
.pack-caption {
  font-size: 12px;
  margin-bottom: 18px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--yellow);
  color: var(--ink);
  font: 12px/1.4 var(--mono);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 150ms,
    color 150ms;
}
.button:hover {
  background: #e5d42a;
}
.pack-add {
  width: 100%;
  margin-top: auto;
  gap: 16px;
}
.shop-terms {
  text-align: center;
  max-width: 80ch;
  margin: 24px auto 0;
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
.form-status {
  font-size: 13px;
  padding: 12px 0;
}
.is-error {
  color: #a2271e;
}
#packStatus {
  text-align: center;
}
.story {
  position: relative;
  background: var(--yellow);
  padding: 112px var(--gutter) 116px;
  overflow: hidden;
}
.story-copy {
  text-align: center;
  max-width: 690px;
  margin: auto;
}
.story-copy > p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 53ch;
  margin: 24px auto 0;
}
.story-copy > p + p {
  font-size: 15px;
  max-width: 61ch;
  margin-top: 16px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  font: 11px/1.5 var(--mono);
  margin-top: 22px;
}
.story-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  gap: 38px;
  margin: 46px auto 0;
  align-items: center;
}
.story-photos figure:first-child {
  transform: rotate(-3deg);
}
.story-photos figure:last-child {
  transform: rotate(3deg);
}
.story-photos img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border: 8px solid var(--cream);
  border-radius: 3px;
}
.story-photos figure:last-child img {
  object-position: center 48%;
}
.story-photos figcaption {
  font: 10px/1.5 var(--mono);
  padding-top: 14px;
  text-align: center;
}
.formula {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  padding-top: 72px;
  padding-bottom: 92px;
  align-items: center;
}
.formula-photo {
  min-width: 0;
}
.gallery-stage {
  height: 430px;
  display: grid;
  place-items: center;
}
.gallery-stage img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  min-height: 0;
}
.gallery-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.gallery-controls button {
  height: 58px;
  width: 58px;
  background: transparent;
  border: 1px solid #b7b2a4;
  border-radius: 4px;
  padding: 3px;
}
.gallery-controls button[aria-pressed="true"] {
  border: 2px solid var(--ink);
  padding: 2px;
}
.gallery-controls img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.formula-photo > .fine {
  text-align: center;
  margin-top: 17px;
  font-size: 10px;
}
.formula h2 {
  font-size: 52px;
}
.formula-copy > p:not(.fine) {
  font-size: 15px;
  margin-top: 20px;
  color: var(--muted);
}
.ingredient-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  margin-top: 26px;
}
.ingredient-tabs button {
  border: 0;
  background: none;
  padding: 10px 0 12px;
  font-size: 12px;
  border-bottom: 2px solid transparent;
  min-height: 44px;
}
.ingredient-tabs button[aria-selected="true"] {
  border-color: var(--ink);
  font-weight: 600;
}
.ingredient-panel {
  padding: 20px 0 14px;
  min-height: 177px;
}
.ingredient-panel h3 {
  font-size: 23px;
  letter-spacing: -0.03em;
}
.ingredient-panel p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
}
.ingredient-panel a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  font-size: 12px;
  margin-top: 6px;
}
.fine {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.pack-picker {
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 26px 0 0;
  gap: 8px;
  min-width: 0;
}
.pack-picker legend {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  padding: 0;
}
.pack-option {
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.pack-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pack-option > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 4px;
  padding: 13px 10px;
  border: 1px solid #b7b2a4;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.4;
}
.pack-option strong {
  font-size: 12px;
  font-weight: 500;
  align-self: center;
}
.pack-option .pack-detail {
  font-size: 10px;
  color: var(--muted);
  grid-column: 1/-1;
}
.pack-option input:checked + span {
  padding: 12px 9px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.pack-option input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.purchase-button {
  width: 100%;
  margin-top: 12px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  justify-content: space-between;
}
.purchase-button:hover {
  background: #fff35a;
}
.purchase-terms {
  font-size: 11px;
  text-align: center;
  margin: 12px 0 14px;
}
.purchase-disclaimer {
  font-size: 10px;
  text-align: center;
}
.routine {
  position: relative;
  background: #e5e8dc;
  color: var(--ink);
  padding: 112px var(--gutter) 108px;
}
.routine .center-heading p {
  color: var(--muted);
}
.routine-steps {
  max-width: 1120px;
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: center;
}
.routine-steps li > span {
  display: inline-grid;
  place-items: center;
  background: var(--yellow);
  color: var(--black);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font: 16px var(--mono);
  margin-bottom: 20px;
}
.routine-steps h3 {
  font-size: 28px;
  letter-spacing: -0.025em;
}
.routine-steps p {
  color: var(--muted);
  font-size: 14px;
  margin: 14px auto 0;
  max-width: 29ch;
}
.routine-fine {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 36px 0 0;
}
.faq {
  padding-top: 64px;
  padding-bottom: 62px;
}
.faq h2 {
  font-size: 50px;
}
.faq-list {
  max-width: 830px;
  margin: auto;
  display: grid;
  gap: 9px;
}
.faq-list details {
  background: var(--black);
  color: var(--cream);
  border-radius: 9px;
  padding: 0 24px;
}
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 65px;
  padding: 18px 0;
  font-size: 14px;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #a6a398;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
}
.faq-list details[open] summary::after {
  content: "−";
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
.faq-list details p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  padding: 0 38px 22px 0;
}
.faq-list :focus-visible {
  outline-color: var(--yellow);
}
.photo-journal {
  padding: 32px var(--gutter) 98px;
  max-width: 1440px;
  margin: auto;
}
.photo-journal .center-heading a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 11px var(--mono);
  margin-top: 14px;
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.journal-grid img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 10px;
}
.journal-grid img:last-child {
  object-position: 50% 50%;
}
.site-footer {
  position: relative;
  background: var(--yellow);
  padding: 96px var(--gutter) 24px;
}
.signup {
  max-width: 720px;
  margin: auto;
  text-align: center;
}
.signup h2 {
  font-size: 58px;
}
.signup > p {
  font-size: 15px;
  margin-top: 20px;
}
.signup form {
  max-width: 580px;
  margin: 28px auto 0;
}
.email-row {
  display: flex;
  border-bottom: 2px solid var(--ink);
}
.email-row input {
  font-size: 12px;
  font-family: var(--mono);
  background: transparent;
  border: 0;
  min-width: 0;
  width: 100%;
  padding: 14px 0;
  border-radius: 0;
  color: var(--ink);
}
.email-row input::placeholder {
  color: var(--ink);
}
.email-row button {
  border: 0;
  background: transparent;
  min-width: 52px;
  font-size: 30px;
}
.signup .fine {
  font-size: 10px;
  color: #45420f;
  margin-top: 14px;
}
.footer-brand {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1240px;
  margin: 62px auto 32px;
}
.footer-brand img {
  width: 190px;
  height: auto;
}
.footer-brand span,
.footer-brand > a {
  font: 11px var(--mono);
}
.footer-brand > a {
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.footer-links {
  max-width: 1240px;
  margin: auto;
  border-top: 1px solid rgb(0 0 0 / 0.2);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
}
.footer-links a {
  text-decoration: none;
  min-height: 32px;
}
.footer-links a:hover {
  text-decoration: underline;
}
.copyright {
  font: 10px var(--mono);
  text-align: center;
  margin-top: 18px;
}
.sticky-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 18;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 11px var(--mono);
}
.sticky-buy .button {
  background: var(--yellow);
  color: var(--ink);
  min-height: 44px;
  font-size: 11px;
  border-radius: 6px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 6px;
  width: min(520px, calc(100% - 32px));
  max-height: 85dvh;
  padding: 28px;
  background: var(--cream);
  color: var(--ink);
}
dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.dialog-heading h2 {
  font-size: 28px;
  letter-spacing: -0.035em;
}
.close-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 3px;
  font-size: 28px;
}
.cart-empty {
  padding: 28px 0;
  color: var(--muted);
}
.cart-empty .text-link {
  display: flex;
  margin-top: 18px;
}
.cart-line {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.cart-line img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  /* Matches the product photos' backdrop so packs are never cropped. */
  background: #fdf9f5;
}
.cart-line h3 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.cart-line p {
  font-size: 13px;
  margin-top: 8px;
}
.cart-remove {
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  text-decoration: underline;
  font-size: 12px;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.cart-total + .fine {
  margin-bottom: 20px;
}
#cartCheckout {
  width: 100%;
}
.noscript {
  padding: 24px;
  text-align: center;
  max-width: none;
}
@media (max-width: 1100px) {
  .desktop-nav {
    gap: 16px;
  }
  .header-actions {
    gap: 20px;
  }
  .desktop-nav a,
  .header-actions > a {
    font-size: 10px;
  }
  .hero {
    min-height: 650px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .hero h1 {
    font-size: 76px;
  }
  .hero-copy > p:not(.hero-note) {
    font-size: 15px;
  }
  .hero-image {
    width: 51%;
  }
  .hero-image img {
    object-fit: contain;
  }
  .hero-copy {
    width: 48%;
  }
  .pack-card h3 {
    font-size: 23px;
  }
  .pack-card > img {
    height: 240px;
  }
  .pack-card-head {
    min-height: 115px;
  }
  .pack-caption {
    font-size: 11px;
  }
  .formula {
    gap: 6%;
  }
  .formula h2 {
    font-size: 44px;
  }
  .gallery-stage {
    height: 340px;
  }
  .ingredient-tabs {
    gap: 13px;
  }
  .ingredient-tabs button {
    font-size: 11px;
  }
  .pack-option > span {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .routine-steps {
    gap: 35px;
  }
  .journal-grid img {
    height: 290px;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 22px;
  }
  html {
    scroll-padding-top: 100px;
  }
  .announcement {
    font-size: 8px;
    padding: 8px 10px;
    letter-spacing: 0;
  }
  .site-header {
    height: 80px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0 22px;
  }
  .brand {
    grid-column: 2;
    grid-row: 1;
  }
  .brand img {
    width: 106px;
    height: auto;
  }
  .desktop-nav,
  .header-actions > a {
    display: none;
  }
  .header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
  }
  .bag-button svg {
    width: 24px;
    height: 24px;
  }
  .bag-button {
    font-size: 10px;
  }
  .bag-button #bagN {
    min-width: 17px;
    height: 17px;
  }
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 1;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 22px;
  }
  .wave-header {
    height: 16px;
  }
  .wave {
    height: 35px;
  }
  .hero {
    padding: 36px 22px 50px;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-copy {
    width: 100%;
    display: contents;
  }
  .hero h1 {
    font-size: 66px;
    line-height: 1.01;
    text-align: center;
    grid-row: 1;
    position: relative;
    z-index: 3;
    letter-spacing: -0.055em;
  }
  .hero-copy > p:not(.hero-note) {
    grid-row: 3;
    margin: 0;
    font-size: 14px;
    text-align: center;
  }
  .desktop-only {
    display: none;
  }
  .hero-image {
    position: relative;
    width: 100%;
    height: 330px;
    grid-row: 2;
    right: auto;
    top: auto;
    bottom: auto;
    background: transparent;
  }
  .hero-image img {
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .hero .wave-button {
    grid-row: 4;
    justify-self: center;
    margin-top: 2px;
    min-height: 65px;
    min-width: 250px;
    font-size: 12px;
  }
  .hero-secondary {
    grid-row: 5;
    justify-self: center;
    margin: 0;
    font-size: 10px;
    min-height: 32px;
  }
  .hero-note {
    grid-row: 6;
    text-align: center;
    margin: 0;
    font-size: 10px;
  }
  .section {
    padding: 44px 22px;
  }
  .center-heading {
    margin-bottom: 28px;
  }
  .center-heading > p {
    font-size: 14px;
    margin-top: 14px;
  }
  h2 {
    font-size: 38px;
  }
  .shop h2 {
    font-size: 36px;
  }
  .pack-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 460px;
    margin: auto;
  }
  .pack-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 18px 14px 14px;
    gap: 0 12px;
    align-items: center;
  }
  .pack-card-head {
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    align-self: center;
  }
  .pack-tag {
    font-size: 9px;
    padding: 4px 7px;
    margin-bottom: 12px;
  }
  .pack-card h3 {
    font-size: 24px;
    max-width: 12ch;
    margin: 0;
  }
  .pack-card-head p {
    font-size: 10px;
    margin-top: 8px;
  }
  .pack-card > img {
    grid-column: 2;
    grid-row: 1;
    height: 170px;
    margin: 0;
    object-fit: contain;
  }
  .pack-caption {
    grid-column: 1/-1;
    margin: 14px 0 12px;
    font-size: 11px;
    text-align: left;
  }
  .pack-add {
    grid-column: 1/-1;
    min-height: 48px;
    border-radius: 7px;
    font-size: 12px;
  }
  .shop-terms {
    font-size: 10px;
    margin-top: 20px;
    line-height: 1.8;
  }
  .story {
    padding: 72px 22px 74px;
  }
  .story h2 {
    font-size: 40px;
  }
  .story-copy > p {
    font-size: 15px;
    margin-top: 22px;
  }
  .story-copy > p + p {
    font-size: 14px;
    margin-top: 14px;
  }
  .story .text-link {
    font-size: 10px;
    gap: 18px;
    margin-top: 16px;
  }
  .story-photos {
    gap: 17px;
    margin-top: 28px;
  }
  .story-photos img {
    height: 220px;
    border-width: 5px;
  }
  .story-photos figure:first-child {
    transform: rotate(-2deg);
  }
  .story-photos figure:last-child {
    transform: rotate(2deg);
  }
  .story-photos figcaption {
    font-size: 8px;
    line-height: 1.5;
    padding-top: 12px;
  }
  .formula {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 42px;
    padding-bottom: 48px;
  }
  .gallery-stage {
    height: 280px;
  }
  .gallery-controls {
    margin-top: 12px;
  }
  .gallery-controls button {
    width: 48px;
    height: 48px;
  }
  .formula-photo > .fine {
    font-size: 10px;
  }
  .formula h2 {
    font-size: 42px;
    text-align: center;
  }
  .formula-copy > p:not(.fine) {
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
  }
  .ingredient-tabs {
    gap: 16px;
    justify-content: center;
  }
  .ingredient-tabs button {
    font-size: 11px;
  }
  .ingredient-panel {
    min-height: 176px;
    padding-top: 20px;
  }
  .ingredient-panel h3 {
    font-size: 25px;
  }
  .ingredient-panel p {
    font-size: 14px;
  }
  .ingredient-panel a {
    font-size: 12px;
  }
  .pack-picker {
    margin-top: 22px;
  }
  .pack-option > span {
    grid-template-columns: 1fr auto;
    font-size: 14px;
    padding: 12px 9px;
    gap: 7px 3px;
  }
  .pack-option input:checked + span {
    padding: 11px 8px;
  }
  .pack-option strong {
    font-size: 11px;
  }
  .pack-option .pack-detail {
    font-size: 10px;
  }
  .purchase-button {
    font-size: 11px;
    gap: 10px;
    min-height: 52px;
  }
  .purchase-terms {
    font-size: 10px;
  }
  .routine {
    padding: 75px 22px 78px;
  }
  .routine h2 {
    font-size: 42px;
  }
  .routine .center-heading {
    margin-bottom: 28px;
  }
  .routine-steps {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 0;
    text-align: left;
    max-width: 390px;
  }
  .routine-steps li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 8px 16px;
  }
  .routine-steps li > span {
    grid-column: 1;
    grid-row: 1/3;
    width: 40px;
    height: 40px;
    font-size: 13px;
    margin: 0;
  }
  .routine-steps h3 {
    grid-column: 2;
    font-size: 25px;
    margin-top: 3px;
  }
  .routine-steps p {
    grid-column: 2;
    margin: 0;
    max-width: 32ch;
    font-size: 13px;
  }
  .routine-fine {
    font-size: 10px;
    margin-top: 30px;
  }
  .faq {
    padding-top: 42px;
    padding-bottom: 40px;
  }
  .faq h2 {
    font-size: 42px;
  }
  .faq-list {
    gap: 8px;
  }
  .faq-list details {
    padding: 0 17px;
    border-radius: 7px;
  }
  .faq-list summary {
    font-size: 13px;
    padding: 16px 0;
    min-height: 62px;
    gap: 15px;
  }
  .faq-list summary::after {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
  .faq-list details p {
    font-size: 13px;
    padding: 0 7px 20px 0;
  }
  .photo-journal {
    padding: 26px 22px 56px;
  }
  .photo-journal h2 {
    font-size: 38px;
  }
  .photo-journal .center-heading a {
    font-size: 10px;
  }
  .journal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }
  .journal-grid img {
    height: 180px;
    border-radius: 6px;
  }
  .site-footer {
    padding: 74px 22px 22px;
  }
  .signup h2 {
    font-size: 46px;
  }
  .signup > p {
    font-size: 14px;
    margin-top: 20px;
  }
  .signup form {
    margin-top: 22px;
  }
  .email-row input {
    font-size: 16px;
    padding: 12px 0;
    letter-spacing: -0.04em;
  }
  .email-row input::placeholder {
    font-size: 11px;
    letter-spacing: 0;
  }
  .signup .fine {
    font-size: 10px;
  }
  .footer-brand {
    margin-top: 38px;
    gap: 15px;
    flex-wrap: wrap;
  }
  .footer-brand img {
    width: 145px;
  }
  .footer-brand span {
    font-size: 9px;
  }
  .footer-brand > a {
    font-size: 10px;
    min-height: 30px;
    margin-left: auto;
  }
  .footer-links {
    gap: 9px 22px;
    font-size: 12px;
    justify-content: flex-start;
    padding-top: 20px;
  }
  .footer-links a {
    min-height: 30px;
  }
  .copyright {
    font-size: 9px;
    margin-top: 18px;
  }
  .sticky-buy {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 12px;
    font-size: 8px;
    line-height: 1.5;
  }
  .sticky-buy > span {
    max-width: 20ch;
  }
  .sticky-buy .button {
    font-size: 9px;
    min-height: 44px;
    padding: 12px;
    gap: 8px;
  }
  dialog {
    padding: 20px;
  }
  .dialog-heading h2 {
    font-size: 24px;
    letter-spacing: -0.025em;
  }
}
@media (max-width: 360px) {
  .announcement {
    font-size: 7px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-image {
    height: 290px;
  }
  .pack-card h3 {
    font-size: 21px;
  }
  .pack-card > img {
    height: 150px;
  }
  .ingredient-tabs {
    gap: 10px;
  }
  .ingredient-tabs button {
    font-size: 10px;
  }
  .pack-option > span {
    grid-template-columns: 1fr;
  }
  .story-photos img {
    height: 180px;
  }
  .story-photos figcaption {
    font-size: 7px;
  }
  .journal-grid img {
    height: 150px;
  }
  .footer-brand span {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Second editorial pass: consistent type, fewer competing surfaces, complete homepage. */
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
.hero-note,
.shop-terms,
.purchase-terms,
.purchase-disclaimer,
.fine {
  font-size: 12px;
}
.hero {
  min-height: 690px;
}
.hero-secondary {
  min-height: 44px;
}
.benefit-ribbon {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
  font: 11px/1.5 var(--mono);
}
.benefit-ribbon span {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
.benefit-ribbon span + span::before {
  content: "✳";
  font-size: 18px;
}
.pack-card {
  border-radius: 8px;
  border-color: transparent;
  padding-top: 28px;
}
.pack-card .button {
  border-radius: 4px;
}
.pack-card-head {
  min-height: 98px;
}
.pack-card > img {
  height: 240px;
  margin: 0 0 10px;
}
.pack-card h3 {
  font-size: 28px;
}
.pack-caption {
  font-size: 13px;
  line-height: 1.6;
}
.pack-caption [data-unit] {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.story {
  padding: 104px var(--gutter);
}
.benefits-layout {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8%;
  scroll-margin-top: 130px;
}
.benefits-image img {
  aspect-ratio: 4/5;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.benefits-image figcaption,
.carry figcaption {
  font: 10px/1.6 var(--mono);
  padding-top: 16px;
}
.benefits-copy h2 {
  font-size: clamp(38px, 4.1vw, 60px);
}
.benefits-copy > p {
  margin-top: 22px;
  max-width: 42ch;
}
.benefit-row {
  display: flex;
  gap: 22px;
  padding: 23px 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.18);
}
.benefit-row:first-of-type {
  margin-top: 12px;
}
.benefit-row > span {
  font: 12px var(--mono);
  padding-top: 5px;
}
.benefit-row h3 {
  font-size: 23px;
  letter-spacing: -0.025em;
}
.benefit-row p {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 10px;
}
.benefits-copy .text-link {
  margin-top: 18px;
}
.formula {
  gap: 7%;
  align-items: start;
}
.formula-photo {
  position: sticky;
  top: 130px;
  padding-top: 16px;
}
.formula-photo .gallery-stage {
  height: 480px;
  background: #edece4;
  border-radius: 4px;
  overflow: hidden;
}
.formula-photo .gallery-stage img {
  mix-blend-mode: multiply;
}
.formula-photo .fine {
  text-align: center;
}
.formula h2 {
  font-size: clamp(36px, 3.7vw, 54px);
}
.formula-standards {
  list-style: none;
  padding: 18px 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.formula-standards li::before {
  content: "✓";
  margin-right: 7px;
}
.product-details {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}
.notify-trigger {
  background: transparent;
  border: 0;
  padding: 0;
}
.run-meter {
  font-size: 13px;
  margin-top: 12px;
}
.routine {
  padding: 106px var(--gutter);
}
.routine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  max-width: 1200px;
  margin: auto;
  align-items: center;
}
.demo-media {
  position: relative;
  background: #e7e8df;
}
.demo-media video {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.routine-copy h2 {
  font-size: clamp(44px, 4.7vw, 68px);
}
.routine-copy > p {
  margin-top: 24px;
  color: var(--muted);
  font-size: 16px;
}
.routine-steps {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 26px;
  margin-top: 30px;
}
.routine-steps li {
  display: flex;
  gap: 20px;
}
.routine-steps li > span {
  width: 34px;
  height: 34px;
  border-radius: 0;
  flex-shrink: 0;
  font-size: 12px;
  margin: 0;
  background: transparent;
  color: var(--ink);
  border-top: 1px solid #b6bcaa;
}
.routine-steps h3 {
  font-size: 25px;
}
.routine-steps p {
  margin: 9px 0 0;
  max-width: 38ch;
  font-size: 14px;
}
.routine-copy .routine-fine {
  margin-top: 25px;
  text-align: left;
  font-size: 12px;
}
.carry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: center;
  padding-top: 88px;
}
.carry-copy h2 {
  font-size: clamp(48px, 5vw, 72px);
}
.carry-copy > p {
  font-size: 17px;
  margin-top: 24px;
  max-width: 38ch;
}
.carry-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.carry-list li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.carry-list li > span {
  font-size: 25px;
  width: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.carry-list h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
}
.carry-list p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.carry figure img {
  width: 100%;
  aspect-ratio: 4/5;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}
.pairings {
  padding-top: 8px;
  padding-bottom: 80px;
}
.pairings-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
}
.pairings-heading h2 {
  font-size: 40px;
}
.pairings-heading > p {
  max-width: 36ch;
  color: var(--muted);
  font-size: 15px;
}
.pairing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pairing-grid article {
  padding: 24px;
  border-left: 1px solid var(--line);
}
.pairing-grid article:first-child {
  background: #e5e8dc;
  border-left: 0;
}
.pairing-grid span {
  font: 10px var(--mono);
}
.pairing-grid h3 {
  font-size: 23px;
  margin-top: 18px;
  min-height: 48px;
}
.pairing-grid p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.pairings > .fine {
  margin-top: 14px;
}
.refer {
  max-width: none;
  padding: 64px max(var(--gutter), calc((100vw - 1216px) / 2));
  background: #e6e8dd;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10%;
}
.refer h2 {
  font-size: clamp(40px, 4.3vw, 62px);
}
.refer-copy > p {
  margin-top: 22px;
  max-width: 48ch;
  font-size: 15px;
}
#referForm,
#referResult {
  margin-top: 28px;
}
.refer label,
#notifyForm label {
  font-size: 12px;
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}
.refer-input-row {
  display: flex;
  gap: 8px;
}
.refer-input-row input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid #a8ab9c;
  border-radius: 4px;
  padding: 13px 12px;
  background: var(--paper);
  font-size: 16px;
}
.refer-input-row .button {
  flex-shrink: 0;
  border-radius: 4px;
  padding: 12px 18px;
  font-size: 11px;
}
.refer-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}
.refer-steps li {
  display: flex;
  gap: 25px;
}
.refer-steps li > span {
  font: 13px var(--mono);
  padding-top: 6px;
}
.refer-steps h3 {
  font-size: 26px;
}
.refer-steps p {
  margin-top: 10px;
  font-size: 14px;
  max-width: 37ch;
}
#referProgress {
  width: 100%;
  height: 7px;
  border: 0;
  appearance: none;
  margin-top: 24px;
  background: #c6c9bc;
}
#referProgress::-webkit-progress-bar {
  background: #c6c9bc;
}
#referProgress::-webkit-progress-value {
  background: var(--ink);
}
#referProgress::-moz-progress-bar {
  background: var(--ink);
}
#referProgressText,
#referEarned {
  font-size: 13px;
  margin-top: 10px;
}
#referReset {
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 8px;
  text-decoration: underline;
}
.faq {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 8%;
  padding-top: 80px;
  padding-bottom: 80px;
}
.faq-intro {
  text-align: left;
  align-self: start;
  position: sticky;
  top: 145px;
  margin: 0;
}
.faq-intro h2 {
  font-size: clamp(38px, 4.5vw, 62px);
}
.faq-intro > p {
  max-width: 28ch;
}
.faq-list {
  gap: 0;
  width: 100%;
}
.faq-group-title {
  font: 12px var(--mono);
  padding: 0 0 18px;
  border-bottom: 1px solid var(--ink);
}
.faq-group-title:not(:first-child) {
  margin-top: 32px;
}
.faq-list details {
  background: transparent;
  color: var(--ink);
  padding: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.faq-list summary {
  font-size: 15px;
  min-height: 66px;
  font-weight: 500;
  gap: 16px;
}
.faq-list summary::after {
  border: 0;
  font-size: 22px;
}
.faq-list details[open] summary::after {
  background: transparent;
}
.faq-list details p {
  font-size: 14px;
  color: var(--muted);
  padding: 0 32px 22px 0;
}
.faq-list :focus-visible {
  outline-color: var(--ink);
}
.photo-journal {
  padding-top: 16px;
  padding-bottom: 90px;
}
.photo-journal h2 {
  font-size: 48px;
}
.journal-grid img {
  border-radius: 4px;
  height: 310px;
}
.closing-buy {
  margin-top: 26px;
  min-width: 240px;
}
.signup > .closing-perks {
  font-size: 12px;
}
.signup > p {
  font-size: 14px;
}
.signup form {
  margin-top: 16px;
  max-width: 460px;
}
.signup .fine {
  font-size: 11px;
}
.signup h2 {
  font-size: clamp(38px, 4.5vw, 64px);
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 32px;
}
.footer-links h3 {
  font-size: 15px;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.footer-links a {
  display: flex;
  align-items: center;
  font-size: 13px;
  min-height: 32px;
}
.footer-base {
  display: flex;
  justify-content: space-between;
  max-width: 1240px;
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgb(0 0 0 / 0.2);
  font-size: 11px;
  gap: 16px;
}
.cart-quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  margin-top: 12px;
}
.cart-quantity button {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: 20px;
}
.cart-quantity span {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cart-remove {
  margin-left: 16px;
}
#cartUpsell {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
#cartUpsell > p {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cart-upgrade {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  padding: 12px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: 12px;
  min-height: 48px;
}
.cart-upgrade:hover {
  background: var(--yellow);
}
.image-dialog {
  width: min(900px, calc(100% - 32px));
  padding: 0;
  background: var(--paper);
}
.image-dialog img {
  width: 100%;
  max-height: 80dvh;
  object-fit: contain;
}
.image-dialog .close-button {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--cream);
}
#notifyForm {
  margin-top: 22px;
}
#notifyForm .fine {
  margin-top: 14px;
}
.scroll-top {
  position: fixed;
  bottom: 95px;
  right: 22px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  z-index: 17;
  font-size: 24px;
  border-radius: 50%;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .benefits-layout,
  .routine-layout,
  .carry {
    gap: 5%;
  }
  .benefit-row {
    padding: 15px 0;
    gap: 12px;
  }
  .benefit-row h3,
  .carry-list h3 {
    font-size: 20px;
  }
  .benefits-image img {
    aspect-ratio: 3/4;
  }
  .routine-steps {
    gap: 18px;
  }
  .routine-copy > p {
    font-size: 14px;
  }
  .pack-card h3 {
    font-size: 23px;
  }
  .refer {
    gap: 5%;
  }
  .refer-input-row {
    flex-wrap: wrap;
  }
  .pairing-grid article {
    padding: 18px;
  }
}
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding-top: 30px;
    gap: 14px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-image {
    height: 270px;
  }
  .hero-note {
    font-size: 11px;
  }
  .hero-secondary {
    min-height: 32px;
  }
  .benefit-ribbon {
    justify-content: flex-start;
    overflow: auto;
    gap: 28px;
    scrollbar-width: none;
    padding: 16px 22px;
    font-size: 10px;
  }
  .benefit-ribbon span + span::before {
    font-size: 15px;
  }
  .pack-card {
    padding: 18px 14px 14px;
  }
  .pack-card > img {
    height: 150px;
    margin: 0;
  }
  .pack-card h3 {
    font-size: 25px;
  }
  .pack-card-head {
    min-height: 0;
  }
  .pack-caption {
    font-size: 12px;
  }
  .pack-caption [data-unit] {
    font-size: 11px;
    margin-top: 2px;
  }
  .shop-terms {
    font-size: 11px;
  }
  .story {
    padding: 66px 22px;
  }
  .benefits-layout,
  .routine-layout,
  .carry,
  .refer,
  .faq {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .benefits-copy {
    grid-row: 1;
  }
  .benefits-copy h2 {
    font-size: 40px;
  }
  .benefits-copy > p {
    font-size: 15px;
  }
  .benefit-row {
    gap: 16px;
    padding: 20px 0;
  }
  .benefit-row h3 {
    font-size: 23px;
  }
  .benefits-image img {
    aspect-ratio: 1;
  }
  .benefits-image figcaption {
    font-size: 9px;
  }
  .formula {
    padding-top: 48px;
  }
  .formula-photo {
    position: static;
    padding: 0;
  }
  .formula-photo .gallery-stage {
    height: 330px;
  }
  .formula h2 {
    font-size: 38px;
  }
  .formula-standards {
    font-size: 11px;
  }
  .purchase-terms,
  .purchase-disclaimer {
    font-size: 11px;
  }
  .routine {
    padding: 66px 22px;
  }
  .routine-copy {
    grid-row: 1;
  }
  .routine-copy h2 {
    font-size: 46px;
  }
  .routine-copy > p {
    font-size: 15px;
  }
  .routine-steps {
    gap: 24px;
    margin-top: 28px;
  }
  .routine-steps li {
    display: flex;
    grid-template-columns: initial;
  }
  .routine-steps h3 {
    font-size: 25px;
  }
  .routine-steps li > span {
    width: 30px;
    height: 30px;
    margin: 0;
  }
  .routine-steps p {
    font-size: 14px;
  }
  .routine-copy .routine-fine {
    font-size: 11px;
  }
  .demo-media video {
    aspect-ratio: 1;
  }
  .carry {
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .carry-copy h2 {
    font-size: 48px;
  }
  .carry-copy h2 br:nth-child(2) {
    display: none;
  }
  .carry-copy > p {
    font-size: 16px;
  }
  .carry-list {
    margin-top: 24px;
  }
  .carry-list h3 {
    font-size: 22px;
  }
  .carry figure img {
    aspect-ratio: 1;
    object-position: 50% 48%;
  }
  .pairings {
    padding-top: 12px;
    padding-bottom: 48px;
  }
  .pairings-heading {
    display: block;
  }
  .pairings-heading h2 {
    font-size: 34px;
  }
  .pairings-heading > p {
    margin-top: 18px;
    font-size: 14px;
  }
  .pairing-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
  }
  .pairing-grid article {
    padding: 20px 14px;
  }
  .pairing-grid article:nth-child(3) {
    border-left: 0;
  }
  .pairing-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .pairing-grid h3 {
    font-size: 23px;
    min-height: 48px;
  }
  .pairing-grid p {
    font-size: 12px;
  }
  .pairing-grid span {
    font-size: 9px;
  }
  .refer {
    padding: 48px 22px;
    gap: 36px;
  }
  .refer h2 {
    font-size: 42px;
  }
  .refer-input-row .button {
    padding: 12px;
    font-size: 10px;
  }
  .refer-steps {
    gap: 24px;
  }
  .refer-steps h3 {
    font-size: 25px;
  }
  .faq {
    padding-top: 48px;
    padding-bottom: 44px;
    gap: 26px;
  }
  .faq-intro {
    position: static;
  }
  .faq-intro h2 {
    font-size: 40px;
  }
  .faq-intro > p {
    max-width: none;
    font-size: 15px;
  }
  .faq-list summary {
    font-size: 14px;
  }
  .faq-list details p {
    font-size: 14px;
    padding-right: 12px;
  }
  .photo-journal {
    padding-bottom: 62px;
  }
  .photo-journal h2 {
    font-size: 38px;
  }
  .journal-grid {
    gap: 8px;
  }
  .journal-grid img {
    height: 170px;
  }
  .signup h2 {
    font-size: 38px;
  }
  .signup > .closing-perks {
    font-size: 11px;
  }
  .signup .fine {
    font-size: 11px;
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    text-align: left;
  }
  .footer-links a {
    min-height: 40px;
  }
  .footer-base {
    display: block;
    font-size: 11px;
    line-height: 1.8;
  }
  .footer-base p + p {
    margin-top: 6px;
  }
  .scroll-top {
    right: 14px;
    bottom: 92px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.swipe-note {
  font-size: 13px;
  text-align: center;
  margin: 20px 0 8px;
}
#bundles {
  scroll-margin-top: 130px;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .benefit-ribbon {
    overflow: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
}
.pack-notify {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 0;
  background: none;
  text-decoration: underline;
  font-size: 12px;
  grid-column: 1/-1;
}

/* Original headline animation, scoped to the local concept. */
.hero-sweep-word {
  position: relative;
  display: inline-block;
}
.hero-sweep-swash {
  /* Clear of the deepest descender in the line ("p" in Swipe.) with room to
     spare, so the stroke reads as an underline sitting below the word rather
     than a line grazing its letters. */
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.22em;
  width: 106%;
  height: 0.24em;
  overflow: visible;
  pointer-events: none;
}
/* dasharray/dashoffset are set from the path's measured length in JS, so the
   draw-in always matches this exact curve rather than a guessed constant. */
.hero-sweep-swash path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 7;
  stroke-linecap: round;
}
/* Twist: a taller box for the coil, centred on the same line the swash
   sits on, and a lighter stroke so the loops stay open rather than filling in. */
.hero-sweep-twist {
  bottom: -0.33em;
  height: 0.36em;
}
.hero-sweep-twist path {
  stroke-width: 4.6;
  stroke-linejoin: round;
}
/* Glow: the line grows from the centre while a blurred copy of it swells
   behind, and the word itself picks up a faint warm halo. */
.hero-sweep-glow {
  overflow: visible;
}
.hero-sweep-glow .hero-glow-halo {
  stroke-width: 15;
  opacity: 0;
}
.hero-sweep-word {
  transition: text-shadow 0.9s ease-out;
}
.hero-sweep-word.is-glowing {
  text-shadow:
    0 0 0.42em rgba(240, 224, 64, 0.55),
    0 0 0.12em rgba(240, 224, 64, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .hero-sweep-word {
    transition: none;
  }
}

/* Lighter surfaces and final content-fit refinements. */
.hero {
  padding-top: 60px;
  padding-bottom: 86px;
  min-height: 770px;
}
.hero h1 {
  font-size: clamp(68px, 6.3vw, 92px);
  line-height: 1;
  margin-bottom: 12px;
}
.hero-sweep {
  display: flex;
  flex-direction: column;
  gap: 0.27em;
  align-items: center;
}
.hero-copy > p:not(.hero-note) {
  font-size: 16px;
}
.hero .wave-button {
  margin-top: 24px;
}
.hero-note {
  margin-top: 14px;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 10px/1.4 var(--mono);
  background: transparent;
  border: 0;
  padding: 10px;
  min-height: 44px;
  color: var(--muted);
  position: absolute;
  bottom: -66px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.motion-toggle:hover {
  color: var(--ink);
}
.hero-secondary {
  margin-top: 10px;
}
.hero-image {
  width: 48%;
}
.hero-image img {
  object-fit: cover;
}
.site-header {
  gap: 24px;
}
.desktop-nav,
.header-actions {
  min-width: 0;
}
.desktop-nav a,
.header-actions > a {
  white-space: nowrap;
}
.brand {
  justify-self: center;
}
.button {
  border-radius: 5px;
}
.pack-card {
  background: #eeece4;
}
.pack-card-head p,
.pack-caption {
  font-size: 13px;
}
.pack-add {
  border: 1px solid rgb(0 0 0 / 0.05);
}
.routine-copy > p,
.routine-steps p,
.routine-copy .routine-fine {
  color: var(--muted);
}
.closing-buy {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid #aaa239;
}
.closing-buy:hover {
  background: #fffdf4;
}
.refer-input-row .button {
  border: 1px solid #cdc13c;
}
.formula-standards {
  column-gap: 16px;
}
.ingredient-tabs button {
  min-height: 44px;
}
.pack-option > span {
  min-height: 72px;
}
.pack-card h3 {
  overflow-wrap: normal;
}
.refer-input-row input {
  min-height: 52px;
}
.footer-brand {
  align-items: center;
}
.footer-brand img {
  width: 183px;
  height: auto;
}
.footer-brand > a {
  min-height: 44px;
}
.footer-links a {
  min-height: 36px;
}
.image-dialog .close-button,
.scroll-top {
  background: var(--paper);
}
@media (min-width: 761px) and (max-width: 980px) {
  .site-header {
    height: 84px;
    padding: 0 28px;
  }
  .desktop-nav,
  .header-actions > a {
    display: none;
  }
  .brand {
    grid-column: 2;
    grid-row: 1;
  }
  .brand img {
    width: 112px;
    height: auto;
  }
  .header-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 22px;
  }
  .hero {
    min-height: 730px;
    padding-left: 4%;
    padding-right: 4%;
  }
  .hero h1 {
    font-size: 72px;
  }
  .hero-copy {
    width: 48%;
  }
  .hero-copy > p:not(.hero-note) {
    font-size: 14px;
  }
  .hero-image {
    width: 49%;
  }
  .hero-image img {
    object-fit: contain;
  }
  .wave-button {
    min-width: 240px;
    gap: 18px;
    font-size: 12px;
  }
  .formula {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 32px;
  }
  .formula-photo {
    position: static;
    max-width: 560px;
    width: 100%;
    margin: auto;
    padding: 0;
  }
  .formula-copy {
    width: 100%;
    max-width: 560px;
    margin: auto;
  }
  .formula h2 {
    font-size: 48px;
  }
  .formula-photo .gallery-stage {
    height: 380px;
  }
  .pack-option > span {
    grid-template-columns: 1fr auto;
  }
  .benefits-layout,
  .routine-layout,
  .carry {
    gap: 32px;
  }
  .benefits-copy h2 {
    font-size: 36px;
  }
  .benefit-row h3 {
    font-size: 20px;
  }
  .benefit-row p {
    font-size: 13px;
  }
  .benefits-image img {
    aspect-ratio: 3/5;
  }
  .routine-copy h2 {
    font-size: 44px;
  }
  .routine-steps h3 {
    font-size: 23px;
  }
  .routine-steps p {
    font-size: 13px;
  }
  .routine-steps li {
    gap: 10px;
  }
  .demo-media video {
    aspect-ratio: 3/5;
  }
  .carry-copy h2 {
    font-size: 52px;
  }
  .carry-copy > p {
    font-size: 15px;
  }
  .carry-list h3 {
    font-size: 20px;
  }
  .carry-list p {
    font-size: 13px;
  }
  .carry figure img {
    aspect-ratio: 3/5;
  }
  .pairings-heading h2 {
    font-size: 34px;
  }
  .pairings-heading {
    gap: 32px;
  }
  .pairing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pairing-grid article:nth-child(3) {
    border-left: 0;
  }
  .pairing-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .pairing-grid h3 {
    min-height: 0;
  }
  .refer {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
  .refer h2 {
    font-size: 42px;
  }
  .refer-steps h3 {
    font-size: 23px;
  }
  .refer-steps li {
    gap: 16px;
  }
  .refer-input-row {
    flex-wrap: wrap;
  }
  .refer-input-row input {
    flex-basis: 100%;
  }
  .refer-input-row .button {
    width: 100%;
  }
  .faq {
    gap: 32px;
    grid-template-columns: 0.8fr 1.3fr;
  }
  .faq-intro h2 {
    font-size: 40px;
  }
  .pack-card h3 {
    font-size: 23px;
  }
  .pack-card-head {
    min-height: 115px;
  }
  .pack-card > img {
    height: 175px;
  }
  .pack-caption {
    min-height: 62px;
    font-size: 12px;
  }
  .pack-card-head p {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding: 30px 22px 44px;
    gap: 16px;
  }
  .hero h1 {
    font-size: clamp(44px, 12vw, 54px);
    margin: 0 0 6px;
  }
  .hero-sweep {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 0.22em;
    row-gap: 0.28em;
  }
  .hero-sweep-word:last-child {
    grid-column: 1/-1;
    justify-self: center;
  }
  .hero-image {
    width: 100%;
    height: 270px;
  }
  .hero-image img {
    object-fit: contain;
  }
  .hero-copy > p:not(.hero-note) {
    font-size: 14px;
  }
  .hero .wave-button {
    margin-top: 0;
  }
  .hero-secondary {
    margin-top: 0;
  }
  .hero-note {
    margin: 0;
  }
  .motion-toggle {
    position: static;
    transform: none;
    grid-row: 7;
    justify-self: center;
    min-height: 32px;
    padding: 6px 10px;
    margin-top: -8px;
  }
  .pack-card h3 {
    font-size: clamp(22px, 6vw, 26px);
  }
  .pack-card-head p {
    font-size: 11px;
  }
  .pack-caption {
    font-size: 12px;
  }
  .pack-option > span {
    gap: 6px;
  }
  .formula-copy > p:not(.fine) {
    text-align: left;
  }
  .formula h2 {
    text-align: left;
  }
  .ingredient-tabs {
    justify-content: flex-start;
    gap: clamp(10px, 4vw, 20px);
  }
  .ingredient-tabs button {
    font-size: 11px;
  }
  .routine-steps li {
    gap: 16px;
  }
  .routine-copy .routine-fine {
    font-size: 12px;
  }
  .footer-brand {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px 16px;
    align-items: center;
  }
  .footer-brand img {
    width: 136px;
  }
  .footer-brand > span {
    grid-column: 1;
    grid-row: 2;
  }
  .footer-brand > a {
    grid-column: 2;
    grid-row: 1/3;
    margin: 0;
    font-size: 10px;
  }
  .footer-links a {
    min-height: 44px;
  }
  .announcement {
    font-size: 9px;
    padding: 8px 18px;
  }
  .sticky-buy > span {
    font-size: 9px;
    max-width: 20ch;
  }
  .sticky-buy .button {
    font-size: 10px;
  }
}
@media (max-width: 360px) {
  .hero h1 {
    font-size: 42px;
  }
  .hero-image {
    height: 245px;
  }
  .hero-copy > p:not(.hero-note) {
    font-size: 13px;
  }
  .pack-card {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0 8px;
  }
  .pack-card h3 {
    font-size: 22px;
  }
  .pack-card-head p {
    font-size: 10px;
  }
  .pack-option > span {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ingredient-tabs {
    gap: 12px;
  }
  .ingredient-tabs button {
    font-size: 10px;
  }
  .refer-input-row {
    flex-wrap: wrap;
  }
  .refer-input-row input {
    flex-basis: 100%;
  }
  .refer-input-row .button {
    width: 100%;
  }
  .sticky-buy .button {
    font-size: 9px;
    padding: 12px 10px;
  }
  .announcement {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sweep-word {
    transition: none;
  }
}
/* Keep the animated strokes inside the headline's own layout box. */
.hero h1 { padding-inline:.08em; }

/* ==========================================================================
   Craft pass — the look is unchanged. This corrects the things underneath it:
   one page edge instead of three, one heading size instead of eight, one pack
   surface instead of three, drawn icons instead of typographic stand-ins, and
   a single spacing band. Everything after this point supersedes the earlier
   passes on purpose; nothing here touches the waves, the yellow bands, or the
   hero button.
   ========================================================================== */

:root {
  /* Every full-width element resolves to the same left edge as .section. */
  --edge: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)));
  --band: clamp(58px, 6.5vw, 100px);
  --h2: clamp(36px, 3.9vw, 54px);
  --h3: clamp(19px, 1.45vw, 22px);
}

/* --- One page edge ------------------------------------------------------ */
.site-header {
  padding-inline: var(--edge);
}
.hero {
  padding-left: var(--edge);
}
.benefit-ribbon,
.sticky-buy {
  padding-inline: var(--edge);
}
.benefits-layout,
.routine-layout,
.footer-brand,
.footer-links,
.footer-base {
  max-width: 1216px;
}
.photo-journal {
  max-width: 1360px;
}

/* --- One spacing band --------------------------------------------------- */
.section,
.story,
.routine,
.refer {
  padding-block: var(--band);
}
.shop {
  padding-block: clamp(48px, 5.5vw, 84px);
}
.pairings {
  padding-top: 0;
}
.photo-journal {
  padding-block: 0 var(--band);
}
.site-footer {
  padding-top: clamp(72px, 8vw, 112px);
}

/* --- One heading ramp ---------------------------------------------------- */
h1,
h2,
h3 {
  letter-spacing: -0.032em;
}
h2,
.shop h2,
.story h2,
.formula h2,
.routine h2,
.faq h2,
.signup h2,
.benefits-copy h2,
.routine-copy h2,
.carry-copy h2,
.pairings-heading h2,
.refer h2,
.faq-intro h2,
.photo-journal h2 {
  font-size: var(--h2);
}
.dialog-heading h2 {
  font-size: clamp(22px, 2.4vw, 28px);
}
.benefit-row h3,
.carry-list h3,
.pairing-grid h3,
.ingredient-panel h3,
.routine-steps h3,
.refer-steps h3 {
  font-size: var(--h3);
  letter-spacing: -0.022em;
}
.pack-card h3 {
  font-size: clamp(22px, 1.9vw, 27px);
}
.hero h1 {
  letter-spacing: -0.042em;
}
/* Nothing on this page should render below 11px. */
.benefits-image figcaption,
.carry figcaption,
.pairing-grid span,
.formula-photo > .fine,
.footer-brand span,
.pack-tag,
.signup .fine {
  font-size: 11px;
}

/* --- Hero: one left baseline -------------------------------------------- */
.hero-copy {
  width: min(46%, 560px);
  text-align: left;
  align-items: flex-start;
}
.hero-sweep {
  align-items: flex-start;
}
.hero h1 {
  /* Optical: pull the T's stem back onto the column edge, past the padding
     the animated strokes need. */
  margin-left: -0.06em;
}
.hero-copy > p:not(.hero-note) {
  max-width: 40ch;
}
.hero-note {
  order: 1;
  max-width: 38ch;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.motion-toggle {
  order: 2;
  position: static;
  transform: none;
  margin-top: 8px;
  padding-inline: 0;
  min-height: 32px;
}

/* --- Packs: one surface, one crisp plate --------------------------------- */
.pack-card,
.pack-card:nth-child(2),
.pack-card:nth-child(3) {
  background: #f0eee6;
  border: 1px solid #e4e1d7;
}
.pack-card > img {
  /* Cover on a fixed ratio: the render's soft vignette never letterboxes
     against a mat, so the photo reads as a plate rather than a second box. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  mix-blend-mode: normal;
  border-radius: 8px;
  margin: 14px 0 16px;
}
.pack-tag {
  border-radius: 999px;
  padding: 5px 10px;
  letter-spacing: 0.06em;
}
.pack-card:not(:first-child) .pack-tag {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* --- Drawn icons -------------------------------------------------------- */
.carry-list li > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  font-size: 0;
  color: var(--muted);
}
.carry-list li > span svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.close-button {
  position: relative;
  border-radius: 999px;
  font-size: 0;
}
.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: currentColor;
}
.close-button::before {
  transform: rotate(45deg);
}
.close-button::after {
  transform: rotate(-45deg);
}
.menu-button {
  position: relative;
  font-size: 0;
}
.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 240ms cubic-bezier(0.22, 0.72, 0.25, 1);
}
.menu-button::before {
  transform: translateY(-4px);
}
.menu-button::after {
  transform: translateY(4px);
}
.menu-button[aria-expanded="true"]::before {
  transform: rotate(45deg);
}
.menu-button[aria-expanded="true"]::after {
  transform: rotate(-45deg);
}
.scroll-top {
  font-size: 0;
  display: grid;
  place-items: center;
}
.scroll-top::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3.2M3.8 7.4 8 3.2l4.2 4.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3.2M3.8 7.4 8 3.2l4.2 4.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* --- Quiet corrections --------------------------------------------------- */
.pack-option > span,
.refer-input-row input,
.gallery-controls button {
  border-color: #c0bbad;
}
.faq-list summary {
  transition: color 180ms cubic-bezier(0.22, 0.72, 0.25, 1);
}
.faq-list summary:hover {
  color: var(--muted);
}
.pack-card {
  transition:
    border-color 200ms cubic-bezier(0.22, 0.72, 0.25, 1),
    box-shadow 200ms cubic-bezier(0.22, 0.72, 0.25, 1);
}
.pack-card:hover {
  border-color: #cfcabb;
  box-shadow: 0 14px 30px -26px rgb(40 38 25 / 0.5);
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-copy {
    width: min(50%, 480px);
  }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero-copy {
    width: 100%;
    text-align: center;
  }
  .hero h1 {
    margin-left: 0;
    text-align: center;
  }
  .hero-sweep {
    align-items: center;
  }
  .hero-note {
    order: 6;
    max-width: none;
    text-align: center;
    border-top: 0;
    padding-top: 0;
  }
  .motion-toggle {
    order: 7;
    margin-top: 0;
  }
  .pack-card > img {
    aspect-ratio: 1;
    margin: 0;
  }
  .pack-tag {
    font-size: 10px;
  }
  .section,
  .story,
  .routine,
  .refer,
  .shop {
    padding-block: clamp(48px, 11vw, 72px);
  }
  .photo-journal {
    padding-block: 0 clamp(48px, 11vw, 72px);
  }
}

/* ==========================================================================
   Hero headline and supporting copy
   The three words run as one line on desktop and stack on phones. Sizes are
   held below what the column can carry so the line never crowds its own edge.
   ========================================================================== */

.hero-copy {
  width: min(48%, 600px);
}
.hero-sweep {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
}
.hero h1 {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.08;
  margin-bottom: 0;
}

/* One measure governs the paragraph and the rule above the terms, so the
   hairline lands on the same right edge the copy reads to. */
.hero-copy > p:not(.hero-note) {
  max-width: 400px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
.hero .wave-button {
  margin-top: 32px;
  gap: 22px;
}
.hero-secondary {
  margin-top: 16px;
  gap: 12px;
}
.hero-note {
  max-width: 400px;
  margin-top: 28px;
  padding-top: 18px;
  font-size: 12px;
  line-height: 1.75;
}
.hero-note [data-pack-price] {
  color: var(--ink);
  font-weight: 500;
}
.motion-toggle {
  margin-top: 10px;
  opacity: 0.75;
  transition: opacity 180ms cubic-bezier(0.22, 0.72, 0.25, 1);
}
.motion-toggle:hover {
  opacity: 1;
}

@media (min-width: 761px) and (max-width: 980px) {
  .hero-copy {
    width: min(54%, 520px);
  }
  .hero h1 {
    font-size: clamp(34px, 4.6vw, 44px);
  }
  .hero-copy > p:not(.hero-note) {
    font-size: 16px;
    margin-top: 20px;
  }
  .hero .wave-button {
    margin-top: 26px;
  }
}

@media (max-width: 760px) {
  .hero-copy {
    width: 100%;
  }
  /* Stacked: one word per line, centred under the photograph. */
  .hero-sweep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.14em;
    white-space: normal;
  }
  .hero-sweep-word:last-child {
    grid-column: auto;
    justify-self: auto;
  }
  .hero h1 {
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: 1.05;
  }
  .hero-copy > p:not(.hero-note) {
    max-width: 34ch;
    margin: 20px auto 0;
    font-size: 15px;
    text-align: center;
  }
  .hero .wave-button {
    margin-top: 0;
  }
  .hero-secondary {
    margin-top: 0;
  }
  .hero-note {
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    font-size: 12px;
  }
  .motion-toggle {
    margin-top: 0;
  }
}

/* 420px is where the paragraph resolves to two full lines instead of three
   with a two-word orphan; the terms rule shares the measure so both edges
   land together. */
.hero-copy > p:not(.hero-note),
.hero-note {
  max-width: 420px;
}
@media (max-width: 760px) {
  .hero-copy > p:not(.hero-note) {
    max-width: 34ch;
  }
  .hero-note {
    max-width: none;
  }
  /* Clear the wave under "Swipe." from the cap height of "Glow." */
  .hero-sweep {
    gap: 0.22em;
  }
}

/* ==========================================================================
   First-viewport fit and formula legibility
   ========================================================================== */

/* The benefit ticker has to clear the fold, so the hero is sized to the space
   left after the announcement, the header and the ticker itself. */
.hero {
  min-height: min(700px, calc(100svh - 200px));
  padding-block: clamp(36px, 4vw, 56px) clamp(44px, 5vw, 68px);
}
.hero-image {
  width: 42%;
}

/* The intro and the peptide tabs carry the page's densest information; they
   were the smallest type on the section. */
.formula-copy > p:not(.fine) {
  font-size: 17px;
  line-height: 1.6;
  max-width: 46ch;
}
.ingredient-tabs {
  gap: 24px;
}
.ingredient-tabs button {
  font-size: 15px;
}
.ingredient-panel h3 {
  font-size: clamp(21px, 1.7vw, 25px);
}
.ingredient-panel p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 48ch;
}

@media (max-width: 1100px) {
  .ingredient-tabs {
    gap: 18px;
  }
  .ingredient-tabs button {
    font-size: 14px;
  }
}
@media (max-width: 760px) {
  .hero {
    min-height: 0;
  }
  .hero-image {
    width: 100%;
  }
  .formula-copy > p:not(.fine) {
    font-size: 16px;
  }
  .ingredient-tabs {
    gap: clamp(12px, 4vw, 22px);
  }
  .ingredient-tabs button {
    font-size: 14px;
  }
  .ingredient-panel p {
    font-size: 15px;
  }
}

/* A little more headroom so the ticker clears the fold on a 900px viewport
   rather than landing flush against it. */
.hero {
  min-height: min(690px, calc(100svh - 215px));
}
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding-block: 24px 32px;
    gap: 12px;
  }
  .hero-image {
    height: 270px;
  }
}
.hero-image {
  width: 40%;
}
@media (max-width: 760px) {
  .hero-image {
    width: 100%;
  }
}

/* ==========================================================================
   Phone
   The page was a desktop layout squeezed down: photographs inset inside
   gutters, a clipped static ticker, and pack cards folded into two cramped
   columns. On a 390px screen the photography should run edge to edge, the
   ticker should move, and every card should get its own moment.
   ========================================================================== */

/* The ticker loops instead of clipping a word at the edge. Two identical
   tracks slide together; when the first has travelled its own width the
   second is exactly where it started, so the seam never shows. */
.ribbon-track {
  display: contents;
}
@keyframes ribbon-marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 760px) {
  /* --- Announcement: readable rather than squeezed to one line --------- */
  .announcement {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    padding: 10px 20px;
  }

  /* --- Hero: the product fills the phone ------------------------------ */
  .hero {
    padding-block: 22px 34px;
    gap: 20px;
  }
  .hero-image {
    /* Out of the gutters: a 390px-wide photograph, not a thumbnail. */
    width: 100vw;
    margin-inline: calc(var(--gutter) * -1);
    height: clamp(300px, 88vw, 360px);
    background: var(--photo);
  }
  .hero-image img {
    object-fit: cover;
    object-position: center 47%;
    mix-blend-mode: multiply;
  }
  .hero .wave-button {
    align-self: stretch;
    min-height: 68px;
  }

  /* --- Ticker: a real marquee ------------------------------------------ */
  .benefit-ribbon {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding-inline: 0;
    gap: 0;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 24px,
      #000 calc(100% - 24px),
      transparent
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 24px,
      #000 calc(100% - 24px),
      transparent
    );
  }
  .ribbon-track {
    display: flex;
    align-items: center;
    flex: none;
    gap: 0;
    animation: ribbon-marquee 30s linear infinite;
    will-change: transform;
  }
  .ribbon-track span {
    gap: 0;
    padding-inline: 18px;
  }
  /* A separator after every item, so the loop reads continuously. */
  .ribbon-track span::after {
    content: "✳";
    font-size: 13px;
    margin-left: 18px;
    color: var(--muted);
  }
  .benefit-ribbon span + span::before {
    content: none;
  }

  /* --- Packs: one card, one moment ------------------------------------- */
  .pack-grid {
    gap: 14px;
  }
  .pack-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
  }
  .pack-card-head {
    min-height: 0;
  }
  .pack-card h3 {
    font-size: clamp(26px, 8vw, 32px);
  }
  .pack-card > img {
    /* The render fills the card's width instead of sharing a row with the
       heading at thumbnail size. */
    width: calc(100% + 40px);
    max-width: none;
    margin: 16px -20px;
    aspect-ratio: 5 / 4;
    border-radius: 0;
  }
  .pack-caption {
    margin: 0 0 16px;
    text-align: left;
  }
  .pack-add {
    min-height: 56px;
  }

  /* --- Photography runs to the edges ----------------------------------- */
  .benefits-image img,
  .carry figure img,
  .demo-media {
    width: 100vw;
    margin-inline: calc(var(--gutter) * -1);
    max-width: none;
    border-radius: 0;
  }
  .benefits-image img,
  .carry figure img {
    aspect-ratio: 4 / 5;
  }
  .demo-media video {
    aspect-ratio: 4 / 5;
  }
  .benefits-image figcaption,
  .carry figcaption {
    padding-top: 12px;
  }

  /* --- Formula gallery: no grey letterbox ------------------------------ */
  .formula-photo .gallery-stage {
    height: auto;
    aspect-ratio: 4 / 3;
    background: transparent;
    width: 100vw;
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }
  .formula-photo .gallery-stage img {
    object-fit: cover;
    mix-blend-mode: normal;
  }
  .gallery-controls {
    justify-content: flex-start;
  }

  /* --- Pack picker: three rows beat three cramped columns -------------- */
  .pack-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .pack-option > span {
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 60px;
    padding: 14px 16px;
  }
  .pack-option input:checked + span {
    padding: 14px 16px;
  }
  .pack-option strong {
    font-size: var(--fs-sm);
  }
  .pack-option .pack-detail {
    grid-column: 1;
    grid-row: 2;
  }

  /* --- Pairings: even cells -------------------------------------------- */
  .pairing-grid h3 {
    min-height: 0;
    font-size: 20px;
  }
  .pairing-grid article {
    padding: 18px 14px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track {
    animation: none;
  }
  .benefit-ribbon {
    overflow-x: auto;
    scrollbar-width: none;
  }
}
@media (max-width: 760px) {
  /* The card is centred on desktop; the caption should not break ranks. */
  .pack-caption {
    text-align: center;
  }
  /* Keep the balm top off the crop line. */
  .hero-image img {
    object-position: center 26%;
  }
}
@media (max-width: 760px) {
  /* Tall enough that the whole stick survives the crop, cap to yellow base.
     The CTA sits below the fold either way on a 844px phone, so the hero is
     tuned for the product rather than for a few pixels of button. */
  .hero-image {
    height: min(120vw, 468px);
  }
  .hero-image img {
    object-position: center 50%;
  }
}

/* The second track exists only so the phone marquee can loop. Above the
   phone breakpoint the ticker is a static centred row, so the duplicate must
   not render or it doubles the row's width and overflows the page. */
.benefit-ribbon > .ribbon-track[aria-hidden="true"] {
  display: none;
}
@media (max-width: 760px) {
  .benefit-ribbon > .ribbon-track[aria-hidden="true"] {
    display: flex;
  }
}

/* ==========================================================================
   Section order now matches the previous homepage, which puts the sage
   routine band directly against the yellow benefits band. A wave is filled
   with the colour of the section it bleeds in from, so that boundary needs
   one wave, not two.
   ========================================================================== */
.story > .wave-top {
  display: none;
}
.routine > .wave-bottom {
  fill: var(--yellow);
}

/* ==========================================================================
   Phone hero
   Three stacked words ate the first screen and pushed the product below it.
   The lockup runs on one line, the promise sits above the photograph, and the
   photograph keeps the stick whole from cap to yellow base.
   ========================================================================== */
@media (max-width: 760px) {
  .hero {
    padding-block: 20px 34px;
    gap: 16px;
  }

  /* One line. 8.97em of advance at this tracking, against 346px of column at
     390px wide, is what caps the size at 9vw. */
  .hero h1 {
    grid-row: 1;
    font-size: clamp(26px, 9vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0;
  }
  .hero-sweep {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.22em;
    white-space: nowrap;
  }

  /* The promise reads before the product, not after it. */
  .hero-copy > p:not(.hero-note) {
    grid-row: 2;
    max-width: 32ch;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
  }

  /* 5/6 is the source's own 4/5 given 4% of headroom, so cover trims a few
     pixels top and bottom and never cuts the cap or the base. */
  .hero-image {
    grid-row: 3;
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 5 / 6;
    margin: 4px 0 0;
    transform: translateX(-50%);
    background: var(--photo);
  }
  .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    mix-blend-mode: multiply;
  }

  .hero .wave-button {
    grid-row: 4;
    align-self: stretch;
    margin-top: 6px;
    min-height: 66px;
  }
  .hero-secondary {
    grid-row: 5;
  }
  .hero-note {
    grid-row: 6;
  }

  /* Same full-bleed technique for the rest of the photography, so it holds
     whatever the section's own padding is. */
  .benefits-image img,
  .carry figure img,
  .demo-media,
  .formula-photo .gallery-stage {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-inline: 0;
    transform: translateX(-50%);
  }
}

/* A 100vw child inside a `1fr` track sets that track's automatic minimum to
   its own width, so the track grows past the page and shifts every sibling.
   minmax(0, 1fr) lets the track shrink below its content, which is what makes
   the full-bleed photography safe inside these grids. */
@media (max-width: 760px) {
  .benefits-layout,
  .routine-layout,
  .carry,
  .formula,
  .refer,
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero,
  .story,
  .routine,
  .carry,
  .formula {
    overflow-x: clip;
  }
}

/* The phone rules set `.wave { height: 35px }` after `.wave-header`, so the
   header's wave inherited the section height and hung 35px into the hero,
   painting cream over the top of the headline (it sits inside the sticky
   header's stacking context, so it wins). Restore its own height and give the
   headline clearance beneath it. */
@media (max-width: 760px) {
  .wave-header {
    height: 14px;
  }
  .hero {
    padding-top: 28px;
  }
  /* The hero is a grid too: its single track must be allowed to shrink below
     the 100vw photograph, or every child shifts by a gutter. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Typography and spacing normalisation
   Fourteen distinct text sizes were rendering on one page, several of them
   below a legible floor, and six grids carried percentage gaps. A percentage
   row-gap on a grid whose height comes from its own content is cyclic: the
   gap paints but the rows never account for it, which is how the formula
   section's last link ended up sitting on top of the next heading.
   ========================================================================== */

:root {
  --band: clamp(64px, 7vw, 104px);
  --lead: 17px;
  --body: 16px;
  --small: 14px;
  --micro: 12px;
  --label: 11px;
  --h3-lg: 26px;
  --h3-md: 24px;
  --h3: 21px;
  --col-gap: clamp(32px, 5vw, 80px);
  --row-gap: 40px;
}

/* --- Gaps: lengths, never percentages ----------------------------------- */
.formula,
.benefits-layout,
.routine-layout,
.carry,
.refer,
.faq {
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
}

/* --- Section rhythm ------------------------------------------------------ */
.section,
.story,
.routine,
.refer {
  padding-block: var(--band);
}
.shop {
  padding-block: var(--band);
}
/* These two continue the thought above them rather than starting a new one. */
.pairings,
.photo-journal {
  padding-top: 0;
}

/* --- One heading ladder --------------------------------------------------- */
.pack-card h3 {
  font-size: var(--h3-lg);
}
.ingredient-panel h3 {
  font-size: var(--h3-md);
}
.benefit-row h3,
.carry-list h3,
.pairing-grid h3,
.routine-steps h3,
.refer-steps h3,
.cart-line h3 {
  font-size: var(--h3);
  letter-spacing: -0.022em;
}
.footer-links h3 {
  font-size: var(--small);
}

/* --- One text ladder: 17 / 16 / 14 / 12 / 11 ----------------------------- */
.hero-copy > p:not(.hero-note),
.formula-copy > p:not(.fine),
.carry-copy > p,
.routine-copy > p,
.benefits-copy > p,
.refer-copy > p,
.center-heading > p {
  font-size: var(--lead);
  line-height: 1.6;
}
.ingredient-tabs button,
.ingredient-panel p,
.pairings-heading > p,
.faq-list summary,
.mobile-nav a {
  font-size: var(--body);
}
.benefit-row p,
.carry-list p,
.routine-steps p,
.refer-steps p,
.pairing-grid p,
.pack-caption,
.pack-card-head p,
.swipe-note,
.faq-list details p,
.cart-line p,
.footer-links a,
#referProgressText,
#referEarned,
.run-meter,
.closing-perks,
.signup > p {
  font-size: var(--small);
  line-height: 1.6;
}
.fine,
.hero-note,
.shop-terms,
.purchase-terms,
.pack-option .pack-detail,
.benefits-image figcaption,
.carry figcaption,
.footer-base,
.formula-standards,
.pairing-grid span,
.routine-steps li > span,
.refer-steps li > span,
.pack-tag,
.formula-photo > .fine {
  font-size: var(--micro);
}
.announcement,
.desktop-nav a,
.header-actions > a,
.benefit-ribbon,
.text-link,
.footer-brand span,
.sticky-buy {
  font-size: var(--label);
}
/* Nothing on the page renders below 11px. */
.gallery-stage > span,
.signup .fine,
.copyright {
  font-size: var(--label);
}
/* The submit glyph is an icon, not type. */
.email-row button {
  font-size: 22px;
}

/* --- Heading to copy: more space above a heading than below it ----------- */
.center-heading {
  margin-bottom: clamp(34px, 3.6vw, 52px);
}
.benefits-copy > p,
.carry-copy > p,
.routine-copy > p,
.formula-copy > p:not(.fine),
.refer-copy > p {
  margin-top: 20px;
}
.pairings-heading > p {
  max-width: 36ch;
}

@media (max-width: 980px) {
  :root {
    --row-gap: 34px;
  }
}

@media (max-width: 760px) {
  :root {
    --band: clamp(52px, 12vw, 76px);
    --lead: 16px;
    --h3-lg: 25px;
    --h3-md: 22px;
    --h3: 20px;
    --col-gap: 0px;
    --row-gap: 30px;
  }
  .center-heading {
    margin-bottom: 28px;
  }
}

/* Six controls still resolved to 10px on phones through more specific
   selectors in the earlier passes. Nothing on this page renders below 11px. */
@media (max-width: 760px) {
  .hero-secondary,
  .hero-secondary span,
  .story .text-link,
  .benefits-copy .text-link,
  .refer-input-row .button,
  .photo-journal .center-heading a,
  .footer-brand > a,
  .sticky-buy > span,
  .sticky-buy .button {
    font-size: var(--label);
  }
}
.bag-button #bagN {
  font-size: var(--label);
}

/* The gallery sat in a grey tray, so every photograph showed a letterbox band
   above and below it. The photograph is the surface now. */
.formula-photo .gallery-stage {
  background: transparent;
}
.formula-photo .gallery-stage img {
  mix-blend-mode: normal;
  border-radius: var(--radius, 10px);
}

/* Comfortable measures on the supporting copy. */
.carry-list p,
.benefit-row p,
.routine-steps p,
.refer-steps p,
.pairing-grid p {
  max-width: 46ch;
}
.ingredient-panel p {
  max-width: 50ch;
}

/* ==========================================================================
   Controls, images and section edges
   Arrows were literal glyphs pasted into copy, which is why "Back to top"
   lost its mark and why no two of them matched in weight. One drawn arrow is
   defined here and rotated per direction.
   ========================================================================== */

:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8h10M9 4.2 12.8 8 9 11.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ease: cubic-bezier(0.22, 0.72, 0.25, 1);
}

/* --- Text links ---------------------------------------------------------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: opacity 180ms var(--ease);
}
.text-link:hover {
  opacity: 0.6;
}
.text-link::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(-45deg);
  transition: transform 260ms var(--ease);
}
.text-link:hover::after {
  transform: rotate(-45deg) translateX(2px);
}
.text-link.link-down::after {
  transform: rotate(90deg);
}
.text-link.link-down:hover::after {
  transform: rotate(90deg) translateX(2px);
}
.text-link.link-up::after {
  transform: rotate(-90deg);
}
.text-link.link-up:hover::after {
  transform: rotate(-90deg) translateX(2px);
}
/* The footer link sits on yellow and had no mark at all. */
.footer-brand > a.text-link {
  min-height: 44px;
  text-decoration: none;
}

/* --- Buttons ------------------------------------------------------------- */
.button {
  border-radius: 8px;
  letter-spacing: 0.06em;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}
.button.link-up::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(-90deg);
}
/* A yellow button cannot read on a yellow field. Ink carries it, and the
   brand already pairs ink with yellow everywhere else. */
.closing-buy {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  min-height: 58px;
  padding-inline: 32px;
}
.closing-buy:hover {
  background: #2c2c26;
  border-color: #2c2c26;
  color: #fff;
}
/* The launch signup submit is an icon button, not a 30px glyph. */
.email-row {
  align-items: center;
  gap: 10px;
}
.email-row button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  font-size: 0;
  transition: background-color 180ms var(--ease);
}
.email-row button:hover {
  background: #2c2c26;
}
.email-row button::after {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--cream);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform 260ms var(--ease);
}
.email-row button:hover::after {
  transform: translateX(2px);
}
/* The floating scroll-top control. */
.scroll-top {
  display: grid;
  place-items: center;
  font-size: 0;
}
.scroll-top::after {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--ink);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(-90deg);
}

/* --- Images and their containers ---------------------------------------- */
.gallery-controls {
  justify-content: center;
}
.gallery-controls button {
  border-radius: 8px;
  transition:
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.gallery-controls img {
  border-radius: 5px;
}
.benefits-image img,
.carry figure img,
.demo-media,
.journal-grid img {
  border-radius: 10px;
}

/* --- Wave edges ---------------------------------------------------------- */
/* Rendered with preserveAspectRatio="none", so height alone sets how deep the
   crest cuts. One depth for the section edges, a shallower one for the header,
   and a hairline overlap so no seam shows at fractional zoom levels. */
.wave {
  height: 56px;
}
.wave-bottom {
  bottom: -1px;
}
.wave-top {
  top: -1px;
}
.wave-header {
  height: 18px;
}
@media (max-width: 760px) {
  .wave {
    height: 30px;
  }
  .wave-header {
    height: 14px;
  }
  .gallery-controls {
    justify-content: center;
  }
}