/* ──────────────────────────────────────────────────────────────
   Nuutrino — web
   Brand greens mirror constants/theme.ts (Phase C contract).
   Neutrals are green-biased on purpose: the app's #f0f5f9 is blue-cool,
   the web ground is shifted green so it reads as chosen, not inherited.
   Fonts are self-hosted — the site makes zero third-party requests,
   which is what lets the privacy page claim no tracking honestly.
   ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Public Sans';
  src: url('fonts/PublicSans-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --green: #22c55e;
  --green-deep: #059669;
  --green-light: #4ade80;
  --grad: linear-gradient(135deg, #4ade80 0%, #059669 100%);

  --ink: #0a1d16;
  --ink-2: #123026;
  --paper: #f2f6f4;
  --card: #ffffff;
  --line: #dde4e1;
  --line-soft: #eaf0ed;

  --text: #10211b;
  --text-2: #566661;
  --text-3: #8a9a94;
  --on-ink: #eaf2ee;
  --on-ink-2: #9db3a9;

  --carbs: #dc2626;
  --protein: #9333ea;
  --fats: #ea580c;

  /* One family. The app ships no custom font (expo-font is installed but never
     called), so it renders in SF Pro — which the web cannot use. Matching
     "the app's font" would mean whatever each visitor's OS picks, so the site
     sets its own voice instead and the app can adopt it later. */
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: var(--sans);

  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(10, 29, 22, .04), 0 10px 30px -12px rgba(10, 29, 22, .12);
  --shadow-lift: 0 2px 4px rgba(10, 29, 22, .05), 0 22px 50px -20px rgba(10, 29, 22, .22);
  --maxw: 1140px;
  --step: clamp(1rem, .6rem + .9vw, 1.0625rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1512;
    --card: #10201a;
    --line: #1e3830;
    --line-soft: #17291f;
    --text: #e8f1ec;
    --text-2: #9fb3aa;
    --text-3: #6e857c;
    --ink: #050f0c;
    --ink-2: #0d2019;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -12px rgba(0,0,0,.5);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.3), 0 22px 50px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper: #0a1512; --card: #10201a; --line: #1e3830; --line-soft: #17291f;
  --text: #e8f1ec; --text-2: #9fb3aa; --text-3: #6e857c;
  --ink: #050f0c; --ink-2: #0d2019;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.measure { max-width: 68ch; }

h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.35rem + 3.9vw, 3.8rem); line-height: 1.06; margin: 0 0 22px; letter-spacing: -.036em; }
h2 { font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.4rem); line-height: 1.16; margin: 0 0 16px; letter-spacing: -.03em; }
h3 { font-size: 1.16rem; line-height: 1.35; margin: 0 0 8px; font-weight: 600; letter-spacing: -.008em; }
p { margin: 0 0 16px; }
a { color: var(--green-deep); }

.eyebrow {
  font-family: var(--sans); font-size: .745rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.eyebrow.on-ink { color: var(--on-ink-2); }
.eyebrow.on-ink::after { background: rgba(255,255,255,.16); }

.lede { font-size: clamp(1.06rem, .95rem + .45vw, 1.24rem); color: var(--text-2); line-height: 1.6; }

/* ── icons ─────────────────────────────────────────────── */
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.125em; }

/* ── header ────────────────────────────────────────────── */
header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--line); }
header.site .bar { max-width: var(--maxw); margin-inline: auto; padding: 13px 28px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; color: #fff; box-shadow: 0 3px 10px -2px rgba(5,150,105,.45); }
.brand .mark .ico { width: 17px; height: 17px; }
nav.site { margin-left: auto; display: flex; align-items: center; gap: 26px; }
nav.site a { color: var(--text-2); text-decoration: none; font-size: .935rem; font-weight: 500; }
nav.site a:hover { color: var(--green-deep); }
nav.site a[aria-current="page"] { color: var(--text); font-weight: 600; }
nav.site .btn { margin-left: 4px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; border-radius: 6px; }

/* ── buttons ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 21px; border-radius: 11px; font-family: var(--sans); font-size: .95rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px -8px rgba(5,150,105,.7); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(5,150,105,.8); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--green); color: var(--green-deep); }
.btn-on-ink { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-on-ink:hover { background: rgba(255,255,255,.13); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── hero ──────────────────────────────────────────────── */
.hero { padding: clamp(46px, 7vw, 86px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.hero .lede { max-width: 44ch; }
.hero-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero-meta div { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-2); }
.hero-meta .ico { width: 1.05rem; height: 1.05rem; color: var(--green-deep); }

/* ── phone mock ────────────────────────────────────────── */
.phone { width: min(300px, 100%); margin-inline: auto; background: #0c1a15; border-radius: 40px; padding: 9px; box-shadow: var(--shadow-lift); }
.phone-screen { background: #f0f5f9; border-radius: 32px; overflow: hidden; font-size: 13px; color: #111827; }
.ps-top { background: #fff; padding: 13px 15px 11px; border-bottom: 1px solid #dde1e7; display: flex; align-items: center; justify-content: space-between; }
.ps-top b { font-family: var(--display); font-size: 15px; letter-spacing: -.01em; }
.ps-top span { font-size: 11px; color: #6b7280; }
.ps-body { padding: 13px 13px 16px; display: grid; gap: 10px; }
.ps-card { background: #fff; border: 1px solid #dde1e7; border-radius: 14px; padding: 13px; }
.ring-row { display: flex; align-items: center; gap: 14px; }
.ring { width: 66px; height: 66px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#22c55e 0 72%, #e8eef0 72% 100%); }
.ring i { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
.ring i small { display: block; font-size: 8.5px; font-weight: 500; color: #6b7280; letter-spacing: .04em; }
.mrow { display: grid; gap: 7px; flex: 1; }
.m { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 7px; font-size: 10.5px; color: #6b7280; }
.m .ico { width: 12px; height: 12px; }
.m .bar { height: 5px; border-radius: 3px; background: #eef2f4; overflow: hidden; }
.m .bar span { display: block; height: 100%; border-radius: 3px; }
.m b { font-size: 10px; color: #111827; font-variant-numeric: tabular-nums; }
.meal { display: flex; gap: 10px; align-items: center; }
.meal .thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; background: linear-gradient(135deg, #86efac, #059669); display: grid; place-items: center; color: #fff; }
.meal .thumb .ico { width: 19px; height: 19px; }
.meal b { display: block; font-size: 12px; letter-spacing: -.01em; }
.meal span { font-size: 10.5px; color: #6b7280; }
.meal .kcal { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #16a34a; font-variant-numeric: tabular-nums; }

/* insight + chart mock */
.ps-insight { background: #e8eef8; border: 1px solid #cbd5e1; border-radius: 14px; padding: 11px 12px; font-size: 10.7px; line-height: 1.5; color: #334155; }
.ps-insight b { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #475569; margin-bottom: 5px; }
.ps-insight .ico { width: 12px; height: 12px; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-top: 8px; }
.spark i { flex: 1; background: #bbf7d0; border-radius: 3px 3px 0 0; }
.spark i.hi { background: #22c55e; }

/* ── sections ──────────────────────────────────────────── */
section { padding: clamp(48px, 6.5vw, 84px) 0; }
.band { background: var(--ink); color: var(--on-ink); }
.band h2, .band h3 { color: #fff; }
.band p { color: var(--on-ink-2); }

/* founder story — the page's one bold moment */
.story-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.pull { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.5vw, 1.95rem); line-height: 1.28; color: #fff; letter-spacing: -.02em; margin: 0; }
.pull em { font-style: normal; color: var(--green-light); }
.story-body p { font-size: 1.02rem; line-height: 1.72; }
.story-body p:last-child { margin-bottom: 0; }
.sig { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.sig .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--display); }
.sig b { display: block; color: #fff; font-size: .93rem; }
.sig span { font-size: .82rem; color: var(--on-ink-2); }

/* steps — numbered because this is a real sequence */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 30px; }
.step { background: var(--card); padding: 30px 26px; }
.step .n { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--green); line-height: 1; letter-spacing: .1em; display: block; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.step p { color: var(--text-2); margin: 0; font-size: .965rem; }

/* feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin-top: 30px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.card p { color: var(--text-2); margin: 0; font-size: .95rem; }
.card .ico-box { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 15px; background: var(--line-soft); color: var(--green-deep); }
.card .ico-box .ico { width: 20px; height: 20px; }

/* audience list */
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 28px; }
.who div { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 0 var(--r) var(--r) 0; padding: 17px 19px; font-size: .945rem; color: var(--text-2); }
.who b { display: block; color: var(--text); font-weight: 600; margin-bottom: 3px; font-size: .99rem; }

/* report feature */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; box-shadow: var(--shadow-lift); font-size: .8rem; }
.sheet .sh { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--text); padding-bottom: 9px; margin-bottom: 13px; }
.sheet .sh b { font-family: var(--display); font-size: 1.02rem; }
.sheet .sh span { font-size: .72rem; color: var(--text-3); }
.sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet th { text-align: left; font-size: .655rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 0 0 7px; font-weight: 700; }
.sheet td { padding: 6px 0; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: .775rem; }
.sheet td:first-child { color: var(--text); font-weight: 500; }
.sheet td:not(:first-child) { text-align: right; }
.sheet .tot td { border-top: 1.5px solid var(--text); font-weight: 700; color: var(--text); }

/* callouts */
.callout { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.callout.warn { background: #fffbeb; border-color: #fde68a; color: #713f12; }
.callout.warn strong { color: #713f12; }
.callout p:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout.warn { background: #241c06; border-color: #4d3c0c; color: #f5e0a3; }
  :root:not([data-theme="light"]) .callout.warn strong { color: #fde68a; }
}

/* ── legal documents ───────────────────────────────────── */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 52px); margin: 44px 0 60px; }
.doc h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.7rem); margin-bottom: 6px; }
.doc h2 { font-size: 1.32rem; margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.doc h3 { font-size: 1.03rem; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--text-2); }
.doc li { margin-bottom: 7px; }
.doc ul { padding-left: 20px; }
.doc strong { color: var(--text); font-weight: 600; }
.updated { font-size: .85rem; color: var(--text-3); margin-bottom: 4px; }
table.data { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data th { font-weight: 600; color: var(--text); background: var(--line-soft); font-size: .82rem; }
table.data td { color: var(--text-2); }
.table-scroll { overflow-x: auto; }

/* ── beta form ─────────────────────────────────────────── */
.form { display: grid; gap: 15px; margin-top: 26px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .875rem; font-weight: 600; color: var(--text); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: .97rem; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field .hint { font-size: .8rem; color: var(--text-3); }

/* ── footer ────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); background: var(--card); padding: 34px 0; }
footer.site .cols { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--text-2); text-decoration: none; font-size: .91rem; }
footer.site a:hover { color: var(--green-deep); }
footer.site .copy { margin-left: auto; color: var(--text-3); font-size: .85rem; }

/* ── reveal ────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero-grid, .story-grid, .report-grid { grid-template-columns: 1fr; }
  .hero-grid .phone { grid-row: 1; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  nav.site { gap: 16px; }
  nav.site a:not(.btn) { display: none; }
  footer.site .copy { margin-left: 0; width: 100%; }
}

/* report sheet — mirrors the real PDF from services/exportReport.ts:
   cover, Observation/Strategy banner, Macro Averages vs Goals, Daily Breakdown */
.rep-note { background: var(--line-soft); border-radius: 10px; padding: 12px 13px; margin-bottom: 14px; }
.rep-note b { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green-deep); margin-bottom: 3px; }
.rep-note b + p { margin: 0 0 9px; font-size: .74rem; line-height: 1.5; color: var(--text-2); }
.rep-note p:last-child { margin-bottom: 0; }
.rep-h { font-size: .61rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 700; margin: 0 0 8px; }
.rep-goals { display: grid; gap: 7px; margin-bottom: 15px; }
.rep-goals > div { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; font-size: .68rem; }
.rep-goals span { color: var(--text-2); }
.rep-goals .bar { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.rep-goals .bar i { display: block; height: 100%; border-radius: 3px; }
.rep-goals b { font-variant-numeric: tabular-nums; font-size: .66rem; color: var(--text); }
.rep-day { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--text); padding-bottom: 5px; margin-bottom: 8px; }
.rep-day b { font-size: .76rem; }
.rep-day span { font-size: .7rem; color: var(--green-deep); font-weight: 700; font-variant-numeric: tabular-nums; }