/* ==========================================================================
   Soulplates — waitlist site
   Colours, type and shapes come from the app (prototype tokens.css), plus one
   warm neutral, oat, for the food photography. Light only.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  --ink: #0b0b0b;
  --ink-soft: #2c2c2e;
  --grey: #6e6e73;          /* secondary text: one step darker than the app's grey, for AA on the web */
  --grey-app: #8e8e93;      /* the app's own grey, only inside app mock-ups */
  --hairline: #e5e5ea;
  --card: #fff;
  --light: #f5f5f7;
  --wash-top: #fcfcfd;
  --wash-bottom: #ededf1;
  --oat: #f4efe8;

  --sage: #7ec896;          /* lines, rings, big numbers, dark sections */
  --sage-ink: #34794a;      /* green text on light surfaces */
  --sage-soft: rgba(126, 200, 150, 0.16);
  --amber: #d9912e;         /* "worth watching" */
  --amber-ink: #aa5c16;
  --amber-soft: rgba(217, 145, 46, 0.14);
  --orange: #ff9f0a;        /* the app's streak flame */
  --graphite: linear-gradient(135deg, #161619, #28282e);

  --font-display: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);   /* the app's spring */
  --shadow-float: 0 2px 6px rgba(15, 15, 25, 0.05), 0 24px 60px -18px rgba(15, 15, 25, 0.28);

  --gutter: 20px;
  --nav-h: 60px;
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
/* In-page links scroll smoothly from the first tap or key press (site.js adds .is-smooth), so arriving
   from another page at a link like #join jumps straight there. */
@media (prefers-reduced-motion: no-preference) {
  html.is-smooth { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--wash-top);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-text);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
em { font-style: normal; }
main { display: block; }

::selection { background: rgba(126, 200, 150, 0.35); }

:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

svg.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.wrap {
  width: min(100% - var(--gutter) * 2, 1180px);
  margin-inline: auto;
}

/* ------------------------------------------------------------ Type */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--sage-ink);
  font: 800 13px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow--sage { color: var(--sage); }

.h2 {
  font: 800 clamp(2.125rem, 1.45rem + 2.7vw, 3.25rem)/1.06 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2--light { color: #fff; }

.lede {
  margin-top: 20px;
  max-width: 40em;
  color: var(--grey);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.lede--light { color: rgba(255, 255, 255, 0.7); }

/* ------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 var(--font-text);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.25s, box-shadow 0.35s var(--ease), color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--ink {
  background: #0a0a0c;
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
}
.btn--ink:hover { background: #222226; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5); }
.btn--light { background: #fff; color: #0a0a0c; }
.btn--light:hover { background: #f1f1f3; }
.btn--outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px #c7c7cc; }
.btn--quiet { background: transparent; color: var(--grey); }
.btn--quiet:hover { color: var(--ink); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn:focus-visible { border-radius: 999px; }

/* --------------------------------------------------------- Small parts */

.tier {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(142, 142, 147, 0.16);
  color: var(--grey);
  font: 800 11px/1.2 var(--font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier--likely { background: var(--amber-soft); color: var(--amber-ink); }
.tier--established { background: rgba(52, 121, 74, 0.13); color: var(--sage-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--light);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.chip--sage { background: rgba(52, 121, 74, 0.1); color: var(--sage-ink); }
.chip .icon { width: 12px; height: 12px; }

.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.key::before {
  content: "";
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.key--food { color: rgba(255, 255, 255, 0.92); }
.key--out { color: var(--sage); }

/* The app's ring: a track and an arc, the arc set by --pct (0-100). */
.ring {
  --size: 58px;
  --arc: var(--sage);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring circle { fill: none; stroke-width: 9; }
.ring__track { stroke: #efeff2; }
.ring__arc {
  stroke: var(--arc);
  stroke-linecap: round;
  stroke-dasharray: var(--pct) 100;
  transition: stroke-dasharray 0.9s var(--ease);
}
.ring--ink { --arc: var(--ink); }
.ring b {
  position: relative;
  font: 700 19px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ring--sm { --size: 44px; }
.ring--sm b { font-size: 15px; }

/* Evidence strength: a short bar filled in quarters. */
.ev {
  --n: 0;
  display: inline-block;
  flex: none;
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sage) calc(var(--n) * 25%), rgba(0, 0, 0, 0.1) 0);
}
.ev--4 { --n: 4; }
.ev--3 { --n: 3; }
.ev--2 { --n: 2; }
.ev--1 { --n: 1; }
.ev--mixed { background: linear-gradient(90deg, var(--sage) 0 50%, var(--amber) 50%); }

/* ============================================================== Nav */

.nav {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100% - 24px, 1120px);
  height: var(--nav-h);
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(15, 15, 25, 0.05), 0 10px 30px -12px rgba(15, 15, 25, 0.16);
  pointer-events: auto;
  transition: background-color 0.4s, box-shadow 0.4s;
}
.nav.is-scrolled .nav__pill {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(15, 15, 25, 0.06), 0 14px 40px -14px rgba(15, 15, 25, 0.22);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand__word { width: 112px; height: 14px; }

.nav__links {
  display: none;
  margin: 0 auto;
  gap: 4px;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.nav__links a:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.nav__links a[aria-current="true"] { color: var(--ink); background: rgba(0, 0, 0, 0.06); }

.nav__cta { margin-left: auto; }
.nav__cta-long { display: none; }

/* The menu button: two lines that turn into a cross. Only shown on the home page below 900px. */
.nav__toggle {
  position: relative;
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  transition: background-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle:hover { background: rgba(0, 0, 0, 0.08); }
.nav__toggle::before,
.nav__toggle::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 13px;
  right: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.nav__toggle::before { transform: translateY(-3.5px); }
.nav__toggle::after { transform: translateY(3.5px); }
.nav.is-open .nav__toggle::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle::after { transform: rotate(-45deg); }

/* ============================================================= Hero */

.hero {
  position: relative;
  padding: calc(112px + env(safe-area-inset-top)) 0 0;
  background: linear-gradient(180deg, var(--wash-top) 0%, #f3f3f6 62%, #fff 100%);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: 48px;
}
.hero__copy { position: relative; z-index: 5; }

.pill-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.06), 0 4px 14px -6px rgba(15, 15, 25, 0.12);
  font: 700 13px/1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill-label__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}
.pill-label__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  opacity: 0;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(0.4); opacity: 0.9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

.hero__title {
  margin-top: 22px;
  font: 800 clamp(2.625rem, 1.6rem + 4vw, 4.875rem)/1.02 var(--font-display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero__sub {
  margin-top: 22px;
  max-width: 34em;
  color: var(--grey);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

/* --------------------------------------------------------- Join forms */

.join__input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(15, 15, 25, 0.1);
  border-radius: 16px;
  background: #fff;
  font-size: 17px;
  box-shadow: 0 10px 30px -18px rgba(15, 15, 25, 0.3);
  transition: border-color 0.2s, box-shadow 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.join__input::placeholder { color: #8e8e93; }
.join__input:focus {
  outline: none;
  border-color: var(--sage-ink);
  box-shadow: 0 0 0 4px rgba(126, 200, 150, 0.3);
}
.join__input[aria-invalid="true"] { border-color: var(--amber-ink); }

.join__btn { height: 56px; }
.join__btn[aria-busy="true"] { pointer-events: none; }
.join__btn[aria-busy="true"] .join__btn-label::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.join__msg {
  min-height: 0;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
}
/* Empty, it takes no room but stays in the page, so screen readers hear the message when it arrives. */
.join__msg:empty { position: absolute; }
.join__msg.is-error { color: var(--amber-ink); }
.join__msg.is-ok { color: var(--sage-ink); }

.join__note {
  margin-top: 12px;
  max-width: 34em;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.5;
}
.join__note a { text-underline-offset: 3px; }

/* The honeypot: people never see it, bots fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.trust {
  display: grid;
  gap: 12px 24px;
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
}
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .icon { width: 18px; height: 18px; color: var(--sage-ink); }

/* ------------------------------------------------------- Hero visual */

.hero__visual {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  height: 590px;
  margin-inline: calc(var(--gutter) * -1);
  /* Clips the sides and the bottom but not the top, so the plate's rim stays a whole circle.
     The bottom cut sits 1px up, inside the fade's white, so no sliver of phone shows below it. */
  clip-path: inset(-60px 0 1px 0);
}

.hero__plate {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 560px;
  height: 560px;
  max-width: none;
  margin-left: -280px;
  pointer-events: none;
}
.hero__plate circle { fill: none; }
.hero__plate-rim {
  fill: rgba(255, 255, 255, 0.55) !important;
  stroke: var(--hairline);
  stroke-width: 1.5;
}
.hero__plate-inner {
  stroke: rgba(15, 15, 25, 0.05);
  stroke-width: 1.5;
  fill: rgba(255, 255, 255, 0.5) !important;
}
.hero__plate-arc {
  stroke: var(--sage);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transform: rotate(-90deg);
  transform-origin: 300px 300px;
  transition: stroke-dasharray 2.2s var(--ease) 0.5s;
}
.hero.is-ready .hero__plate-arc { stroke-dasharray: 76 100; }

/* On phones the phone fades out below its second card, so the card's text stays readable. */
.hero__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* The phone. --pw is the screen width in px; the app is designed at 402. */
.phone {
  --pw: 280;
  --k: calc(var(--pw) / 402);
  --bz: 10px;
  position: relative;
  width: calc(var(--pw) * 1px + var(--bz) * 2);
  padding: var(--bz);
  margin: 0;
  border-radius: calc(55px * var(--k) + var(--bz));
  background: #0b0b0d;
  box-shadow:
    inset 0 0 0 1.5px #2e2e33,
    0 0 0 1.5px #3c3c42,
    0 50px 90px -30px rgba(18, 18, 30, 0.42),
    0 26px 50px -30px rgba(18, 18, 30, 0.35);
}
.phone__screen {
  position: relative;
  width: calc(var(--pw) * 1px);
  height: calc(var(--pw) * 874px / 402);
  border-radius: calc(55px * var(--k));
  overflow: hidden;
  background: #fafafa;
  isolation: isolate;
}
.phone__screen::after {
  content: "";
  position: absolute;
  top: calc(11px * var(--k));
  left: 50%;
  z-index: 30;
  width: calc(124px * var(--k));
  height: calc(36px * var(--k));
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.phone__screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone--hero {
  --pw: 256;
  z-index: 2;
  margin-top: 24px;
}
.js .phone--hero {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s var(--ease) 0.15s, transform 1.4s var(--ease) 0.15s;
}
.js .hero.is-ready .phone--hero { opacity: 1; transform: none; }

/* ---- The Home screen, rebuilt at the app's own 402px measurements ---- */

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  background: linear-gradient(180deg, #fcfcfd, #ededf1);
  color: var(--ink);
  font-family: var(--font-text);
  letter-spacing: -0.01em;
  -webkit-user-select: none;
  user-select: none;
}
.app .icon { width: 18px; height: 18px; }

.app__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 32px 0 40px;
  font-size: 16px;
  font-weight: 600;
}
.app__status-right { display: flex; align-items: center; gap: 6px; }

.app__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 0;
}
.app__mark { width: 50px; height: 34px; margin-right: auto; }
.app__round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.12);
}
.app__round .icon { width: 17px; height: 17px; }

.app__hello {
  margin: 20px 24px 0;
  font: 800 28px/1.2 var(--font-display);
  letter-spacing: -0.025em;
}
.app__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 24px 0;
  color: var(--grey-app);
  font-size: 15px;
}
.app__streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-weight: 600;
}
.app__streak .icon { width: 12px; height: 12px; color: var(--orange); }

.trend {
  margin: 18px 24px 0;
  padding: 18px;
  border-radius: 28px;
  background: var(--graphite);
  box-shadow: 0 7px 36px rgba(0, 0, 0, 0.18);
  color: #fff;
}
.trend__top { display: flex; align-items: center; }
.trend__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.trend__k-food { color: rgba(255, 255, 255, 0.95); }
.trend__k-out { color: var(--sage); }
.trend__x { color: rgba(255, 255, 255, 0.35); font-weight: 500; }
.trend__ranges {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
}
.trend__ranges span { padding: 4px 9px; border-radius: 7px; color: rgba(255, 255, 255, 0.55); }
.trend__ranges .is-on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.trend__plot { height: 92px; margin-top: 12px; }
.trend__plot svg { display: block; overflow: visible; }
.trend__foot {
  margin-top: 8px;
  text-align: right;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.trend__axes { display: flex; gap: 6px; margin-top: 14px; }
.trend__axis {
  flex: 1 1 0;
  padding: 9px 0;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.trend__axis:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.trend__axis.is-on { background: var(--sage); color: #0c1e14; font-weight: 700; }

.acard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 12px 24px 0;
  padding: 16px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.acard--food { border-color: #d1d1d6; }
.acard--out { border-color: var(--ink); border-width: 2px; }
.acard__text { display: grid; gap: 3px; min-width: 0; }
.acard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grey-app);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.acard__eyebrow .icon { width: 11px; height: 11px; }
.acard .acard__chev { flex: none; align-self: center; width: 13px; height: 13px; margin-left: auto; color: var(--grey-app); }
.acard__band { font: 700 19px/1.2 var(--font-display); letter-spacing: -0.015em; }
.acard__desc { color: var(--grey-app); font-size: 13.5px; line-height: 1.4; }
.acard__meta { margin-top: 5px; color: var(--grey-app); font-size: 13px; font-weight: 600; }
.acard__meta.is-amber { color: var(--amber); }
.acard--out .acard__text > * { transition: opacity 0.35s; }
.acard--out.is-swapping .acard__text > * { opacity: 0; }

.app__dock {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}
.app__tabs {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 6px 24px rgba(0, 0, 0, 0.1);
}
.app__tab {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--grey-app);
  font-size: 11px;
  font-weight: 600;
}
.app__tab .icon { width: 20px; height: 20px; }
.app__tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.app__fab {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(180deg, #38383a, #080809);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.app__fab .icon { width: 24px; height: 24px; }

/* ---------------------------------------------------- Plates and lifts */

.plate {
  --s: 120px;
  --pct: 80;
  position: absolute;
  z-index: 3;
  width: var(--s);
  height: var(--s);
  margin: 0;
}
.plate__disc {
  position: absolute;
  inset: 9%;
  overflow: hidden;
  border-radius: 50%;
  background: #e9e4dc;
  box-shadow: 0 18px 40px -14px rgba(40, 30, 20, 0.45);
}
.plate__disc img { width: 100%; height: 100%; object-fit: cover; }
/* In the hero, a white backing inside the score ring hides the big ring where a plate sits on it. */
.hero .plate::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: #fff;
}
.plate__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.plate__ring circle { fill: none; stroke-width: 2.4; }
.plate__track { stroke: rgba(15, 15, 25, 0.08); }
.plate__arc {
  stroke: var(--sage);
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.6s var(--ease);
}
.plate.is-drawn .plate__arc,
.hero.is-ready .plate__arc { stroke-dasharray: var(--pct) 100; }

.plate__tag {
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-float);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}
.plate__tag b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(52, 121, 74, 0.12);
  color: var(--sage-ink);
  font: 800 12px/1 var(--font-display);
}

.phone--hero { --pw: 256; }
/* On phones the plates sit on the big ring where it crosses the phone's edges: top left and bottom right.
   Just under 390px they're nudged a few pixels in, so the screen's edge doesn't cut their rims. */
.plate--hero-a { --s: 84px; top: -21px; left: max(2px, calc(50% - 190px)); }
.plate--hero-b { --s: 72px; top: 448px; left: min(calc(50% + 117px), calc(100% - 74px)); }
.plate--hero-a .plate__tag,
.plate--hero-b .plate__tag { display: none; }
.plate--hero-a .plate__tag { left: 0; transform: none; }
.plate--hero-b .plate__tag { left: auto; right: 0; transform: none; }

.js .hero .plate,
.js .hero .lift {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
.js .hero.is-ready .plate,
.js .hero.is-ready .lift { opacity: 1; transform: none; }
.js .hero.is-ready .plate--hero-a { transition-delay: 0.9s; }
.js .hero.is-ready .plate--hero-b { transition-delay: 1.1s; }
.js .hero.is-ready .lift--mind { transition-delay: 1.5s; }
.js .hero.is-ready .lift--pattern { transition-delay: 1.75s; }

.lift {
  position: absolute;
  z-index: 4;
  display: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
}
.lift--mind {
  align-items: center;
  gap: 12px;
  width: max-content;
  padding: 12px 18px 12px 12px;
}
.lift__eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--grey);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lift__eyebrow .icon { width: 13px; height: 13px; }
.lift__title { display: block; margin-top: 2px; font: 700 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
.lift--pattern {
  flex-direction: column;
  gap: 8px;
  width: 250px;
  padding: 16px 18px;
}
.lift__row { display: flex; align-items: center; gap: 8px; }
.lift__count { color: var(--grey); font-size: 12.5px; font-weight: 600; }
.lift__claim { font: 700 15px/1.3 var(--font-display); letter-spacing: -0.01em; }

/* ------------------------------------------------------------- Charts */

.trend,
.mini-trend,
.chart-card {
  --c-food: rgba(255, 255, 255, 0.95);
  --c-out: var(--sage);
}
.c-svg { display: block; overflow: visible; }
.c-rule { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.c-rule-label { fill: rgba(255, 255, 255, 0.32); font-family: var(--font-text); font-weight: 600; }
.c-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-bridge { fill: none; stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0.4; }
.c-food .c-line,
.c-food .c-bridge { stroke: var(--c-food); }
.c-food .c-dot { fill: var(--c-food); }
.c-out .c-line,
.c-out .c-bridge { stroke: var(--c-out); }
.c-out .c-dot { fill: var(--c-out); }
.c-out { transition: opacity 0.35s ease; }
.c-label {
  font-family: var(--font-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 0.7s var(--ease);
}
.c-label--food { fill: var(--c-food); }
.c-label--out { fill: var(--c-out); }
.c-hover { opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.c-hover.is-on { opacity: 1; }
.c-guide { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 4; }
.c-hdot { stroke: #1d1d21; stroke-width: 2.5; }
.c-hdot--food { fill: #fff; }
.c-hdot--out { fill: var(--sage); }
.c-leader { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; stroke-dasharray: 2 var(--gap, 3); }
.c-ring { fill: none; stroke: #fff; stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .c-ring { animation: ring-pulse 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes ring-pulse { 0%, 100% { opacity: 1; transform: none; } 60% { opacity: 0.35; transform: scale(1.35); } }
}
.chart-card .c-line { stroke-width: 3; }
.chart-card .c-bridge { stroke-width: 1.6; }

.trend__foot,
.trend__foot > span { display: flex; justify-content: flex-end; gap: 14px; }
.trend__foot .key { gap: 6px; font-size: 11px; font-weight: 600; }
.trend__foot .key::before { width: 12px; height: 2.5px; }

/* =========================================================== Sections */

.section {
  position: relative;
  padding: clamp(88px, 7vw + 50px, 150px) 0;
}
.section__head { max-width: 760px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* ===================================================== Sound familiar? */

.familiar { background: #fff; }

.familiar__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.merge {
  --p: 0;
  position: relative;
  height: 400px;
}
html:not(.js) .merge { --p: 1; }

.frag {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --q: calc(1 - var(--p));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 156px;
  margin: -64px 0 0 -78px;
  opacity: clamp(0, calc((0.85 - var(--p)) * 3), 1);
  transform: translate(calc(var(--x) * var(--q)), calc(var(--y) * var(--q))) rotate(calc(var(--r) * var(--q))) scale(calc(1 - var(--p) * 0.45));
  will-change: transform, opacity;
}
.frag--food { --x: -86px; --y: -122px; --r: -5deg; }
.frag--mood { --x: 88px; --y: -52px; --r: 4deg; }
.frag--body { --x: -84px; --y: 58px; --r: 3deg; }
.frag--sleep { --x: 86px; --y: 124px; --r: -2deg; }

.frag__label {
  display: inline-block;
  margin: 0 0 6px 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f0f0f3;
  color: var(--grey);
  font-size: 11.5px;
  font-weight: 600;
}
.frag__card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 18px;
  background: #fbfbfc;
  box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.07), 0 14px 30px -18px rgba(15, 15, 25, 0.25);
  color: #8e8e93;
  font-size: 12.5px;
}
.frag__row { display: flex; justify-content: space-between; gap: 10px; }
.frag__row--total { padding-top: 7px; border-top: 1px solid #ececf0; color: #6e6e73; font-weight: 600; }
.frag__faces { display: flex; justify-content: space-between; }
.frag__faces svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: #b8b8be;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.frag__faces svg.is-on { stroke: #6e6e73; }
.frag__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}
.frag__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px;
  background: #d5d5da;
}
.frag__pulse {
  display: block;
  width: 100%;
  height: 30px;
  fill: none;
  stroke: #c4c4ca;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.frag__pulse path { vector-effect: non-scaling-stroke; }

.merge__result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  margin: -114px 0 0 -150px;
  opacity: clamp(0, calc((var(--p) - 0.06) * 8), 1);
  transform: scale(calc(0.5 + var(--p) * 0.5));
  /* The fade takes only a few pixels of scrolling, so one flick of the wheel would make the card
     pop in. Easing it over time makes it fade in the same way however fast the page is scrolled. */
  transition: opacity 0.45s ease;
}
.mini-trend {
  padding: 18px;
  border-radius: 26px;
  background: var(--graphite);
  box-shadow: 0 30px 60px -24px rgba(15, 15, 25, 0.5);
  color: #fff;
}
.mini-trend__eyebrow {
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mini-trend__out { color: var(--sage); }
.mini-trend__plot { height: 110px; margin-top: 12px; }
/* The card is scaled as the page scrolls. Chrome sizes SVG text for the scale it's drawn at, and after
   a quick scroll it can keep the old size, drawing the 76 and 72 over the lines until the next repaint.
   Geometric precision sizes the text independently of the scale. */
.mini-trend .c-label { text-rendering: geometricPrecision; }
/* The app's axis switch, drawn but not pressable: the card steps through it on its own. */
.mini-trend .trend__axis { text-align: center; pointer-events: none; }

.asks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  gap: 14px;
  margin: 72px calc(var(--gutter) * -1) 0;
  padding: 4px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.asks::-webkit-scrollbar { display: none; }
.ask {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 24px 24px 24px 8px;
  background: var(--light);
  font: 700 18px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  scroll-snap-align: start;
}
.ask__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: var(--sage-ink);
  box-shadow: 0 4px 12px -6px rgba(15, 15, 25, 0.2);
}
.ask__icon .icon { width: 20px; height: 20px; }

/* Below 900px the questions scroll sideways and the last ones start off screen, so a hint says so
   until the row has been swiped. */
.swipe-hint {
  margin-top: 4px;
  color: var(--grey);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.swipe-hint span { display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.4s; }
.swipe-hint.is-done span { opacity: 0; }
.swipe-hint .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .swipe-hint .icon { animation: nudge 1.8s var(--ease) infinite; }
  @keyframes nudge { 0%, 50%, 100% { transform: none; } 25% { transform: translateX(4px); } }
}

.familiar__close {
  max-width: 22em;
  margin: 56px auto 0;
  color: var(--grey);
  font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.3 var(--font-display);
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
}
.familiar__close em { color: var(--ink); }

/* ======================================================== How it works */

.how { background: var(--light); }
.how .section__head { margin-bottom: 48px; }

.steps { display: grid; gap: 44px; }

/* As on laptops, each step's text sits on the page itself, with no card round it. The screenshot sits
   in a grey panel above it, and the screen is only ever cut off by the panel's own edge. */
.step__shot {
  padding: 24px 24px 0;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #ebebef, #e1e1e6);
  container-type: inline-size;
}
/* Steps 1, 2 and 4 are sheets that slide up over Home. Their crops start just under the sheet's top edge, so
   none of Home shows above it. The corners are never tighter than the sheet's own (28 of the screen's 402),
   so none shows beside it either. */
.step__shot img {
  width: 100%;
  aspect-ratio: 402 / 440;
  object-fit: cover;
  object-position: 50% var(--y);
  border-radius: max(22px, 7cqw) max(22px, 7cqw) 0 0;
  box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.05), 0 14px 34px -14px rgba(15, 15, 25, 0.28);
}
.step__text { position: relative; padding: 22px 0 0; }
.step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 800 15px/1 var(--font-display);
}
.step__title {
  font: 800 24px/1.15 var(--font-display);
  letter-spacing: -0.025em;
}
.step__text p {
  margin-top: 10px;
  color: var(--grey);
  font-size: 17px;
  line-height: 1.55;
}

.how__stage { display: none; }

/* ============================================== Dark spotlight sections */

.spot {
  padding: 0 8px;
}
.spot__inner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(126, 200, 150, 0.14), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(126, 200, 150, 0.08), transparent 70%),
    var(--graphite);
  color: #fff;
}

/* ================================================== Mind · Body · Sleep */

.insights { background: linear-gradient(180deg, var(--light) 0%, var(--light) 75%, var(--oat) 100%); }
.insights .spot__inner { padding: clamp(84px, 6vw + 50px, 140px) 0; }

.chart-card {
  position: relative;
  margin-top: 48px;
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.chart-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.trend__eyebrow--lg { font-size: 13px; }
.chart-card__keys { display: none; gap: 18px; }
.chart-card__range {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
}
.chart-card__plot {
  position: relative;
  height: 230px;
  margin-top: 18px;
  touch-action: pan-y;
}
.chart-card__plot svg { display: block; overflow: visible; }
.chart-card__x {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-right: 48px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 500;
}
/* When the note sits below the day labels, the chart's dotted line runs down past them to it. "Today" is
   centred under the last day there, which keeps it clear of the line on the narrowest phones. */
.chart-card__x:has(+ .chart-callout.is-inline) span:last-child { transform: translateX(50%); }
.chart-card__tip {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-size: 13px;
  pointer-events: none;
  transform: translateX(-50%);
}
.chart-card__tip[hidden] { display: none; }
.chart-card__tip b { font-weight: 700; }
.chart-card__tip span { display: flex; justify-content: space-between; gap: 14px; }
.chart-card__tip .tip__day { color: var(--grey); font-size: 12px; font-weight: 600; }
.chart-card__tip .tip__gap { color: var(--grey); }

.chart-callout {
  position: absolute;
  z-index: 1;
  width: 210px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  transition: opacity 0.4s, transform 0.5s var(--ease);
}
.chart-callout b { display: block; margin-bottom: 2px; font: 700 14.5px/1.3 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.chart-callout.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.chart-callout.is-inline {
  position: static;
  width: auto;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}
.chart-callout.is-inline b { color: #fff; }

.chart-card__foot {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.seg {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.seg__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.35s var(--ease), color 0.35s;
}
.seg__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.seg__btn.is-on { background: var(--sage); color: #0c1e14; font-weight: 700; }
.seg__btn .icon { width: 18px; height: 18px; }

.axis-desc { color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.55; }
.axis-desc strong { color: #fff; font-weight: 700; }
.axis-desc__cov { margin-top: 6px; color: rgba(255, 255, 255, 0.5); font-size: 14px; }

.notes {
  display: grid;
  gap: 28px;
  margin-top: 56px;
}
.note h3 {
  margin-top: 16px;
  font: 700 19px/1.25 var(--font-display);
  letter-spacing: -0.015em;
}
.note p { margin-top: 8px; color: rgba(255, 255, 255, 0.68); font-size: 16px; }
.note__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(126, 200, 150, 0.14);
  color: var(--sage);
}
.note__icon .icon { width: 21px; height: 21px; }

/* ============================================================== Recipes */

/* A step darker grey on oat, so small text keeps AA contrast (5:1; the page's grey gives 4.43:1 here). */
.recipes { --grey: #666669; background: var(--oat); }
.recipes__head { display: grid; gap: 28px; max-width: none; }
.recipes__head .lede { max-width: 34em; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.1);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s var(--ease), color 0.3s, box-shadow 0.3s;
}
.filter:hover { box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.25); }
.filter.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.filter .icon { width: 17px; height: 17px; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 80%);
  gap: 16px;
  margin: 36px calc(var(--gutter) * -1) 0;
  padding: 6px var(--gutter) 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
/* The rail's padding leaves room for the cards' shadows, so its hint moves up to sit 20px under the cards, as the questions' hint does. */
.recipes .swipe-hint { margin-top: -6px; }

.recipe {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 16px 34px -22px rgba(60, 40, 20, 0.35);
  scroll-snap-align: start;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), opacity 0.4s;
}
.recipe[hidden] { display: none; }
.recipe__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e8e1d6; }
.recipe__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.recipe__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sage-ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.3);
}
.recipe__badge .icon { width: 15px; height: 15px; }
.recipe__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 18px 20px 20px; }
.recipe__name { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.015em; }
.recipe__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.45;
}
.recipe__line .ev { position: relative; top: -1px; }
.recipe__line strong { color: var(--ink-soft); font-weight: 600; }
.recipe__when {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--grey);
  font-size: 13.5px;
  font-weight: 600;
}
/* Centred on the first line, so it stays there when the note wraps (half of the 1.55 line height, less half its 4px). */
.recipe__when::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: calc(0.775em - 2px); border-radius: 50%; background: currentColor; }
.recipe__when[hidden] { display: none; }
.recipe__time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--grey);
  font-size: 14px;
  font-weight: 600;
}
.recipe__time .icon { width: 15px; height: 15px; }

@media (hover: hover) {
  .recipe:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(60, 40, 20, 0.05), 0 26px 44px -24px rgba(60, 40, 20, 0.45); }
  .recipe:hover .recipe__photo img { transform: scale(1.045); }
}

/* The five entries sit in columns: one on phones, then two, then three (3 + 2), and all five in a row from
   1200px. Left to wrap freely, they stranded one entry on a line of its own at some widths. */
.evidence-key {
  display: grid;
  gap: 12px 26px;
  margin-top: 26px;
  color: var(--grey);
  font-size: 14px;
}
@media (min-width: 600px) { .evidence-key { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 768px) { .evidence-key { grid-template-columns: repeat(3, max-content); } }
@media (min-width: 1200px) { .evidence-key { grid-template-columns: repeat(5, max-content); } }
/* Each entry runs on as one sentence, so on a narrow phone it wraps under its own text; the bar
   hangs to its left, centred on the first line (half of the 1.55 line height, less half its 7px). */
.evidence-key div { position: relative; padding-left: 30px; }
.evidence-key dt { display: inline; color: var(--ink-soft); font-weight: 600; }
.evidence-key .ev { position: absolute; top: calc(0.775em - 3.5px); left: 0; }
.evidence-key dd { display: inline; margin-left: 6px; }
.evidence-key dd::before { content: "· "; }
.recipes__note { margin-top: 16px; color: var(--grey); font-size: 14px; }

/* ============================================================= Features */

.features { background: var(--light); }

.bento {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow: hidden;
  padding: 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04), 0 0 0 1px rgba(15, 15, 25, 0.03);
}
.tile h3 { font: 800 22px/1.2 var(--font-display); letter-spacing: -0.025em; text-wrap: pretty; }
.tile__text p { margin-top: 8px; color: var(--grey); font-size: 16px; line-height: 1.55; }
.tile__text em { color: var(--ink); font-weight: 600; }

/* Patterns */
.finds { display: grid; gap: 10px; margin-block: auto; }
.find {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--light);
}
.find__top { display: flex; align-items: center; gap: 8px; }
.find__count { color: var(--grey); font-size: 13px; font-weight: 600; }
.find__stat { margin-top: 4px; color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.find__stat b {
  margin-right: 6px;
  color: var(--sage-ink);
  font: 800 26px/1 var(--font-display);
  letter-spacing: -0.03em;
}
.find__stat--amber b { color: var(--amber-ink); }
.find__why { color: var(--grey); font-size: 14px; }
.find__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.find__more .icon { width: 15px; height: 15px; }
/* The app's Faded row from "Patterns we've found": the label is plain, as in the app, and the pattern is
   dimmed rather than dropped. */
.tier--faded { background: none; color: var(--ink-soft); }
.find__claim { color: var(--grey); font-size: 15px; line-height: 1.45; }

.tile__visual { display: grid; gap: 10px; margin-block: auto; }
.tile__visual > * { margin-top: 0; }

/* Cycle: a week whose dip the cycle explains. The dip is in ink, not amber: it's context, not a cost. */
.cyclecard {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: var(--light);
}
.cyclecard__k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--grey);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cyclecard__k .icon { width: 13px; height: 13px; }
.cyclecard__stat { color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.cyclecard__stat b { margin-right: 6px; color: var(--ink); font: 800 26px/1 var(--font-display); letter-spacing: -0.03em; }
.cyclecard__days { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; margin-top: 4px; }
.cyclecard__days i { height: 18px; border-radius: 3px; background: #e3e3e8; }
.cyclecard__days i.is-late { background: #8e8e93; }
.cyclecard__scale { display: flex; justify-content: space-between; color: var(--grey); font-size: 12px; }
.cyclecard__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}
.cyclecard__note .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--grey); }

/* Experiment */
.expcard {
  display: grid;
  gap: 10px;
  margin-block: auto;
  padding: 18px;
  border-radius: 20px;
  background: var(--light);
}
.expcard__kicker { color: var(--grey); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.expcard__title { font: 800 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
/* The app's running experiment, day 4 of 7: nothing is coloured for good or bad until the week is called. */
.expcard__lock { display: flex; align-items: flex-start; gap: 7px; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.expcard__lock .icon { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--grey); }
.expcard__days { display: flex; gap: 6px; }
.expcard__days i { display: grid; flex: 1 1 0; place-items: center; height: 28px; border-radius: 8px; background: #fff; color: #b4b4ba; font-size: 11.5px; font-style: normal; font-weight: 700; }
.expcard__days i.on { background: var(--ink); color: #fff; }
.expcard__hedge { display: flex; align-items: flex-start; gap: 6px; color: var(--amber-ink); font-size: 13px; line-height: 1.4; }
.expcard__hedge .icon { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.expcard__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.expcard__side { display: grid; gap: 3px; color: var(--grey); font-size: 12.5px; }
.expcard__side b { color: var(--ink); font: 800 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.expcard__side b.is-muted { color: var(--grey); }

/* Calories: the app's Settings switch, then Home's food sheet on Targets. Opt-in, so the switch starts
   off and turns on as the tile comes into view; the bars fill after it. Colours are the prototype's
   macro tokens, with calories in a neutral grey: kcal isn't a macro, and nothing here is a judgement. */
.tile--calories {
  --macro-kcal: rgb(118, 118, 126);
  --macro-protein: rgb(158, 112, 168);
  --macro-carbs: rgb(205, 170, 92);
  --macro-fat: rgb(110, 132, 184);
  --macro-fibre: rgb(84, 160, 164);
  --on: 1;
}
.js .tile--calories { --on: 0; }
.js .tile--calories.in { --on: 1; }
.calswitch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 18px;
  background: var(--light);
}
.calswitch__label { display: grid; flex: 1; gap: 2px; font-size: 14.5px; font-weight: 600; }
.calswitch__label small { color: var(--grey); font-size: 12.5px; font-weight: 400; }
.calswitch__toggle {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: rgba(142, 142, 147, 0.32);
}
.calswitch__toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}
.tile--calories.in .calswitch__toggle,
html:not(.js) .calswitch__toggle { background: var(--sage-ink); }
.tile--calories.in .calswitch__toggle i,
html:not(.js) .calswitch__toggle i { transform: translateX(18px); }
.targets {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: var(--light);
}
.targets__kicker { color: var(--grey); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tbar { display: grid; gap: 5px; }
.tbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.tbar__top b { font-weight: 600; }
.tbar__top span { color: var(--grey); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tbar i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(var(--c), var(--c)) no-repeat 0 0 / calc(var(--w) * var(--on)) 100%, #e3e3e8;
}
.tbar__left { color: var(--grey); font-size: 12.5px; }
.tbar--kcal { --c: var(--macro-kcal); }
.tbar--kcal .tbar__top { font-size: 14.5px; }
.tbar--kcal .tbar__top span { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.tbar--kcal i { height: 7px; }
.tbar--protein { --c: var(--macro-protein); }
.tbar--carbs { --c: var(--macro-carbs); }
.tbar--fat { --c: var(--macro-fat); }
.tbar--fibre { --c: var(--macro-fibre); }
@media (prefers-reduced-motion: no-preference) {
  .calswitch__toggle { transition: background 0.3s var(--ease) 0.45s; }
  .calswitch__toggle i { transition: transform 0.4s var(--ease) 0.45s; }
  .tbar i { transition: background-size 0.9s var(--ease) 0.85s; }
  .tbar--protein i { transition-delay: 0.93s; }
  .tbar--carbs i { transition-delay: 1.01s; }
  .tbar--fat i { transition-delay: 1.09s; }
  .tbar--fibre i { transition-delay: 1.17s; }
}

/* Plan your day */
.daycard {
  display: grid;
  margin-block: auto;
  padding: 6px 16px 10px;
  border-radius: 20px;
  background: var(--light);
}
.daycard__tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 4px;
  padding: 8px 0 10px;
  border-bottom: 1px solid #e3e3e8;
  color: var(--grey);
  font-size: 13.5px;
  font-weight: 600;
}
.daycard__tabs .is-on { color: var(--ink); box-shadow: 0 11px 0 -9px var(--ink); }
.drow {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 10px 0;
}
.drow + .drow { border-top: 1px solid #e8e8ec; }
.drow__tick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
}
.drow__tick .icon { width: 13px; height: 13px; }
.drow--planned .drow__tick { background: transparent; border: 1.5px dashed #b0b0b6; }
.drow__text { display: grid; gap: 1px; }
.drow__when { color: var(--grey); font-size: 12.5px; }
.drow__name { font-size: 15px; font-weight: 600; }
.drow__tip { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; color: var(--sage-ink); font-size: 12px; font-weight: 500; }
.drow__tip .icon { flex: none; width: 0.86em; height: 0.86em; transform: translateY(1px); }
.drow__score { margin-top: 8px; color: var(--sage-ink); font: 800 17px/1 var(--font-display); }
.drow--planned .drow__score { color: #a1a1a6; }

/* Journal */
.timeline { display: grid; gap: 8px; margin-block: auto; }
.tl { display: grid; grid-template-columns: 38px 30px 1fr; align-items: center; gap: 8px; }
.tl__time { color: var(--grey); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl__node {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ededf1;
  color: var(--grey);
}
.tl__node .icon { width: 15px; height: 15px; }
.tl--meal .tl__node { background: rgba(126, 200, 150, 0.2); color: var(--sage-ink); }
.tl--mood .tl__node { background: rgba(28, 28, 30, 0.08); font-size: 16px; }
.tl__card {
  position: relative;
  display: grid;
  padding: 9px 44px 9px 12px;
  border-radius: 14px;
  background: var(--light);
  font-size: 13px;
  color: var(--grey);
}
.tl__card b { color: var(--ink); font-size: 14px; font-weight: 600; }
.tl__card em {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--sage-ink);
  font: 800 17px/1 var(--font-display);
  transform: translateY(-50%);
}


/* ============================================= Starts with the science */

.science { background: #fff; }

.science__grid {
  display: grid;
  gap: 48px;
  margin-top: 56px;
}

.journey {
  --p: 0;
  position: relative;
  display: grid;
  gap: 34px;
  padding-left: 40px;
}
html:not(.js) .journey { --p: 1; }
/* The line runs on through the gap and under the card below it, as it does into the card on wide screens. */
.journey::before,
.journey::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: -60px;
  left: 9px;
  width: 3px;
  border-radius: 2px;
  background: #ececf0;
}
.journey::after {
  background: var(--sage);
  transform: scaleY(var(--p));
  transform-origin: top;
}
.journey__step { position: relative; }
.journey__dot {
  position: absolute;
  top: 4px;
  left: -40px;
  z-index: 1;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #dcdce1;
  transition: box-shadow 0.4s;
}
.journey__step.is-lit .journey__dot { box-shadow: inset 0 0 0 3px var(--sage), inset 0 0 0 6px #fff, inset 0 0 0 12px var(--sage); }
.journey h3 { font: 800 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.journey p { margin-top: 8px; color: var(--grey); font-size: 16px; }

.knowcard {
  position: relative;
  align-self: start;
  padding: 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.06), 0 30px 60px -30px rgba(15, 15, 25, 0.3);
}
.knowcard__title { font: 800 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.knowcard__kicker {
  margin-top: 18px;
  color: var(--grey);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.knowcard__big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: 8px;
  font: 800 52px/1 var(--font-display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.knowcard__days {
  margin-left: 12px;
  color: var(--grey);
  font: 600 16px/1 var(--font-text);
  letter-spacing: 0;
}
.knowcard__bar {
  display: block;
  height: 10px;
  margin-top: 16px;
  border-radius: 5px;
  background: #efeff2;
  overflow: hidden;
}
.knowcard__bar i,
.krow i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease) 0.2s;
}
.knowcard.in .knowcard__bar i,
.knowcard.in .krow i,
html:not(.js) .knowcard__bar i,
html:not(.js) .krow i { transform: none; }
.knowcard__rows {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.krow {
  display: grid;
  grid-template-columns: 76px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.krow span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.krow span .icon { width: 15px; height: 15px; color: var(--grey); }
.krow i {
  position: relative;
  width: 100%;
  height: 6px;
  background: #efeff2;
  transform: none;
}
.krow i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: #b4b4ba;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease) 0.35s;
}
.knowcard.in .krow i::after,
html:not(.js) .krow i::after { transform: none; }
.krow::after { content: none; }
.krow b { color: var(--grey); font-weight: 600; text-align: right; }
.krow b.is-gap { color: var(--amber-ink); }
.krow { position: relative; }
.krow > i { grid-column: 2; }

/* ========================================================= Our approach */

.approach { background: var(--light); }

.pillars {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}
.pillar {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 28px;
  background: #fff;
}
.pillar h3 { margin-top: 26px; font: 800 21px/1.2 var(--font-display); letter-spacing: -0.02em; text-wrap: pretty; }
.pillar p { margin-top: 8px; color: var(--grey); font-size: 16px; }

.ladder { display: grid; gap: 7px; }
.ladder__row { position: relative; display: block; height: 30px; }
.ladder__row i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(126, 200, 150, 0.4), rgba(126, 200, 150, 0.16));
}
.ladder__row span {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
}

/* The app's meal sheet for the flat white, cut down to the dish and its "What this did for you" note.
   The 58 wears the app's orange score ink, which is the site's amber ink. In a narrow card the photo
   goes, so the dish's name keeps one line, and the chip drops under its label rather than squeezing it. */
.meal {
  container-type: inline-size;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--light);
}
.meal__head { display: flex; align-items: center; gap: 12px; }
.meal__photo { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.meal__id { display: grid; flex: 1; gap: 2px; min-width: 0; }
.meal__when { color: var(--grey); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.meal__name { font: 800 18px/1.2 var(--font-display); letter-spacing: -0.015em; }
.meal__score { display: grid; justify-items: end; gap: 2px; }
.meal__score b { color: var(--amber-ink); font: 800 26px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.meal__score small { color: var(--grey); font-size: 12px; white-space: nowrap; }
.meal__why { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.meal__whytitle { color: var(--grey); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.meal__regime { padding: 3px 8px; border-radius: 999px; background: rgba(52, 121, 74, 0.13); color: var(--sage-ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.meal__note { margin-top: -4px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
@container (max-width: 230px) {
  .meal__photo { display: none; }
}

.caveat {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: var(--amber-soft);
}
.caveat__head { display: flex; align-items: center; gap: 7px; color: var(--amber-ink); font-size: 13.5px; font-weight: 700; }
.caveat__head .icon { width: 17px; height: 17px; }
.caveat__body { color: var(--ink-soft); font-size: 15px; line-height: 1.45; }

.privacy {
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: 28px;
  background: #fff;
}
.privacy__lock {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(52, 121, 74, 0.1);
  color: var(--sage-ink);
}
.privacy__lock .icon { width: 26px; height: 26px; }
.privacy h3 { font: 800 24px/1.2 var(--font-display); letter-spacing: -0.025em; }
.privacy__text p { margin-top: 10px; color: var(--grey); font-size: 16.5px; }
.privacy__list { display: grid; gap: 10px; align-content: center; }
.privacy__list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; }
.privacy__list .icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
}

.fineprint {
  max-width: 40em;
  margin: 36px auto 0;
  color: var(--grey);
  font-size: 14px;
  text-align: center;
}

/* ================================================================== FAQ */

.faq { background: #fff; }
.faq__grid { display: grid; gap: 40px; }
.faq__mail { margin-top: 20px; color: var(--grey); font-size: 17px; }
.faq__mail a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.accordion { border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa h3 { font: inherit; }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font: 700 18px/1.35 var(--font-display);
  letter-spacing: -0.015em;
  text-align: left;
}
.qa__q .icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--light);
  transition: transform 0.45s var(--ease), background-color 0.3s, color 0.3s;
}
.qa__q:hover .icon { background: #ebebef; }
.qa__q[aria-expanded="true"] .icon { transform: rotate(45deg); background: var(--ink); color: #fff; }
.qa__q:focus-visible { outline-offset: -2px; }
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.qa__a > div { overflow: hidden; }
.qa__a.is-open { grid-template-rows: 1fr; }
.qa__a p { max-width: 38em; padding-right: 40px; color: #3a3a3c; font-size: 16.5px; line-height: 1.6; }
.qa__a p:last-child { padding-bottom: 24px; }
.qa__a p + p { margin-top: 12px; }
.qa__a a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
html:not(.js) .qa__a { grid-template-rows: 1fr; }

/* ======================================================= Founders' note */

.founders { background: linear-gradient(180deg, var(--wash-top), var(--wash-bottom)); }
.founders__grid {
  display: grid;
  gap: 32px;
  max-width: 860px;
}
.founders__mark {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--sage), 0 20px 40px -24px rgba(15, 15, 25, 0.3);
}
.founders__mark svg { width: 54px; height: 37px; color: var(--ink); }
.founders__note .h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
.founders__note p:not(.eyebrow) {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}
.founders__note a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.founders__note .founders__sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  color: var(--ink);
  font: 800 17px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.founders__sign::before { content: ""; width: 28px; height: 2px; border-radius: 1px; background: var(--sage); }

/* ==================================================== Join the waitlist */

.join-section { background: linear-gradient(180deg, var(--wash-bottom), var(--light)); }

.table {
  display: grid;
  place-items: center;
  padding: 72px 0 84px;
  text-align: center;
}

.table__plates {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.tplate {
  width: 74px;
  height: 74px;
  margin: 0 -9px;
  overflow: hidden;
  border-radius: 50%;
  background: #2c2c30;
  box-shadow: 0 0 0 4px #1c1c20, 0 18px 30px -12px rgba(0, 0, 0, 0.7);
}
.tplate img { width: 100%; height: 100%; object-fit: cover; }
.tplate--6, .tplate--7, .tplate--8 { display: none; }

.table__center {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, 540px);
}
.table__center .lede { margin-inline: auto; }
.join-section__title { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem); }

.join--final {
  display: grid;
  gap: 14px;
  margin-top: 36px;
  text-align: left;
}
.join__field { display: grid; gap: 8px; }
.join__label { color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 600; }
.join__opt { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.join--final .join__input {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow: none;
}
.join--final .join__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.join--final .join__input:focus { border-color: var(--sage); box-shadow: 0 0 0 4px rgba(126, 200, 150, 0.25); }
.join--final .join__input[aria-invalid="true"] { border-color: var(--amber); }
.join--final .join__btn { margin-top: 6px; }
.join--final .join__msg.is-error { color: #f0b566; }
.join--final .join__msg.is-ok { color: var(--sage); }
.join--final .join__note { margin-top: 2px; color: rgba(255, 255, 255, 0.6); text-align: center; justify-self: center; }
.join--final .join__note a { color: #fff; text-underline-offset: 3px; }
.join--final .join__input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #2a2a2f inset;
  caret-color: #fff;
}
/* Without JavaScript the form can't send anything, so this note takes its place. The page head
   adds .js, and takes it off again if site.js doesn't start. */
.join__nojs {
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.5;
}
.join__nojs a { color: #fff; text-underline-offset: 3px; }
html:not(.js) .join--final,
.js .join__nojs { display: none; }

/* =============================================================== Footer */

.footer {
  padding: 72px 0 calc(40px + env(safe-area-inset-bottom));
  background: var(--light);
  color: var(--ink-soft);
}
.footer__top {
  display: grid;
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--hairline);
}
.footer__tag { margin-top: 12px; color: var(--grey); font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15.5px; font-weight: 600; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.06);
  transition: transform 0.35s var(--ease), background-color 0.25s, color 0.25s;
}
.footer__social a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.footer__social .icon { width: 20px; height: 20px; }
.footer__legal {
  display: grid;
  gap: 10px;
  max-width: 52em;
  padding-top: 28px;
  color: var(--grey);
  font-size: 13.5px;
  line-height: 1.6;
}
.footer__legal a { color: inherit; }

/* ============================================ Phones: the glass join bar */

.joinbar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100% - 24px, 460px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(15, 15, 25, 0.06), 0 16px 40px -14px rgba(15, 15, 25, 0.35);
  transform: translate(-50%, 160%);
  transition: transform 0.6s var(--ease);
}
.joinbar.is-on { transform: translate(-50%, 0); }
.joinbar__text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.joinbar__text svg { width: 26px; height: 18px; }
@media (max-width: 359px) { .joinbar__text svg { display: none; } }

/* =========================================================== The sheet */

.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh; /* iOS measures vh with its toolbar hidden, so 92vh can be taller than a small iPhone's screen */
  margin: auto 0 0;
  padding: 30px 22px calc(26px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.2);
  overscroll-behavior: contain;
}
.sheet::backdrop {
  background: rgba(12, 12, 16, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sheet[open] { animation: sheet-up 0.6s var(--ease); }
.sheet[open]::backdrop { animation: fade-in 0.4s ease; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

.sheet__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--light);
  color: var(--ink);
}
.sheet__close .icon { width: 18px; height: 18px; }

.sheet__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 44px;
  color: var(--sage-ink);
  font-size: 14px;
  font-weight: 700;
}
.sheet__kicker .icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
}
.sheet__title {
  margin-top: 12px;
  font: 800 28px/1.12 var(--font-display);
  letter-spacing: -0.03em;
}
.sheet__title:focus { outline: none; }

.q { margin-top: 24px; padding: 0; border: 0; }
.q legend { padding: 0; font-size: 16px; font-weight: 600; }
.q__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.q__opts label { position: relative; }
.q__opts input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.q__opts span {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--light);
  box-shadow: inset 0 0 0 1px rgba(15, 15, 25, 0.06);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.q__opts label:hover span { box-shadow: inset 0 0 0 1px rgba(15, 15, 25, 0.2); }
.q__opts input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.q__opts input:focus-visible + span { outline: 3px solid var(--sage); outline-offset: 2px; }

.sheet__actions { display: flex; gap: 8px; margin-top: 30px; }
.sheet__actions .btn--ink { flex: 1; }

.sheet__done { display: grid; justify-items: center; padding: 10px 0 4px; text-align: center; }
.sheet__done[hidden] { display: none; }
.sheet__text { margin-top: 10px; color: var(--grey); font-size: 17px; }
.sheet__android { max-width: 26em; color: var(--ink-soft); font-size: 15.5px; }
.sheet__android[hidden] { display: none; }

.done-mark { width: 96px; height: 66px; margin-bottom: 10px; overflow: visible; }
.done-mark__ring {
  fill: none;
  stroke: var(--sage);
  stroke-width: 37;
  stroke-dasharray: 0 100;
  transform: rotate(-90deg);
  transform-origin: 180px 180px;
}
.done-mark__spoon { fill: var(--ink); opacity: 0; transform: scaleY(0.2); transform-origin: 476px 331px; }
.sheet__done.is-drawing .done-mark__ring { animation: ring-close 1.1s var(--ease) forwards; }
.sheet__done.is-drawing .done-mark__spoon { animation: spoon-in 0.7s var(--ease) 0.75s forwards; }
@keyframes ring-close { to { stroke-dasharray: 100 100; stroke: var(--ink); } }
@keyframes spoon-in { to { opacity: 1; transform: none; } }

.sheet__share {
  width: 100%;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.sheet__share p { color: var(--grey); font-size: 15px; }
.sheet__share-btns { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.sheet__share-btns [hidden] { display: none; }

/* =============================================================== Reveal */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* ======================================================== Breakpoints */

/* Phones: the trust row goes under the phone instead of above it. The copy's children join the hero grid so it can be ordered after the visual. */
@media (max-width: 599px) {
  .hero__grid { gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > .pill-label { justify-self: start; }
  .hero__visual { margin-top: 48px; }
  .hero .trust { order: 1; margin-top: 20px; }
}

/* Below 900px the join bar keeps Join in reach, so on the home page the nav's Join gives way to a
   menu button that opens the section links. Without JavaScript the Join button stays. */
@media (max-width: 899px) {
  .nav__pill { position: relative; }
  .js .nav__toggle { display: block; }
  .js .nav__links ~ .nav__cta { display: none; }
  .js .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    width: min(100%, 280px);
    margin: 0;
    padding: 8px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 15, 25, 0.06), 0 24px 50px -18px rgba(15, 15, 25, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s 0.35s;
  }
  .js .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s var(--ease); }
  .js .nav__links a { padding: 12px 16px; border-radius: 18px; color: var(--ink); font-size: 17px; }
}

/* Narrow phones: the big ring meets the screen's edge before the phone's, so the dish photos move along
   the ring to where they fit whole, a size smaller. */
@media (max-width: 374px) {
  .plate--hero-a { --s: 72px; top: -32px; left: calc(50% - 154px); }
  .plate--hero-b { --s: 64px; top: 456px; left: calc(50% + 115px); }
}

/* The four cards in "Sound familiar?" start further apart than the narrowest phones allow, so they're drawn a little smaller there.
   The Mind, Body and Sleep switch under the big chart drops its icons there, so it fits inside the card.
   There's no room for the butter beans beside the Mind card, so only the porridge shows in the hero. */
@media (max-width: 359px) {
  .frag { scale: 0.85; }
  .seg__btn .icon { display: none; }
  .plate--hero-b { display: none; }
}

@media (min-width: 480px) {
  .trust { grid-template-columns: repeat(2, max-content); }
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }

  .brand__word { display: block; }
  .nav__cta-long { display: inline; }
  .nav__cta-short { display: none; }

  /* From here the whole phone shows, with the ring centred on it as on laptops, and room below for its shadow. */
  .hero__grid { padding-bottom: 56px; }
  .hero__visual { height: 740px; clip-path: none; align-items: center; }
  .phone--hero { --pw: 300; margin-top: 0; }
  .hero__visual::after { display: none; }
  .hero__plate { top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; }
  /* The plates sit on the rim, top left and bottom right. */
  .plate--hero-a { --s: 132px; top: 88px; left: calc(50% - 282px); }
  .plate--hero-b { --s: 116px; top: 528px; left: calc(50% + 158px); }
  .plate--hero-a .plate__tag,
  .plate--hero-b .plate__tag { display: inline-flex; }

  .merge { height: 440px; }
  .frag { width: 196px; margin-left: -98px; }
  .frag__card { padding: 14px; }
  .filters { gap: 8px; }
  .filter { gap: 7px; height: 44px; padding: 0 18px; }
  .frag--food { --x: -150px; --y: -128px; }
  .frag--mood { --x: 150px; --y: -62px; }
  .frag--body { --x: -140px; --y: 66px; }
  .frag--sleep { --x: 150px; --y: 132px; }

  .asks { grid-auto-columns: minmax(250px, 46%); }

  .chart-card { padding: 28px; }
  .chart-card__plot { height: 280px; }
  .chart-card__keys { display: inline-flex; }
  .notes { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    margin-inline: 0;
    padding: 6px 0 0;
    overflow: visible;
  }
  .recipes .swipe-hint { display: none; }


  .pillars { grid-template-columns: repeat(2, 1fr); }
  .privacy { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: start; }
  .privacy__list { grid-column: 2; }

  .founders__grid { grid-template-columns: 112px 1fr; gap: 40px; align-items: start; }

  .step { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
  /* The screenshot fills the height the text gives the step, so a tall screen never stretches the step
     and the page doesn't grow as the screenshots load. */
  .step__shot { position: relative; align-self: stretch; min-height: 352px; padding: 0; }
  /* Here the screenshot's shape changes with the width, so a percentage would put a different row of the
     screen at the top at each width, sometimes through a line of text. --top names that row instead (out of
     the screen's 874), and 100% stops the screen rising off the bottom of the panel. */
  .step__shot img {
    position: absolute;
    top: 28px;
    left: 28px;
    width: calc(100% - 56px);
    height: calc(100% - 28px);
    object-position: 50% max(100%, var(--top, 0) * (100cqw - 56px) / -402);
  }
  /* A sheet's --top is its top edge. Where the rest of the sheet is shorter than the panel, the sheet sits
     lower in it, still running off the panel's foot, rather than showing Home above it. */
  .step__shot--sheet img {
    top: auto;
    bottom: 0;
    height: min(100% - 28px, (874 - var(--top)) * (100cqw - 56px) / 402);
  }
  /* Below about 675px the panel is narrow enough to show most of the screen, so it starts from the top. */
  @container (max-width: 260px) {
    .step__shot:not(.step__shot--sheet) img { object-position: 50% 0; }
  }
  .step__text { padding: 20px 0 20px 36px; }

  .table { padding: 96px 0 104px; }
  .tplate { width: 86px; height: 86px; }
  .tplate--6 { display: block; }

  .footer__top { grid-template-columns: 1fr auto; align-items: center; }
  .footer__social { grid-column: 2; grid-row: 1; }
  .footer__nav { grid-column: 1 / -1; }

  .sheet {
    width: min(100% - 48px, 540px);
    max-width: 540px;
    margin: auto;
    padding: 40px 38px 36px;
    border-radius: 30px;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.45);
  }
  .sheet[open] { animation: sheet-pop 0.55s var(--ease); }
  @keyframes sheet-pop { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
}

/* The Mind card from the width where it fits beside the phone, inside the window. */
@media (min-width: 768px) {
  .lift--mind { display: flex; top: 160px; left: calc(50% + 110px); }
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --nav-h: 64px; }

  .nav__links { display: flex; }
  .nav__cta { margin-left: 0; }

  .joinbar { display: none; }

  .hero { padding-top: calc(150px + env(safe-area-inset-top)); }
  .lift--mind { top: 150px; left: calc(50% + 140px); }
  /* Its right edge sits just over the phone's frame. */
  .lift--pattern { display: flex; top: 390px; left: calc(50% - 385px); width: 240px; }

  .asks { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin-inline: 0; padding: 0; overflow: visible; }
  .swipe-hint { display: none; }

  /* How it works: steps scroll past a phone that stays in place. */
  .how__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 48px;
  }
  .steps {
    position: relative;
    gap: 0;
    padding-left: 76px;
  }
  .steps::before,
  .steps::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 19px;
    width: 3px;
    border-radius: 2px;
    background: #e3e3e8;
  }
  .steps::after {
    background: var(--sage);
    transform: scaleY(var(--rail, 0));
    transform-origin: top;
  }
  .step {
    display: flex;
    align-items: center;
    min-height: 68vh;
    opacity: 0.3;
    transition: opacity 0.6s var(--ease);
  }
  .step:first-child { min-height: 56vh; align-items: flex-start; padding-top: 10vh; }
  .step:last-child { min-height: 56vh; align-items: flex-end; padding-bottom: 12vh; }
  .step.is-on { opacity: 1; }
  .step__shot { display: none; }
  .step__text { padding: 0; }
  .step__num {
    position: absolute;
    top: 0;
    left: -76px;
    z-index: 1;
    width: 41px;
    height: 41px;
    background: #fff;
    color: var(--grey);
    box-shadow: inset 0 0 0 2px #d8d8de;
    transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
  }
  .step.is-on .step__num { background: var(--ink); color: #fff; box-shadow: 0 0 0 6px var(--light); }
  .step__title { font-size: 34px; }
  .step__text p { max-width: 26em; font-size: 19px; }

  .how__stage { display: block; position: relative; }
  /* Centred in the window, but never higher than the nav's foot (12px down, 64px tall), which would cover the phone's top. */
  .how__sticky {
    position: sticky;
    top: max(76px, calc(50vh - 350px));
    display: grid;
    place-items: center;
    height: 700px;
  }
  .phone--how { --pw: 300; }
  .how__screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
  }
  .how__screen.is-on { opacity: 1; transform: none; }

  .accent {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
    pointer-events: none;
  }
  .accent.is-on { opacity: 1; transform: none; transition-delay: 0.15s; }
  .accent__card {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-float);
  }
  .accent--1 { left: 20px; top: 330px; display: grid; justify-items: center; gap: 22px; }
  .accent--1 .plate { position: relative; --s: 156px; }
  .accent--1 .plate__tag { display: inline-flex; }
  .accent--2 { left: 0; top: 250px; }
  .accent__faces { display: flex; gap: 4px; padding: 10px; font-size: 21px; line-height: 1; }
  .accent__faces span { display: grid; place-items: center; width: 36px; height: 38px; border-radius: 12px; background: var(--light); filter: grayscale(0.2); }
  .accent__faces .is-on { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); filter: none; }
  .accent--3 { left: 0; top: 150px; }
  .accent__health { font-size: 14px; font-weight: 600; }
  .accent__health-head { display: flex; align-items: center; gap: 8px; color: var(--sage-ink); font-size: 13px; }
  .accent__health-row { display: flex; align-items: center; gap: 8px; }
  .accent__health-row .icon { width: 16px; height: 16px; color: var(--grey); }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(126, 200, 150, 0.25); }
  .accent--4 { left: 10px; top: 400px; }
  .accent__stat { justify-items: start; min-width: 190px; }
  .accent__big { color: var(--sage-ink); font: 800 30px/1 var(--font-display); letter-spacing: -0.03em; }
  .accent__small { max-width: 13em; color: var(--grey); font-size: 13.5px; line-height: 1.35; }
  .accent--5 { left: 0; top: 250px; max-width: 236px; }
  .accent__tip { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
  .accent__tip .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--sage-ink); }

  .spot { padding: 0 14px; }
  .spot__inner { border-radius: 40px; }
  .chart-card { padding: 32px 36px 30px; }
  .chart-card__plot { height: 320px; }
  .chart-card__foot { grid-template-columns: minmax(0, 420px) 1fr; align-items: center; gap: 36px; }

  .recipes__head { grid-template-columns: 1fr auto; align-items: end; }
  .rail { gap: 20px; }

  .pillars { grid-template-columns: repeat(3, 1fr); }
  .privacy { grid-template-columns: auto 1.3fr 1fr; gap: 28px 32px; padding: 36px; align-items: center; }
  .privacy__list { grid-column: auto; }

  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
  .faq__head { position: sticky; top: 120px; }
  .qa__q { font-size: 19px; padding: 24px 0; }

  .founders__grid { grid-template-columns: 140px 1fr; gap: 56px; }
  .founders__mark { width: 140px; height: 140px; }
  .founders__mark svg { width: 66px; height: 45px; }

  .footer__top { grid-template-columns: 1fr auto auto; gap: 40px; }
  .footer__nav { grid-column: auto; }
  .footer__social { grid-column: auto; grid-row: auto; }
}

/* Features goes to two columns at 720px, not 600px: below that each card is 260px wide, and the
   calorie, experiment and journal cards wrap their numbers. */
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}

/* The eight recipes sit in two rows of four from 1000px, and in two columns below that, so no row is
   left short. Four columns would be too narrow for their text under 1000px. */
@media (min-width: 1000px) {
  .rail { grid-template-columns: repeat(4, 1fr); }
}

/* Two-column "Our approach": the third card spans both columns instead of sitting alone on its row,
   with its text beside the example from 720px. */
@media (min-width: 600px) and (max-width: 899px) {
  .pillar--gaps { grid-column: span 2; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .pillar--gaps { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 32px; align-items: center; }
  .pillar--gaps h3 { margin-top: 0; }
}

/* Cards side by side share their picture row, so the titles line up however tall each picture is; a
   shorter picture is centred in the row, so the spare space is shared above and below it. The title and
   text stay together below, so a title that wraps in one card doesn't leave a gap in the next. */
@media (min-width: 600px) and (max-width: 899px) {
  .pillar:not(.pillar--gaps) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .pillar:not(.pillar--gaps) > :first-child { align-self: center; }
}
@media (min-width: 900px) {
  .pillar { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .pillar > :first-child { align-self: center; }
}

/* Tablets: the hero and "Sound familiar?" put their text above a centred picture, so the text is centred too. */
@media (min-width: 600px) and (max-width: 1099px) {
  .hero__copy,
  .familiar__copy { text-align: center; }
  .hero__sub,
  .familiar__copy .lede { margin-inline: auto; }
  .hero .trust { justify-content: center; }

  /* What to expect keeps its line down the side up to laptop widths, in a column short enough to read. */
  .science__grid { max-width: 720px; margin-inline: auto; }
}

@media (min-width: 1100px) {
  .familiar__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: min(820px, calc(100vh - 150px));
    padding-bottom: 56px;
  }
  .hero__copy { padding-bottom: 40px; }
  /* Narrower than the column, so the text wraps before it reaches the ring. */
  .hero__sub { max-width: min(25.5em, 100% - 24px); }
  .hero__visual {
    height: 740px;
    margin: 0;
    clip-path: none;
    align-items: center;
  }
  .phone--hero { --pw: 310; margin-top: 0; }
  .hero__plate { top: 50%; width: 580px; height: 580px; margin: -290px 0 0 -290px; }
  .plate--hero-a { --s: clamp(116px, calc(25vw - 158px), 150px); top: 70px; left: -20px; }
  .plate--hero-b { --s: 120px; top: auto; bottom: 150px; left: min(calc(50% + 172px), calc(100% + 24px - var(--s))); }
  .lift { display: none !important; }

  .bento { grid-template-columns: repeat(3, 1fr); }

  /* The table: plates set around the form, seen from above. Narrower screens keep the row of plates
     above it. Below 1280px the plates beside the form move out just far enough to stay clear of it
     (half its 540px column, plus 24px), and the one above right clears the heading. */
  .table { min-height: 860px; padding: 150px 0; }
  .table__plates { position: absolute; inset: 0; display: block; margin: 0; }
  .tplate {
    position: absolute;
    display: block;
    width: var(--s);
    height: var(--s);
    margin: 0;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.035), 0 40px 60px -24px rgba(0, 0, 0, 0.8);
    transform: translateY(calc(var(--drift, 0) * 1px));
    will-change: transform;
  }
  .tplate--6, .tplate--7, .tplate--8 { display: block; }
  .tplate--1 { --s: 210px; top: 6%; left: 5%; }
  .tplate--2 { --s: 150px; top: -3%; left: 29%; }
  .tplate--3 { --s: 170px; top: 4%; right: min(22%, 50% - 180px - var(--s)); }
  .tplate--4 { --s: 220px; top: 26%; right: min(3%, 50% - 294px - var(--s)); }
  .tplate--5 { --s: 180px; bottom: 6%; right: min(11%, 50% - 294px - var(--s)); }
  .tplate--6 { --s: 150px; bottom: -4%; left: 53%; }
  .tplate--7 { --s: 200px; bottom: 5%; left: min(10%, 50% - 294px - var(--s)); }
  .tplate--8 { --s: 140px; top: 46%; left: -2%; }

  /* What to expect: the steps sit in a row beside the card, and their line runs on into it.
     Narrower screens keep the line down the side, which runs on into the card below. */
  .science__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; }
  .journey { grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 0; }
  .journey::before,
  .journey::after { display: none; }
  .journey__step { padding-top: 38px; }
  .journey__step::before,
  .journey__step::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: -36px;
    height: 3px;
    border-radius: 2px;
    background: #ececf0;
  }
  .journey__step::after { background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
  .journey__step.is-lit::after { transform: scaleX(1); }
  .journey__step:nth-child(2n)::before,
  .journey__step:nth-child(2n)::after { right: -28px; }
  .journey__step:last-child::before,
  .journey__step:last-child::after { right: -64px; }
  .journey__dot { top: 1px; left: 0; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .accent { display: none !important; }
}

@media (min-width: 1200px) {
  .how__sticky { justify-items: end; }
}

@media (min-width: 1300px) {
  .hero__plate { width: 660px; height: 660px; margin: -330px 0 0 -330px; }
  .plate--hero-a { --s: 150px; top: 60px; left: calc(50% - 300px); }
  .plate--hero-b { --s: 128px; bottom: 150px; left: calc(50% + 176px); }
}

/* On laptops, the two cards from the width where the Mind card fits inside the window. */
@media (min-width: 1420px) {
  .lift { display: flex !important; }
  .lift--mind { top: 176px; left: calc(50% + 130px); }
  .lift--pattern { top: auto; bottom: 70px; left: calc(50% - 382px); width: 232px; }
}

@media (min-width: 900px) and (max-height: 820px) {
  .how__sticky { top: max(76px, calc(50vh - 300px)); height: 600px; }
  .phone--how { --pw: 256; }
}

/* Windows under about 730px tall (a 1366×768 laptop, once the browser's bars are counted) get a smaller
   phone, so it fits whole between the nav and the bottom of the window. */
@media (min-width: 900px) and (max-height: 728px) {
  .how__sticky { top: max(76px, calc(50vh - 260px)); height: 520px; }
  .phone--how { --pw: 224; }
}

/* ======================================================= Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { transform: none; transition: opacity 0.6s ease; }
  .js .phone--hero,
  .js .hero .plate,
  .js .hero .lift { transform: none; transition: opacity 0.6s ease; }
  .how__screen, .accent { transform: none !important; }
  .merge__result { transition: none; }
  .js .nav__links { transform: none; }
  .tplate { transform: none !important; }
  .pill-label__dot::after { display: none; }
  .done-mark__ring { stroke-dasharray: 100 100; stroke: var(--ink); }
  .done-mark__spoon { opacity: 1; transform: none; }
}

/* ======================================================= Forced colours */

/* Windows' high-contrast mode swaps backgrounds for its own colours, which hides the one that marks the
   picked option, so the picked option gets an outline too. */
@media (forced-colors: active) {
  .q__opts input:checked + span,
  .filter.is-on,
  .seg__btn.is-on,
  .trend__axis.is-on { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ======================================================== Legal pages */

.doc-page { background: var(--wash-top); }
.doc-page .nav__cta { margin-left: auto; }
.doc {
  width: min(100% - var(--gutter) * 2, 760px);
  margin: 0 auto;
  padding: calc(130px + env(safe-area-inset-top)) 0 96px;
}
.doc h1 {
  font: 800 clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem)/1.08 var(--font-display);
  letter-spacing: -0.035em;
}
.doc__meta { margin-top: 12px; color: var(--grey); font-size: 15px; }
.doc h2 {
  margin-top: 44px;
  font: 800 22px/1.25 var(--font-display);
  letter-spacing: -0.02em;
}
.doc p,
.doc li { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.doc p { margin-top: 14px; }
.doc ul { margin-top: 14px; padding-left: 20px; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.doc__back { display: inline-flex; align-items: center; gap: 6px; margin-top: 48px; font-weight: 600; }