/* Health AI — the website.
 *
 * Rebuilt on 2 October 2026 from a blank page, to wear the app's own clothes:
 * Barlow and Barlow Condensed (served from this site, so nobody's browser asks
 * Google for a font), the four section colours, and the dark, glowing card
 * Home's brief is drawn on. Everything readable is readable before any script
 * runs; motion is added on top, and taken away again for anyone who has asked
 * their device for less of it.
 *
 * Colour rules, kept from the last site because they held:
 *   --nutrition, --train, --run are the exact section_colors.dart hexes, and
 *   are for fills, rings, glows and rules. Type uses the -ink twins, which
 *   pass 4.5:1 on the page and on the sunken band in both themes.
 *   --faint is the lightest grey allowed to carry text.
 */

/* ------------------------------------------------------------------ fonts */

@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }

/* ----------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Barlow", "Helvetica Neue", Arial, sans-serif;

  --bg: #f5f5f2;
  --sunken: #ecece7;
  --card: #ffffff;
  --ink: #0b0b0c;
  --ink-2: #2a2a2e;
  --muted: #55555c;      /* 7.0:1 on --bg */
  --faint: #6a6a72;      /* 5.0:1 on --bg, 4.6:1 on --sunken */
  --line: rgba(11, 11, 12, 0.09);
  --line-2: rgba(11, 11, 12, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -22px rgba(0, 0, 0, 0.28);

  /* The dark bands are dark in both themes, like Home's brief card. */
  --night: #060708;
  --night-2: #0d0e10;
  --night-card: #15161a;
  --night-ink: #f4f4f6;
  --night-muted: #a7a7b0;   /* 8.4:1 on --night */
  --night-line: rgba(255, 255, 255, 0.1);

  --nutrition: #1e8e3e;
  --nutrition-glow: #4cd173;
  --nutrition-ink: #187233;   /* 5.6:1 on --bg */
  --train: #ff3b30;
  --train-ink: #c4251b;       /* 5.4:1 on --bg */
  --run: #e2660d;
  --run-bright: #f27a26;
  --run-ink: #a3480a;         /* 5.5:1 on --bg */
  --coach: #1d5fd1;
  --coach-ink: #1d5fd1;       /* 5.5:1 on --bg */
  --protein: #ba0107;
  --carbs: #f5a623;
  --fat: #2d9cdb;
  --water: #1d9bd8;

  /* The same inks on the night bands. */
  --nutrition-night: #4cd173;
  --train-night: #ff6b61;
  --run-night: #ff8a3d;
  --coach-night: #79a3ff;

  --radius: 22px;
  --radius-lg: 32px;
  --wrap: 1180px;
  --gutter: clamp(18px, 5vw, 40px);
  --barh: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #060607;
    --sunken: #0e0f11;
    --card: #141518;
    --ink: #f4f4f6;
    --ink-2: #d4d4da;
    --muted: #a7a7b0;
    --faint: #8f8f99;
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 44px -22px rgba(0, 0, 0, 0.8);
    --nutrition-ink: #4cd173;
    --train-ink: #ff6b61;
    --run-ink: #ff8a3d;
    --coach-ink: #79a3ff;
  }
}

/* ------------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barh) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  -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; }

a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: color-mix(in srgb, var(--nutrition-glow) 40%, transparent); }

:focus-visible {
  outline: 2px solid var(--coach-ink);
  outline-offset: 3px;
  border-radius: 8px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* An eyebrow: the section's name in its own colour, set small and wide. */
.eyebrow {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow.n { color: var(--nutrition-ink); }
.eyebrow.t { color: var(--train-ink); }
.eyebrow.r { color: var(--run-ink); }
.eyebrow.c { color: var(--coach-ink); }
.eyebrow.q { color: var(--faint); }
.night .eyebrow { color: var(--night-muted); }
.night .eyebrow.n { color: var(--nutrition-night); }
.night .eyebrow.t { color: var(--train-night); }
.night .eyebrow.r { color: var(--run-night); }
.night .eyebrow.c { color: var(--coach-night); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
.night .lede { color: var(--night-muted); }

/* ------------------------------------------------------------------- bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--barh);
  padding: 10px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.scrolled .bar { border-bottom-color: var(--line); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--ink);
}
.brand span { white-space: nowrap; }
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
  .brand img { filter: invert(1); }
}

.bar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.bar nav > a,
.drop > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.bar nav > a:hover,
.drop > summary:hover,
.bar nav > a[aria-current="page"],
.drop > summary.here {
  color: var(--ink);
  background: var(--line);
}

.drop { position: relative; }
.drop > summary { list-style: none; }
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.drop[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.dropmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  padding: 6px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
}
.dropmenu a {
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink-2);
}
.dropmenu a:hover,
.dropmenu a[aria-current="page"] { background: var(--line); color: var(--ink); }

/* Apple's own artwork, linked to the listing. The anchor carries the padding,
   so the tap target is bigger than the image, and the matching negative
   margin keeps the artwork where the text around it expects it. */
.badge {
  display: inline-block;
  padding: 6px;
  margin: -6px;
  border-radius: 14px;
}
.badge img { display: block; width: 150px; height: 50px; }
.badge-sm img { width: 120px; height: 40px; }
/* In the bar the badge is also a nav link, so these have to outrank the
   nav's pill padding, its hover fill and its display. */
.bar nav > a.badge-sm,
.bar nav > a.badge-sm:hover {
  padding: 4px;
  margin: -4px -4px -4px 6px;
  border-radius: 10px;
  background: none;
}

/* The reading bar on the long pages. */
.progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nutrition-glow), var(--coach-night), var(--run-bright));
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s var(--spring), background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost {
  color: var(--ink);
  background: var(--line);
}
.btn-ghost:hover { background: var(--line-2); }
.night .btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.1); }
.night .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
.btn-ghost .arrow { transition: transform 0.25s var(--ease); }
.btn-ghost:hover .arrow { transform: translateY(2px); }

/* ------------------------------------------------------------ night bands */

.night {
  position: relative;
  background: var(--night);
  color: var(--night-ink);
  isolation: isolate;
  overflow: hidden;
}
.night a { color: inherit; }

/* The brief card's glow: three soft lights that drift, slowly. */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.aurora span {
  position: absolute;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.9;
  animation: drift 22s ease-in-out infinite alternate;
}
.aurora .a1 { left: -18%; top: -30%; background: radial-gradient(closest-side, rgba(76, 209, 115, 0.32), transparent); }
.aurora .a2 { right: -22%; top: -20%; background: radial-gradient(closest-side, rgba(255, 90, 82, 0.24), transparent); animation-delay: -7s; }
.aurora .a3 { left: 25%; bottom: -55%; background: radial-gradient(closest-side, rgba(29, 95, 209, 0.32), transparent); animation-delay: -14s; }
.aurora.orange .a1 { background: radial-gradient(closest-side, rgba(242, 122, 38, 0.30), transparent); }
.aurora.orange .a2 { background: radial-gradient(closest-side, rgba(255, 59, 48, 0.18), transparent); }
.aurora.orange .a3 { background: radial-gradient(closest-side, rgba(242, 122, 38, 0.16), transparent); }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(7%, 5%, 0) scale(1.18); }
}

/* A fine grain over the glow, so the gradients never band. */
.night::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- hero */

.hero { padding-block: clamp(36px, 7vw, 92px) clamp(48px, 7vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.hero h1 {
  font-size: clamp(3.4rem, 8.6vw, 7.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
.hero h1 .glow {
  background: linear-gradient(100deg, #7fe39d 0%, #4cd173 30%, #79a3ff 62%, #ff8a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { margin-top: 22px; color: #c9c9d1; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--night-muted);
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: rgba(76, 209, 115, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%234cd173' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.hero-company {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--night-muted);
}
.hero-company a { text-underline-offset: 3px; }

/* ------------------------------------------------------------ the phone */

/* A phone drawn in CSS around a screenshot, sized from one number. */
.phone {
  --pw: clamp(240px, 25vw, 318px);
  position: relative;
  width: var(--pw);
  padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.17);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 28%),
    linear-gradient(160deg, #2c2d32, #0d0e10 45%, #1e1f24);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 calc(var(--pw) * 0.012) #050506,
    0 50px 90px -40px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.phone-screen {
  position: relative;
  aspect-ratio: 900 / 1955;
  border-radius: calc(var(--pw) * 0.135);
  overflow: hidden;
  background: #000;
  transform: translateZ(0);
}
.phone-screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-island {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--pw) * 0.03);
  width: 31%;
  height: calc(var(--pw) * 0.088);
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.phone.sm { --pw: clamp(200px, 21vw, 270px); }

/* The demo in the hero: six screens, a tab for each, and motion between them. */
.demo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  perspective: 1400px;
}
/* Flat, not preserve-3d. Sharing one 3D space, the pieces were layered by
 * depth instead of by z-index, so the phone's turn on a tap swung its near
 * edge over the Lock Screen card or the watch, which popped back on top as
 * it settled (reported 2026-10-02). Flattened, the floats keep z-index 3 and
 * stay in front; the phone's turn gets its perspective from here instead. */
.tilt {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  perspective: 1400px;
  transition: transform 0.6s var(--ease);
}
.demo .phone { --pw: clamp(250px, 26vw, 330px); }
.phone.kick { animation: kick 0.9s var(--spring); }
@keyframes kick {
  0% { transform: none; }
  32% { transform: rotateY(var(--kick, -9deg)) translateY(-8px) scale(1.015); }
  100% { transform: none; }
}

.screens > img {
  opacity: 0;
  transform: translateX(14%) scale(0.94);
  filter: blur(6px);
  transition: opacity 0.55s var(--ease), transform 0.75s var(--ease), filter 0.55s var(--ease);
}
.screens[data-dir="prev"] > img { transform: translateX(-14%) scale(0.94); }
.screens > img.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  z-index: 2;
}
.screens[data-dir="next"] > img.is-off { transform: translateX(-14%) scale(0.94); }
.screens[data-dir="prev"] > img.is-off { transform: translateX(14%) scale(0.94); }
/* Before the script runs, and without it: the first screen, still. */
html:not(.js) .screens > img:first-child { opacity: 1; transform: none; filter: none; }

/* The glow under the phone takes the colour of the chapter showing. */
.demo-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow, rgba(76, 209, 115, 0.35)), transparent 70%);
  transition: background 0.8s ease;
}

.chapters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 560px;
}
.chapter {
  --c: var(--nutrition-glow);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font: 600 0.95rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--spring);
}
.chapter::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.chapter:hover { color: #fff; transform: translateY(-1px); }
.chapter[aria-selected="true"] { background: rgba(255, 255, 255, 0.15); color: #fff; }
.chapter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--c);
}
.demo.playing .chapter[aria-selected="true"]::after { animation: dwell var(--dwell, 5s) linear forwards; }
@keyframes dwell { to { width: 100%; } }
.chapter.c-train { --c: var(--train-night); }
.chapter.c-run { --c: var(--run-night); }
.chapter.c-coach { --c: var(--coach-night); }
.chapter.c-scan { --c: var(--carbs); }

.chapter-line {
  min-height: 3.2em;
  max-width: 34ch;
  text-align: center;
  color: var(--night-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.chapter-line b { color: #fff; font-weight: 600; }

/* The pieces that float around the hero's phone.
 *
 * Placed from the phone's own width (the .tilt they sit in is exactly the
 * phone), so each one reaches 3% of that into the screen at every size:
 * inside the app's own side margin, on the phone's edge, never over a figure
 * on it. 6.4% is the frame's 3.4% and that 3%. They were placed by fixed
 * percentages, which at 1080 points and below put the Lock Screen card a
 * third of the way across the screen (found 2026-10-02). */
.float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  translate: 0 calc(var(--lift, 0) * 1px);
  animation: bob 7s ease-in-out infinite alternate;
}
.float img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
.float.lock { width: min(300px, 74%); left: calc(6.4% - min(300px, 74%)); bottom: 4%; animation-delay: -2s; }
.float.widget { width: 136px; right: calc(6.4% - 136px); top: 8%; animation-delay: -4s; }
.float.widget img { border-radius: 26px; }
.float.wristwatch { width: 118px; right: calc(6.4% - 118px); bottom: 6%; animation-delay: -1s; }
@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

/* A watch drawn in CSS around a capture from the watch simulator.
 *
 * The screen is placed at exactly the capture's own shape, 416 by 496, so
 * none of it is cut. It used to be padded by 9%, but percentage padding is
 * measured from the parent's width, not the watch's: in the pair of watches
 * the screen came out narrower than the capture and lost a strip off each
 * side, the 7 of 7.50 km and the 3 of 38:02 with it (found 2026-10-02). Now
 * the bezel is measured from the watch itself: 9% of its width all round,
 * which is 7.774% of its height at the top and bottom. */
.watch {
  position: relative;
  aspect-ratio: 1 / 1.1577;
  border-radius: 34% / 30%;
  background: linear-gradient(160deg, #3a3b40, #0d0e10 50%, #24252a);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), inset 0 0 0 5px #050506, 0 30px 50px -24px rgba(0, 0, 0, 0.7);
}
.watch::after {
  /* The crown. */
  content: "";
  position: absolute;
  right: -5%;
  top: 30%;
  width: 6%;
  height: 16%;
  border-radius: 6px;
  background: linear-gradient(90deg, #1b1c20, #4a4b51);
}
.watch img {
  position: absolute;
  left: 9%;
  top: 7.774%;
  width: 82%;
  height: 84.45%;
  object-fit: contain;
  border-radius: 26% / 22%;
}

/* --------------------------------------------------------------- sections */

.band { padding-block: clamp(72px, 10vw, 140px); }
.band.sunken { background: var(--sunken); }

.head {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.head h2,
.feature h2 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.95;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.feature + .feature { margin-top: clamp(80px, 11vw, 150px); }
.feature.flip .copy { order: 2; }
.feature .copy { display: grid; gap: 20px; align-content: start; }
.feature .copy p { color: var(--muted); max-width: 54ch; }
.night .feature .copy p { color: var(--night-muted); }
.feature .copy strong { color: var(--ink); font-weight: 600; }
.night .feature .copy strong { color: #fff; }
.feature .visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--card);
}
.night .chips li {
  border-color: var(--night-line);
  background: rgba(255, 255, 255, 0.05);
  color: #dadae0;
}

/* ------------------------------------------------- four apps become one */

.merge {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.merge .tile {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 10px 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-weight: 600;
  color: var(--ink-2);
  transition: transform 1s var(--ease), opacity 0.9s var(--ease);
}
.merge .tile svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.merge .one {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px 16px 18px;
  border-radius: 999px;
  background: var(--night);
  color: #fff;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.6rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.9s var(--spring) 0.55s, opacity 0.6s ease 0.55s;
}
.merge .one img { width: 34px; height: 34px; border-radius: 50%; filter: invert(1); }
.merge.joined .tile:nth-child(1) { transform: translateX(150%) scale(0.7); opacity: 0; }
.merge.joined .tile:nth-child(2) { transform: translateX(50%) scale(0.7); opacity: 0; }
.merge.joined .tile:nth-child(3) { transform: translateX(-50%) scale(0.7); opacity: 0; }
.merge.joined .tile:nth-child(4) { transform: translateX(-150%) scale(0.7); opacity: 0; }
.merge.joined .one { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin-inline: auto;
}
.contrast > div {
  padding: 26px 26px 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
}
.contrast > div.us {
  background: var(--night);
  color: var(--night-ink);
  border-color: transparent;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.6);
}
.contrast h3 {
  font-size: 1.05rem;
  font-family: var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.contrast .us h3 { color: var(--nutrition-night); }
.contrast ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.contrast li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  line-height: 1.5;
}
.contrast .us li { color: #d9d9df; }
.contrast li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23888' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.contrast .us li::before {
  background: rgba(76, 209, 115, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.8 2.8 5.4-5.6' fill='none' stroke='%234cd173' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* The comparison table: kinds of app, never particular ones. */
.table-scroll {
  max-width: 980px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.compare th,
.compare td {
  padding: 15px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  vertical-align: bottom;
}
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
}
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare .us-col {
  background: color-mix(in srgb, var(--nutrition-glow) 10%, transparent);
  color: var(--ink);
}
.compare thead .us-col { color: var(--nutrition-ink); }
.compare .yes,
.compare .no,
.compare .some {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  border-radius: 50%;
}
.compare .yes {
  background: rgba(30, 142, 62, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.3' fill='none' stroke='%231e8e3e' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.compare .no {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.compare .some-text { font-size: 0.85rem; font-weight: 600; color: var(--faint); }
.table-note {
  max-width: 980px;
  margin: 12px auto 0;
  font-size: 0.85rem;
  color: var(--faint);
}

/* ---------------------------------------------------------------- numbers */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.stat {
  padding: 8px clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--night-line);
}
.stat:first-child { border-left: 0; }
.stat .num {
  font-family: var(--cond);
  font-weight: 800;
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat .num.n { color: var(--nutrition-night); }
.stat .num.c { color: var(--coach-night); }
.stat .num.r { color: var(--run-night); }
.stat p {
  margin-top: 10px;
  color: var(--night-muted);
  font-size: 1rem;
  line-height: 1.45;
  max-width: 22ch;
}

/* ------------------------------------------------------------------ rings */

.rings {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 26px);
}
.ring { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ring svg { width: clamp(84px, 9vw, 112px); height: auto; overflow: visible; }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .track { stroke: var(--line); }
.ring .fill {
  stroke-dasharray: 314.16;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.ring .fill.k { stroke: var(--nutrition); stroke-dashoffset: 163.4; }   /* 48% */
.ring .fill.p { stroke: var(--train); stroke-dashoffset: 100.5; }       /* 68% */
.ring .fill.w { stroke: var(--water); stroke-dashoffset: 117.8; }       /* 62.5% */
.motion .rings:not(.in) .fill { stroke-dashoffset: 314.16; }
.ring .val {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.ring .lbl { font-size: 0.88rem; color: var(--faint); margin-top: -6px; }

/* --------------------------------------------------- shots beside copy */

.duo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.duo .phone:nth-child(2) {
  margin-left: calc(var(--pw) * -0.28);
  margin-bottom: calc(var(--pw) * -0.12);
  transform: rotate(4deg);
}
.duo .phone:first-child { transform: rotate(-3deg); }
.duo .phone { transition: transform 0.8s var(--ease); }
.duo:hover .phone:first-child { transform: rotate(-5deg) translateX(-10px); }
.duo:hover .phone:nth-child(2) { transform: rotate(6deg) translateX(10px); }

.card-shot {
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* The meal scan's three ways in. */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
}
.way {
  padding: 24px 24px 22px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}
.way .step {
  font-family: var(--cond);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--nutrition-ink);
}
.way h3 { font-size: 1.5rem; }
.way p { color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* ------------------------------------------- the island, in and out */

.isle {
  display: grid;
  justify-items: center;
  gap: 22px;
}
/* The top of a phone's screen for the island to sit in: rounded corners, a
 * status bar, and the wallpaper's glow — so the space it opens into reads as
 * a phone rather than an empty box. */
.isle-stage {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1240 / 640;
  border-radius: 56px 56px 0 0;
  background:
    radial-gradient(80% 90% at 20% 100%, rgba(76, 209, 115, 0.22), transparent 60%),
    radial-gradient(70% 80% at 90% 100%, rgba(242, 122, 38, 0.24), transparent 60%),
    linear-gradient(180deg, #17181c, #0c0d10);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1), inset 0 0 0 7px #050506;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.isle-stage .sb {
  position: absolute;
  top: 6.4%;
  font: 600 clamp(0.8rem, 2.2vw, 1.05rem)/1 var(--sans);
  color: #fff;
}
.isle-stage .sb.time { left: 9%; }
.isle-stage .sb.icons {
  right: 8%;
  width: clamp(48px, 11vw, 66px);
  height: clamp(10px, 2.2vw, 13px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 13'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='5' rx='1'/%3E%3Crect x='5' y='6' width='3' height='7' rx='1'/%3E%3Crect x='10' y='3.5' width='3' height='9.5' rx='1'/%3E%3Crect x='15' y='1' width='3' height='12' rx='1'/%3E%3Cpath d='M30 4.2a8.6 8.6 0 0 1 11.6 0l-1.5 1.6a6.4 6.4 0 0 0-8.6 0zM32.6 7a5 5 0 0 1 6.4 0l-1.5 1.6a2.8 2.8 0 0 0-3.4 0zM35.8 10.4l1.4 1.5-1.4 1.4-1.4-1.4z'/%3E%3Crect x='46' y='1.5' width='17' height='10' rx='3' fill='none' stroke='%23fff' stroke-opacity='.5'/%3E%3Crect x='48' y='3.5' width='13' height='6' rx='1.5'/%3E%3Crect x='64' y='5' width='1.5' height='3.5' rx='.7' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.isle-stage img {
  position: absolute;
  left: 50%;
  top: 4.2%;
  transform-origin: 50% 0;
  transition: transform 0.85s var(--spring), opacity 0.45s ease;
}
.isle-stage .closed {
  width: 50%;
  transform: translateX(-50%);
}
.isle-stage .opened {
  width: 92%;
  opacity: 0;
  transform: translateX(-50%) scale(0.54, 0.22);
}
.isle.open .closed { opacity: 0; transform: translateX(-50%) scale(1.6, 2.4); }
.isle.open .opened { opacity: 1; transform: translateX(-50%) scale(1); }

.switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.switch button {
  border: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--night-muted);
  font: 600 0.95rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.switch button[aria-pressed="true"] { background: #fff; color: #060708; }

.wrist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(48px, 7vw, 90px);
}
.wrist > figure {
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: center;
  padding: 24px 20px 22px;
  border-radius: var(--radius);
  background: var(--night-card);
  border: 1px solid var(--night-line);
}
.wrist figcaption {
  text-align: center;
  color: var(--night-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.wrist figcaption b { color: #fff; font-weight: 600; display: block; font-size: 1.05rem; margin-bottom: 2px; }
.wrist .watch { width: 150px; }
.wrist .pair { display: flex; gap: 14px; }
.wrist .pair .watch { width: 120px; }
.wrist .stack { width: min(100%, 250px); border-radius: 20px; }
.wrist .lock { width: min(100%, 320px); }

/* Widgets on a stand-in Home Screen. */
.homescreen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(121, 163, 255, 0.55), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 138, 61, 0.45), transparent 60%),
    linear-gradient(160deg, #5f6fa8, #2b2f4a);
  box-shadow: var(--shadow);
}
.homescreen img { border-radius: clamp(18px, 2.4vw, 26px); }
.homescreen .wide { grid-column: 1 / -1; }

/* --------------------------------------------------------------- privacy */

.cards4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.card4 {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
}
.card4 .mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--line);
}
.card4 .mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card4 h3 { font-size: 1.45rem; }
.card4 p { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.more {
  margin-top: 26px;
  font-weight: 600;
}
.more a { text-underline-offset: 4px; }

/* --------------------------------------------------------------- pricing */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}
.plan {
  position: relative;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--night);
  color: var(--night-ink);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.plan .tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--carbs);
  color: #2a1b00;
  font-family: var(--cond);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.plan .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}
.plan .price b {
  font-family: var(--cond);
  font-weight: 800;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.plan .price span { color: var(--night-muted); font-size: 1.1rem; }
.plan .sub { margin-top: 10px; color: var(--night-muted); max-width: 40ch; }
.plan ul {
  margin: 22px 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid var(--night-line);
  list-style: none;
  display: grid;
  gap: 12px;
}
.plan li { position: relative; padding-left: 30px; line-height: 1.45; }
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(76, 209, 115, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.8 2.8 5.4-5.6' fill='none' stroke='%234cd173' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.plan li b { font-weight: 600; color: #fff; }

.trial {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
}
.trial h3 {
  font-size: 1rem;
  font-family: var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.trial ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.trial li {
  position: relative;
  padding: 0 0 24px 34px;
}
.trial li:last-child { padding-bottom: 0; }
.trial li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: var(--card);
}
.trial li:first-child::before { border-color: var(--run); background: var(--run); }
.trial li::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 24px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}
.trial li:last-child::after { display: none; }
.trial li b { display: block; font-family: var(--cond); font-weight: 700; font-size: 1.35rem; }
.trial li p { color: var(--muted); font-size: 1rem; }
.fine {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--faint);
  line-height: 1.6;
}

/* ------------------------------------------------------------------- FAQ */

.qas {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}
/* .fold is the same open-and-close card, used for the depth of the app pages
 * rather than for a question: a separate name, so the build never counts a
 * folded section as a question in a page's structured data. */
.qa,
.fold {
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}
.qa summary,
.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.08rem;
}
.qa summary::-webkit-details-marker,
.fold > summary::-webkit-details-marker { display: none; }
.qa summary::after,
.fold > summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%23777' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat;
  transition: transform 0.35s var(--ease);
}
.qa[open] summary::after,
.fold[open] > summary::after { transform: rotate(45deg); }
.qa p {
  padding: 0 22px 22px;
  color: var(--muted);
  max-width: 70ch;
}
.qa::details-content,
.fold::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete;
}
.qa[open]::details-content,
.fold[open]::details-content { height: auto; }
.qas-more { text-align: center; margin-top: 26px; font-weight: 600; }

/* -------------------------------------------------------------- final cta */

.finale { padding-block: clamp(90px, 12vw, 170px); text-align: center; }
.finale h2 {
  font-size: clamp(3rem, 8vw, 6.4rem);
  font-weight: 800;
  line-height: 0.92;
  max-width: 14ch;
  margin-inline: auto;
}
.finale .lede { margin: 22px auto 0; text-align: center; }
.finale .hero-cta { justify-content: center; }

/* ----------------------------------------------------------------- footer */

.foot {
  padding: 56px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footwrap {
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
.footbrand { display: grid; gap: 12px; max-width: 34ch; }
.footbrand p { color: var(--muted); font-size: 0.98rem; }
.footcols { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.footcols div { display: grid; gap: 9px; align-content: start; }
.footcols a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
}
.footcols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foothead {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.footlaw {
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ---------------------------------------------------------- inner pages */

.pagehead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--night-ink);
  padding: clamp(56px, 8vw, 100px) var(--gutter) clamp(48px, 6vw, 80px);
}
.pagehead .wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 120% at 10% 0%, rgba(76, 209, 115, 0.22), transparent 60%),
    radial-gradient(50% 110% at 95% 10%, rgba(29, 95, 209, 0.26), transparent 60%);
}
.pagehead-in {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 16px;
}
.pagehead h1 {
  font-size: clamp(3rem, 8vw, 5.6rem);
  font-weight: 800;
  line-height: 0.92;
}
.pagehead .lede { color: #c9c9d1; }
.pagehead .eyebrow { color: var(--night-muted); }
.pagehead .eyebrow.c { color: var(--coach-night); }
.pagehead .eyebrow.n { color: var(--nutrition-night); }
.updated { color: var(--night-muted); font-size: 0.92rem; }

.prose {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(64px, 9vw, 120px);
}
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  margin-top: 2.1em;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 800;
  scroll-margin-top: calc(var(--barh) + 20px);
}
.prose h3 { margin-top: 1.8em; font-size: 1.5rem; }
.prose p,
.prose li { color: var(--ink-2); }
.prose ul,
.prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose a { text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose address { font-style: normal; }

.toc {
  margin-top: 1.6em;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}
.tochead {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.toc ol {
  margin: 10px 0 0;
  padding-left: 1.4em;
  columns: 2 220px;
  column-gap: 32px;
}
.toc li { margin: 0 0 6px; break-inside: avoid; color: var(--faint); }
.toc a { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.toc a:hover,
.toc a.here { color: var(--coach-ink); text-decoration: underline; text-underline-offset: 3px; }

/* The about page's facts and the support page's tasks. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 1.4em;
}
.facts > div {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}
.facts h3 { margin: 0 0 6px; font-size: 1.3rem; }
.facts p { color: var(--muted); font-size: 1rem; }
.tasks {
  margin-top: 1.2em;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tasks > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
}
.tasks > div:first-child { border-top: 0; }
.tasks dt { font-weight: 600; color: var(--ink); }
.tasks dd { margin: 0; color: var(--muted); }
.mailbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.2em;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}

/* The FAQ page's search. */
.findwrap {
  position: sticky;
  top: calc(var(--barh) + 10px);
  z-index: 5;
  margin-bottom: 1.6em;
}
.find {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.find-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
}
.find input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1.05rem/1.2 var(--sans);
  outline: none;
}
.find input::-webkit-search-cancel-button { display: none; }
.find-clear {
  display: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.find-clear svg { width: 16px; height: 16px; margin: auto; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.find.has-text .find-clear { display: grid; }
.find.has-text .find-key { display: none; }
.find-key {
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  color: var(--faint);
  font: 600 0.85rem/1 var(--sans);
}
.find-count { min-height: 1.4em; margin-top: 10px; font-size: 0.92rem; color: var(--faint); }
.qa-item {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.qa-item h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
}
.qa-item p { margin-top: 10px; color: var(--ink-2); }
.qa-item mark {
  background: color-mix(in srgb, var(--carbs) 40%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}
.prose h2.tail { margin-top: 2em; }

/* ---------------------------------------------------------------- motion */

/* Entrances: from a little below and see-through to where everything already
 * is. Only when the page's script runs and nobody has asked for less motion,
 * so with either missing the page simply sits finished. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal].in { opacity: 1; transform: none; }
.d1 { --i: 1; }
.d2 { --i: 2; }
.d3 { --i: 3; }
.d4 { --i: 4; }
.d5 { --i: 5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .aurora span { animation: none; }
  .float { animation: none; }
  .tilt { transform: none !important; }
  .screens > img { transform: none !important; filter: none !important; transition: opacity 0.3s ease; }
  .isle-stage img { transition: opacity 0.3s ease; }
}

/* Page-to-page: the browser cross-fades between pages where it can. */
@view-transition { navigation: auto; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  /* Below this the hero's column is too narrow for the pieces round the
   * phone: they ran into its buttons or off the edge of the window. */
  .float { display: none; }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-grid,
  .feature,
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .hero { text-align: left; }
  .feature.flip .copy { order: 0; }
  .feature .visual { min-height: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .stat:nth-child(3) { border-left: 0; }
  .wrist { grid-template-columns: minmax(0, 1fr); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .contrast { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .bar { gap: 6px; padding-inline: 14px; }
  .brand { font-size: 1.12rem; gap: 7px; }
  .brand img { width: 24px; height: 24px; }
  .bar nav { flex-wrap: nowrap; gap: 0; }
  .bar nav > a,
  .drop > summary { padding: 7px 7px; font-size: 0.88rem; }
  .dropmenu { right: -40px; }
  .bar nav > a.badge-sm { display: none; }
  .merge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merge.joined .tile:nth-child(1) { transform: translate(50%, 50%) scale(0.6); }
  .merge.joined .tile:nth-child(2) { transform: translate(-50%, 50%) scale(0.6); }
  .merge.joined .tile:nth-child(3) { transform: translate(50%, -50%) scale(0.6); }
  .merge.joined .tile:nth-child(4) { transform: translate(-50%, -50%) scale(0.6); }
  .cards4 { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .homescreen { gap: 12px; padding: 14px; border-radius: 26px; }
  .duo .phone:nth-child(2) { display: none; }
  .duo .phone:first-child { transform: none; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; padding-inline: 0; }
}

/* The outgoing half of a page change, where the browser cannot cross-fade. */
.leaving body { opacity: 0; transition: opacity 0.17s ease; }

/* Read by screen readers, not shown. */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.trust-center { justify-content: center; }

/* -------------------------------------------------------------- app pages */

/* The pages about one thing the app does, built from website-src/pages/.
 * They reuse the home page's pieces; these are the few differences. Their
 * title is a sentence rather than the home page's four words, so it is set
 * smaller, and nothing in their first screen fades in: a headline that waits
 * for the script to reveal it is what held the home page's main content back
 * to 4.8 s on a phone. */
.apphero h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 0.94; max-width: 15ch; }
.hero-shot { display: flex; justify-content: center; }
.ways.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.head-gap { margin-top: clamp(64px, 9vw, 120px); }
.compare.words { min-width: 0; }
.compare.words th,
.compare.words td { text-align: left; }
.compare.words td { color: var(--ink-2); }
.sources { font-size: 0.9rem; color: var(--faint); }
.sources a { text-underline-offset: 3px; }

/* Folded, since 21 October 2026. An app page keeps the sale on screen: the
 * headline, one line of proof under it, the price and how to cancel, the App
 * Store button, and each heading with its short answer. The rest is written
 * in full and put one tap away in a .fold, which search engines read the
 * same as the open page. */
.apphero .proofline { margin-top: 18px; text-wrap: balance; }
.folds {
  max-width: 980px;
  display: grid;
  gap: 10px;
}
.folds + .head { margin-top: clamp(64px, 9vw, 120px); }
.fold-in {
  display: grid;
  gap: 18px;
  padding: 2px 22px 24px;
}
.fold-in p { color: var(--muted); max-width: 70ch; }
.fold-in h3 { font-size: 1.5rem; }
.fold-in .table-scroll,
.fold-in .table-note,
.fold-in .ways,
.fold-in .cards4,
.fold-in .wrist,
.fold-in .more { margin: 0; }
.fold-in .table-note { max-width: none; font-size: 0.85rem; color: var(--faint); }
.fold-in .sources { font-size: 0.9rem; color: var(--faint); }
.fold-in .card4 { background: var(--bg); }
.cards4.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Words beside a phone, inside a fold. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.split > div { display: grid; gap: 16px; align-content: start; }
.shot { margin: 0; display: grid; justify-items: center; gap: 12px; }
.shot figcaption { font-size: 0.88rem; color: var(--faint); text-align: center; max-width: 32ch; }
.wrist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* One run or one workout, start to finish: the free trial's timeline,
 * without its card, and its first dot in the page's own colour. */
.trial.bare { padding: 0; border: 0; border-radius: 0; background: none; }
.trial.bare ol { margin: 0; }
.trial.train li:first-child::before { border-color: var(--train); background: var(--train); }
.trial.food li:first-child::before { border-color: var(--nutrition); background: var(--nutrition); }
/* The App Store button again, under the proof, with the offer beside it. */
.again {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
}
.again .trust { margin: 0; color: var(--muted); }
.guarantee { font-size: 0.95rem; color: var(--muted); max-width: 60ch; }
.finale .guarantee { margin: 16px auto 0; color: var(--night-muted); }
/* Where it can be had, in one plain line. */
.avail {
  max-width: 860px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 1080px) {
  .ways.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ways.four { grid-template-columns: minmax(0, 1fr); }
  .split,
  .wrist.two,
  .cards4.three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fold-in { padding-inline: 16px; }
}