/* tokens: docs/design-system/tokens.json v1 */
/* Generated once from tokens.json (A19); keep names in step with the app theme (mobile M01). */
:root {
  --bg: #f6f4f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #eeeaf1;
  --track: #e6e0ea;
  --switch-thumb: #ffffff;
  --chrome: rgba(255,255,255,0.88);
  --line: #e2dce5;
  --line-strong: #8c8293;
  --ink: #1d1622;
  --ink-muted: #574e5e;
  --ink-subtle: #6f6676;
  --brand: #4a2360;
  --brand-pressed: #3a1a4c;
  --on-brand: #ffffff;
  --brand-soft: #efe6f4;
  --on-brand-soft: #4a2360;
  --accent: #f5b21e;
  --on-accent: #1d1622;
  --accent-soft: #fdf1d3;
  --energy: #a35400;
  --protein: #2f63d6;
  --fat: #c2367a;
  --carbs: #13875a;
  --on-macro: #ffffff;
  --success: #17794b;
  --success-soft: #e3f4ea;
  --warning: #8f5300;
  --warning-soft: #fff0d6;
  --danger: #b4301c;
  --danger-soft: #fbe6e2;
  --focus: #2d5bd0;
  --inverse: #2a2230;
  --on-inverse: #f6f2f8;
  --inverse-action: #f5b21e;
  --camera-bg: #0e0a11;
  --on-camera: #ffffff;
  --scrim: rgba(14,10,17,0.5);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgba(29,22,34,0.06), 0 2px 8px rgba(29,22,34,0.06);
  --shadow-2: 0 6px 20px rgba(29,22,34,0.14);
  --shadow-3: 0 -8px 32px rgba(29,22,34,0.16);
  --dur-instant: 100ms;
  --dur-quick: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-scan: 1400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121014;
    --surface: #1c1820;
    --surface-raised: #26212b;
    --surface-muted: #2a2430;
    --track: #2e2834;
    --switch-thumb: #ffffff;
    --chrome: rgba(28,24,32,0.88);
    --line: #2e2934;
    --line-strong: #776e7e;
    --ink: #f3eef5;
    --ink-muted: #c2b9c8;
    --ink-subtle: #a49baa;
    --brand: #c9a2e0;
    --brand-pressed: #b88dd3;
    --on-brand: #1d1622;
    --brand-soft: #34253e;
    --on-brand-soft: #e6d3f2;
    --accent: #f5b21e;
    --on-accent: #1d1622;
    --accent-soft: #3a2e14;
    --energy: #f0a43a;
    --protein: #8aabff;
    --fat: #f27fb7;
    --carbs: #52cc98;
    --on-macro: #121014;
    --success: #5bd3a0;
    --success-soft: #173528;
    --warning: #f2b64f;
    --warning-soft: #3a2c12;
    --danger: #ff8f78;
    --danger-soft: #3d1f1a;
    --focus: #9db8ff;
    --inverse: #ede7f0;
    --on-inverse: #1d1622;
    --inverse-action: #5a2c74;
    --camera-bg: #0e0a11;
    --on-camera: #ffffff;
    --scrim: rgba(0,0,0,0.6);
    --shadow-1: 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-2: 0 6px 20px rgba(0,0,0,0.5);
    --shadow-3: 0 -8px 32px rgba(0,0,0,0.6);
  }
}

/* Onest (SIL OFL 1.1) — subsets of mobile/assets/fonts: Latin + Latin Extended (ș ț ă â î) + Cyrillic. */
@font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url(fonts/onest-400.woff2?v=5621f2f0) format("woff2"); }
@font-face { font-family: Onest; font-weight: 500; font-display: swap; src: url(fonts/onest-500.woff2?v=0ed15b64) format("woff2"); }
@font-face { font-family: Onest; font-weight: 600; font-display: swap; src: url(fonts/onest-600.woff2?v=d3c01898) format("woff2"); }
@font-face { font-family: Onest; font-weight: 700; font-display: swap; src: url(fonts/onest-700.woff2?v=423f3f7a) format("woff2"); }
@font-face { font-family: Onest; font-weight: 800; font-display: swap; src: url(fonts/onest-800.woff2?v=3aaec5ae) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 Onest, -apple-system, Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 12px 16px; border-radius: var(--radius-md); }
.skip:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-md); font: 600 16px/1 Onest, system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.btn--lg { min-height: 56px; padding: 0 28px; border-radius: 16px; font-size: 17px; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-pressed); }
.btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--secondary:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* Header */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 clamp(16px, 5vw, 64px); background: var(--chrome);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.logo span { font-weight: 600; color: var(--ink-muted); }
.top__nav { display: flex; gap: 28px; font-size: 15px; }
.top__nav a, .langs a { color: var(--ink-muted); text-decoration: none; }
.top__nav a:hover, .langs a:hover { color: var(--ink); }
.top__end { display: flex; align-items: center; gap: 16px; }
.langs { display: flex; gap: 2px; font-size: 14px; }
.langs a, .langs span { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border-radius: 12px; }
.langs [aria-current] { color: var(--ink); font-weight: 600; background: var(--surface-muted); }
/* The full header needs ~890px (ru) plus the padding: below 1080px the section links give way (the sections are a scroll
   away), the languages and the install button stay; nothing in it wraps. */
.logo, .top__nav a, .top__cta { white-space: nowrap; }
@media (max-width: 1080px) { .top__nav { display: none; } }

/* Hero — final frame: normal flow (reduced motion, no JS). The scroll scene (data-state="play") is further down. */
.hero { position: relative; overflow-x: clip; }
.hero__stage { position: relative; max-width: 1240px; margin: 0 auto; padding: 128px 16px 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: center; }
.hero__glow {
  position: absolute; inset: 0 -40vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 14% 10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(30% 34% at 90% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.hero__title { grid-column: 1 / -1; text-align: center; }
.hero__title h1 { font-weight: 800; font-size: clamp(40px, 6.6vw, 100px); line-height: .96; letter-spacing: -.035em; }
.hero__title h1 em { display: block; font-style: normal; color: var(--brand); }
.hero__title > p { margin: 20px auto 0; max-width: 540px; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-muted); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.hero__cta .stores { justify-content: center; }
.hero__install { display: none; }
.hero__cta:not(:has(.stores)) .hero__install { display: inline-flex; }
.hero__cta-note { flex-basis: 100%; font-size: 14px; color: var(--ink-subtle); }
.hero__phone { position: relative; justify-self: end; --s: .78; width: calc(414px * var(--s)); height: calc(868px * var(--s)); }
.hero__phone > .phone { transform: scale(var(--s)); transform-origin: 0 0; }
.hero__halo {
  position: absolute; left: 50%; top: 42%; z-index: -1; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent),
    radial-gradient(closest-side at 70% 64%, color-mix(in srgb, var(--brand) 26%, transparent), transparent);
}
.hero__side-title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 750; line-height: 1.06; letter-spacing: -.025em; }
.hero__side-title span { color: var(--brand); }
.steps { display: grid; gap: 12px; margin: 24px 0 28px; }
.steps li { display: flex; gap: 12px; align-items: center; font-size: 18px; color: var(--ink-muted); transition: color var(--dur-base) var(--ease-standard); }
.steps li b { color: var(--ink); font-weight: 600; transition: color var(--dur-base) var(--ease-standard); }
.steps__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.steps__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--brand); color: var(--on-brand); transition: background-color var(--dur-base), color var(--dur-base); }
.hero__free { margin-top: 16px; font-size: 14px; color: var(--ink-muted); }

/* Store buttons and QR */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-block; border-radius: 10px; line-height: 0; transition: transform var(--dur-quick) var(--ease-standard); }
.store img { width: auto; height: 52px; }
.store:hover { transform: translateY(-2px); }
.qr { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 13px; color: var(--ink-subtle); max-width: 360px; }
.qr img { flex: none; width: 88px; height: 88px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.qr--short img { width: 64px; height: 64px; }
@media (hover: none), (max-width: 860px) { .qr { display: none; } }

/* Sections */
.section { max-width: 1120px; margin: 0 auto; padding: 96px 16px; }
.section > h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 750; letter-spacing: -.025em; line-height: 1.08; }
.section__lead { margin-top: 14px; max-width: 640px; font-size: 19px; color: var(--ink-muted); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.shots__item > h3 { margin-top: 20px; font-size: 20px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.shots__item > h3 span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--on-brand-soft); font-size: 13px; font-weight: 700; }
.shots__item > p { margin-top: 6px; color: var(--ink-muted); }
.device { max-width: 280px; margin: 0 auto; padding: 9px; border-radius: 44px; background: #16111a; box-shadow: var(--shadow-2); }
.device img { width: 100%; border-radius: 35px; background: var(--surface-muted); }








@media (max-width: 860px) {
  .top__nav, .top__cta { display: none; }
  .hero__stage { grid-template-columns: minmax(0, 1fr); padding-top: 104px; }
  .hero__phone { justify-self: center; --s: .72; }
  .store img { height: 46px; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 64px 16px; }
}

/* «How it works»: live screens until the screenshots (partials/how.blade.php). */
.shots__phone { --s: .62; width: calc(414px * var(--s)); height: calc(868px * var(--s)); margin: 0 auto; }
.shots__phone > .phone { transform: scale(var(--s)); transform-origin: 0 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(29, 22, 34, .4); }

/* Diary screen (partials/screens/diary.blade.php). */
.diary { position: absolute; inset: 0; padding: 62px 16px 0; background: var(--bg); }
.diary__date { font-size: 14px; color: var(--ink-muted); }
.diary__title { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.diary__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 14px 0; text-align: center; }
.diary__week li { display: grid; gap: 2px; padding: 8px 0 6px; border-radius: 14px; font-size: 12px; color: var(--ink-muted); }
.diary__week b { font-size: 17px; color: var(--ink); }
.diary__week i { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.diary__week .is-on { background: var(--brand); color: var(--on-brand); }
.diary__week .is-on b { color: var(--on-brand); }
.diary__week .is-on i { background: var(--on-brand); }
.diary__card { margin-bottom: 12px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); }
.diary__sum { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; flex: none; width: 132px; height: 132px; }
.ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.ring small { font-size: 12px; color: var(--ink-muted); }
.ring b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.bars { flex: 1; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 4px; font-size: 13px; }
.bars li span { font-weight: 600; }
.bars li b { font-size: 13px; }
.bars li small { color: var(--ink-muted); font-weight: 500; }
.bars em { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--track); position: relative; overflow: hidden; }
.bars em { background: linear-gradient(var(--c), var(--c)) 0 0 / var(--w, 50%) 100% no-repeat, var(--track); }
.bar__p { --c: var(--protein); } .bar__f { --c: var(--fat); } .bar__c { --c: var(--carbs); }
.diary__meal-head { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.diary__meal-head small { font-size: 13px; color: var(--ink-muted); }
.diary__meal-head span { margin-left: auto; font-size: 15px; font-weight: 700; }
.diary__item { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 16px; }
.diary__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary__item b { font-size: 18px; white-space: nowrap; }
.diary__item small { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.thumb { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #5a4032 center / 120% no-repeat; }
.thumb--yogurt { background: radial-gradient(circle at 38% 40%, #c2367a 0 6%, transparent 7%), radial-gradient(circle at 62% 56%, #4a2360 0 6%, transparent 7%), radial-gradient(circle, #fbf6ef 0 54%, #d7cfc4 56% 60%, #b89a7a 62%); }
.snack { position: absolute; left: 16px; right: 16px; bottom: 104px; display: flex; justify-content: space-between; padding: 15px 18px; border-radius: 16px; background: var(--inverse); color: var(--on-inverse); font-size: 15px; font-weight: 500; box-shadow: var(--shadow-2); }
.snack b { color: var(--inverse-action); }
.tabs { position: absolute; inset: auto 0 0; height: 92px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding: 14px 8px 0; background: var(--surface); border-top: 1px solid var(--line); text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.tabs .is-on { color: var(--brand); font-weight: 700; }
.tabs__scan { justify-self: center; display: grid; place-items: center; width: 62px; height: 62px; margin-top: -34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-2); }

@keyframes caret { 50% { opacity: 0; } }
@media (prefers-color-scheme: dark) {
}
@media (max-width: 860px) {
  .shots { display: flex; gap: 16px; margin: 32px -16px 0; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots__item { flex: 0 0 78%; scroll-snap-align: center; }
  .shots__phone { --s: .6; }
}

/* Phone: an app screen at the app's own size (390×844), the CSS scales it (partials/device.blade.php). */
.phone {
  position: relative; width: 414px; height: 868px; padding: 12px; border-radius: 66px;
  background: linear-gradient(145deg, #40364a, #17121b 36%, #120e15 64%, #2e2534);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 60px 110px -30px rgba(29, 22, 34, .5), 0 24px 48px -24px rgba(29, 22, 34, .35);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #2a2230; }
.phone::before { left: -3px; top: 190px; height: 62px; box-shadow: 0 80px 0 #2a2230; }
.phone::after { right: -3px; top: 240px; height: 100px; }
.phone__screen {
  position: relative; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--ink); font: 400 15px/1.35 Onest, -apple-system, Roboto, system-ui, sans-serif; text-align: left;
}
.status { position: absolute; inset: 0 0 auto; z-index: 8; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 46px; color: #fff; font-weight: 600; font-size: 17px; }
.status__island { position: absolute; left: 50%; top: 12px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.phone[data-screen="diary"] .status { color: var(--ink); }

/* Camera, analysis and result (partials/screens/scan.blade.php). */
.cam { position: absolute; inset: 0; background: #3a2b22; color: var(--on-camera); }
.cam::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at 50% 46%, transparent 55%, rgba(14, 10, 17, .55)); }
.cam__photo { position: absolute; inset: 0; transform-origin: 50% 369px; transition: transform 560ms var(--ease-standard); }
.cam__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam__flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.cam__frame { position: absolute; z-index: 2; left: 40px; top: 214px; width: 310px; height: 310px; transition: opacity var(--dur-base); }
.cam__frame i { position: absolute; width: 46px; height: 46px; border: 0 solid #fff; transition: border-color var(--dur-base); }
.cam__frame i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-top-left-radius: 24px; }
.cam__frame i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-top-right-radius: 24px; }
.cam__frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 24px; }
.cam__frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 24px; }
.cam__top { position: absolute; z-index: 5; left: 20px; right: 20px; top: 66px; display: flex; justify-content: space-between; transition: opacity var(--dur-base); }
.glass { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(20, 14, 24, .45); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cam__hint { position: absolute; z-index: 3; left: 50%; top: 136px; transform: translateX(-50%); padding: 8px 16px; border-radius: var(--radius-full); background: rgba(20, 14, 24, .6); font-size: 15px; font-weight: 500; white-space: nowrap; transition: opacity var(--dur-base); }
.cam__bottom { position: absolute; z-index: 3; inset: auto 0 0; height: 200px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 26px 50px; background: linear-gradient(transparent, rgba(14, 10, 17, .9) 50%); transition: opacity var(--dur-base) 120ms; }
.cam__gallery { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 19px; border-radius: 12px; background: rgba(255, 255, 255, .14); }
.cam__shutter { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 5px solid #fff; }
.cam__shutter i { width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.cam__quota { display: grid; width: 96px; margin-bottom: 20px; text-align: right; font-size: 13px; line-height: 1.25; color: rgba(255, 255, 255, .8); }
.cam__quota b { font-size: 17px; color: #fff; font-weight: 600; }
.scan { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 34px; padding: 22px 22px 20px; border-radius: 28px; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(calc(100% + 48px)); transition: transform var(--dur-slow) var(--ease-enter); }
.scan__title { font-size: 21px; font-weight: 600; }
.scan__sub { margin-top: 6px; font-size: 14px; color: var(--ink-muted); }
.scan__steps { display: grid; gap: 12px; margin-top: 16px; }
.scan__steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--ink); transition: color var(--dur-base); }
.scan__steps li::before { content: ""; flex: none; width: 14px; height: 8px; margin: 0 3px 4px; border: 2.5px solid var(--success); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.phone[data-scan] .scan__steps li { color: var(--ink-subtle); }
.phone[data-scan] .scan__steps li::before { width: 10px; height: 10px; margin: 0 5px; border: 0; border-radius: 50%; background: var(--track); transform: none; }
.phone[data-scan="1"] .scan__steps li[data-n="1"], .phone[data-scan="2"] .scan__steps li[data-n="2"], .phone[data-scan="3"] .scan__steps li[data-n="3"] { color: var(--ink); font-weight: 600; }
.phone[data-scan="1"] .scan__steps li[data-n="1"]::before, .phone[data-scan="2"] .scan__steps li[data-n="2"]::before, .phone[data-scan="3"] .scan__steps li[data-n="3"]::before { background: var(--accent); animation: dot-pulse 900ms var(--ease-standard) infinite; }
.phone[data-scan="2"] .scan__steps li[data-n="1"], .phone[data-scan="3"] .scan__steps li[data-n="1"], .phone[data-scan="3"] .scan__steps li[data-n="2"] { color: var(--ink); }
.phone[data-scan="2"] .scan__steps li[data-n="1"]::before, .phone[data-scan="3"] .scan__steps li[data-n="1"]::before, .phone[data-scan="3"] .scan__steps li[data-n="2"]::before {
  width: 14px; height: 8px; margin: 0 3px 4px; border: 2.5px solid var(--success); border-top: 0; border-right: 0; border-radius: 0; background: none; transform: rotate(-45deg);
}

.sheet { position: absolute; z-index: 6; inset: 196px 0 0; overflow: hidden; padding: 10px 16px 0; border-radius: 28px 28px 0 0; background: var(--bg); box-shadow: var(--shadow-3); transition: transform 560ms var(--ease-enter); }
.sheet__grab { width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 9px; background: var(--track); }
.sheet::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 34px; background: linear-gradient(var(--bg) 72%, transparent); }
.sheet__grab { position: relative; z-index: 2; }
.sheet__body { transition: transform 560ms var(--ease-standard) 250ms; }
.phone[data-phase="answered"] .sheet__body { transform: translateY(-80px); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--ok { background: var(--success-soft); color: var(--success); }
.chip--warn { background: var(--warning-soft); color: var(--warning); }
.chip--low { background: var(--danger-soft); color: var(--danger); }
.sheet__dish { margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 600; }
.sheet__kcal { position: relative; display: flex; align-items: baseline; margin-top: 8px; }
.sheet__kcal b { font-size: 56px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
.sheet__kcal .approx { font-size: 40px; font-weight: 600; color: var(--ink-subtle); }
.sheet__kcal small { margin-left: 6px; font-size: 17px; color: var(--ink-muted); }
.sheet__delta { position: absolute; right: 0; top: 14px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--success-soft); color: var(--success); font-size: 15px; font-weight: 700; opacity: 0; }
.macros { display: flex; gap: 16px; margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.macros b { color: var(--ink); font-weight: 600; }
.key { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; vertical-align: 1px; }
.key--p { background: var(--protein); } .key--f { background: var(--fat); } .key--c { background: var(--carbs); }
.ask { margin-top: 16px; padding: 16px; border-radius: 20px; background: var(--brand-soft); color: var(--on-brand-soft); }
.ask__q { display: flex; gap: 8px; align-items: center; font-size: 16px; font-weight: 600; }
.ask__options { display: flex; gap: 8px; margin-top: 12px; }
.ask__option { position: relative; flex: 1 1 auto; padding: 10px 6px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick); }
.ask__option--picked { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.ask__ripple { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 35%, transparent); opacity: 0; pointer-events: none; }
.ask__note { margin-top: 10px; font-size: 13px; opacity: .85; }
.sheet__label { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; margin-bottom: 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); }
.row b, .row small { display: block; }
.row b { font-size: 16px; font-weight: 600; }
.row small { font-size: 13px; color: var(--ink-muted); }
.row__end { text-align: right; white-space: nowrap; }
.row__end b { font-size: 15px; }
.row--added { max-height: 80px; overflow: hidden; transition: opacity var(--dur-base), max-height var(--dur-base) var(--ease-enter), padding var(--dur-base), margin var(--dur-base); }
.sheet__foot { position: absolute; inset: auto 0 0; display: grid; gap: 10px; padding: 34px 16px 30px; background: linear-gradient(transparent, var(--bg) 34%); text-align: center; }
.sheet__save { display: grid; place-items: center; min-height: 56px; border-radius: 16px; background: var(--brand); color: var(--on-brand); font-size: 17px; font-weight: 600; }
.sheet__when { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.sheet__when b { color: var(--brand); font-weight: 600; }

/* Screen states (data-phase on .phone). */
.phone:not([data-phase="camera"]) .cam__hint, .phone:not([data-phase="camera"]) .cam__bottom { opacity: 0; }
.phone[data-phase="result"] .cam__frame, .phone[data-phase="answered"] .cam__frame { opacity: 0; }
.phone:not([data-phase="result"]):not([data-phase="answered"]) .cam__top--result, .phone[data-phase="result"] .cam__top--camera, .phone[data-phase="answered"] .cam__top--camera { opacity: 0; }
.phone[data-phase="scanning"] .cam__frame i { border-color: var(--accent); }
.phone[data-phase="scanning"] .cam__frame { animation: scan-pulse var(--dur-scan) var(--ease-standard) infinite; }
.phone[data-phase="scanning"] .scan { transform: none; }
.phone[data-phase="camera"] .sheet, .phone[data-phase="scanning"] .sheet { transform: translateY(102%); }
.phone[data-phase="result"] .cam__photo, .phone[data-phase="answered"] .cam__photo { transform: translateY(-262px); }
.phone:not([data-phase="answered"]) .row--added { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.phone:not([data-phase="answered"]) .ask__option--picked { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* The moment of the scene: the answer is tapped and the meal is recounted (only while the scene plays). */
.hero[data-state="play"] .phone[data-phase="scanning"] .cam__flash { animation: flash 420ms var(--ease-exit); }
.hero[data-state="play"] .phone[data-phase="answered"] .ask__option--picked { animation: tap var(--dur-base) var(--ease-standard); }
.hero[data-state="play"] .phone[data-phase="answered"] .ask__ripple { animation: ripple 700ms var(--ease-enter); }
.hero[data-state="play"] .phone[data-phase="answered"] .sheet__delta { animation: delta 1800ms var(--ease-standard) 150ms both; }
.hero[data-state="play"] .phone[data-phase="answered"] .row--added { animation: added 1600ms var(--ease-standard); }
@keyframes scan-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.03); opacity: .6; } }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: .75; } 100% { opacity: 0; } }
@keyframes tap { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes delta { 0% { opacity: 0; transform: translateY(8px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes added { 0% { transform: translateY(10px); background: var(--brand-soft); } 30% { transform: none; background: var(--brand-soft); } 100% { background: var(--surface); } }

/* Scroll scene (landing.js sets data-state="play"; reduced motion and no JS keep the final frame above). */
.hero[data-state="play"] { height: 260vh; }
.hero[data-state="play"] .hero__stage { position: sticky; top: 0; display: block; height: 100vh; max-width: none; padding: 0; overflow: hidden; }
.hero[data-state="play"] .hero__title { position: absolute; left: 0; right: 0; top: 108px; padding: 0 16px; will-change: transform, opacity, filter; }
.hero[data-state="play"] .hero__phone { position: absolute; left: 50%; top: 0; --s: 1; margin-left: -207px; transform-origin: 50% 0; will-change: transform; }
.hero[data-state="play"] .hero__side { position: absolute; top: 50%; left: calc(50% + 48px); width: min(460px, 40vw); opacity: 0; will-change: transform, opacity; }
.hero[data-state="play"] .steps li:not(.is-on) b { color: var(--ink-subtle); }
.hero[data-state="play"] .steps li:not(.is-on) .steps__n { background: var(--surface-muted); color: var(--ink-muted); }

@media (max-width: 860px) {
  .hero[data-state="play"] .hero__title { top: 92px; }
  .hero[data-state="play"] .hero__title h1 { font-size: clamp(38px, 11vw, 60px); }
  .hero[data-state="play"] .hero__title > p { font-size: 16px; }
  .hero[data-state="play"] .hero__cta { margin-top: 20px; }
  .hero[data-state="play"] .hero__side { left: 16px; right: 16px; width: auto; text-align: center; }
  .hero[data-state="play"] .hero__side .steps, .hero[data-state="play"] .hero__side .stores { display: none; }
  .hero[data-state="play"] .hero__side-title { font-size: 26px; }
  .hero[data-state="play"] .hero__free { margin-top: 6px; }
}
@media (prefers-color-scheme: dark) {
  .phone { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 140px -20px color-mix(in srgb, var(--brand) 40%, transparent); }
  .hero__halo { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Lower sections (design pass 2): one type scale, dark slabs for «Honest estimate» and the final call, live screens. */
:root { interpolate-size: allow-keywords; --slab-bg: #2a2230; --slab-ink: #f6f2f8; --slab-muted: rgba(246, 242, 248, .72); --slab-line: rgba(255, 255, 255, .08); --glow-brand: rgba(140, 72, 186, .5); --glow-accent: rgba(245, 178, 30, .16); }
@media (prefers-color-scheme: dark) { :root { --slab-bg: #0e0a11; } }
.sec { max-width: 1240px; margin: 0 auto; padding: clamp(72px, 8vw, 120px) 16px; }
.sec__head { margin-bottom: clamp(40px, 5vw, 64px); }
.eyebrow { margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.sec__title { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.sec__title em, .final__title em { font-style: normal; color: var(--brand); }
.sec__lead { margin-top: 18px; max-width: 620px; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-muted); text-wrap: pretty; }
.center { text-align: center; }
.center .sec__lead { margin-inline: auto; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* Reveal on scroll: landing.js adds .rv to <html> (not with reduced motion), then .is-in to each block in view. */
[data-reveal] { transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); transition-delay: calc(var(--i, 0) * 90ms); }
.rv [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

.slab { position: relative; margin: 0 clamp(8px, 1.5vw, 24px); border-radius: 40px; overflow: clip; isolation: isolate; background: var(--slab-bg); color: var(--slab-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--slab-line); }
.slab::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 0, var(--glow-brand), transparent 70%), radial-gradient(30% 40% at 88% 100%, var(--glow-accent), transparent 70%), radial-gradient(26% 34% at 6% 70%, rgba(140, 72, 186, .22), transparent 70%); }
.slab .eyebrow, .slab .sec__title em, .slab .final__title em { color: var(--accent); }
.slab .sec__lead { color: var(--slab-muted); }

/* «Honest estimate»: the result screen with numbered pins, the notes beside it. */
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 56px; align-items: center; }
.anatomy__col { display: grid; gap: 48px; }
.anatomy__col--l { text-align: right; justify-items: end; }
.callout { max-width: 300px; }
.callout h3 { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.callout p { margin-top: 8px; color: var(--slab-muted); }
.pin { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 800; font-style: normal; box-shadow: 0 0 0 6px rgba(245, 178, 30, .18); }
.phone .pin { flex: none; width: 40px; height: 40px; margin-left: 12px; font-size: 19px; vertical-align: middle; box-shadow: 0 0 0 7px rgba(245, 178, 30, .22); transition: transform var(--dur-slow) var(--ease-enter), opacity var(--dur-slow); }
.phone .sheet__kcal .pin { align-self: center; transition-delay: 150ms; }
.phone .ask__q .pin { margin-left: auto; transition-delay: 450ms; }
.phone .chip + .pin { transition-delay: 300ms; }
.rv [data-honest]:not(.is-on) .phone .pin { transform: scale(.4); opacity: 0; }
.anatomy__phone { position: relative; --s: .8; width: calc(414px * var(--s)); height: calc(868px * var(--s)); }
.anatomy__phone > .phone { transform: scale(var(--s)); transform-origin: 0 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.anatomy__halo, .final__halo { position: absolute; left: 50%; top: 45%; z-index: -1; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; background: radial-gradient(closest-side, rgba(245, 178, 30, .22), transparent), radial-gradient(closest-side at 65% 60%, rgba(140, 72, 186, .38), transparent); }
.anatomy__note { display: flex; gap: 8px; align-items: flex-start; max-width: 300px; font-size: 13px; color: rgba(246, 242, 248, .6); }
.anatomy__note svg { flex: none; margin-top: 2px; }
[data-honest] .phone .sheet__body { transform: none; }
[data-honest] .phone .sheet__foot { display: none; }
[data-honest][data-play] .phone[data-phase="answered"] .ask__option--picked { animation: tap var(--dur-base) var(--ease-standard); }
[data-honest][data-play] .phone[data-phase="answered"] .ask__ripple { animation: ripple 700ms var(--ease-enter); }
[data-honest][data-play] .phone[data-phase="answered"] .sheet__delta { animation: delta 1800ms var(--ease-standard) 150ms both; }
[data-honest][data-play] .phone[data-phase="answered"] .row--added { animation: added 1600ms var(--ease-standard); }

/* FAQ: the question list on hairlines, the support address beside it. */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq__side { position: sticky; top: 120px; }
.faq__side > p:not(.eyebrow) { margin: 20px 0 24px; color: var(--ink-muted); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { position: relative; display: flex; align-items: center; min-height: 48px; padding: 26px 64px 26px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before { content: ""; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--surface-muted); transition: background-color var(--dur-base); }
.faq__list summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 40px; margin-top: -14px; text-align: center; font-size: 24px; font-weight: 500; line-height: 28px; transition: transform var(--dur-base) var(--ease-standard); }
.faq__list details[open] summary::before { background: var(--accent-soft); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { max-width: 640px; padding: 0 64px 28px 0; color: var(--ink-muted); }
.faq__list details a { color: var(--brand); }
.faq__list details::details-content { height: 0; overflow: clip; transition: height var(--dur-slow) var(--ease-standard), content-visibility var(--dur-slow) allow-discrete; }
.faq__list details[open]::details-content { height: auto; }

/* The final call: the hero promise, the stores, the diary rising from the edge. */
.slab--final { margin-top: 24px; }
.final { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; max-width: 1240px; min-height: 600px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px) 0; }
.final__text { align-self: center; padding-bottom: clamp(56px, 7vw, 96px); }
.final__title { font-size: clamp(40px, 5vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
.final__title em { display: block; }
.final .stores { margin-top: 32px; }
.final .store img { height: 56px; }
.final__install { margin-top: 32px; }
.qr--card { gap: 16px; max-width: 400px; margin-top: 24px; padding: 12px 18px 12px 12px; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--slab-line); font-size: 14px; color: var(--slab-muted); }
.qr--card img { width: 104px; height: 104px; padding: 6px; border: 0; border-radius: 14px; }
.final__phone { position: relative; align-self: end; justify-self: center; --s: .74; width: calc(414px * var(--s)); height: 580px; transition: transform 900ms var(--ease-enter), opacity 900ms; }
.final__phone > .phone { position: relative; transform: scale(var(--s)); transform-origin: 0 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.final__halo { top: 40%; width: 720px; height: 720px; margin: -360px 0 0 -360px; }
.final__phone .snack { transition: transform var(--dur-slow) var(--ease-enter) 500ms, opacity var(--dur-slow) 500ms; }
.rv .final__phone:not(.is-in) { transform: translateY(90px) rotate(-4deg); opacity: 0; }
.rv .final__phone:not(.is-in) .snack { transform: translateY(30px); opacity: 0; }

/* Without a photo: bento tiles — the Foods screen, local dishes in three languages, the free parts in numbers. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; overflow: clip; padding: 36px; border-radius: 32px; background: var(--surface); box-shadow: var(--shadow-1); }
.tile h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 750; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.tile__text p { margin-top: 10px; color: var(--ink-muted); }
.tile--search { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; min-height: 560px; padding-bottom: 0; background: radial-gradient(60% 60% at 80% 90%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--surface); }
.tile--search .tile__text { max-width: 270px; padding-bottom: 36px; }
.tile__phone { --s: .8; align-self: end; width: calc(414px * var(--s)); height: 524px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.tile__phone > .phone { transform: scale(var(--s)); transform-origin: 0 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); }
.tile--menu { grid-column: span 5; display: flex; flex-direction: column; gap: 24px; background: radial-gradient(70% 50% at 100% 0, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), var(--accent-soft); box-shadow: none; }
.tile--facts { grid-column: span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.fact { display: flex; align-items: center; gap: 20px; padding: 32px 36px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact b { flex: none; min-width: 64px; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--brand); font-variant-numeric: tabular-nums; }
.fact span { font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); }
.menu { display: grid; gap: 4px; margin-top: auto; }
.menu li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.menu b { min-width: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 750; letter-spacing: -.02em; transition: opacity 200ms; }
.menu i { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 25%, transparent); transform: translateY(-6px); }
.menu span { font-size: 17px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity 200ms; }
.menu.is-swap b, .menu.is-swap span { opacity: 0; }
.menu__per { margin-top: -12px; font-size: 13px; color: var(--ink-subtle); text-align: right; }
.foods { position: absolute; inset: 0; padding: 62px 16px 0; background: var(--bg); }
.phone[data-screen="foods"] .status { color: var(--ink); }
.foods__title { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.foods__search { display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 14px; padding: 0 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); color: var(--ink-muted); font-size: 17px; }
.foods__search span { color: var(--ink); font-weight: 500; }
.foods__search i { width: 2px; height: 22px; margin-left: -9px; background: var(--brand); animation: caret 1s steps(1) infinite; }
.foods__label { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.foods__group { overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.foods__row { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-enter); }
.foods__row + .foods__row { border-top: 1px solid var(--line); transition-delay: 90ms; }
.foods__row span { flex: 1; min-width: 0; }
.foods__row b, .foods__row small { display: block; }
.foods__row b { font-size: 16px; font-weight: 600; }
.foods__row small { font-size: 13px; color: var(--ink-muted); }
.foods__row em { font-style: normal; font-weight: 600; white-space: nowrap; }
.foods__add { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--on-brand-soft); font-style: normal; font-size: 20px; font-weight: 600; transition: background-color var(--dur-base), color var(--dur-base), transform var(--dur-base); }
.foods__add.is-done { background: var(--success); color: #fff; transform: scale(1.08); }
.foods__create { display: grid; place-items: center; height: 52px; margin-top: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-weight: 600; }
.snack--foods { top: 500px; bottom: auto; transition: transform var(--dur-slow) var(--ease-enter), opacity var(--dur-slow); }
.rv .snack--foods:not(.is-on) { transform: translateY(24px); opacity: 0; }
.rv [data-search]:not(.is-typed) .foods__row { opacity: 0; transform: translateY(10px); }

/* Pricing: Plus stands out, rows line up across the plans (subgrid), the pack is an add-on. */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg[hidden] { display: none; }
.seg button { min-width: 64px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: none; color: var(--ink-muted); font: 600 15px/1 Onest, system-ui, sans-serif; cursor: pointer; transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: 20px; max-width: 980px; margin: 0 auto; align-items: start; }
.plan { grid-row: span 6; display: grid; grid-template-rows: subgrid; padding: 36px; border-radius: 32px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; }
.plan__head h3 { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.plan__price b { font-size: clamp(44px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: 18px; font-weight: 500; color: var(--ink-muted); }
.plan__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
.plan__badge { padding: 4px 10px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.plan__badge[hidden] { display: none; }
.plan__ui { display: grid; gap: 12px; align-content: start; margin-top: 24px; padding: 16px; border-radius: 20px; background: var(--surface); }
.plan__cap { font-size: 14px; color: var(--ink-muted); }
.plan__cap b { color: var(--ink); }
.dots { display: flex; gap: 8px; }
.dots i { flex: 1; height: 10px; border-radius: 5px; background: var(--track); }
.dots i.on { background: var(--accent); }
.meter { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.meter i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--accent); }
.plan ul { display: grid; gap: 12px; align-content: start; margin: 28px 0 32px; }
.plan li { position: relative; padding-left: 30px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--success-soft); }
.plan li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px; border: 2px solid var(--success); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.plan__cta { align-self: end; width: 100%; }
.plan--plus { position: relative; transform: translateY(-12px); color: #fff; background: radial-gradient(70% 50% at 100% 0, rgba(245, 178, 30, .22), transparent 70%), linear-gradient(160deg, #5b2b76, #3a1a4c 70%); box-shadow: 0 40px 80px -36px rgba(74, 35, 96, .7); }
.plan--plus .plan__head h3, .plan--plus .plan__price small, .plan--plus .plan__sub, .plan--plus .plan__cap { color: rgba(255, 255, 255, .78); }
.plan--plus .plan__cap b { color: #fff; }
.plan--plus .plan__ui { background: rgba(255, 255, 255, .08); }
.plan--plus .seg { background: rgba(255, 255, 255, .1); }
.plan--plus .seg button { min-width: 0; color: rgba(255, 255, 255, .78); }
.plan--plus .seg button[aria-pressed="true"] { background: #fff; color: #3a1a4c; }
.plan--plus li::before { background: rgba(245, 178, 30, .2); }
.plan--plus li::after { border-color: var(--accent); }
.plan--plus :focus-visible { outline-color: #fff; }
.pack { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 18px 24px; border-radius: 24px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.pack__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--energy); font-size: 26px; font-weight: 700; }
.pack p { flex: 1; display: grid; }
.pack p b { font-size: 18px; }
.pack p span { font-size: 14px; color: var(--ink-muted); }
.pack strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.fine { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; max-width: 980px; margin: 32px auto 0; font-size: 13px; color: var(--ink-subtle); }
@media (prefers-color-scheme: dark) {
  .plan--plus { background: radial-gradient(70% 50% at 100% 0, rgba(245, 178, 30, .16), transparent 70%), linear-gradient(160deg, #3d2350, #1f1428 70%); box-shadow: inset 0 0 0 1.5px rgba(201, 162, 224, .5), 0 40px 80px -36px rgba(140, 72, 186, .6); }
}

/* Footer */
.foot { max-width: 1240px; margin: 0 auto; padding: 72px 16px 40px; }
.foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.foot__brand p { margin-top: 12px; max-width: 300px; color: var(--ink-muted); }
.foot__col { display: grid; align-content: start; }
.foot__col h2 { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.foot__col a { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-subtle); }
.foot__bottom p { max-width: 720px; }

/* Install bar (phones): the app's icon and name, hidden on the first screen and over the other install buttons. */
.bar { display: none; }

/* Below ~1160px the 7/12 search tile leaves its text under 220px beside the 331px phone (at 861px only ~50px): the two
   tiles split the row and the text goes above the phone. */
@media (max-width: 1160px) {
  .tile--search, .tile--menu { grid-column: span 6; }
  .tile--search { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tile--search .tile__text { max-width: none; padding-bottom: 0; }
  .tile__phone { --s: .72; justify-self: center; height: 440px; }
}

@media (max-width: 860px) {
  .slab { margin: 0 8px; border-radius: 28px; }
  .anatomy { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
  .anatomy__phone { order: -1; --s: .74; }
  .anatomy__col, .anatomy__col--l { gap: 28px; text-align: left; justify-items: start; }
  .callout { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; max-width: none; }
  .callout h3 { margin-top: 2px; font-size: 19px; }
  .callout p { grid-column: 2; }
  .anatomy__note { max-width: none; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile--search, .tile--menu, .tile--facts { grid-column: auto; }
  .tile { padding: 24px; border-radius: 28px; }
  .tile--search { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tile--search .tile__text { max-width: none; padding-bottom: 0; }
  .tile__phone { --s: .72; justify-self: center; height: 440px; }
  .tile--facts { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .fact { padding: 22px 24px; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
  .fact b { min-width: 52px; font-size: 48px; }
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .plan { grid-row: auto; grid-template-rows: none; padding: 24px; border-radius: 28px; }
  .plan--plus { order: -1; transform: none; }
  .plan ul { margin: 22px 0 24px; }
  .pack { margin-top: 0; padding: 16px; }
  .fine { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq__side { position: static; }
  .faq__list summary { padding: 20px 56px 20px 0; }
  .final { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 48px 20px 0; text-align: center; }
  .final__text { padding-bottom: 0; }
  .final .stores { justify-content: center; }
  .final .store img { height: 48px; }
  .final__phone { --s: .62; height: 380px; }
  .foot__in { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .bar {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; align-items: center; gap: 12px;
    padding: 10px; border-radius: 22px; background: var(--chrome); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    transition: transform var(--dur-slow) var(--ease-enter), opacity var(--dur-slow);
  }
  .bar img { flex: none; width: 44px; height: 44px; border-radius: 12px; }
  .bar p { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
  .bar b { font-size: 16px; }
  .bar span { overflow: hidden; font-size: 13px; color: var(--ink-muted); white-space: nowrap; text-overflow: ellipsis; }
  .bar .btn { padding: 0 18px; }
  .bar[data-hidden] { transform: translateY(140%) scale(.96); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .final__phone, .final__phone .snack, .phone .pin { transition: none; }
}