/* ProteinMaxxing — proteinmaxxing.ai
   Implemented from the Claude Design project "Proteinmaxxing.ai Website" → Home.dc.html.
   Palette and type carried over from the Together AI design-system tokens the design imports;
   the accent pair (periwinkle → purple) is this page's own override of the system gradient. */

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

:root {
  /* surfaces + ink */
  --ink: #000000;
  --paper: #ffffff;
  --navy: #010120;
  --navy-hairline: #26263a;
  --grey: #999999;
  --hairline: #ebebeb;
  --key-alt: #f7f7f7;

  /* accents — decorative only */
  --periwinkle: #bdbbff;
  --purple: #8b2ce8;
  --brand-gradient: linear-gradient(97deg, #bdbbff 0%, #8b2ce8 100%);

  /* type */
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* geometry */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shell-max: 1240px;
  --gutter: 32px;
  --band-pad: 112px;
  --control-h: 64px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: only light;
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --band-pad: 72px; }
}

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

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/22px var(--font-display);
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, dt, ol, li, figure { margin: 0; }
ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-underline-offset: 3px;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}

::selection { background: var(--periwinkle); color: var(--navy); }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------- shell */

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

/* ------------------------------------------------------------ typography */

.eyebrow {
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.muted { color: var(--grey); }
.accent-purple { color: var(--purple); }
.accent-periwinkle { color: var(--periwinkle); }

.h-xxl {
  font: 500 clamp(2.5rem, 6.6vw, 4.75rem) / 1 var(--font-display);
  letter-spacing: -0.0342em;
  text-wrap: balance;
}

.h-xl {
  font: 500 clamp(2.125rem, 5.2vw, 3.75rem) / 1.033 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.h-md {
  font: 500 clamp(2rem, 4.5vw, 3.25rem) / 1.038 var(--font-display);
  letter-spacing: -0.0288em;
  text-wrap: balance;
}

.h-lg {
  font: 500 clamp(1.875rem, 3.8vw, 2.75rem) / 1.09 var(--font-display);
  letter-spacing: -0.0295em;
  text-wrap: balance;
}

.body-xl {
  font: 400 clamp(1.125rem, 1.8vw, 1.375rem) / 1.364 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.body-lg {
  font: 400 clamp(1.0625rem, 1.6vw, 1.25rem) / 1.4 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.body-md {
  font: 400 clamp(1rem, 1.3vw, 1.125rem) / 1.444 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- wordmark
   Fourteen letters ramping 200 → 900 across a variable-width Archivo. */

.wordmark {
  font-family: var(--font-wordmark);
  font-size: 19px;
  line-height: 19px;
  letter-spacing: -0.7px;
  color: var(--ink);
  white-space: nowrap;
  display: inline-block;
}
.wordmark--light { color: var(--paper); }

.wordmark > span:nth-child(1)  { font-variation-settings: "wdth" 100, "wght" 200; }
.wordmark > span:nth-child(2)  { font-variation-settings: "wdth" 100, "wght" 254; }
.wordmark > span:nth-child(3)  { font-variation-settings: "wdth" 100, "wght" 308; }
.wordmark > span:nth-child(4)  { font-variation-settings: "wdth" 100, "wght" 362; }
.wordmark > span:nth-child(5)  { font-variation-settings: "wdth" 100, "wght" 415; }
.wordmark > span:nth-child(6)  { font-variation-settings: "wdth" 100, "wght" 469; }
.wordmark > span:nth-child(7)  { font-variation-settings: "wdth" 100, "wght" 523; }
.wordmark > span:nth-child(8)  { font-variation-settings: "wdth" 100, "wght" 577; }
.wordmark > span:nth-child(9)  { font-variation-settings: "wdth" 100, "wght" 631; }
.wordmark > span:nth-child(10) { font-variation-settings: "wdth" 100, "wght" 685; }
.wordmark > span:nth-child(11) { font-variation-settings: "wdth" 100, "wght" 738; }
.wordmark > span:nth-child(12) { font-variation-settings: "wdth" 100, "wght" 792; }
.wordmark > span:nth-child(13) { font-variation-settings: "wdth" 100, "wght" 846; }
.wordmark > span:nth-child(14) { font-variation-settings: "wdth" 100, "wght" 900; }

.wordmark-link { display: block; text-decoration: none; }
.wordmark-link:hover { opacity: .6; }

/* --------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  color: var(--grey);
  text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

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

.btn-compact {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(1, 1, 32, .18);
}
.btn-compact:active { transform: translateY(0) scale(.985); box-shadow: none; }

.btn-store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 11px 24px;
  min-height: var(--control-h);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(1, 1, 32, .22);
}
.btn-store:active { transform: translateY(0) scale(.99); box-shadow: none; }

.btn-store-kicker { color: rgba(255, 255, 255, .65); }

.btn-store-name {
  font: 500 24px/26px var(--font-display);
  letter-spacing: -0.0208em;
  margin-top: 6px;
}

.btn-store--invert {
  background: var(--paper);
  color: var(--navy);
}
.btn-store--invert .btn-store-kicker { color: rgba(1, 1, 32, .6); }
.btn-store--invert:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font: 500 16px/16px var(--font-mono);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.btn-outline:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0) scale(.99); }

.btn-outline--dark {
  border-color: var(--navy-hairline);
  color: var(--paper);
}
.btn-outline--dark:hover {
  border-color: var(--paper);
  background: rgba(255, 255, 255, .06);
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

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

.hero {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 80px 0 96px;
}

.hero-copy {
  flex: 1 1 460px;
  min-width: min(320px, 100%);
  max-width: 600px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--grey);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  display: block;
  flex: none;
}

.h-xxl { margin-top: 24px; }
.hero-lede { margin-top: 24px; max-width: 480px; }
.hero .cta-row { margin-top: 36px; }

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

/* Source order is term-then-definition so the list stays valid and reads as
   "calories shown: zero"; the visual order puts the figure on top. */
.hero-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.hero-stat-value {
  font: 500 28px/32px var(--font-display);
  letter-spacing: -0.015em;
}

.hero-stat-label { color: var(--grey); }

.hero-device { flex: 0 0 auto; margin: 0 auto; }

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

.phone {
  width: 300px;
  border-radius: 44px;
  background: var(--ink);
  padding: 9px;
}

.phone-screen {
  border-radius: 36px;
  overflow: hidden;
  height: 620px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-screen--dark { background: var(--navy); color: var(--paper); }
.phone-screen--light { background: var(--paper); color: var(--ink); }

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 24px;
  border-radius: 12px;
  background: var(--ink);
  z-index: 2;
}

.phone-foot { padding: 12px 20px 24px; }

.phone-action {
  border-radius: var(--radius-sm);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 16px/16px var(--font-mono);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.phone-action--light { background: var(--paper); color: var(--navy); }
.phone-action--dark { background: var(--ink); color: var(--paper); }

/* Today screen */

.today-head { padding: 52px 20px 22px; }

.today-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}

.today-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.today-number {
  font: 500 68px/68px var(--font-display);
  letter-spacing: -0.0294em;
  font-variant-numeric: tabular-nums;
}

.today-goal {
  font: 500 14px/14px var(--font-mono);
  letter-spacing: 0.0057em;
  text-transform: uppercase;
  color: var(--grey);
}

.today-track {
  margin-top: 20px;
  height: 8px;
  background: var(--navy-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.today-fill {
  height: 100%;
  background: var(--brand-gradient);
  width: 0;
}

.today-remaining {
  font: 400 15px/20px var(--font-display);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .72);
  margin-top: 16px;
}

.today-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 20px 12px;
}

.tile { border-radius: var(--radius-sm); padding: 12px 14px; }
.tile--periwinkle { background: var(--periwinkle); color: var(--navy); }
.tile--purple { background: var(--purple); color: var(--paper); }

.tile-value {
  font: 500 24px/28px var(--font-display);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.tile-label { margin-top: 8px; }

.entries-head { padding: 8px 20px 10px; }

.entries { flex: 1; overflow: hidden; padding: 0 20px; }

.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--navy-hairline);
}

.entry-main { flex: 1; min-width: 0; }

.entry-name {
  font: 500 15px/20px var(--font-display);
  letter-spacing: -0.01em;
}

.entry-time {
  font: 500 11px/15px var(--font-mono);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--grey);
}

.entry-grams {
  font: 500 20px/23px var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Add screen */

.add-head { padding: 52px 20px 0; }
.add-title { padding-bottom: 20px; }

.segmented {
  display: flex;
  gap: 4px;
  background: var(--hairline);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.segment {
  flex: 1;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 12px 0;
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.segment--on { background: var(--ink); color: var(--paper); }

.add-readout { text-align: center; padding: 28px 0 20px; }

.add-number {
  font: 500 68px/68px var(--font-display);
  letter-spacing: -0.0294em;
  font-variant-numeric: tabular-nums;
}

.add-caption { margin-top: 10px; }

.keypad {
  flex: 1;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
}

.key {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 20px/20px var(--font-display);
  letter-spacing: -0.01em;
}

.key--alt { background: var(--key-alt); }

.speed .phone-foot { padding: 16px 20px 24px; }

/* ------------------------------------------------------------- dark bands */

.band-dark { background: var(--navy); color: var(--paper); }
.band-inner { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }

.band-dark .h-xl { margin-top: 24px; max-width: 820px; }

.band-lede {
  margin-top: 24px;
  max-width: 560px;
  color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------- hairline-gap grids
   One-pixel gaps over a hairline background give the cell dividers, exactly
   as the design does — no per-cell borders to reconcile at the edges. */

.hairgrid {
  display: grid;
  gap: 1px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hairgrid--dark { background: var(--navy-hairline); border-color: var(--navy-hairline); }
.hairgrid--light { background: var(--hairline); border-color: var(--hairline); }

.hairgrid--dark .cell { background: var(--navy); }
.hairgrid--light .cell { background: var(--paper); }

.cell {
  padding: 28px;
  transition: background .2s var(--ease);
}

a.cell { text-decoration: none; display: block; }
a.cell:hover { opacity: 1; }
.hairgrid--light a.cell:hover { background: #fbfbfb; }
.hairgrid--dark a.cell:hover { background: #0a0a2c; }

.cell-title {
  font: 500 24px/28px var(--font-display);
  letter-spacing: -0.015em;
  margin: 16px 0 8px;
}

.cell-title--sm {
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.cell-body {
  font: 400 16px/22px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
  text-wrap: pretty;
}

/* Column counts are pinned rather than auto-fit: these grids draw their dividers
   with a hairline background showing through 1px gaps, so any leftover cell in a
   part-filled row renders as a bare grey block. Six cards go 3/2/1, four go 4/2/1
   — every row stays full at every width. */

.refusal-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
}

@media (max-width: 1000px) { .refusal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .refusal-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ speed */

.speed {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--band-pad) 0;
}

.speed-device { flex: 0 0 auto; margin: 0 auto; }

.speed-copy {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
  max-width: 540px;
}

.speed-copy .h-xl { margin-top: 24px; }
.speed-lede { margin: 24px 0 40px; }

.steps { grid-template-columns: 1fr; }

.step {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.step-index {
  font: 500 11px/20px var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--purple);
  flex: none;
}

.step-title {
  font: 500 18px/23px var(--font-display);
  letter-spacing: -0.01em;
}

.step .cell-body { margin-top: 4px; }

/* ---------------------------------------------------------- section heads */

.section-head {
  border-top: 1px solid var(--hairline);
  padding-top: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.section-head .h-lg { margin-top: 20px; }
.section-head-copy { max-width: 600px; }
.section-head-lede { margin-top: 16px; color: var(--grey); }

.screens { padding-bottom: var(--band-pad); }
.screens-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
}

@media (max-width: 1000px) { .screens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .screens-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tease */

.tease {
  background: var(--brand-gradient);
  border-radius: var(--radius-sm);
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  gap: 48px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--band-pad);
  color: var(--navy);
}

.tease-copy { max-width: 620px; }
.tease-eyebrow { color: var(--navy); }
.tease .h-md { margin-top: 24px; }
.tease-lede { margin-top: 20px; color: rgba(1, 1, 32, .75); }

.tease-flag {
  color: var(--navy);
  border: 1px solid rgba(1, 1, 32, .35);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  flex: none;
}

/* ---------------------------------------------------------------- writing */

.writing { padding-bottom: var(--band-pad); }

.feature {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  margin-top: 40px;
  padding: 40px;
  display: flex;
  gap: 48px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.feature:hover { opacity: 1; border-color: var(--ink); background: #fbfbfb; }

.feature-copy { max-width: 640px; }

.feature-title {
  font: 500 clamp(1.75rem, 3vw, 2.25rem) / 1.111 var(--font-display);
  letter-spacing: -0.0278em;
  margin: 20px 0 12px;
  text-wrap: balance;
}

.feature-lede { color: var(--grey); }

.feature-more { flex: none; }

.feature-arrow {
  display: inline-block;
  transition: transform .2s var(--ease);
}
.feature:hover .feature-arrow { transform: translateX(4px); }

.writing-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}

@media (max-width: 860px) { .writing-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- download */

.download-inner { padding-top: var(--band-pad); padding-bottom: 64px; }

.download-row {
  display: flex;
  gap: 64px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.download-copy { max-width: 620px; }
.download-copy .h-xl { margin-top: 24px; }
.download-lede { margin: 20px 0 36px; max-width: 520px; color: rgba(255, 255, 255, .72); }

.store-card {
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius-sm);
  padding: 28px;
  min-width: 280px;
}

.store-name {
  font: 500 24px/30px var(--font-display);
  letter-spacing: -0.015em;
  margin: 16px 0 4px;
}

.store-tagline {
  font: 400 16px/22px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
}

/* --------------------------------------------------------------- colophon */

.colophon {
  border-top: 1px solid var(--navy-hairline);
  padding: 32px 0 64px;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.social { display: flex; gap: 24px; flex-wrap: wrap; }
.social a { color: var(--paper); text-decoration: none; }
.social a:hover { color: var(--periwinkle); opacity: 1; }

/* ==================================================================
   SUBPAGES — faq.html, screens.html, privacy.html
   ================================================================== */

.nav-link--current { color: var(--ink); }

.page-head { padding: 80px 0 64px; max-width: 720px; }
.page-head--screens { max-width: 760px; padding-bottom: 72px; }
.page-head--prose { max-width: 720px; padding-bottom: 48px; }

.h-page {
  font: 500 clamp(2.25rem, 5.8vw, 4.25rem) / 1.029 var(--font-display);
  letter-spacing: -0.0324em;
  margin-top: 24px;
  text-wrap: balance;
}

.h-page--prose { letter-spacing: -0.03em; }

.page-head-lede { margin-top: 24px; }
.effective { margin-top: 20px; }

/* The 64px below the band's content comes from .colophon--roomy's margin, so the
   divider sits the same distance from the copy as it does on the home page. */
.subpage-band { padding: 96px var(--gutter) 0; }
.colophon--roomy { margin-top: 64px; }
.colophon--top { margin-top: 0; padding-top: 64px; border-top: none; }

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

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  padding-bottom: 96px;
}

.faq-item {
  border-top: 1px solid var(--hairline);
  padding: 32px 0;
}

.faq-q {
  font: 500 22px/28px var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-wrap: pretty;
}

.faq-a {
  font: 400 17px/25px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
  max-width: 520px;
  text-wrap: pretty;
}

/* The base reset zeroes h2 margins, so this heading needs its own rhythm back —
   without it the contact line sits flush against a 52px headline. */
.download-copy .h-md { margin: 24px 0 20px; }

.contact-lede {
  margin: 0 0 32px;
  color: rgba(255, 255, 255, .72);
  max-width: 520px;
}

/* The address reads as part of the sentence, not as a pasted-in link: same size,
   one step brighter than the surrounding text, and a hairline rule instead of a
   full-weight underline. */
.contact-lede a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.contact-lede a:hover {
  opacity: 1;
  color: var(--periwinkle);
  border-bottom-color: var(--periwinkle);
}

.req-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
  font: 400 16px/22px var(--font-display);
  letter-spacing: -0.01em;
}

@media (max-width: 920px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------- SCREENS */

.screen-row {
  display: flex;
  gap: 64px;
  align-items: center;
  flex-wrap: wrap;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
}

/* wrap-reverse floats the phone above the copy once the row stacks, which is
   the order the design wants on narrow screens. */
.screen-row--flip { flex-wrap: wrap-reverse; }
.screen-row--last { padding-bottom: 96px; }

.screen-device { flex: 0 0 auto; margin: 0 auto; }

.screen-copy {
  flex: 1 1 380px;
  min-width: min(300px, 100%);
  max-width: 520px;
}

.screen-title { margin: 20px 0 16px; }
.screen-lede { margin: 0 0 28px; }

.dash-list {
  display: grid;
  gap: 12px;
  font: 400 16px/22px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
}

/* The marker is positioned rather than a flex child: a flex `li` turns every
   inline element inside it into its own column, which shreds any item that
   mixes <strong> with running text. */
.dash-list li {
  position: relative;
  padding-left: 24px;
  text-wrap: pretty;
}

.dash-list li::before {
  content: "—";
  color: var(--purple);
  position: absolute;
  left: 0;
  top: 0;
}

.screens-cta { max-width: 640px; }
.screens-cta-row { margin-top: 32px; }

/* Today, over goal */

.maxxed-row {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.maxxed-text {
  font: 500 26px/28px var(--font-display);
  letter-spacing: -0.0154em;
  text-transform: uppercase;
  background: linear-gradient(97deg, #bdbbff 0%, #8b2ce8 26%, #bdbbff 52%, #8b2ce8 78%, #bdbbff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pm-sweep 4.84s linear infinite;
}

@keyframes pm-sweep {
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* The gradient still needs a mid-sweep position to read as intended. */
  .maxxed-text { animation: none; background-position: 100% 0; }
}

.maxxed-over { text-align: right; flex: none; }

.maxxed-over-value {
  font: 500 26px/28px var(--font-display);
  letter-spacing: -0.0154em;
  color: var(--periwinkle);
  font-variant-numeric: tabular-nums;
}

.maxxed-over-label { margin-top: 8px; }

.entries--inset { padding: 8px 20px 0; }
.entry--day { padding: 13px 0; }
.entry-grams--hit { color: var(--periwinkle); }

/* Add — Foods tab */

.search-field {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 16px;
  font: 400 15px/20px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
}

.section-label { padding: 20px 0 10px; }

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

.chip {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.food-grid {
  flex: 1;
  overflow: hidden;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}

.food {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.food-name {
  font: 500 14px/18px var(--font-display);
  letter-spacing: -0.01em;
}

.food-grams { margin-top: 6px; }

.phone-foot--tall { padding: 16px 20px 24px; }
.phone-action--muted { background: var(--hairline); color: var(--grey); }

/* History */

.history-head { padding: 52px 20px 20px; }

.week {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
  margin-top: 24px;
}

.week-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.week-value {
  font: 500 11px/11px var(--font-mono);
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.week-value--hit { color: var(--periwinkle); }

.week-bar {
  width: 100%;
  background: var(--navy-hairline);
  border-radius: 3px;
}

.week-bar--hit { background: var(--periwinkle); }

.today-tiles--history { padding: 8px 20px 12px; }

/* Settings */

.settings-head { padding: 52px 20px 8px; }
.settings-title { padding-bottom: 20px; }

.goal-card {
  background: var(--brand-gradient);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.goal-value { display: flex; align-items: baseline; gap: 8px; }

.goal-number {
  font: 500 62px/64px var(--font-display);
  letter-spacing: -0.029em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.goal-unit {
  font: 500 14px/14px var(--font-mono);
  letter-spacing: 0.0057em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.goal-steppers { display: flex; gap: 6px; flex: none; }

.stepper {
  width: 36px;
  height: 42px;
  background: rgba(1, 1, 32, .35);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 16px/16px var(--font-mono);
}

.settings-body { flex: 1; overflow: hidden; padding: 12px 20px 0; }
.settings-label { padding-bottom: 10px; }
.settings-label--spaced { padding: 20px 0 10px; }

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--navy-hairline);
}

.setting-row--toggle { gap: 14px; }
.setting-main { flex: 1; min-width: 0; }

.setting-name {
  font: 400 15px/20px var(--font-display);
  letter-spacing: -0.01em;
  flex: 1;
}

.setting-desc {
  font: 400 13px/18px var(--font-display);
  color: var(--grey);
  margin-top: 2px;
}

.weight-field {
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: 400 15px/18px var(--font-display);
  flex: none;
}

.unit-toggle {
  display: flex;
  gap: 4px;
  background: #313641;
  padding: 4px;
  border-radius: var(--radius-sm);
  flex: none;
}

.unit {
  color: var(--grey);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.unit--on { background: var(--paper); color: var(--navy); }

.switch {
  width: 48px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: #313641;
  padding: 4px;
  display: flex;
  justify-content: flex-start;
}

.switch--on { background: var(--periwinkle); justify-content: flex-end; }

.switch-knob {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: var(--grey);
}

.switch--on .switch-knob { background: var(--navy); }

/* ----------------------------------------------------------------- PROSE */

.prose {
  max-width: 680px;
  padding-bottom: 96px;
}

.prose h2 {
  font: 500 clamp(1.375rem, 2.4vw, 1.75rem) / 1.286 var(--font-display);
  letter-spacing: -0.0225em;
  margin: 48px 0 16px;
  text-wrap: balance;
}

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

.prose p,
.prose li {
  font: 400 17px/27px var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.prose p { margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }

.prose ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
}

.prose li {
  position: relative;
  padding-left: 24px;
}

.prose li::before {
  content: "—";
  color: var(--purple);
  position: absolute;
  left: 0;
  top: 0;
}

.prose strong { font-weight: 500; }

.prose a {
  color: var(--ink);
  text-decoration: underline;
}

/* --------------------------------------------------------------- SUPPORT */

/* The address is the whole point of the page, so it gets the treatment the
   app gives its one number rather than being buried in a paragraph. */
.support-card {
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 40px;
  max-width: 680px;
}

.support-card-label { color: var(--periwinkle); }

.support-card-address {
  font: 500 clamp(1.5rem, 3.4vw, 2.25rem) / 1.167 var(--font-display);
  letter-spacing: -0.0278em;
  margin: 20px 0 0;
  word-break: break-word;
}

.support-card-address a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.support-card-address a:hover {
  opacity: 1;
  color: var(--periwinkle);
  border-bottom-color: var(--periwinkle);
}

.support-card-note {
  font: 400 16px/24px var(--font-display);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .72);
  margin: 20px 0 0;
  max-width: 440px;
  text-wrap: pretty;
}

.prose--support { padding-top: 56px; }

/* ================================================================== ARTICLE */

.article { max-width: 680px; }

.article-head { padding: 72px 0 40px; }

.h-article {
  font: 500 clamp(2rem, 4.4vw, 3.25rem) / 1.077 var(--font-display);
  letter-spacing: -0.0308em;
  margin-top: 24px;
  text-wrap: balance;
}

.article-standfirst {
  margin-top: 20px;
  color: var(--grey);
}

.article-meta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.prose--article > p:first-child {
  font: 400 clamp(1.0625rem, 1.6vw, 1.1875rem) / 1.579 var(--font-display);
  letter-spacing: -0.01em;
}

/* The one figure the piece is built around, pulled out of the flow — the same
   move the app makes with the day's total. */
.callout {
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 32px;
  margin: 40px 0;
}

/* Scoped under .prose: the generic `.prose p` rule is a class+element selector,
   so an unscoped single class here loses to it and the figure collapses to body
   size. Anything overriding prose defaults needs the same depth. */
.prose .callout-label {
  font: 500 11px/11px var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--periwinkle);
}

.prose .callout-value {
  font: 500 clamp(3rem, 7vw, 4.5rem) / 1 var(--font-display);
  letter-spacing: -0.0342em;
  font-variant-numeric: tabular-nums;
  margin: 20px 0 0;
}

.callout-unit {
  font: 500 14px/14px var(--font-mono);
  letter-spacing: 0.0057em;
  text-transform: uppercase;
  color: var(--grey);
  margin-left: 8px;
}

.prose .callout-note {
  font: 400 16px/24px var(--font-display);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .72);
  margin: 20px 0 0;
  max-width: 460px;
  text-wrap: pretty;
}

.prose .disclaimer {
  font: 400 15px/24px var(--font-display);
  letter-spacing: -0.01em;
  margin-top: 40px;
  padding: 20px 24px;
  border-left: 2px solid var(--hairline);
  color: var(--grey);
}

/* Sources — the promise the writing section makes is that anything with a
   number in it carries one, so they get real hierarchy rather than a footnote. */
.sources {
  border-top: 1px solid var(--hairline);
  padding: 32px 0 96px;
}

.sources-title { margin-bottom: 20px; }

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

.sources-list li {
  counter-increment: source;
  position: relative;
  padding-left: 32px;
  font: 400 15px/23px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--grey);
  text-wrap: pretty;
}

.sources-list li::before {
  content: counter(source);
  position: absolute;
  left: 0;
  top: 0;
  font: 500 11px/23px var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--purple);
}

.sources-list em { font-style: italic; }

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

@media (max-width: 860px) {
  /* The hero CTA sits a few hundred pixels below — the masthead button is
     redundant once the row would wrap onto two lines. */
  .masthead .btn-compact { display: none; }
  .hero { padding: 56px 0 72px; gap: 48px; }
  .speed { gap: 56px; }
  .feature { padding: 28px; gap: 24px; }
  .section-head { padding-top: 40px; }

  .page-head { padding: 56px 0 40px; }
  .screen-row { gap: 40px; padding: 40px 0; }
  .screen-row--last { padding-bottom: 64px; }
  .subpage-band { padding-top: 64px; }
  .colophon--roomy { margin-top: 48px; }
  .colophon--top { padding-top: 48px; }
  .faq-item { padding: 24px 0; }
  .prose { padding-bottom: 64px; }
  .prose h2 { margin-top: 36px; }
  .article-head { padding: 48px 0 32px; }
  .callout { padding: 24px; margin: 32px 0; }
  .sources { padding-bottom: 64px; }
}

@media (max-width: 620px) {
  .masthead { gap: 16px; }
  .masthead-nav { gap: 18px; }
  .hero-stats { gap: 24px; }
  .cell { padding: 24px; }
  .step { padding: 18px; gap: 16px; }
  .store-card { min-width: 0; width: 100%; }
  .tease { align-items: flex-start; gap: 32px; }

  /* Two buttons of different intrinsic widths read as ragged once they stack —
     give them the full column instead. */
  .cta-row > * { flex: 1 1 100%; }
  .btn-store { align-items: flex-start; }
  .btn-outline { justify-content: center; }
}

@media (max-width: 380px) {
  /* Below the phone mock's own width — scale the whole device down rather
     than let it push the page into a horizontal scroll. */
  .phone { transform: scale(.86); transform-origin: top center; }
  .hero-device, .speed-device { height: 560px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .phone, .btn-compact, .skip-link { display: none; }
  .band-dark { background: var(--paper); color: var(--ink); }
  .band-lede, .download-lede { color: var(--grey); }
}