/* Meyuman public site — shared stylesheet.
   Palette and font stack copied 1:1 from the approved app tokens in
   artifacts/calorie-tracker/src/index.css (light --primary/--background/etc.,
   .dark block, --welcome-background/--shadow-elevated recipes) — not
   invented. Logical properties throughout so the same file serves Hebrew
   (RTL) and English (LTR) with no per-language CSS. */

:root {
  --background: hsl(100 18% 96%);
  --foreground: hsl(147 16% 11%);
  --card: hsl(0 0% 100%);
  --muted-foreground: hsl(147 5% 43%);
  --border: hsl(130 10% 88%);
  --primary: hsl(141 23% 40%);
  --primary-foreground: hsl(0 0% 100%);
  --accent: hsl(133 21% 92%);
  --accent-foreground: hsl(142 27% 29%);
  --brand-soft: hsl(133 21% 92%);
  --welcome-accent: #355d44;
  --mark-green: #568267;
  --warning: hsl(35 42% 50%);
  --warning-bg: hsl(35 60% 95%);
  --radius: 0.75rem;
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    'Noto Sans Hebrew', Arial, sans-serif;
  --content-width: 40rem;
  --page-width: 72rem;
  --shadow-elevated: 0 18px 48px rgba(35, 54, 42, 0.12);
  --shadow-card: 0 1px 2px rgba(35, 54, 42, 0.035), 0 8px 24px rgba(45, 68, 52, 0.045);

  /* Fixed-dark tokens for deliberate "deep" sections — these do NOT swap
     with prefers-color-scheme (see .section--deep below), they are a
     composition choice, not a theme. Copied from index.css's .dark block. */
  --deep-bg: hsl(160 14% 4%);
  --deep-bg-2: hsl(150 10% 8%);
  --deep-fg: hsl(144 17% 94%);
  --deep-muted: hsl(147 6% 63%);
  --deep-primary: hsl(140 19% 55%);
  --deep-border: hsl(150 8% 16%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(160 14% 4%);
    --foreground: hsl(144 17% 94%);
    --card: hsl(150 10% 8%);
    --muted-foreground: hsl(147 6% 59%);
    --border: hsl(150 8% 16%);
    --primary: hsl(140 19% 55%);
    --primary-foreground: hsl(160 14% 4%);
    --accent: hsl(143 15% 15%);
    --accent-foreground: hsl(140 26% 72%);
    --brand-soft: hsl(143 15% 15%);
    --welcome-accent: hsl(140 19% 55%);
    --warning: hsl(38 42% 59%);
    --warning-bg: hsl(38 30% 14%);
    --shadow-elevated: 0 18px 48px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--welcome-accent);
}

a:hover {
  text-decoration: none;
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--card);
  color: var(--foreground);
  padding: 0.75rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  inset-inline-start: 1rem;
  top: 1rem;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
  position: relative;
  z-index: 10;
}

.site-header__inner {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 1.3rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--foreground);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.brand img {
  width: 1.85rem;
  height: 1.85rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover {
  color: var(--welcome-accent);
}

.lang-switch {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.9rem;
}

.lang-switch a {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--muted-foreground);
}

.lang-switch a[aria-current='true'] {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
  font-weight: 600;
}

/* ── Motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  .btn:hover {
    transform: translateY(-1px);
  }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-card);
}

.btn-secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

.btn-disabled {
  background: var(--accent);
  color: var(--accent-foreground);
  cursor: default;
}

/* ── Hero ───────────────────────────────────────────────────────────
   Two columns: copy on the inline-start side, the phone on the end side,
   so the same markup puts the text on the right in Hebrew and on the left
   in English. The phone is drawn in CSS and its chat screen is rebuilt from
   the client's own markup (artifacts/calorie-tracker/src/pages/Chat.tsx,
   Layout.tsx) and tokens (src/index.css). Its colours stay on the app's
   light theme in both site themes — it depicts the app, not the page.
   No animation anywhere in this block. */

.hero {
  --cream: hsl(42 42% 95%);
  --hero-glow: rgba(86, 130, 103, 0.17);
  --hero-glow-soft: rgba(86, 130, 103, 0.08);
  --hero-accent: #4f7d5e;
  --hero-cta-bg: #355d44;
  --hero-cta-fg: #fff;
  /* the app muted grey is 4.4:1 on the cream; one step darker passes AA */
  --hero-muted: hsl(147 6% 37%);
  --hero-glow-x: 25%;
  position: relative;
  /* clip, not hidden — 'hidden' would make the hero a scroll container */
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(42rem 34rem at var(--hero-glow-x) 46%, var(--hero-glow) 0%, transparent 70%),
    radial-gradient(36rem 22rem at calc(100% - var(--hero-glow-x)) 0%, var(--hero-glow-soft) 0%, transparent 70%),
    linear-gradient(180deg, var(--background) 0%, var(--cream) 18rem, var(--cream) 100%);
}

html[dir='ltr'] .hero {
  --hero-glow-x: 75%;
}

@media (prefers-color-scheme: dark) {
  .hero {
    --cream: hsl(150 12% 6%);
    --hero-glow: rgba(140, 200, 165, 0.12);
    --hero-glow-soft: rgba(140, 200, 165, 0.05);
    --hero-accent: hsl(140 24% 62%);
    --hero-cta-bg: #4f7d5e;
    --hero-muted: var(--muted-foreground);
  }
}

.hero__inner {
  position: relative;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 3.5rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
}

.hero__text {
  min-width: 0;
}

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(86, 130, 103, 0.11);
  color: var(--welcome-accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.hero h1 {
  /* sized so each of the two lines fits its column on one line, in both
     languages (the English second line is the longest) */
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--foreground);
  font-weight: 700;
}

.hero h1 span {
  display: block;
}

.hero h1 .hero__accent {
  color: var(--hero-accent);
}

.hero p.lede {
  max-width: 31rem;
  margin: 0 0 2rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--hero-muted);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Not a link yet: there is no App Store URL until the app is published,
   so this is plain text styled as the button it will become. */
.btn-soon {
  background: var(--hero-cta-bg);
  color: var(--hero-cta-fg);
  padding: 0.95rem 1.9rem;
  border-radius: 0.9rem;
  font-size: 1.05rem;
  cursor: default;
  box-shadow: 0 10px 24px -10px rgba(35, 54, 42, 0.55);
}

/* nothing to press yet — no hover lift from the shared .btn motion rule */
.btn-soon,
.btn-soon:hover {
  transform: none;
  transition: none;
}

.hero__note {
  margin: 0;
  padding-inline: 0.25rem;
  font-size: 0.9rem;
  color: var(--hero-muted);
}

/* Apple's badge, once assets/js/app-store.js has a URL: at least 40px tall
   on screen (48px here) with clear space of a quarter of its height (12px)
   on every side, per Apple's App Store marketing guidelines. Nothing sits
   beside it, so only the block margins are needed. */
.store-badge {
  display: inline-block;
  margin: 12px 0;
  line-height: 0;
}

/* the hero column already gives 12px+ on every side (gap, lede margin) */
.hero__cta .store-badge {
  margin: 0;
}

.store-badge img {
  display: block;
  width: auto;
  height: 48px;
}

.final .store-badge {
  margin-top: 2rem;
}

/* ── Phone stage: phone + floating diary card ─────────────────────────
   Shared by the hero and the correct-in-chat section. The phone is
   authored at real iPhone CSS-pixel size (399×836 body, 375×812 screen)
   and scaled with --s, so every measurement inside it is the app's own
   (14px message text, 16px bubble radius, 40px composer buttons…).
   .phone-tilt reserves the scaled box and carries the tilt and the shadow.
   The tilt leans the phone's top toward the copy; --tilt-dir flips it for
   LTR, and .phone-stage--counter turns it the other way. */

.phone-stage {
  --s: 0.72;
  --tilt-deg: 6deg;
  --tilt-dir: 1;
  --tilt: calc(var(--tilt-deg) * var(--tilt-dir));
  --phone-w: calc(399px * var(--s));
  --card-out: 6.5rem;
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-block: 1.75rem 2rem;
}

html[dir='ltr'] .phone-stage,
.phone-stage--counter {
  --tilt-dir: -1;
}

html[dir='ltr'] .phone-stage--counter {
  --tilt-dir: 1;
}

.phone-tilt {
  position: relative;
  flex: none;
  width: var(--phone-w);
  height: calc(836px * var(--s));
  border-radius: calc(64px * var(--s));
  transform: rotate(var(--tilt));
  box-shadow:
    0 44px 70px -26px rgba(35, 54, 42, 0.42),
    0 14px 28px -12px rgba(35, 54, 42, 0.22);
}

.phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 399px;
  height: 836px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  border-radius: 64px;
  background: #1c1f21;
  box-shadow:
    inset 0 0 0 2px #50565b,
    inset 0 0 0 4px #2b2f32,
    inset 0 0 0 9px #0b0c0d;
}

.phone__key {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3a3f43, #24282b);
}

.phone__key--action { left: -3px; top: 132px; height: 34px; }
.phone__key--vol-up { left: -3px; top: 190px; height: 62px; }
.phone__key--vol-down { left: -3px; top: 266px; height: 62px; }
.phone__key--side { right: -3px; top: 218px; height: 100px; }

.phone__screen {
  position: absolute;
  inset: 12px;
  border-radius: 52px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f4f6f2;
  color: #181f1b;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.625;
  text-align: start;
}

.ph-icon {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Status bar — 18:21 (just after the last message), Dynamic Island, signal / Wi-Fi / battery. */
.ph-status {
  position: relative;
  flex: none;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 30px 0 40px;
  color: #000;
}

.ph-status__time {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ph-status__island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 122px;
  height: 35px;
  margin-left: -61px;
  border-radius: 20px;
  background: #000;
}

.ph-status__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* DailySummaryBar (Chat.tsx) */
.ph-summary {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid hsl(130 10% 88% / 0.8);
  background: hsl(0 0% 100% / 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.ph-summary__today { font-weight: 500; color: #181f1b; }
.ph-summary__sep { color: hsl(130 10% 88%); }
.ph-summary bdi { display: inline-block; unicode-bidi: isolate; }
.ph-summary .ph-cals { font-weight: 600; color: hsl(141 23% 40%); }
.ph-summary .ph-protein { font-weight: 600; color: hsl(207 27% 47%); }
.ph-summary .ph-weight { font-weight: 500; color: #181f1b; }

/* Message list — newest at the bottom, as the app scrolls to the latest;
   older messages are cut off under the summary bar, as in a long chat. */
.ph-messages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 16px 8px;
}

/* MessageBubble: the lane is always dir=ltr in the app — the user on the
   right, the assistant on the left, in every language. */
.ph-lane {
  display: flex;
  justify-content: flex-start;
}

.ph-lane--user {
  justify-content: flex-end;
}

.ph-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  overflow-wrap: break-word;
}

.ph-bubble p {
  margin: 0;
  text-align: start;
  unicode-bidi: plaintext;
}

/* A photo message (Chat.tsx, the thumbnail branch): the picture alone,
   max 160 x 176 and object-contain, 16px corners with the 8px tail corner,
   and one timestamp under it — no bubble, no copy button. */
.ph-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 80%;
}

.ph-photo__img {
  display: block;
  /* the photo is square, so the app's max-w-40 / max-h-44 object-contain
     render is exactly 160 x 160 — set up front, so its place is reserved
     before it loads (width:auto would be 0 until then and the chat would
     jump when it arrives) */
  width: 160px;
  height: auto;
  max-width: 160px;
  max-height: 176px;
  object-fit: contain;
  border-radius: 16px;
  border-top-right-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.ph-photo time {
  padding: 0 2px;
  font-size: 10px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  color: hsl(147 5% 43% / 0.7);
}

/* theme-chat-user */
.ph-bubble--user {
  color: #fff;
  background: linear-gradient(145deg, hsl(141 23% 40%), hsl(141 23% 40% / 0.88));
  border-top-right-radius: 8px;
}

/* theme-chat-data — the assistant's reply to a diary change */
.ph-bubble--data {
  background: hsl(141 23% 40% / 0.07);
  border-color: hsl(141 23% 40% / 0.2);
  border-top-left-radius: 8px;
}

/* bg-card border border-border — an ordinary answer */
.ph-bubble--answer {
  background: #fff;
  border-color: hsl(130 10% 88%);
  border-top-left-radius: 8px;
}

.ph-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: hsl(147 5% 43%);
}

.ph-bubble--user .ph-meta {
  justify-content: flex-end;
  color: hsl(0 0% 100% / 0.85);
}

.ph-meta time {
  padding: 0 2px;
  font-size: 10px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  color: hsl(147 5% 43% / 0.7);
}

.ph-bubble--user .ph-meta time {
  color: inherit;
}

.ph-meta .ph-icon {
  box-sizing: content-box;
  padding: 4px;
}

/* Composer (Chat.tsx "Input area") */
.ph-composer {
  flex: none;
  padding: 12px 16px;
  border-top: 1px solid hsl(130 10% 88%);
  background: #fff;
}

.ph-composer__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ph-key {
  flex: none;
  padding: 10px;
  border: 1px solid hsl(130 10% 88%);
  border-radius: 16px;
  background: #f4f6f2;
  color: #181f1b;
}

.ph-key--send {
  border-color: transparent;
  background: hsl(141 23% 40%);
  color: #fff;
  opacity: 0.4;
}

.ph-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid hsl(130 10% 88%);
  border-radius: 16px;
  background: #f4f6f2;
  color: hsl(147 5% 43% / 0.85);
}

.ph-disclaimer {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  color: hsl(147 5% 43%);
}

/* Bottom nav (Layout.tsx) — 52px content + 34px home-indicator inset */
.ph-nav {
  flex: none;
  position: relative;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 6px 34px;
  border-top: 1px solid hsl(130 10% 88% / 0.5);
  background: hsl(0 0% 100% / 0.92);
  color: hsl(147 5% 43%);
}

.ph-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
}

.ph-nav__icon {
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
}

.ph-nav__label {
  font-size: 9px;
  line-height: 13px;
  font-weight: 500;
}

/* meyuman-nav-active */
.ph-nav__item--active {
  color: hsl(141 23% 40%);
}

.ph-nav__item--active .ph-nav__icon {
  border-color: hsl(141 23% 40% / 0.22);
  background: hsl(141 23% 40% / 0.095);
  box-shadow: 0 8px 22px rgba(79, 125, 94, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.ph-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: #111;
}

/* Floating diary entry — the record the first message produced. Real,
   readable text (not part of the scaled phone). */
.entry-card {
  position: absolute;
  z-index: 2;
  /* hangs below the phone, over its composer and tab bar only — never
     over the chat replies */
  bottom: -2.5rem;
  inset-inline-end: calc(50% - var(--phone-w) / 2 - var(--card-out));
  width: 15rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--card);
  color: var(--foreground);
  box-shadow:
    0 30px 60px -22px rgba(35, 54, 42, 0.38),
    0 6px 16px -6px rgba(35, 54, 42, 0.14);
}

.entry-card__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--welcome-accent);
}

.entry-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: hsl(141 23% 40%);
  color: #fff;
}

.entry-card__check .ph-icon {
  width: 0.8rem;
  height: 0.8rem;
  stroke-width: 3;
}

.entry-card__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

/* With its item lines the hero card is taller: on desktop it is a little
   wider (one line per item) and hangs lower, below the phone's last reply. */
@media (min-width: 60.0625rem) {
  .hero .entry-card {
    width: 17rem;
    bottom: -6.5rem;
  }

  /* room for the card's overhang above the strip */
  .hero .input-strip {
    padding-top: 3.5rem;
  }
}

/* the narrower two-column range has a smaller phone, so less room under it */
@media (min-width: 60.0625rem) and (max-width: 75rem) {
  .hero .entry-card {
    bottom: -7.5rem;
  }

  .hero .input-strip {
    padding-top: 6.75rem;
  }
}

/* Stacked: wide enough for one line per item in both languages */
@media (max-width: 60rem) {
  .hero .entry-card {
    width: 16.5rem;
  }
}

/* The correction card's change lines sit under the calories */
.entry-card__changes {
  margin: 0 0 0.6rem;
}

/* The meal's items, one compact line each */
.entry-card__items {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.entry-card__items li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.entry-card__items li span:first-child {
  color: var(--foreground);
}

.entry-card__items li span:last-child {
  white-space: nowrap;
}

.entry-card__kcal {
  margin: 0.45rem 0 0.7rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.entry-card__kcal small {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted-foreground);
}

.entry-card__macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--border);
}

.entry-card__macros div {
  min-width: 0;
}

.entry-card__macros dt {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.entry-card__macros dt::before {
  content: '';
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--dot);
}

.entry-card__macros dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* the app's macro colours (--protein / --fat / --carbs in index.css) */
.macro--protein { --dot: hsl(207 27% 47%); }
.macro--fat { --dot: hsl(289 12% 50%); }
.macro--carbs { --dot: hsl(35 47% 45%); }

/* ── Input-mode strip (bottom of the hero) ─────────────────────────── */

.input-strip {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0.5rem 1.25rem 3rem;
}

.input-strip ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.55rem 0.7rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.input-strip li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.1rem;
  font-weight: 600;
  font-size: 1rem;
}

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

.input-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--welcome-accent);
}

.input-strip__icon .ph-icon {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 1.8;
}

/* ── Hero responsive ───────────────────────────────────────────────── */

/* Narrower two-column range: smaller phone, card tucked closer. */
@media (max-width: 75rem) {
  .phone-stage {
    --s: 0.66;
    --card-out: 4.5rem;
  }

  .entry-card {
    width: 13.75rem;
  }
}

/* Stacked: copy and button first, then the phone. */
@media (max-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2.75rem;
    gap: 1rem;
    text-align: center;
  }

  .hero p.lede {
    margin-inline: auto;
  }

  .hero__cta {
    align-items: center;
  }

  .phone-stage {
    --tilt-deg: 3deg;
    flex-direction: column;
    align-items: center;
    padding-block: 1.5rem 0;
  }

  /* Below the phone, overlapping only its lower edge — never over the
     copy above, and never wider than the column. */
  .entry-card {
    position: relative;
    bottom: auto;
    inset-inline-end: auto;
    margin-top: -4.5rem;
    margin-inline-start: 5rem;
    width: 15rem;
    max-width: calc(100% - 1rem);
    text-align: start;
  }

  .input-strip {
    padding-top: 2rem;
  }
}

@media (max-width: 40rem) {
  .hero h1 {
    font-size: clamp(1.75rem, 7.4vw, 2.5rem);
  }

  .hero p.lede {
    font-size: 1.08rem;
  }

  .phone-stage {
    --s: 0.62;
    --tilt-deg: 0deg;
  }

  .entry-card {
    margin-inline-start: 3rem;
    width: 14rem;
  }

  .input-strip {
    padding-inline: 1rem;
  }

  .input-strip ul {
    padding: 0.45rem 0.4rem;
  }

  .input-strip li {
    gap: 0.4rem;
    padding: 0 0.7rem;
    font-size: 0.95rem;
  }

  .input-strip__icon {
    width: 1.85rem;
    height: 1.85rem;
  }
}

/* ── Sections with a phone (correct-in-chat, diary) ───────────────────
   The hero's phone stage beside the section's copy; the correct-in-chat
   phone leans the other way, the diary phone stands straight. */

.section--phone .section__inner {
  gap: 2.5rem;
}

/* the hero's column split (1.12fr / 1fr), so the phone gets the same room */
.section--phone .section__text {
  flex: 1.12 1 0;
}

.section--phone .phone-stage {
  flex: 1 1 0;
}

/* Tilted the other way, the phone's outer bottom corner sits lower than in
   the hero, and the card carries a change line: on desktop it is wider (one
   line per change) and drops further to clear the last reply. */
@media (min-width: 60.0625rem) {
  .section--correct .entry-card {
    width: 17.5rem;
    bottom: -5.25rem;
  }
}

/* stacked: wide enough for one line per change */
@media (max-width: 60rem) {
  .section--correct .entry-card {
    width: 17rem;
  }
}

/* Before → after inside the entry card */
.entry-card__kcal .entry-card__was-kcal {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.entry-card__arrow {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted-foreground);
  vertical-align: 0.15em;
}

.entry-card__was {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

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

/* Stacks at the same width as the hero: copy, then the phone, then the
   card under it. */
@media (max-width: 60rem) {
  .section--phone .section__inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .section--phone .section__text {
    flex: 0 0 auto;
  }

  .section--phone p.section-body {
    margin-inline: auto;
  }

  .section--phone .phone-stage {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* A phone that stands straight (the diary section). */
.phone-stage--straight {
  --tilt-deg: 0deg;
}

/* ── Diary screen inside the phone (Diary.tsx, native Layout) ─────────
   Same scaled-phone system as the chat screen: every value is the app's
   own CSS pixel. */

.pd-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 0;
}

.pd-main > * {
  flex-shrink: 0;
}

.pd-card {
  border: 1px solid hsl(130 10% 88%);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.pd-datenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}

.pd-datenav__btn {
  padding: 8px;
  border-radius: 12px;
}

.pd-datenav__btn--off {
  color: hsl(147 5% 43% / 0.3);
}

.pd-datenav__day {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.pd-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.pd-totals__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pd-totals__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.pd-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: hsl(120 13% 93%);
  color: hsl(147 5% 43%);
  font-size: 12px;
  line-height: 16px;
}

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

.pd-stat__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.pd-stat__row b {
  font-weight: 500;
  color: #181f1b;
}

.pd-bar {
  height: 6px;
  border-radius: 999px;
  background: hsl(120 12% 92%);
  overflow: hidden;
}

.pd-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.pd-c-cal { background: hsl(141 23% 40%); }
.pd-c-protein { background: hsl(207 27% 47%); }
.pd-c-carbs { background: hsl(35 47% 45%); }
.pd-c-fat { background: hsl(289 12% 50%); }

.pd-list {
  overflow: hidden;
}

.pd-list > * + * {
  border-top: 1px solid hsl(130 10% 88%);
}

.pd-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.pd-time {
  flex: none;
  width: 40px;
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: hsl(147 5% 43%);
}

.pd-group__body {
  flex: 1;
  min-width: 0;
}

.pd-group__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: start;
  unicode-bidi: plaintext;
}

.pd-group__sub {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.pd-group__sub b {
  font-weight: 500;
  color: #181f1b;
}

.pd-chev {
  flex: none;
  color: hsl(147 5% 43%);
}

.pd-items {
  background: hsl(120 13% 93% / 0.2);
}

.pd-items > * + * {
  border-top: 1px solid hsl(130 10% 88% / 0.6);
}

.pd-item {
  padding: 10px 16px;
  padding-inline-start: 56px;
  background: hsl(120 13% 93%);
}

.pd-item__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.pd-item__qty {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.pd-item__macros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.pd-item__macros b {
  font-weight: 500;
  color: #181f1b;
}

.pd-main bdi {
  unicode-bidi: isolate;
}

.pd-disclaimer {
  margin: 0;
  /* pb-14: room for the quick-add button */
  padding-bottom: 56px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: hsl(147 5% 43%);
}

/* The quick-add button: fixed right-4 above the tab bar in every language. */
.pd-fab {
  position: absolute;
  right: 16px;
  bottom: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: hsl(141 23% 40%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* ── Reports section: two Progress charts + the PDF's first page ───────
   The cards are the app's own chart cards (Progress.tsx), at the app's
   size, light as in the app; the page is the server report template. */

.section--reports .section__text {
  flex: 1 1 0;
}

.reports-visual {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

.reports-visual__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 19rem;
}

.app-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid hsl(130 10% 88%);
  border-radius: 16px;
  background: #fff;
  color: #181f1b;
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
  box-shadow: 0 1px 2px rgba(35, 54, 42, 0.035), 0 8px 24px rgba(45, 68, 52, 0.045);
}

.app-card > *:not(.app-card__constellation) {
  position: relative;
  z-index: 1;
}

.app-card__constellation {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-end: 0.65rem;
  z-index: 0;
  width: 7.5rem;
  color: hsl(141 23% 40%);
  opacity: 0.075;
}

.app-card__constellation path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.75;
}

.app-card__constellation circle {
  fill: currentColor;
}

.app-card__title {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.app-card__chart {
  display: block;
  width: 100%;
  height: auto;
}

.app-card__caption {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 15px;
  color: hsl(147 5% 43%);
}

.app-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.app-card__label {
  font-size: 12px;
  line-height: 16px;
  color: hsl(147 5% 43%);
}

.app-card__value {
  font-weight: 700;
}

.app-card__value small {
  font-size: 12px;
  font-weight: 400;
  color: hsl(147 5% 43%);
}

.app-card__value--down {
  color: hsl(141 23% 40%);
}

.app-card bdi {
  unicode-bidi: isolate;
}

/* An A4 page (794 x 1123 CSS px) drawn at full size and scaled down. */
.pdf-thumb {
  --pdf-s: 0.3;
  position: relative;
  flex: none;
  width: calc(794px * var(--pdf-s));
  height: calc(1123px * var(--pdf-s));
  margin-inline-start: -1rem;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 28px 60px -18px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pdf-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  padding: 45px 45px 38px;
  overflow: hidden;
  transform: scale(var(--pdf-s));
  transform-origin: 0 0;
  text-align: start;
}

.pdf-page__content {
  height: 1040px;
  overflow: hidden;
}

.pdf-page__footer {
  position: absolute;
  inset-inline: 45px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 8pt;
  color: #6b6b6b;
}

.pdf-page svg {
  display: block;
}

@media (max-width: 60rem) {
  .section--reports .section__inner,
  .section--reports .section__inner.reverse {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .section--reports .section__text {
    flex: 0 0 auto;
  }

  .section--reports p.section-body {
    margin-inline: auto;
  }

  .reports-visual {
    flex-direction: column;
    gap: 1.5rem;
  }

  .pdf-thumb {
    --pdf-s: 0.4;
    margin-inline-start: 0;
  }
}

@media (max-width: 22rem) {
  .reports-visual__cards {
    width: 100%;
  }
}

/* The report template's stylesheet (artifacts/api-server/src/services/
   reportTemplate.ts, renderStyles), each rule scoped to .pdf-thumb .pdf-page
   (above the site's own .section h2 rules); only
   @page and @font-face are left out. */

.pdf-thumb .pdf-page * {
  box-sizing: border-box;
}

/* The page sits inside a section: undo what the site's own heading rules
   would add before the template's rules apply. */
.pdf-thumb .pdf-page h1,
.pdf-thumb .pdf-page h2 {
  line-height: 1.4;
  letter-spacing: normal;
  color: #2b2b2b;
}

.pdf-thumb .pdf-page {
  margin: 0;
  font-family: "Noto Sans Hebrew", "Segoe UI", "Noto Sans", "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 9.5pt;
  line-height: 1.4;
  color: #2b2b2b;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pdf-thumb .pdf-page h1 {
  margin: 0;
  font-size: 16pt;
  letter-spacing: -0.01em;
}

.pdf-thumb .pdf-page h2 {
  margin: 0 0 6px;
  font-size: 10pt;
  font-weight: 700;
}

.pdf-thumb .pdf-page .header {
  border-bottom: 1.5px solid #2b2b2b;
  padding-bottom: 7px;
  margin-bottom: 10px;
}

.pdf-thumb .pdf-page .header-meta {
  margin-top: 4px;
  font-size: 8.5pt;
  color: #6b6b6b;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pdf-thumb .pdf-page .header-meta strong {
  color: #2b2b2b;
  font-weight: 600;
}

.pdf-thumb .pdf-page section {
  margin-bottom: 10px;
}

.pdf-thumb .pdf-page .panel {
  background: #faf9f7;
  border-radius: 7px;
  padding: 8px 10px;
  min-width: 0;
  break-inside: avoid;
}

.pdf-thumb .pdf-page .panel-plain {
  padding: 0 2px;
  min-width: 0;
  break-inside: avoid;
}

.pdf-thumb .pdf-page .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pdf-thumb .pdf-page .stat-label {
  font-size: 7.5pt;
  line-height: 1.25;
  color: #6b6b6b;
}

.pdf-thumb .pdf-page .stat-value {
  font-size: 13pt;
  font-weight: 700;
  margin-top: 1px;
  white-space: nowrap;
}

.pdf-thumb .pdf-page .stat-unit {
  font-size: 7.5pt;
  font-weight: 400;
  color: #6b6b6b;
}

.pdf-thumb .pdf-page .stat-value.over {
  color: #b4574a;
}

.pdf-thumb .pdf-page .stat-value.under {
  color: #4f7d5c;
}

.pdf-thumb .pdf-page .chart-box {
  position: relative;
  overflow: hidden;
}

.pdf-thumb .pdf-page .chart-box canvas {
  display: block;
  max-width: 100%;
}

.pdf-thumb .pdf-page .split {
  display: flex;
  gap: 10px;
  align-items: stretch;
  break-inside: avoid;
}

.pdf-thumb .pdf-page .split > .grow {
  flex: 1 1 0;
  min-width: 0;
}

.pdf-thumb .pdf-page .split > .fixed {
  flex: 0 0 176px;
  min-width: 0;
}

.pdf-thumb .pdf-page .donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pdf-thumb .pdf-page .donut-caption {
  font-size: 8pt;
  color: #4a4a4a;
  text-align: center;
  line-height: 1.35;
}

.pdf-thumb .pdf-page .donut-caption b {
  font-weight: 700;
  color: #2b2b2b;
}

.pdf-thumb .pdf-page .macro-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pdf-thumb .pdf-page .macro-row {
  break-inside: avoid;
}

.pdf-thumb .pdf-page .macro-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 8.5pt;
  margin-bottom: 2px;
}

.pdf-thumb .pdf-page .macro-name {
  font-weight: 600;
}

.pdf-thumb .pdf-page .macro-figures {
  color: #6b6b6b;
  white-space: nowrap;
}

.pdf-thumb .pdf-page .macro-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #eceae4;
  overflow: hidden;
}

.pdf-thumb .pdf-page .macro-goal-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #b9b4a8;
}

.pdf-thumb .pdf-page .macro-fill {
  height: 100%;
  border-radius: 5px;
}

.pdf-thumb .pdf-page .macro-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #2b2b2b;
}

.pdf-thumb .pdf-page .segbar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: #eceae4;
}

.pdf-thumb .pdf-page .segbar span {
  display: block;
  height: 100%;
}

.pdf-thumb .pdf-page .seg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 5px;
  font-size: 8pt;
  color: #4a4a4a;
}

.pdf-thumb .pdf-page .seg-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-inline-end: 5px;
}

.pdf-thumb .pdf-page .seg-legend b {
  font-weight: 700;
  color: #2b2b2b;
}

.pdf-thumb .pdf-page .weight-figures {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 8.5pt;
  color: #6b6b6b;
  margin-bottom: 5px;
}

.pdf-thumb .pdf-page .weight-figures strong {
  color: #2b2b2b;
  font-weight: 600;
}

.pdf-thumb .pdf-page .notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 8.5pt;
  color: #4a4a4a;
}

.pdf-thumb .pdf-page .notes li {
  padding-inline-start: 12px;
  position: relative;
  margin-bottom: 2px;
}

.pdf-thumb .pdf-page .notes li::before {
  content: "\00B7";
  position: absolute;
  inset-inline-start: 3px;
  font-weight: 700;
  color: #9a958a;
}

.pdf-thumb .pdf-page .notes b {
  color: #2b2b2b;
  font-weight: 700;
}

.pdf-thumb .pdf-page .hint {
  margin-top: 5px;
  font-size: 7.5pt;
  color: #6b6b6b;
}

.pdf-thumb .pdf-page .diary {
  margin-top: 12px;
}

.pdf-thumb .pdf-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  table-layout: fixed;
}

.pdf-thumb .pdf-page thead {
  display: table-header-group;
}

.pdf-thumb .pdf-page th,
.pdf-thumb .pdf-page td {
  padding: 3.5px 5px;
  border-bottom: 1px solid #ebe9e4;
  text-align: start;
  vertical-align: top;
}

.pdf-thumb .pdf-page th {
  background: #f3f1ed;
  font-size: 7.5pt;
  font-weight: 600;
  color: #4a4a4a;
  border-bottom: 1px solid #ddd9d2;
  overflow-wrap: anywhere;
}

.pdf-thumb .pdf-page tr {
  break-inside: avoid;
}

.pdf-thumb .pdf-page td.num,
.pdf-thumb .pdf-page th.num {
  text-align: end;
  white-space: nowrap;
}

.pdf-thumb .pdf-page td.nowrap {
  white-space: nowrap;
}

.pdf-thumb .pdf-page col.c-date {
  width: 12%;
}

.pdf-thumb .pdf-page col.c-time {
  width: 7.5%;
}

.pdf-thumb .pdf-page col.c-item {
  width: 36.5%;
}

.pdf-thumb .pdf-page col.c-amount {
  width: 11%;
}

.pdf-thumb .pdf-page col.c-num {
  width: 8.25%;
}

.pdf-thumb .pdf-page td.item {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pdf-thumb .pdf-page td.date-repeat {
  color: #a8a29a;
}

.pdf-thumb .pdf-page tr.day-first td {
  border-top: 1px solid #d8d4cc;
}

.pdf-thumb .pdf-page tr.day-total {
  break-before: avoid;
}

.pdf-thumb .pdf-page tr.day-total td {
  background: #eef1ee;
  font-weight: 700;
  color: #2b2b2b;
  border-bottom: 1px solid #d8ddd6;
}

.pdf-thumb .pdf-page tr.day-total td.day-total-label {
  color: #4a4a4a;
}

.pdf-thumb .pdf-page .empty {
  padding: 10px;
  border: 1px dashed #ddd9d2;
  border-radius: 7px;
  color: #6b6b6b;
  font-size: 8.5pt;
  text-align: center;
}

/* ── Section rhythm ─────────────────────────────────────────────────── */

main {
  margin: 0;
}

.section {
  padding: 5.5rem 0;
}

.section__inner {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.section__inner.reverse {
  flex-direction: row-reverse;
}

.section__text {
  flex: 1 1 22rem;
  min-width: 0;
}

.section .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--welcome-accent);
  margin: 0 0 0.6rem;
}

.section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  margin: 0 0 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section p.section-body {
  color: var(--muted-foreground);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 30rem;
  margin: 0;
}

@media (max-width: 56rem) {
  .section {
    padding: 3.5rem 0;
  }

  .section__inner,
  .section__inner.reverse {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  /* Once the row becomes a column, flex-basis applies to HEIGHT: the
     22rem/26rem basis would inflate the copy block to 352/416px tall and
     open a dead band between the text and the visual below it. */
  .section__text,
  .hero__text {
    flex: 0 0 auto;
  }

  .section p.section-body {
    margin-inline: auto;
  }
}

/* ── Deep sections — fixed-dark, a composition choice not a theme ────── */

.section--deep {
  background: var(--deep-bg);
  color: var(--deep-fg);
  padding: 6.5rem 0;
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.section--deep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(140, 200, 165, 0.1) 0%, rgba(140, 200, 165, 0) 45%);
  pointer-events: none;
}

.section--deep .eyebrow {
  color: var(--deep-primary);
}

.section--deep h2 {
  color: var(--deep-fg);
}

.section--deep p.section-body {
  color: var(--deep-muted);
}

/* ── FAQ (landing) ─────────────────────────────────────────────────────
   Native <details>: keyboard and screen readers get open/close for free.
   The + sits before the question (right in Hebrew, left in English) and
   turns into a × when the answer is open. */

.faq {
  max-width: 48rem;
  margin-inline: auto;
  padding: 0 1.25rem;
}

.faq h2 {
  margin-bottom: 1.5rem;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item:first-of-type {
  border-top: 1px solid var(--border);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

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

.faq__item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.faq__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.05rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--welcome-accent);
}

.faq__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .faq__icon {
    transition: transform 0.2s ease;
  }
}

.faq__item p {
  max-width: 40rem;
  margin: 0;
  padding: 0 0.25rem 1.25rem;
  padding-inline-start: 2.7rem;
  color: var(--muted-foreground);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ── Final block — starry night, the hero's bookend ────────────────────
   A fixed deep green (not the theme's near-black) in both site themes.
   The stars are static markup: positions written once at build time, so
   they never move between loads. */

.final {
  --night: #16201a;
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 7rem 1.25rem 6.5rem;
  background:
    radial-gradient(60rem 30rem at 50% 0%, rgba(140, 200, 165, 0.08), transparent 70%),
    var(--night);
  color: #eef1ec;
  text-align: center;
}

.final__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

.final__stars circle {
  fill: #dfe8e1;
}

@media (prefers-reduced-motion: no-preference) {
  .final__stars .tw {
    animation: final-twinkle var(--d, 9s) ease-in-out var(--delay, 0s) infinite;
  }
}

@keyframes final-twinkle {
  0%, 100% { opacity: var(--o, 0.8); }
  50% { opacity: calc(var(--o, 0.8) * 0.35); }
}

.final__inner {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
}

.final h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.final__lead {
  margin: 1rem auto 0;
  max-width: 30rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #b9c5bc;
}

/* Not a link yet, like the hero's button: light on the night sky. */
.btn-night {
  margin-top: 2rem;
  padding: 0.95rem 1.9rem;
  border-radius: 0.9rem;
  background: #eef1ec;
  color: var(--night);
  font-size: 1.05rem;
  cursor: default;
}

.btn-night,
.btn-night:hover {
  transform: none;
  transition: none;
}

/* The landing pages' footer continues the night sky; the legal pages keep
   the shared light footer (the modifier is only on / and /en/). Doubled
   class: the shared .site-footer rules come later in this file. */
.site-footer.site-footer--home {
  border-top: 0;
  padding-top: 0;
  background: #16201a;
  color: #8fa096;
}

.site-footer.site-footer--home .site-footer__inner {
  padding-top: 1.5rem;
  border-top: 1px solid #26322a;
}

.site-footer.site-footer--home p {
  margin: 0;
}

.site-footer.site-footer--home a {
  color: #8fa096;
}

.site-footer.site-footer--home a:hover {
  color: #eef1ec;
}

@media (max-width: 40rem) {
  .final {
    padding: 5rem 1.25rem 4.5rem;
  }

  .faq__item summary {
    font-size: 1.02rem;
  }

  .faq__item p {
    font-size: 0.98rem;
  }
}

/* ── Feature row (landing privacy teaser) — inline, not boxed cards ──── */

.feature-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.feature-row__item {
  flex: 1 1 14rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.feature-row__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-row__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.feature-row__item h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.feature-row__item p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ── Legal pages ────────────────────────────────────────────────────── */

.legal h1 {
  font-size: 1.9rem;
  margin-bottom: 0.25rem;
}

/* Standfirst under a legal-page h1. The class was already used in the
   support pages' markup but had no rule, so it rendered as plain body text. */
.legal .section-lede {
  max-width: var(--content-width);
  margin: 0.4rem 0 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.legal .draft-notice {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  margin: 1.25rem 0 2rem;
}

.legal-body {
  max-width: var(--content-width);
}

.legal-body h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.legal-body p,
.legal-body li {
  color: var(--foreground);
}

.legal-body ul {
  padding-inline-start: 1.25rem;
}

.todo {
  display: inline;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--foreground);
}

.table-scroll {
  overflow-x: auto;
  margin: 1rem 0 2rem;
}

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: start;
  vertical-align: top;
}

.data-table th {
  background: var(--accent);
  color: var(--accent-foreground);
  font-weight: 600;
}

main:has(.legal) {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 3.5rem 1.25rem 5rem;
}

/* ── FAQ (Support page) ────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}

.faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.faq-item p {
  margin: 0;
  color: var(--muted-foreground);
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.25rem;
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

.site-footer__inner {
  max-width: var(--page-width);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--welcome-accent);
}

@media (max-width: 32rem) {
  .site-header__inner {
    justify-content: center;
    text-align: center;
  }
}

/* Landing header on phones. The modifier is set only on / and /en/, so the
   legal pages keep the shared header above exactly as it is. Below 500px
   the three links no longer fit beside the logo and the language switch
   (the row wrapped to two or three lines), so they leave the header — the
   footer carries the same three links. */
@media (max-width: 31.2rem) {
  .site-header--home .site-header__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .site-header--home .site-nav {
    display: none;
  }
}

/* ── Landing motion (assets/js/motion.js) ────────────────────────────────
   Every rule below needs html.motion, which motion.js sets only when the
   visitor has not asked for reduced motion, and applies only to a block
   that has not finished playing (data-motion="wait" or "play"). Without
   JS, with reduced motion, and once a block is done, none of it applies:
   the page is its final, static self. Nothing here changes the layout —
   what is about to arrive is hidden in its own place, and the chat is
   "scrolled back" with translate only. */

:root {
  --m-highlight: hsl(141 23% 40% / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --m-highlight: hsl(140 19% 55% / 0.2);
  }
}

/* The chat as it was before the newest messages: scrolled back so that the
   last message already there sits at the bottom (motion.js measures it). */
.motion .hero:not([data-motion=done]) .ph-messages > * {
  translate: 0 var(--m-shift, 182px);
}

.motion .section--correct:not([data-motion=done]) .ph-messages > * {
  translate: 0 var(--m-shift, 114px);
}

/* What arrives: the lunch photo, its reply and the diary card in the hero;
   the 18:40 message and its reply in the correction chat. */
.motion .hero:not([data-motion=done]) .ph-photo,
.motion .hero:not([data-motion=done]) .ph-messages > :last-child .ph-bubble,
.motion .hero:not([data-motion=done]) .entry-card,
.motion .section--correct:not([data-motion=done]) .ph-messages > :nth-last-child(-n+2) .ph-bubble {
  opacity: 0;
}

/* Numbers that count: the real number keeps its place (transparent) and
   motion.js draws the running value over it. */
.motion :is(.hero, .section--correct):not([data-motion=done]) :is(.ph-cals, .ph-protein, .entry-card__kcal > bdi) {
  position: relative;
  -webkit-text-fill-color: transparent;
}

.m-num {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  white-space: nowrap;
  -webkit-text-fill-color: currentcolor;
}

/* The app's "analyzing" placeholder (Chat.tsx AiThinkingIndicator): a
   bg-card bubble with chat.analyzing in muted text, swept by a shimmer —
   index.css .chat-thinking-shimmer, 1.6s linear. It stands in the reply's
   place and is removed when the reply arrives. */
.m-typing {
  position: absolute;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
}

.m-thinking {
  display: block;
  font-size: 14px;
  text-align: start;
  color: hsl(147 5% 43%);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .m-thinking {
    color: transparent;
    background-image: linear-gradient(90deg, hsl(147 5% 43%) 30%, #181f1b 50%, hsl(147 5% 43%) 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: m-thinking-sweep 1.6s linear infinite;
  }
}

@keyframes m-thinking-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Diary: the day's four bars fill from their start edge */
.motion .section--diary:not([data-motion=done]) .pd-totals .pd-bar span {
  clip-path: inset(0 100% 0 0);
}

.motion .section--diary:not([data-motion=done]) .phone__screen[dir=rtl] .pd-totals .pd-bar span {
  clip-path: inset(0 0 0 100%);
}

/* Charts: the week's bars grow from the axis; the weight line and its
   points are drawn from the first day on */
.m-bars path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.motion .app-card:not([data-motion=done]) .m-bars path {
  scale: 1 0;
}

.motion .app-card:not([data-motion=done]) :is(.m-line, .m-dots circle) {
  opacity: 0;
}