/* Vital website. Plain CSS, no build step, no external requests, no inline styles (the CSP forbids them).
   Look: full-width black sections alternating with white and very light gray ones, big bold capital headlines over a
   small capital subhead, pill buttons, large real phone screenshots that run off the bottom of their section.
   Colors come from the app's own palettes (mobile/src/theme/palettes.ts): near-black and off-white pages and the four
   macro colors (calories blue, protein orange, fat yellow, carbs green). Type is the system font, so nothing downloads.
   Black sections stay black in both themes. White and gray sections follow the visitor's system setting unless they
   pick one with the toggle (html[data-theme]). Text contrast is checked against WCAG AA by tools/check-site.mjs. */

:root {
  color-scheme: light dark;

  /* "white" section tokens (the default) */
  --bg: #ffffff;
  --surface: #f4f4f6;
  --surface-2: #ececf0;
  --border: #e2e2e8;
  --border-strong: #767680;
  --text: #111113;
  --text-2: #4a4a52;
  --text-3: #5e5e66;
  --link: #2a62cc;
  --accent: #2a62cc;
  --accent-soft: #e8effc;
  --accent-border: #bccdf0;
  --btn-bg: #111113;
  --btn-text: #ffffff;
  --focus: #2a62cc;
  --danger: #c93c3c;
  --ok: #217a45;
  --shadow: 0 1px 2px rgba(17, 17, 19, 0.06), 0 14px 36px rgba(17, 17, 19, 0.1);

  /* "gray" section tokens */
  --gray-bg: #f7f7f7;
  --gray-surface: #ffffff;

  --calories: #2a62cc;
  --protein: #b85514;
  --fat: #936f00;
  --carbs: #217a45;

  --radius: 20px;
  --radius-sm: 12px;
  --gutter: 20px;
  --max: 1160px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --surface: #1c1c1e;
    --surface-2: #262628;
    --border: #2c2c2e;
    --border-strong: #8a8a8e;
    --text: #f5f5f5;
    --text-2: #b0b0b4;
    --text-3: #9a9a9e;
    --link: #7fa8f5;
    --accent: #5b8def;
    --accent-soft: #18202e;
    --accent-border: #2a3a54;
    --btn-bg: #ffffff;
    --btn-text: #121212;
    --focus: #7fa8f5;
    --danger: #e86a6a;
    --ok: #7fd89e;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
    --gray-bg: #1a1a1c;
    --gray-surface: #242427;

    --calories: #5b8def;
    --protein: #f0975a;
    --fat: #f0cc5c;
    --carbs: #5fc786;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1c1c1e;
  --surface-2: #262628;
  --border: #2c2c2e;
  --border-strong: #8a8a8e;
  --text: #f5f5f5;
  --text-2: #b0b0b4;
  --text-3: #9a9a9e;
  --link: #7fa8f5;
  --accent: #5b8def;
  --accent-soft: #18202e;
  --accent-border: #2a3a54;
  --btn-bg: #ffffff;
  --btn-text: #121212;
  --focus: #7fa8f5;
  --danger: #e86a6a;
  --ok: #7fd89e;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  --gray-bg: #1a1a1c;
  --gray-surface: #242427;

  --calories: #5b8def;
  --protein: #f0975a;
  --fat: #f0cc5c;
  --carbs: #5fc786;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Section flavors. Black never changes with the theme. */
.sec-gray {
  --bg: var(--gray-bg);
  --surface: var(--gray-surface);
  background: var(--bg);
}

.sec-black,
.site-header,
.site-footer {
  --bg: #000000;
  --surface: #131315;
  --surface-2: #1c1c1e;
  --border: #2a2a2d;
  --border-strong: #8a8a8e;
  --text: #ffffff;
  --text-2: #c4c4c8;
  --text-3: #9a9a9e;
  --link: #7fa8f5;
  --accent: #5b8def;
  --accent-soft: #18202e;
  --accent-border: #2a3a54;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --focus: #7fa8f5;
  --danger: #e86a6a;
  --ok: #7fd89e;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.6);
  --calories: #5b8def;
  --protein: #f0975a;
  --fat: #f0cc5c;
  --carbs: #5fc786;
  background: var(--bg);
  color: var(--text);
}

[hidden] {
  display: none !important;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  background: #000;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

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

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

::selection {
  background: var(--accent);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 700;
}

.skip-link:focus {
  top: 10px;
}

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

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

.narrow {
  max-width: 780px;
}

.center {
  text-align: center;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #1d1d20;
}

.site-header .bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 68px;
  padding-top: 8px;
  padding-bottom: 8px;
  max-width: max(var(--max), 72rem); /* same as the page at 16px text; grows with a larger default text size so the bar still fits one row */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: auto;
}

.brand svg {
  width: 38px;
  height: auto;
  flex: none;
  color: #fff;
}

.nav {
  order: 3;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  padding-bottom: 8px;
}

.js .nav {
  display: none;
}

.js .nav-open .nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px 0 12px;
}

.nav a,
.nav summary {
  display: block;
  color: #d4d4d8;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}

.nav summary::-webkit-details-marker {
  display: none;
}

.nav summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 0 3px 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.nav a:hover,
.nav summary:hover,
.nav details[open] > summary {
  color: #fff;
  background: #1a1a1d;
}

.nav a[aria-current="page"],
.nav details.current > summary {
  color: #fff;
  box-shadow: inset 0 -2px 0 #fff;
}

.nav details {
  position: relative;
}

.nav .dd-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #0d0d0f;
  border: 1px solid #2a2a2d;
  border-radius: 14px;
}

.nav .dd-list a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 11px 14px;
}

.nav .dd-list small {
  display: block;
  font-weight: 400;
  color: #9a9a9e;
  font-size: 0.84rem;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-actions .btn-sm {
  display: none;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #34343a;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.icon-btn:hover {
  border-color: #8a8a8e;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.theme-toggle,
.menu-btn {
  display: none;
}

.js .theme-toggle,
.js .menu-btn {
  display: inline-grid;
}

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

@media (min-width: 560px) {
  .bar-actions .btn-sm {
    display: inline-flex;
  }
}

/* 68.75em is 1100px at the default text size. In em so the menu button comes back when someone raises the browser's
   default text size (the one-row header needs about 1100px at 16px text). */
@media (min-width: 68.75em) {
  .nav,
  .js .nav {
    display: flex;
    order: 0;
    width: auto;
    padding-bottom: 0;
    margin: 0 auto 0 18px;
  }

  .nav .dd-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 290px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }

  .brand {
    margin-right: 0;
  }

  .js .menu-btn {
    display: none;
  }
}

@media (max-width: 68.74em) {
  .nav .dd-list {
    margin: 0 0 6px 12px;
    background: transparent;
    border: 0;
    border-left: 2px solid #2a2a2d;
    border-radius: 0;
  }

  /* The open menu is taller than a short or landscape phone and the header is sticky, so scroll the menu itself. */
  .js .nav-open .nav {
    flex-wrap: nowrap; /* a column that is height-limited would otherwise wrap into a second column off to the side */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav a:focus-visible,
  .nav summary:focus-visible {
    outline-offset: -3px; /* inside the box, so the scrolling menu does not clip the focus ring */
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 48px;
  border: 2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-text);
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  text-decoration: none;
  opacity: 0.88;
}

.btn-sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.78rem; /* was 0.72rem, 11.5px */
}

.btn-lg {
  min-height: 60px;
  padding: 0 36px;
  font-size: 0.86rem;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
  opacity: 1;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
  font-size: clamp(2.3rem, 8.2vw, 5.6rem);
  overflow-wrap: break-word;
}

h2.display {
  font-size: clamp(2rem, 6.2vw, 4rem);
}

h3.display {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.05;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}

.subhead {
  margin: 18px 0 0;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.6;
}

.kicker {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.lede {
  font-size: clamp(1.08rem, 1.1vw + 0.9rem, 1.3rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 54ch;
}

.section-lede {
  color: var(--text-2);
  max-width: 62ch;
  margin: 18px 0 0;
}

.center .lede,
.center .section-lede,
.center .subhead {
  margin-left: auto;
  margin-right: auto;
}

.muted {
  color: var(--text-3);
}

.small {
  font-size: 0.9rem;
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  word-break: break-word;
}

/* ---------- Page structure ---------- */

main {
  display: block;
}

section {
  padding: clamp(64px, 9vw, 128px) 0;
  background: var(--bg);
  color: var(--text);
}

.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.page-head {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 84px);
}

.page-head h1 {
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  max-width: 18ch;
}

.page-head.center h1 {
  margin-left: auto;
  margin-right: auto;
}

.page-head .lede {
  margin: 20px 0 0;
}

.crumbs {
  margin: 0 0 18px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.crumbs a {
  color: var(--text-2);
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0 0;
  text-align: center;
  background:
    radial-gradient(55% 60% at 50% 100%, rgba(91, 141, 239, 0.22), transparent 70%),
    #000;
}

.hero h1 {
  max-width: 15ch;
  margin: 0 auto;
}

.hero .subhead {
  margin-top: 22px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 34px 0 0;
}

.hero .waitlist {
  margin: 22px auto 0;
  text-align: left;
}

.proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.proof .ico {
  color: var(--ok);
  width: 1.1em;
  height: 1.1em;
}

/* Phones that run off the bottom of their section */

.stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  height: clamp(340px, 62vw, 640px);
  margin-top: clamp(36px, 5vw, 64px);
}

.stage .phone {
  flex: none;
}

.stage .phone.side {
  display: none;
  margin-top: 70px;
}

.stage .phone.side.l {
  margin-right: -64px;
}

.stage .phone.side.r {
  margin-left: -64px;
}

.stage .phone.main {
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .stage .phone.side {
    display: block;
  }
}

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

.pillar .copy .subhead {
  margin-bottom: 20px;
}

.pillar .copy p {
  color: var(--text-2);
  max-width: 50ch;
}

.pillar .copy .btn {
  margin-top: 12px;
}

.pillar-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  height: clamp(360px, 70vw, 600px);
}

.pillar-stage .phone + .phone {
  display: none;
}

.pillar-flush {
  padding-bottom: 0;
}

@media (min-width: 560px) {
  .pillar-stage .phone + .phone {
    display: block;
    margin-left: -56px;
    margin-top: 60px;
  }
}

@media (min-width: 900px) {
  .pillar {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }

  .pillar.flip .pillar-stage {
    order: -1;
  }

  .pillar-stage {
    height: 640px;
    align-self: end;
  }
}

/* ---------- Play block and form ---------- */

.play-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 48px;
  border: 2px dashed var(--border-strong);
  color: var(--text-2);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.play-live {
  display: none;
}

html[data-play="live"] .play-live {
  display: inline-flex;
}

html[data-play="live"] .play-soon {
  display: none;
}

html[data-beta="closed"] [data-beta-cta] {
  display: none;
}

.waitlist {
  max-width: 540px;
}

.waitlist label.lbl {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.waitlist .row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waitlist input[type="email"] {
  width: 100%;
  font: inherit;
  padding: 12px 20px;
  min-height: 56px;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: 48px;
}

.waitlist input[type="email"]::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.waitlist input[type="email"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.waitlist .btn {
  min-height: 56px;
}

.waitlist .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist .opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* the whole label is the tap target */
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--text-2);
}

.waitlist .opt input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  flex: none;
}

.waitlist .fine {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
}

.form-status {
  margin: 12px 0 0;
  padding: 0;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status[data-state="ok"] {
  color: var(--ok);
}

.form-status[data-state="error"],
.form-status[data-state="fallback"] {
  color: var(--text);
  border-left: 4px solid var(--danger);
  padding-left: 12px;
}

@media (min-width: 560px) {
  .waitlist .row {
    flex-direction: row;
  }

  .waitlist input[type="email"] {
    flex: 1;
  }
}

/* ---------- Phone frames ---------- */

.phone {
  --pw: 300px;
  position: relative;
  width: min(100%, var(--pw));
  margin: 0;
  padding: 10px;
  background: #0a0a0b;
  border-radius: 46px;
  box-shadow:
    0 0 0 1.5px #3a3a3f,
    0 0 0 8px #141416,
    var(--shadow);
}

.phone::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: #0a0a0b;
  box-shadow: inset 0 0 0 2px #232326;
  z-index: 2;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
  background: #121212;
}

.phone-xl {
  --pw: 380px;
}

.phone-lg {
  --pw: 340px;
}

.phone-md {
  --pw: 300px;
}

.phone-sm {
  --pw: 250px;
}

.phone-xs {
  --pw: 210px;
}

@media (max-width: 420px) {
  .phone {
    padding: 8px;
    border-radius: 38px;
  }

  .phone img {
    border-radius: 30px;
  }
}


/* The "how the connection works" picture: three boxes in a column, joined by short lines */

.pillar .art {
  display: flex;
  justify-content: center;
}

.flow {
  counter-reset: flow;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
  width: 100%;
  max-width: 440px;
}

.flow li {
  position: relative;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.flow li b {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.flow li span {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.96rem;
}

.flow li + li::before {
  content: "";
  position: absolute;
  left: 40px;
  top: -27px;
  width: 2px;
  height: 26px;
  background: var(--border-strong);
}

.flow li + li::after {
  content: "";
  position: absolute;
  left: 35px;
  top: -9px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  transform: rotate(45deg);
}

/* ---------- Fact strip, grids, cards ---------- */

.strip {
  padding: 0;
}

.strip ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* one column on phones: two columns at 320px wrap each fact into 8 short lines */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .strip ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.strip li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.strip li {
  padding: 26px 18px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.strip li span {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  color: var(--text-2);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
}

.strip .ico {
  color: var(--accent);
  margin-top: 1px;
}

@media (min-width: 860px) {
  .strip ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .strip li {
    padding: 32px 24px;
  }

  .strip li + li {
    border-left: 1px solid var(--border);
  }
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid.two,
  .grid.three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid.three {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.card h3 {
  margin: 16px 0 8px;
}

.card p {
  margin: 0 0 10px;
  color: var(--text-2);
}

.card p:last-child {
  margin-bottom: 0;
}

.card .ico {
  width: 30px;
  height: 30px;
}

.tag {
  display: inline-block;
  align-self: flex-start; /* inside a flex column (.post-card) it was stretched into a full-width bar */
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.c-cal { color: var(--calories); }
.c-pro { color: var(--protein); }
.c-fat { color: var(--fat); }
.c-carb { color: var(--carbs); }

.feature-row {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(32px, 4vw, 56px) 0;
}

.feature-row + .feature-row {
  border-top: 1px solid var(--border);
}

.feature-row .copy h2 {
  margin: 10px 0 16px;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.feature-row .copy p {
  color: var(--text-2);
  max-width: 52ch;
}

.feature-row .art {
  display: flex;
  justify-content: center;
}

@media (min-width: 860px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }

  .feature-row.flip .art {
    order: -1;
  }
}

.ticks {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--text-2);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--ok);
  border-bottom: 2.5px solid var(--ok);
  transform: rotate(-45deg) scale(0.9);
}

.ticks.no li::before {
  border: 0;
  width: 10px;
  height: 2.5px;
  top: 0.8em;
  left: 4px;
  transform: none;
  background: var(--text-3);
}

/* ---------- Steps ---------- */

.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.steps li {
  counter-increment: step;
  padding: 30px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-3);
}

.steps h3 {
  margin-bottom: 8px;
}

.steps p {
  margin: 0;
  color: var(--text-2);
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps.four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .steps.four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Compare, pricing ---------- */

.compare {
  display: grid;
  gap: 16px;
}

.compare .col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
}

.compare .col.hl {
  border: 2px solid var(--text);
}

.compare h3 {
  margin-bottom: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

@media (min-width: 760px) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.honest {
  margin-top: 16px;
  padding: 24px 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
}

.honest h3 {
  margin-bottom: 8px;
  color: var(--text);
}

.honest ul {
  margin: 0;
  padding-left: 20px;
}

.honest li {
  margin-bottom: 4px;
}

.plans {
  display: grid;
  gap: 16px;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.plan.featured {
  border: 2px solid var(--text);
}

.plan h3 {
  font-size: 1.6rem;
}

.plan .for {
  margin: 6px 0 20px;
  color: var(--text-2);
}

.plan .ticks li {
  font-size: 0.98rem;
}

@media (min-width: 760px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Callouts, notes, promises ---------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--fat);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0;
  max-width: 72ch;
}

.callout.ok {
  border-left-color: var(--ok);
}

.callout.info {
  border-left-color: var(--accent);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout strong {
  color: var(--text);
}

.note {
  margin: 22px 0 0;
  font-size: 0.92rem;
  color: var(--text-3);
  max-width: 70ch;
}

.promise {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 72ch;
}

.promise li {
  position: relative;
  padding-left: 34px;
  color: var(--text-2);
}

.promise li strong {
  color: var(--text);
}

.promise li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
}

/* ---------- Strips: stories, articles, updates ---------- */

.strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.strip-head + .empty-slot,
.strip-head + .grid {
  margin-bottom: 0;
}

.empty-slot + .strip-head,
.grid + .strip-head {
  margin-top: clamp(48px, 7vw, 80px);
}

.strip-head h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.strip-head a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* was a 21px tall link */
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.empty-slot {
  padding: 34px 28px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
}

.empty-slot h3 {
  margin-bottom: 8px;
  color: var(--text);
}

.empty-slot p {
  margin: 0;
  max-width: 62ch;
}

.post-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.post-card:hover {
  border-color: var(--text-3);
}

.post-card h3 {
  margin: 10px 0 10px;
  color: var(--text);
  font-size: 1.25rem;
}

.post-card p {
  margin: 0 0 16px;
  color: var(--text-2);
}

.post-card .more {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.update {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.update time,
.update .when {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.update h3 {
  margin-bottom: 10px;
}

.update ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
}

.update li {
  margin-bottom: 6px;
}

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

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

details > summary {
  min-height: 44px; /* the optional-height disclosure on /goal-date-calculator/ was 40px */
}

.faq summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 700;
  list-style-position: outside;
  margin-left: 20px;
  padding-left: 4px;
}

.faq summary::marker {
  color: var(--text-3);
}

.faq details > div {
  padding: 0 20px 18px;
  color: var(--text-2);
}

.faq details p {
  margin: 0 0 10px;
}

.faq details p:last-child {
  margin-bottom: 0;
}

.faq h2 {
  margin: 44px 0 14px;
  font-size: 1.4rem;
}

.faq h2:first-child {
  margin-top: 0;
}

/* ---------- Final call to action ---------- */

.cta {
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(91, 141, 239, 0.22), transparent 70%),
    #000;
}

.cta h2 {
  max-width: 16ch;
  margin: 0 auto;
}

.cta .hero-cta {
  margin-top: 30px;
}

.cta .waitlist {
  margin: 24px auto 0;
  text-align: left;
}

/* ---------- Document and article pages ---------- */

.doc {
  padding: clamp(40px, 6vw, 72px) 0 96px;
}

.doc h1 {
  font-size: clamp(1.9rem, 4.6vw + 0.4rem, 3rem);
  margin: 0 0 10px;
}

.doc .updated {
  color: var(--text-3);
  margin: 0 0 32px;
  font-size: 0.95rem;
}

.doc h2 {
  font-size: 1.4rem;
  margin: 42px 0 10px;
}

.doc h3 {
  margin: 26px 0 6px;
}

.doc p,
.doc li {
  max-width: 72ch;
  color: var(--text-2);
}

.doc ol,
.doc ul {
  padding-left: 24px;
}

.doc li {
  margin-bottom: 8px;
}

.doc strong {
  color: var(--text);
}

.doc a,
.refs a {
  overflow-wrap: anywhere;
}

.prose p,
.prose li {
  font-size: 1.08rem;
}

.prose h2 {
  font-size: 1.6rem;
}

.refs {
  font-size: 0.94rem;
}

.refs li {
  color: var(--text-2);
}

.toc {
  margin: 0 0 32px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 72ch;
}

.toc p {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--text);
}

.toc ul {
  margin: 0;
  padding-left: 20px;
}

.toc li {
  margin-bottom: 4px;
}

/* ---------- Code blocks and tables ---------- */

.code {
  position: relative;
  margin: 16px 0 24px;
  max-width: 72ch;
}

.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: #0b0b0c;
  color: #f5f5f5;
  border: 1px solid #2a2a2d;
  border-radius: var(--radius-sm);
  line-height: 1.55;
  tab-size: 2;
}

.js .code pre {
  padding-right: 84px;
}

/* A long line wraps instead of scrolling sideways (a scrollable box the keyboard cannot reach is an axe failure; it was 836px of text in a 698px box at 768 on /how-it-works-numbers/). */
.code pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid #5a5a5e;
  border-radius: 8px;
  background: #1c1c1e;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.table-wrap {
  overflow-x: auto;
  margin: 16px 0 24px;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.96rem;
}

th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* On phones the 480px minimum pushed the last column off screen behind a sideways scroll nobody sees. Let the cells wrap instead. */
@media (max-width: 640px) {
  table {
    min-width: 0;
    font-size: 0.92rem;
  }

  th,
  td {
    padding: 10px 8px;
    overflow-wrap: anywhere;
  }
}

th {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

td {
  color: var(--text-2);
}

td:first-child {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Calculators ---------- */

.calc {
  display: grid;
  gap: 24px;
  align-items: start;
}

.calc-form,
.calc-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.field {
  margin: 0 0 18px;
  border: 0;
  padding: 0;
  min-width: 0;
}

.field > label,
.field > legend {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.96rem;
}

.field .hint {
  display: block;
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
}

.field input[type="number"],
.field select {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seg label {
  position: relative;
  margin: 0;
  font-weight: 600;
}

.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.seg span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
}

.seg input:checked + span {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
}

.seg input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.field-error {
  margin: 8px 0 0;
  color: var(--text);
  border-left: 4px solid var(--danger);
  padding-left: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}

.field-error:empty {
  display: none;
}

.formula-pre {
  white-space: pre-wrap;
}

.result-big {
  margin: 4px 0 2px;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-unit {
  color: var(--text-2);
  font-weight: 600;
}

.macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.macro {
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}

.macro b {
  display: block;
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.macro span {
  font-size: 0.85rem;
  font-weight: 700;
}

.macro small {
  display: block;
  color: var(--text-3);
  font-size: 0.8rem;
}

.formula {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-2);
  overflow-x: auto;
}

.after-result {
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

.after-result p {
  margin: 0 0 12px;
  color: var(--text);
  font-weight: 600;
}

.empty-result {
  color: var(--text-2);
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: 1fr 1fr;
  }

  .calc-result {
    position: sticky;
    top: 92px;
  }
}

.tool-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tool-card:hover {
  border-color: var(--text-3);
}

.tool-card h3 {
  color: var(--text);
}

/* ---------- Press ---------- */

.swatches {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 16px 0 28px;
  padding: 0;
  list-style: none;
}

.swatch {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.swatch i {
  display: block;
  height: 64px;
}

.swatch .sw-black { background: #000000; }
.swatch .sw-bg { background: #121212; }
.swatch .sw-surface { background: #1c1c1e; }
.swatch .sw-light { background: #f4f4f6; }
.swatch .sw-white { background: #ffffff; }
.swatch .sw-cal { background: #5b8def; }
.swatch .sw-pro { background: #f0975a; }
.swatch .sw-fat { background: #f0cc5c; }
.swatch .sw-carb { background: #5fc786; }

.swatch p {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-2);
}

.swatch b {
  display: block;
  color: var(--text);
}

.logo-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 16px 0 28px;
}

.logo-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.logo-tile .art {
  display: grid;
  place-items: center;
  height: 150px;
  background: #000;
}

.logo-tile .art.on-light {
  background: #f4f4f6;
}

.logo-tile .art img {
  max-height: 84px;
  width: auto;
}

.logo-tile p {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.shot-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 16px 0 28px;
}

.shot-grid figure {
  margin: 0;
}

.shot-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.shot-grid figcaption {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-2);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid #1d1d20;
  padding: 56px 0 44px;
  color: var(--text-3);
  font-size: 0.93rem;
}

.footer-grid {
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 36px;
}

.footer-grid h2 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 800;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 0;
}

.footer-grid a,
.site-footer .legal a {
  color: var(--text-2);
  display: inline-block;
  padding: 4px 0;
}

/* 44px tall tap targets for the link columns (the legal paragraph keeps its inline links) */
.footer-grid li a,
.footer-brand p a {
  padding: 10px 0;
}

/* .footer-grid a above out-ranks .brand, which dropped the logo's gap and made the wordmark grey */
.footer-grid .brand {
  display: inline-flex;
  min-height: 44px;
  padding: 0;
  color: #fff;
}

.footer-brand {
  grid-column: 1 / -1;
}

.footer-brand p {
  max-width: 44ch;
  margin: 12px 0 0;
}

.site-footer .legal p {
  margin: 0 0 8px;
  max-width: 82ch;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(4, 1fr);
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- Motion, print, forced colors ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .btn,
  .icon-btn,
  .play-soon {
    border: 2px solid ButtonText;
  }

  /* The logo mark kept its own white color (an SVG keeps author colors), so it was white on the forced white page. */
  .brand svg {
    color: inherit;
  }
}

@media print {
  .site-header,
  .waitlist,
  .skip-link,
  .cta {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}