:root {
  --ink: #1b1918;
  --ink-2: #4c4540;
  --muted: #776d66;
  --line: #ece6e0;
  --bg: #ffffff;
  --bg-soft: #faf7f4;
  --coral: #ff6b57;
  --coral-ink: #c2412f;
  --peach: #fff0ea;
  --mint: #e8f6ef;
  --butter: #fff5e1;
  --lilac: #f1edfb;
  --radius-lg: 32px;
  --radius-md: 20px;
  --gutter: 20px;
  --max: 1120px;
  font-family:
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

h1 {
  font-size: clamp(40px, 7.4vw, 76px);
}

h2 {
  font-size: clamp(30px, 4.8vw, 52px);
}

h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

h2 em {
  font-style: normal;
  color: var(--coral);
}

p {
  margin: 0;
  line-height: 1.6;
}

.sub,
.lead {
  color: var(--muted);
  font-size: clamp(16px, 1.8vw, 19px);
  margin-top: 16px;
}

.lead {
  font-size: clamp(17px, 2vw, 21px);
}

.eyebrow {
  color: var(--coral);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}

.br-mobile {
  display: none;
}

/* Slot still waiting on a teammate (the intro video). Remove once it is filled. */
.todo {
  border: 2px dashed var(--coral);
  color: var(--coral-ink);
  background: #fff7f5;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
}

.todo::before {
  content: "TODO · ";
  font-weight: 500;
  opacity: 0.75;
}

.todo--block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 140px;
  padding: 24px;
  margin: 40px auto 0;
  max-width: var(--max);
  text-align: center;
}

.todo--block small {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}

/* Nav */
.nav {
  position: sticky;
  top: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(560px, calc(100% - 2 * var(--gutter)));
  margin: 12px auto 0;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 25, 24, 0.06);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  transition: box-shadow 0.3s ease;
}

.nav.is-scrolled {
  box-shadow: 0 8px 30px rgba(27, 25, 24, 0.08);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.nav__brand img {
  border-radius: 7px;
}

.nav__links {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--muted);
}

.nav__links a {
  text-decoration: none;
}

.nav__links a:hover {
  color: var(--ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition:
    scale 0.2s ease,
    background 0.2s ease;
}

.btn:active {
  scale: 0.97;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  background: #383230;
}

.btn--coral {
  background: var(--coral);
  color: #fff;
}

.btn--coral:hover {
  background: #f2583f;
}

.btn--sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

.pill {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 107, 87, 0.25);
  color: var(--coral-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Hero */
.hero {
  margin-top: -64px;
  padding: 140px var(--gutter) 0;
  text-align: center;
  background:
    radial-gradient(60% 50% at 20% 10%, #ffe1d6 0%, transparent 70%),
    radial-gradient(50% 45% at 85% 20%, #e3f4ec 0%, transparent 70%), linear-gradient(180deg, #fff4ef 0%, #ffffff 85%);
  overflow: hidden;
}

.hero .lead {
  margin: 22px auto 32px;
  max-width: 560px;
}

.hero__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

.hero__phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  height: clamp(360px, 52vw, 560px);
  margin-top: 56px;
  /* The phones sink past the bottom of the hero and fade into the page, so neither their
     tilted cut edges nor their shadows end on a hard line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
}

.hero__phones .phone {
  width: clamp(190px, 25vw, 270px);
  margin-bottom: -96px;
}

.phone--back {
  transform: translate(22%, -6%) rotate(-6deg);
  opacity: 0.92;
}

.phone--front {
  transform: translate(-18%, 0) rotate(3deg);
  z-index: 1;
}

/* Phone frame. Screens are cropped at the bottom so they read as "rising" out of the section. */
.phone {
  position: relative;
  aspect-ratio: 9 / 19;
  padding: 8px;
  border-radius: 44px 44px 0 0;
  /* Black bezel inside a thin titanium rim, like an iPhone 15 Pro. */
  background: #0d0c0c;
  box-shadow:
    inset 0 0 0 1.5px #77726d,
    inset 0 0 0 2.5px #2a2725,
    0 30px 60px rgba(27, 25, 24, 0.16);
  align-self: flex-end;
  height: 100%;
}

/* Side buttons: action button and volume keys on the left, the side button on the right. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #6f6a66;
}

.phone::before {
  left: -2.5px;
  top: 15%;
  height: 25%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(
    to bottom,
    #6f6a66 0 12%,
    transparent 12% 25%,
    #6f6a66 25% 58%,
    transparent 58% 67%,
    #6f6a66 67% 100%
  );
}

.phone::after {
  right: -2.5px;
  top: 24%;
  height: 14%;
  border-radius: 0 2px 2px 0;
}

.phone__screen {
  position: relative;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: #f4f1ed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* iPhone screen chrome drawn on every screen: the status bar and the Dynamic Island.
   Sizes are in iPhone points through cqw (the screen is 390pt wide). */
.phone__screen::before {
  content: "9:41";
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: 13.8cqw;
  padding-left: 11cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 12' fill='%231b1918'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9.2' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.8' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29.5 11.8l-2.3-2.7a3.5 3.5 0 0 1 4.6 0z'/%3E%3Cpath d='M24.4 5.9a7.9 7.9 0 0 1 10.2 0l-1.6 1.9a5.4 5.4 0 0 0-7 0z'/%3E%3Cpath d='M21.6 2.6a12.2 12.2 0 0 1 15.8 0l-1.6 1.9a9.7 9.7 0 0 0-12.6 0z'/%3E%3Crect x='42.5' y='.5' width='23' height='11' rx='3.4' fill='none' stroke='%231b1918' stroke-opacity='.4'/%3E%3Crect x='44.5' y='2.5' width='19' height='7' rx='1.8'/%3E%3Cpath d='M67 4v4a2 2 0 0 0 0-4z' fill-opacity='.45'/%3E%3C/svg%3E")
    no-repeat right 7cqw center / 18cqw auto;
  color: #1b1918;
  font-size: 4.3cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: none;
}

.phone__screen::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 2.8cqw;
  left: 50%;
  width: 32.3cqw;
  height: 9.5cqw;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}

/* Screenshots start below the status bar (13.8% of the screen's width). */
.phone__screen:has(> img) {
  padding-top: 13.8%;
  background: #faf6f1;
}

.shot-slot {
  margin: 12px;
  padding: 16px 10px;
  border: 2px dashed #cfc6bd;
  border-radius: 16px;
  color: #8d8279;
  font-size: 14px;
  text-align: center;
}

/* Sections */
section {
  padding: 120px var(--gutter);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

/* Proof */
.proof {
  text-align: center;
}

/* Quotes scroll sideways forever once landing.js has doubled the list. */
.marquee {
  margin: 56px calc(-1 * var(--gutter)) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.quotes {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 var(--gutter);
  text-align: left;
}

.marquee.is-ready .quotes {
  animation: marquee 36s linear infinite;
}

.marquee.is-ready:hover .quotes {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - 8px));
  }
}

.quote {
  flex: 0 0 340px;
  margin: 0;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 200px;
}

.quote blockquote {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.quote figcaption {
  color: var(--muted);
  font-size: 14px;
}

/* Survey chart. Colours passed the dataviz palette check (CVD and normal-vision separation);
   two are below 3:1 on white, so every segment also has a printed count in the legend. */
.survey {
  --s1: #eb6834;
  --s2: #1baf7a;
  --s3: #eda100;
  --s4: #2a78d6;
  max-width: 880px;
  margin: 56px auto 0;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  text-align: left;
}

.survey__title {
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 17px;
}

.survey__bar {
  display: flex;
  gap: 2px;
  height: 28px;
}

.survey__seg {
  flex: var(--n) 1 0;
  min-width: 0;
  border-radius: 4px;
  cursor: default;
  transform-origin: left center;
  transition: opacity 0.2s ease;
}

.survey__bar:hover .survey__seg:not(:hover) {
  opacity: 0.45;
}

.s1 {
  background: var(--s1);
}

.s2 {
  background: var(--s2);
}

.s3 {
  background: var(--s3);
}

.s4 {
  background: var(--s4);
}

.survey__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
}

.survey__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.survey__legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.survey__tip {
  min-height: 1.6em;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.survey__table summary {
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.survey__table table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 14px;
}

.survey__table th,
.survey__table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}

.survey__table thead th {
  color: var(--muted);
  font-size: 13px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 16px auto 0;
  text-align: left;
}

.stat {
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.stat__num {
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat__meter {
  height: 8px;
  margin: 16px 0 18px;
  border-radius: 999px;
  background: #ece4dd;
  overflow: hidden;
}

.stat__meter i {
  display: block;
  width: var(--to);
  height: 100%;
  border-radius: inherit;
  background: var(--coral);
}

.stat h3 {
  font-size: 17px;
  line-height: 1.4;
}

.stat__base {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.proof__note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
}

/* Meal story: four wide cards, one step each (bevel.health's Intelligence cards). */
.story-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
}

.story-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 580px;
  padding: 0 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.story-card--peach {
  background: var(--peach);
}

.story-card--mint {
  background: var(--mint);
}

.story-card--butter {
  background: var(--butter);
}

.story-card--lilac {
  background: var(--lilac);
}

.story-card__copy {
  align-self: center;
  padding: 72px 0;
}

.story-card__step {
  color: var(--coral);
  font-size: 15px;
  font-weight: 700;
}

.story-card__step b {
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

.story-card h3 {
  margin-top: 14px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.story-card__copy > p:last-child {
  max-width: 420px;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
}

.story-card__visual {
  position: relative;
}

/* The phone rises from the bottom edge of the card, cropped like the other phones. */
.story-card__phone {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 300px;
  height: calc(100% - 56px);
  aspect-ratio: auto;
  translate: -50% 0;
  box-shadow: 0 30px 60px rgba(27, 25, 24, 0.14);
}

/* One piece of the screen pulled out over the phone's edge; it drifts up as the card passes. */
.story-float {
  position: absolute;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fffefb;
  box-shadow: 0 18px 40px rgba(27, 25, 24, 0.14);
  color: var(--ink);
}

.story-float small {
  display: block;
  color: #76675a;
  font-size: 13px;
}

.story-float--foods {
  top: 22%;
  left: calc(50% - 230px);
}

.story-float--foods p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.story-float--foods span {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f4e8e4;
  color: #7a4a42;
  font-size: 15px;
  font-weight: 700;
}

.story-float--note {
  top: 76%;
  left: calc(50% - 250px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-float__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0a63a;
  box-shadow: 0 0 0 5px #fff6e0;
}

.story-float--note b {
  display: block;
  color: #9a6200;
  font-size: 17px;
}

.story-float--note p {
  color: var(--ink-2);
  font-size: 14px;
}

.story-float--reply {
  top: 30%;
  left: calc(50% - 250px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
}

.story-float--reply .app-avatar {
  --u: 1.1px;
  background: #eedfdb;
}

/* Card 4's question sits where the chat's own bubble is, reaching past the phone like Bevel's. */
.story-float--ask {
  top: 104px;
  right: calc(50% - 190px);
  max-width: 260px;
  padding: 14px 20px;
  border-radius: 22px 22px 6px 22px;
  background: #8a4e44;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.story-card .bubble--me {
  min-height: calc(96 * var(--u));
  opacity: 0 !important;
}

.story-card__baby {
  position: absolute;
  right: -12px;
  bottom: 0;
  z-index: 2;
  width: 150px;
  height: auto;
}

/* More grid */
.more-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

.more-grid svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 16px;
}

.more-grid h3 {
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.more-grid p {
  margin-top: 6px;
  color: var(--muted);
}

.badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mint);
  color: #1d7a5a;
}

/* Privacy */
.privacy {
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px 64px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #f6efe9;
}

.privacy p {
  margin-top: 16px;
  color: #b8ada4;
  font-size: 18px;
}

.link-arrow {
  display: inline-block;
  margin-top: 28px;
  color: #ff8f70;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: " →";
  transition: margin 0.2s ease;
}

.link-arrow:hover::after {
  margin-left: 4px;
}

/* Beta */
.beta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
}

.beta__card {
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  background: var(--peach);
  text-align: center;
}

.beta__baby {
  width: 140px;
  height: auto;
  margin: 0 auto 20px;
}

.team__baby {
  width: 150px;
  height: auto;
  margin: 0 auto 16px;
}

.beta__card .sub {
  margin: 16px auto 28px;
  max-width: 400px;
}

.stores {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.store--soon {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px dashed #d8c8bd;
  color: var(--muted);
  font-size: 13px;
}

.video-slot .todo--video {
  height: 100%;
  min-height: 320px;
  margin: 0;
  border-radius: var(--radius-lg);
}

/* Team */
.team-groups {
  display: grid;
  gap: 56px;
  max-width: var(--max);
  margin: 0 auto;
}

.team-group__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 0 24px;
  font-size: 20px;
  text-align: center;
}

.team-group__title span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.team-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 16px;
  text-align: center;
}

.team-grid li {
  width: calc((100% - 48px) / 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border: 2px dashed #d8cec6;
}

.team-grid strong {
  font-size: 17px;
}

.team-grid span:last-child {
  color: var(--muted);
  font-size: 14px;
}

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
}

.footer__brand img {
  border-radius: 6px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--ink);
}

/* Instagram as an app-icon-style button: the platform's gradient, a white glyph, a small lift on hover. */
.social {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(214, 41, 118, 0.22);
  transition:
    translate 0.2s ease,
    rotate 0.2s ease,
    box-shadow 0.2s ease;
}

.social--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.social .social__dot {
  fill: currentColor;
  stroke: none;
}

.footer__links .social:hover {
  color: #fff;
  translate: 0 -2px;
  rotate: -6deg;
  box-shadow: 0 10px 22px rgba(214, 41, 118, 0.3);
}

.social:active {
  translate: 0 0;
  rotate: 0deg;
}

.social:focus-visible {
  outline: 3px solid rgba(214, 36, 159, 0.4);
  outline-offset: 3px;
}

.footer__copy {
  margin-left: auto;
}

/* Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* GSAP drives .reveal itself; a CSS transition on the same properties would fight it. */
.has-gsap .reveal {
  transition: none;
}

/* Hero stays hidden until its intro starts (see the inline script in index.html). */
.intro-wait .hero__copy,
.intro-wait .hero__phones {
  visibility: hidden;
}

.split .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.split .line > span {
  display: inline-block;
}

/* Idle motion on the baby art. Uses the individual translate/rotate properties so GSAP can still own transform. */
.bob {
  animation: bob 3.4s ease-in-out infinite;
}

.wiggle {
  transform-origin: 50% 90%;
  animation: wiggle 2.8s ease-in-out infinite;
}

@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}

@keyframes wiggle {
  0%,
  100% {
    rotate: -3deg;
  }
  50% {
    rotate: 3deg;
  }
}

@keyframes typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    translate: 0 0;
  }
  30% {
    opacity: 1;
    translate: 0 -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee {
    overflow-x: auto;
  }

  .marquee.is-ready .quotes,
  .bob,
  .wiggle {
    animation: none;
  }

  .social {
    transition: none;
  }
}

/* App screens drawn in HTML. Sizes are in app points: --u is 1/390 of the screen width. */
.app {
  --u: calc(100cqw / 390);
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  /* Content starts below the status bar. */
  padding: calc(66 * var(--u)) calc(20 * var(--u)) 0;
  background: #faf6f1;
  color: #1f1a18;
  font-size: calc(15 * var(--u));
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: left;
}

.app p {
  margin: 0;
}

/* Feed post screens. Values follow the app's visualTheme and PostCard / PostNutritionPage / CommentsSheet. */
.app--post {
  /* Drawn a little larger than a 390pt phone so the small type stays readable in the cards. */
  --u: calc(100cqw / 360);
  position: relative;
  gap: 0;
  padding: calc(50 * var(--u)) 0 0;
  background: #faf7f2;
  color: #231a16;
  font-size: calc(14 * var(--u));
}

.app-icon {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  fill: none;
  stroke: #231a16;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-feedhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
}

.app-feedhead__title {
  font-size: calc(24 * var(--u));
  font-weight: 800;
  letter-spacing: -0.03em;
}

.app-feedhead__week {
  color: #76675a;
  font-size: calc(12 * var(--u));
}

.app-feedhead__week b {
  margin-right: calc(4 * var(--u));
  color: #231a16;
  font-size: calc(20 * var(--u));
  font-weight: 800;
}

.app-count {
  margin-left: calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
}

.app-author--next {
  margin-top: calc(24 * var(--u));
}

/* A words-only post: a quiet typographic square instead of a photo. */
.app-words {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(10 * var(--u));
  height: calc(300 * var(--u));
  padding: calc(28 * var(--u));
  background: #f4e8e4;
}

.app-words small {
  color: #8a4e44;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}

.app-words p {
  color: #7a4a42;
  font-size: calc(24 * var(--u));
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.app-author {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(58 * var(--u));
  padding: 0 calc(4 * var(--u)) 0 calc(14 * var(--u));
}

.app-author p {
  flex: 1;
  min-width: 0;
  font-size: calc(14 * var(--u));
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.app-author b {
  font-weight: 700;
}

.app-author p > span {
  color: #76675a;
  font-weight: 500;
}

.app-author small {
  display: block;
  color: #76675a;
  font-size: calc(12 * var(--u));
}

.app-more {
  width: calc(44 * var(--u));
  height: calc(22 * var(--u));
  stroke-width: 2.4;
}

.app-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  background: #f4e8e4;
  color: #7a4a42;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}

.app-photo {
  position: relative;
  height: calc(262 * var(--u));
  overflow: hidden;
  background: #f3ece4;
}

.phone__screen .app-photo img {
  object-position: center;
}

/* Only the intro timeline shows the scan; the finished screen has none. */
.app-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 254, 251, 0.6) 50%, transparent 70%);
}

.app-scan__label {
  position: absolute;
  left: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  opacity: 0;
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  background: rgba(35, 26, 22, 0.62);
  color: #fff;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}

.app-actions {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(50 * var(--u));
  padding: 0 calc(16 * var(--u));
}

.app-dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
}

.app-dots i {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #e9e0d5;
}

.app-dots i.is-on {
  width: calc(16 * var(--u));
  background: #8a4e44;
}

.app-body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: 0 calc(14 * var(--u));
}

.app-caption {
  font-size: calc(14 * var(--u));
  line-height: 1.5;
}

.app-caption b {
  display: block;
  font-weight: 700;
}

.app-facts {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(2 * var(--u));
}

.app-kcal {
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.app-kcal b {
  font-size: calc(22 * var(--u));
  font-weight: 800;
  letter-spacing: -0.03em;
}

.app-kcal small {
  color: #5c4d43;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}

.app-kcal span {
  margin-left: calc(10 * var(--u));
  color: #76675a;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}

.app-link {
  color: #7a4a42;
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

.app-link::after {
  content: " ›";
}

.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
}

.app-tags span {
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  line-height: calc(17 * var(--u));
  font-weight: 700;
}

.app--post .good {
  --tone: #1f7a55;
}

.app--post .caution {
  --tone: #9a6200;
}

.app-tags span {
  color: var(--tone);
}

.app-tags .good {
  background: #e9f7f0;
}

.app-tags .caution {
  background: #fff6e0;
}

/* The post's second page: score, macro split and one row per nutrient, in the photo's square. */
.app-nutri {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  height: calc(360 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  background: #fffefb;
}

.app-nutri__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.app-nutri small {
  display: block;
  color: #76675a;
  font-size: calc(12 * var(--u));
}

.app-score {
  color: #231a16;
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.app-score b {
  margin-right: calc(3 * var(--u));
  color: #8a4e44;
  font-size: calc(38 * var(--u));
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.app-nutri__kcal b {
  font-size: calc(20 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.app-nutri__kcal small {
  display: inline;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}

.app-macro {
  display: flex;
  gap: calc(2 * var(--u));
  height: calc(8 * var(--u));
  overflow: hidden;
  border-radius: 999px;
  background: #f3ece4;
}

.app-macro i {
  display: block;
  width: var(--to);
  height: 100%;
}

.app-macro i:first-child {
  border-radius: 999px 0 0 999px;
}

.app-macro i:last-child {
  border-radius: 0 999px 999px 0;
}

.carbs {
  background: #8b7cf6;
}

.protein {
  background: #4c8df6;
}

.fat {
  background: #5ed6cb;
}

.app-legend {
  display: flex;
  gap: calc(12 * var(--u));
  color: #5c4d43;
  font-size: calc(12 * var(--u));
  font-weight: 600;
}

.app-legend i {
  display: inline-block;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  margin-right: calc(5 * var(--u));
  border-radius: 50%;
}

.app-rows {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid #e9e0d5;
}

.app-rows p {
  display: grid;
  grid-template-columns: calc(46 * var(--u)) 1fr calc(58 * var(--u)) calc(66 * var(--u));
  align-items: center;
  gap: calc(10 * var(--u));
}

.app-rows span {
  color: #231a16;
  font-size: calc(14 * var(--u));
  font-weight: 600;
}

/* The track fills to --to in the row's tone; landing.js tweens --to from 0%. */
.app-rows i {
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background:
    linear-gradient(var(--tone), var(--tone)) no-repeat left / var(--to) 100%,
    #f3ece4;
}

.app-rows em {
  color: #5c4d43;
  font-size: calc(13 * var(--u));
  font-style: normal;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app-rows b {
  color: var(--tone);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  text-align: right;
}

/* Comments sheet over the post. */
.app-dim {
  position: absolute;
  inset: 0;
  background: rgba(35, 26, 22, 0.45);
}

.app-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: calc(14 * var(--u));
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: #fffefb;
}

.app-sheet__grabber {
  display: block;
  width: calc(40 * var(--u));
  height: calc(4 * var(--u));
  margin: calc(10 * var(--u)) auto calc(12 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #e9e0d5;
}

.app-sheet__title {
  padding-bottom: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  text-align: center;
}

.app-thread {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  padding: 0 calc(20 * var(--u)) calc(14 * var(--u));
}

.app-reply {
  display: flex;
  gap: calc(12 * var(--u));
}

.app-reply .app-avatar,
.app-compose .app-avatar {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  background: #eedfdb;
}

.app-reply p {
  font-size: calc(15 * var(--u));
  line-height: 1.45;
}

.app-reply small {
  display: block;
  margin-bottom: calc(2 * var(--u));
  color: #76675a;
  font-size: calc(13 * var(--u));
}

.app-reply small b {
  color: #231a16;
}

.app-emoji {
  display: flex;
  justify-content: space-between;
  padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  border-top: 1px solid #e9e0d5;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
}

.app-compose {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(2 * var(--u)) calc(16 * var(--u)) 0;
}

.app-compose__field {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid #e9e0d5;
  border-radius: calc(22 * var(--u));
  background: #faf7f2;
  color: #a3968a;
  font-size: calc(15 * var(--u));
}

.app--chat {
  gap: calc(10 * var(--u));
}

.app__chip {
  align-self: flex-start;
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: #f1e4de;
  color: #7b4a40;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}

.bubble {
  max-width: 84%;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  font-size: calc(14.5 * var(--u));
  line-height: 1.5;
}

.bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: calc(6 * var(--u));
  background: #8a5246;
  color: #fff;
}

.bubble--ai,
.bubble--typing {
  align-self: flex-start;
  border-bottom-left-radius: calc(6 * var(--u));
  border: 1px solid #eee3da;
  background: #fff;
}

.bubble--typing {
  display: none;
  gap: calc(4 * var(--u));
}

.bubble--typing.is-on {
  display: flex;
}

.bubble--typing i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #bfb2a9;
  animation: typing 1s infinite;
}

.bubble--typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.bubble--typing i:nth-child(3) {
  animation-delay: 0.3s;
}

/* AI care's suggested questions, as in AiChatScreen. */
.app-suggest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin-top: auto;
  padding-bottom: calc(20 * var(--u));
}

.app-suggest small {
  color: #8a7e76;
  font-size: calc(12 * var(--u));
  font-weight: 700;
}

.app-suggest span {
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border: 1px solid #eee3da;
  border-radius: 999px;
  background: #fff;
  color: #7b4a40;
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
}

/* Tablet */
@media (max-width: 960px) {
  .story-card {
    padding: 0 40px;
  }

  /* Here the phone sits inside its card and is cut by the card's bottom edge;
     fade its lower part into the card instead, as the hero phones do. */
  .story-card__phone {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }

  .more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy {
    margin: 0 var(--gutter);
    padding: 64px 32px;
  }

  .beta {
    grid-template-columns: minmax(0, 1fr);
  }

  .br-desktop {
    display: none;
  }
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .survey,
  .stat {
    padding: 22px 20px;
  }

  .story-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0 28px;
  }

  .story-card__copy {
    padding: 40px 0 0;
  }

  .story-card__visual {
    height: 480px;
  }

  .story-card__phone {
    top: 36px;
    width: 270px;
    height: calc(100% - 36px);
  }
}

/* Phone */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --radius-lg: 26px;
  }

  section {
    padding: 88px var(--gutter);
  }

  .nav__links {
    display: none;
  }

  .br-mobile {
    display: inline;
  }

  .hero {
    padding-top: 120px;
  }

  .hero__phones {
    height: 360px;
    margin-top: 44px;
  }

  .hero__phones .phone {
    width: 180px;
    margin-bottom: -64px;
  }

  .marquee {
    margin-top: 40px;
  }

  .quote {
    flex-basis: 270px;
    min-height: 180px;
    padding: 24px;
  }

  .quote blockquote {
    font-size: 18px;
  }

  .story-card {
    padding: 0 20px;
  }

  .story-card__copy {
    padding-top: 36px;
  }

  .story-card__copy > p:last-child {
    font-size: 16px;
  }

  .story-card__visual {
    height: 440px;
  }

  .story-card__phone {
    width: 240px;
  }

  .story-float {
    padding: 10px 12px;
    border-radius: 16px;
  }

  .story-float--foods,
  .story-float--note,
  .story-float--reply {
    left: -4px;
  }

  .story-float--foods span,
  .story-float--reply {
    font-size: 14px;
  }

  .story-float--note b {
    font-size: 15px;
  }

  .story-float--ask {
    top: 76px;
    right: -4px;
    max-width: 210px;
    font-size: 15px;
  }

  .story-card__baby {
    width: 96px;
    right: -16px;
  }

  .more-grid {
    gap: 36px 20px;
  }

  .more-grid h3 {
    font-size: 17px;
    flex-wrap: wrap;
  }

  .privacy {
    padding: 52px 24px;
  }

  .privacy p {
    font-size: 16px;
  }

  .beta__card {
    padding: 40px 24px;
  }

  .video-slot .todo--video {
    min-height: 220px;
  }

  .team-groups {
    gap: 44px;
  }

  .team-grid li {
    width: calc((100% - 16px) / 2);
  }

  .avatar {
    width: 96px;
    height: 96px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__copy {
    margin-left: 0;
  }
}

/* Story stage. On narrow screens it is just the card's visual box. */
.story-stage {
  position: absolute;
  inset: 0;
}

/* Wide screens: as on bevel.health, each card clips a phone fixed to the middle of the screen,
   so one phone seems to stay put and travel down while the cards slide past and its screen
   changes at each card's edge. clip-path (not overflow) is what clips a fixed child. */
@media (min-width: 961px) {
  .story-list {
    gap: 12px;
  }

  .story-card {
    min-height: 680px;
    clip-path: inset(0 round var(--radius-lg));
  }

  .story-card__visual {
    position: static;
  }

  .story-stage {
    --phone-h: min(600px, 84vh);
    position: fixed;
    inset: auto;
    top: 50%;
    left: calc(50% + min(var(--max), 100% - 2 * var(--gutter)) / 4 - 32px);
    width: calc(var(--phone-h) * 9 / 17);
    height: var(--phone-h);
    translate: -50% -50%;
    pointer-events: none;
  }

  .story-stage .story-card__phone {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 9px;
    border-radius: 46px;
    translate: none;
  }

  .story-stage .phone__screen {
    border-radius: 37px;
  }

  /* Whole phones here, so the home indicator shows too. */
  .story-stage .app {
    position: relative;
  }

  .story-stage .app::after {
    content: "";
    position: absolute;
    z-index: 5;
    bottom: calc(8 * var(--u));
    left: 50%;
    width: calc(134 * var(--u));
    height: calc(5 * var(--u));
    translate: -50% 0;
    border-radius: 999px;
    background: #1b1918;
  }

  .story-stage .story-float--foods {
    top: 24%;
    left: -120px;
  }

  .story-stage .story-float--note {
    top: 66%;
    left: -150px;
  }

  .story-stage .story-float--reply {
    top: 24%;
    left: -170px;
  }

  .story-stage .story-float--ask {
    top: 62px;
    right: -80px;
    padding: 12px 18px;
    font-size: 16px;
  }

  .story-stage .story-card__baby {
    right: -120px;
    bottom: -10px;
  }
}