/* Home page only. Guide and policy pages keep styles.css.
   Tokens follow the iOS app: #111111 / #191919 surfaces, copper accent, macro dots. */

:root {
  color-scheme: dark;
  --bg: #111111;
  --card: #191919;
  --raised: #232323;
  --text: #f1f1f1;
  --text-2: rgba(241, 241, 241, 0.64);
  --muted: #9a9a9a;
  --hair: rgba(255, 255, 255, 0.08);
  --accent: #de9a69;
  --protein: #ff7c7c;
  --fat: #7eadff;
  --carbs: #ffca6e;
  --ok: #4cc38a;
  /* The app's face on the app's platform: SF on Apple devices, the system face elsewhere. Chosen, not inherited. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  /* Headlines get a voice of their own; everything else stays in the app's face. */
  --font-display: "Bricolage Grotesque", -apple-system, "Helvetica Neue", sans-serif;
  --r-card: 16px;
  --r-panel: 20px;
  --r-screen: 28px;
  --r-control: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.home-shell { position: relative; overflow: clip; }

.wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-header .logo img { width: 64px; height: auto; }

/* auth-nav.js injects .global-auth-header; it sits in the header row, as a quiet link */
.global-auth-header {
  position: absolute;
  top: 0;
  right: max(var(--gutter), calc((100% - 1120px) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  height: 72px;
  z-index: 2;
}

.auth-login-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}

.auth-login-button:hover { background: #ffffff; color: var(--bg); }
.auth-login-button:active { transform: scale(0.97); }

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

.site-main { display: grid; gap: 96px; padding-bottom: 96px; }
.site-main > * { min-width: 0; max-width: 100%; }

.section-copy { display: grid; gap: 12px; max-width: 640px; }

.kicker {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.section-copy h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.08; letter-spacing: -0.01em; }
.section-copy p { color: var(--text-2); font-size: 17px; line-height: 1.55; }

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

/* The scene: a real meal photo across the right of the hero, fading into the page on the left,
   with what ego read from it floating on top. Text sits on the calm dark side. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(760px, 92vh);
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  z-index: 0;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.tags li {
  --drift: 0px;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.88);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(10px + var(--drift)));
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  will-change: transform;
}

.tags li.is-in { opacity: 1; transform: translateY(var(--drift)); }

@media (prefers-reduced-motion: reduce) {
  .tags li { opacity: 1; transform: none; transition: none; }
}

.tags i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.tags .p i { background: var(--protein); }
.tags .f i { background: var(--fat); }
.tags .c i { background: var(--carbs); }
.tags .kcal { left: 44%; top: 22%; }
.tags .p { left: 70%; top: 36%; }
.tags .f { left: 50%; top: 58%; }
.tags .c { left: 72%; top: 70%; }

.hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  justify-items: start;
  padding-block: 48px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  max-width: 11ch;
}

.hero-sub {
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
  max-width: 40ch;
}

.hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 4px; }

.app-store-button { display: inline-flex; width: 160px; border-radius: 8px; }
.app-store-button img { width: 100%; }

.hero-meta { color: var(--muted); font-size: 14px; }

/* proof strip: real figures only */
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block: 20px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-top: -40px;
}

.proof li { display: grid; gap: 2px; }
.proof b { font-weight: 600; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.proof span { color: var(--muted); font-size: 14px; }
.proof a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }

/* ---------- features ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.feature-grid li {
  padding: 24px;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--card);
}

/* bento: wide + narrow, then narrow + wide; every card carries one thing from the app */
.feature-grid li {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-content: start;
}

.feature-grid li.wide {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: none;
  gap: 32px;
  align-items: center;
  align-content: center;
}

.feature-grid h3 { font-size: 18px; line-height: 1.3; }
.feature-grid p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* ---- iOS components, replicated 1:1 from the Swift views (1 pt = 1 px) ---- */

.flame { width: 9px; height: 11px; }

/* FoodSummaryCell.swift: #1F1F1F r20, 92pt tall, 92×92 image, 15/600 title, 13 meta, 12 macros with 5pt dots */
.ios-food {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  height: 92px;
  overflow: hidden;
  border-radius: 20px;
  background: #1f1f1f;
  font-family: var(--font);
}

.ios-food .thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 20px; }
.ios-food .text { display: grid; gap: 5px; align-content: center; padding: 10px 14px; min-width: 0; }
.ios-food .title { font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff; }
.ios-food .meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1; white-space: nowrap; }
.ios-food .meta .flame { margin-right: -2px; }
.ios-food .meta b { font-weight: 600; color: #fff; }
.ios-food .meta .dot { color: #696969; }
.ios-food .meta .time { font-weight: 500; color: #9a9a9a; }
.ios-food .macros { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; line-height: 1; color: rgba(255, 255, 255, 0.85); }
.ios-food .macros span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ios-food .macros i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ios-food .macros .p i { background: var(--protein); }
.ios-food .macros .f i { background: var(--fat); }
.ios-food .macros .c i { background: var(--carbs); }

/* Briefing exercise row: #1F1F1F r20, 92pt, 60pt silhouette with 16pt padding, 16/600 name, 14 grey sub, swap icon */
.ios-exercise {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  height: 92px;
  border-radius: 20px;
  background: #1f1f1f;
  font-family: var(--font);
  align-self: end;
}

.ios-exercise .muscle { width: 60px; height: 60px; margin: 16px; object-fit: contain; }
.ios-exercise .text { display: grid; gap: 6px; padding-left: 12px; min-width: 0; }
.ios-exercise .name { font-size: 16px; font-weight: 600; line-height: 1.2; color: #fff; }
.ios-exercise .sub { font-size: 14px; line-height: 1.2; color: #696969; }
.ios-exercise .swap { margin-right: 20px; }

/* Fitness tab workout rows: Completed (white) and Incomplete (#1F1F1F), r16, padding 16/14 */
.ios-rows { display: grid; gap: 10px; align-self: end; }

.ios-workout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #1f1f1f;
  font-family: var(--font);
}

.ios-workout .text { display: grid; min-width: 0; flex: 1; }
.ios-workout .title { font-size: 18px; font-weight: 600; line-height: 1.2; color: #fff; }
.ios-workout .meta { margin-top: 6px; font-size: 14px; line-height: 1.2; color: #bdbdbd; }
.ios-workout .meta .dot { margin: 0 3px; }
.ios-workout .chips { display: flex; gap: 8px; margin-top: 10px; }
.ios-workout .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #2a2a2a;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ios-workout .chip svg, .ios-workout .chip .flame { color: inherit; }
.ios-workout .chip .flame { filter: brightness(0) invert(0.88); }

.ios-workout.done { background: #fff; }
.ios-workout.done .title { color: #000; }
.ios-workout.done .meta { color: #424242; }
.ios-workout.done .chip { background: #f1f1f1; color: #424242; }
.ios-workout.done .chip .flame { filter: brightness(0) invert(0.26); }

/* MorningBriefCard.swift: #191919 r15, 1pt white 10% stroke, padding 14, 54pt ring stroke 5, 16/600 title, 13 #969696 body */
.ios-brief {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 15px;
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font);
}

.ios-brief .ring { display: block; }
.ios-brief .ring text { font-family: var(--font); }
.ios-brief .text { display: grid; gap: 4px; min-width: 0; }
.ios-brief .title { font-size: 16px; font-weight: 600; line-height: 1.2; color: #fff; }
.ios-brief .sub { font-size: 13px; line-height: 1.35; color: #969696; }

/* ---------- screens ---------- */

.shots-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 16px;
  margin-top: 40px;
  padding-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}

.shots-scroller figure { margin: 0; scroll-snap-align: start; }

.shots-scroller img {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  background: var(--card);
}

.shots-scroller figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }

/* ---------- workflow ---------- */

/* The phone stays pinned while the steps scroll past; the active step picks the screen. */
.workflow-band {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas: "stage copy" "stage list";
  gap: 24px 64px;
  align-items: start;
}

.workflow-band > .section-copy { grid-area: copy; }
.workflow-stage { grid-area: stage; align-self: stretch; }
.workflow-steps { grid-area: list; }

.workflow-stage {
  position: sticky;
  top: 12vh;
  height: 76vh;
  display: grid;
  align-items: center;
}

/* sized from height so aspect-ratio always holds; a max-height here fought it and cropped the screen */
.stage-phone {
  position: relative;
  height: min(72vh, 660px);
  aspect-ratio: 1206 / 2622;
  max-width: 100%;
  margin: 0 auto;
}

.stage-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--hair);
  border-radius: var(--r-screen);
  background: var(--card);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.stage-shot.is-active { opacity: 1; }

.workflow-steps { display: grid; gap: 24px; }

.workflow-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  min-height: 56vh;
  align-content: center;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
  opacity: 0.4;
  transition: opacity 320ms var(--ease);
}

.workflow-list li.is-active { opacity: 1; }
.workflow-list li:last-child { border-bottom: 1px solid var(--hair); }

.workflow-list .num {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.workflow-list h3 { font-size: 18px; line-height: 1.3; }
.workflow-list p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* ---------- recovery / integrations ---------- */

/* The plates: the second scene, full-bleed, with the recovery screen and a week that survived a miss */
.plates-band {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.plates-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plates-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

.integration-band {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
  padding-block: 96px;
}

.integration-band .section-copy { max-width: 520px; }

.recovery-side { display: grid; gap: 16px; align-self: end; }

.wearables {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.wearables img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--hair);
}

.wearables span { color: var(--muted); font-size: 14px; }

.text-link {
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

.text-link:hover { color: var(--text); }

.recovery-shot { margin-bottom: -200px; }

.recovery-shot img {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r-screen);
}

/* ---------- guides ---------- */

.guides-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 32px;
}

.guides-list li { border-top: 1px solid var(--hair); }
.guides-list li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hair); }

.guides-list a {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  transition: color 160ms var(--ease);
}

.guides-list h3 { font-size: 16px; line-height: 1.35; }
.guides-list h3 small { color: var(--muted); font-size: 13px; font-weight: 500; margin-left: 8px; }
.guides-list p { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.guides-list a:hover p { color: var(--text); }

/* ---------- faq ---------- */

.faq-list { margin-top: 32px; }
.faq-list details { border-top: 1px solid var(--hair); }
.faq-list details:last-child { border-bottom: 1px solid var(--hair); }

.faq-list summary {
  position: relative;
  padding: 16px 40px 16px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
}

.faq-list details[open] summary::after { content: "\2212"; }

.faq-list .faq-a {
  padding: 0 0 20px;
  max-width: 68ch;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.faq-list .faq-a a { color: var(--accent); }

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

/* A window: three panes onto the product's world, the ask on the glass */
.cta-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 64px 32px;
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  background: var(--card);
  text-align: center;
  overflow: hidden;
}

.cta-window {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  background: var(--bg);
}

.cta-window img { width: 100%; height: 100%; object-fit: cover; }
.cta-window img:nth-child(1) { object-position: 50% 40%; }
.cta-window img:nth-child(3) { object-position: 70% 50%; }

.cta-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.45) 45%, rgba(17, 17, 17, 0.18) 100%);
}

.cta-window img:nth-child(2) { object-position: 50% 30%; filter: brightness(1.25); }
.cta-window img:nth-child(3) { filter: brightness(1.2); }

.cta-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.cta-logo { width: 76px; height: auto; }
.cta-band h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.08; letter-spacing: -0.01em; }
.cta-band p { max-width: 48ch; color: var(--text-2); font-size: 17px; }
.cta-band .app-store-button { margin-top: 8px; }

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 14px;
}

.site-footer a { padding: 4px 0; }
.site-footer a:hover { color: var(--text); }

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

@media (max-width: 960px) {
  /* photo moves under the copy, text stays on the page color */
  .hero { min-height: auto; grid-template-rows: auto 440px; }
  .hero-copy { order: 1; }
  .hero-photo { order: 2; position: relative; inset: auto; width: 100%; height: 440px; }
  .hero-photo img {
    object-position: 50% 45%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 85%, transparent 100%);
    mask-composite: add;
  }
  .tags .kcal { left: 8%; top: 30%; }
  .tags .p { left: 58%; top: 40%; }
  .tags .f { left: 12%; top: 62%; }
  .tags .c { left: 56%; top: 72%; }
  .hero-copy { padding-block: 24px 8px; }
  .proof { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid li.wide { grid-column: 1 / -1; }
  .workflow-band { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "list"; gap: 16px; }
  .workflow-stage { position: sticky; top: 0; height: 46vh; align-self: start; padding-block: 12px 0; background: linear-gradient(to bottom, var(--bg) 88%, transparent); z-index: 1; }
  .stage-phone { height: 42vh; }
  /* the phone owns the top 46vh; each step's text sits in the lower half when it is the active one */
  .workflow-list li { min-height: 54vh; align-content: end; padding-bottom: 8vh; }
  .integration-band { grid-template-columns: 1fr; padding-block: 64px; }
  .recovery-shot { display: none; }
  .plates-photo img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-composite: add;
    opacity: 0.55;
  }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .site-main { gap: 64px; padding-bottom: 64px; }
  .hero { grid-template-rows: auto 360px; }
  .hero-photo { height: 360px; }
  .hero h1 { font-size: 40px; max-width: none; }
  .hero-sub { font-size: 17px; }
  .section-copy h2, .cta-band h2 { font-size: 30px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid li.wide { grid-column: auto; grid-template-columns: 1fr; gap: 20px; }
  .shots-scroller { grid-auto-columns: 180px; }
  .guides-list { grid-template-columns: 1fr; }
  .guides-list li:nth-last-child(-n + 2) { border-bottom: 0; }
  .guides-list li:last-child { border-bottom: 1px solid var(--hair); }
  .integration-band { padding: 24px; }
  .cta-band { padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}