:root {
  --page-bg: #ffffff;
  --text: #0d1415;
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-fill: rgba(255, 255, 255, 0.2);
  --shadow-soft: 0 24px 80px rgba(9, 17, 12, 0.14);
  --shadow-phone: 0 45px 120px rgba(24, 51, 20, 0.22);
  --timing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --timing-snap: cubic-bezier(0.2, 0.9, 0.16, 1);
  --section-height: 100vh;
  --section-content-height: 95%;
  --section-snap-duration: 1100ms;
  --hero-content-width: min(calc(100vw - 2rem), 72rem);
  /* Start these right after the hero pill expands */
  --nav-delay: 1.0s;
  --ingredients-delay: 0.95s;
  --phone-delay: 1.35s;
  --hero-inset: 14px;
  --hero-radius: 16px;
  --phone-slide-x: 0px;
  --text-reveal: 0;
  --text-slide-x: -64px;
  --hero-copy-left: 3.5rem;
  --left-ingredient-blur: 0px;
  --title-lift-y: 0px;
  --desc-reveal: 0;
  --desc-slide-x: -44px;
  --cta-reveal: 0;
  --cta-slide-x: -44px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Roboto, Aspekta, "Segoe UI", system-ui, sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}