/* eatnlift.com: the store look (warm paper, dark type, the black phone),
   quiet, with the macro colours as the only accent. Light and dark follow
   the system. */

/* Apple devices draw the page in SF Pro, the app's own font, and never
   download these. Everywhere else it's Inter (its Display cut on big
   headlines), with Noto Sans for Arabic and Devanagari: one file per
   alphabet, each fetched only when a page uses it (tools/fonts.sh). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin.12c4b785.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.edf94266.woff2") format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0218-021B, U+1E9E, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.3be8e64d.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-greek.cf67399e.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/noto-arabic.b71466a0.woff2") format("woff2"); unicode-range: U+0600-06FF, U+200C-200F; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/noto-devanagari.2180c560.woff2") format("woff2"); unicode-range: U+0900-097F, U+200C-200D, U+20B9, U+25CC; }

:root {
  --bg: #f6f4ef;
  --bg-deep: #ebe7df;
  --surface: #fffdf9;
  --ink: #141414;
  --muted: #5d5850;
  --faint: #8d877d;
  --line: rgba(20, 20, 20, 0.09);
  --carbs: #3fc6c9;
  --protein: #f0c24b;
  --fat: #ee7fa4;
  --band: #141414;
  --band-ink: #f6f4ef;
  --radius: 28px;
  --wide: 1120px;
  --measure: 68ch;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0e;
    --bg-deep: #050505;
    --surface: #18181a;
    --ink: #f3f1ec;
    --muted: #a7a197;
    --faint: #77726a;
    --line: rgba(255, 255, 255, 0.1);
    --band: #1b1b1d;
    --band-ink: #f3f1ec;
  }
}

* { box-sizing: border-box; }
/* The carousel's side phones and the full-width photo rows reach past the
   screen. html takes the viewport's overflow, so body clips as an element at
   the screen's edge and the page never gets wider than the screen (body
   alone hands its overflow to the viewport, which iOS Safari still pans). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans Arabic", "Noto Sans Devanagari", "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* The logo's <symbol>, used where the logo shows. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }

.wrap { width: min(var(--wide), 100% - 32px); margin-inline: auto; }

/* The macro bar: carbs, protein, fat. */
.macros { display: flex; gap: 4px; height: 4px; width: 72px; }
.macros i { flex: 1; border-radius: 4px; }
.macros i:nth-child(1) { background: var(--carbs); flex: 1.3; }
.macros i:nth-child(2) { background: var(--protein); }
.macros i:nth-child(3) { background: var(--fat); flex: 0.7; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.01em; }
.brand .mark { width: 22px; height: 24px; flex: none; fill: currentColor; }
.top .actions { display: flex; align-items: center; gap: 18px; }
.top .links { display: flex; gap: 22px; font-size: 15px; color: var(--muted); }
.top .links a { text-decoration: none; }
.top .links a:hover { color: var(--ink); }

/* The language menu: the flag, and the name where there's room. */
.flag { display: inline-block; width: 20px; height: 20px; flex: none; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line); }
.flag svg { display: block; width: 100%; height: 100%; }
.language { position: relative; }
.language summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; list-style: none;
  font-size: 15px; color: var(--muted); cursor: pointer; user-select: none; }
.language summary::-webkit-details-marker { display: none; }
.language summary:hover, .language[open] summary { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.language .chevron { width: 12px; height: 12px; transition: transform 0.2s ease; }
.language[open] .chevron { transform: rotate(180deg); }
.language ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20; width: min(360px, calc(100vw - 32px));
  margin: 0; padding: 8px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 44px rgba(20, 20, 20, 0.16); }
.language li a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 15px; text-decoration: none; }
.language li a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.language li a[aria-current] { font-weight: 650; }

/* Type */
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.04; margin: 0; font-weight: 750; text-wrap: balance; overflow-wrap: break-word; }
/* No paragraph ends on one short word. */
p, li, summary { text-wrap: pretty; }
h1 { font-size: clamp(44px, 7.4vw, 92px); }
h2 { font-size: clamp(34px, 4.6vw, 58px); }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--muted); line-height: 1.45; max-width: 34ch; }
.small { font-size: 14px; color: var(--faint); }

/* Store badges */
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badges img { height: 48px; width: auto; }

/* Phones */
.phone { width: 300px; filter: drop-shadow(0 30px 40px rgba(20, 20, 20, 0.18)); }

/* ── Landing ──────────────────────────────────────────────
   One list of screens. With the script it's a carousel at every width;
   without it, stacked sections on a phone and a swipeable track on a wide
   screen. */

.intro { padding-top: 56px; }
.pitch { text-align: center; }
.pitch .macros { margin: 0 auto 28px; }
.pitch h1 { max-width: 11ch; margin-inline: auto; }
.pitch .lead { margin: 22px auto 30px; }
.pitch .badges { justify-content: center; }
.pitch .small { margin: 14px 0 0; }

.track { list-style: none; margin: 0; padding: 0; }
.slide { padding: 88px 0; border-top: 1px solid var(--line); display: grid; gap: 40px; justify-items: center; text-align: center; }
.slide:first-child { border-top: 0; padding-top: 56px; }
.slide h2 { font-size: clamp(34px, 9vw, 46px); max-width: 13ch; margin-inline: auto; }
.slide p { color: var(--muted); font-size: 18px; max-width: 32ch; margin: 16px auto 0; }

.screens { --shot: min(250px, 62vw); }
.shot { position: relative; width: min(300px, 78vw); }
.shot picture { display: block; }
.shot .phone { width: 100%; }

/* The weight screen's progress photos over the phone's top corners and the
   Quick Add sentence over its status bar, as in the store screenshots. */
.progress { position: absolute; top: -2%; width: 30%; margin: 0; }
.progress.before { left: -9%; }
.progress.after { right: -9%; }
.progress picture { display: block; }
.progress img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 30%;
  border: 3px solid rgba(255, 255, 255, 0.92); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.progress span { position: absolute; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: #1c1c1e; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.progress .title { top: -10px; }
.progress .weight { bottom: -10px; }
.said { position: absolute; left: 50%; top: 2.6%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 9px 14px 9px 10px; border-radius: 999px; background: #1c1c1e; color: #fff; font-size: clamp(10.5px, 3vw, 13.5px); font-weight: 600;
  white-space: nowrap; box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.55), 0 14px 30px rgba(0, 0, 0, 0.3); }
.said svg { width: 16px; height: 16px; fill: #fff; flex: none; }

.controls, .pause { display: none; }

/* With script (the page marks it before it's drawn), the screens line up: the one in focus in the middle,
   the ones before and after it smaller and faded at its sides, tucked
   behind it. Moving on slides the whole row, so a side screen grows into
   focus. The current dot stretches into a bar that fills while its screen
   shows; when it's full, the next one comes in, until the pause button or
   a move by hand stops it. */
.js .screens { margin-top: 48px; }
.js .screens .track { display: grid; justify-items: center; padding-top: 28px; --step: calc(var(--shot) * 0.54);
  touch-action: pan-y; user-select: none; }
.js .screens img { -webkit-user-drag: none; }
/* Drawn in place at first, moving only after that. */
.js .screens.still * { transition: none !important; }
:root[dir="rtl"] .js .screens .track { --step: calc(var(--shot) * -0.54); }
.js .screens .slide, .js .screens .slide:first-child { grid-area: 1 / 1; width: 100%; padding: 0; border: 0; gap: 26px; pointer-events: none;
  --pos: 2; --scale: 0.64; --show: 0; --veil: 1; z-index: 1; }
.js .screens .slide[data-pos="-2"] { --pos: -2; }
.js .screens .slide[data-pos="-1"], .js .screens .slide[data-pos="1"] { --scale: 0.8; --show: 1; --veil: 0.6; z-index: 2; }
.js .screens .slide[data-pos="-1"] { --pos: -1; }
.js .screens .slide[data-pos="1"] { --pos: 1; }
.js .screens .slide[data-pos="0"] { --pos: 0; --scale: 1; --show: 1; --veil: 0; z-index: 3; }
/* Each slide spans the whole track, so only the phones take the pointer:
   the one in focus would otherwise cover its neighbours. */
.js .screens .slide:is([data-pos="-1"], [data-pos="0"], [data-pos="1"]) .shot { pointer-events: auto; }
.js .screens .slide:is([data-pos="-1"], [data-pos="1"]) .shot { cursor: pointer; }
.js .screens .slide .shot { order: -1; width: var(--shot); opacity: var(--show);
  transform: translateX(calc(var(--pos) * var(--step))) scale(var(--scale));
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.5s ease; }
/* A side screen fades under a veil of the page's colour rather than going
   see-through, so screens passing each other never show through. The veil
   is cut to the phone's outline, buttons and all (phones/mask.png), so
   nothing around a phone ever shows it. */
.js .screens .slide .shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--bg); opacity: var(--veil); transition: opacity 0.7s ease;
  -webkit-mask: url("/assets/phones/mask.0b841b8a.png") center / 100% 100% no-repeat; mask: url("/assets/phones/mask.0b841b8a.png") center / 100% 100% no-repeat; }
.js .screens .slide:is([data-pos="-1"], [data-pos="1"]):has(.shot:hover) { --veil: 0.4; }
/* The photos and the sentence over a screen belong to the one in focus. */
.js .screens .slide .progress, .js .screens .slide .said { opacity: 0; transition: opacity 0.3s ease; }
.js .screens .slide[data-pos="0"] .progress, .js .screens .slide[data-pos="0"] .said { opacity: 1; transition: opacity 0.5s ease 0.45s; }
.js .screens .slide .copy { display: block; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.6s ease; }
.js .screens .slide[data-pos="0"] .copy { opacity: 1; transform: none; transition-delay: 0.3s; }
.js .screens .slide h2 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; max-width: 18ch; }
.js .screens .slide p { font-size: 16px; margin-top: 10px; }

.js .screens .controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.dots { display: flex; justify-content: center; align-items: center; gap: 8px; }
.dots a { position: relative; overflow: hidden; width: 8px; height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width 0.4s ease, background 0.4s ease; }
.dots a[aria-current] { width: 30px; }
.dots a[aria-current]::after { content: ""; position: absolute; inset: 0; background: var(--ink);
  transform-origin: left; animation: fill var(--interval, 4s) linear forwards; }
:root[dir="rtl"] .dots a[aria-current]::after { transform-origin: right; }
.js .screens.stopped .dots a[aria-current]::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .screens .pause { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--faint); cursor: pointer; }
.js .screens .pause:hover { color: var(--ink); }
.pause svg { width: 14px; height: 14px; }
.pause .play, .stopped .pause .hold { display: none; }
.stopped .pause .play { display: block; }

/* The catalog's own photos drifting by, the full width of the window, the
   two rows of food in opposite directions. Each row holds its photos twice,
   so moving it by half starts it over seamlessly. */
.library { padding-top: 88px; }
.library .head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.library .head p { max-width: 44ch; }
.library .head p { color: var(--muted); font-size: 18px; margin: 16px auto 0; }
.marquee { margin-inline: calc(50% - 50vw); overflow: hidden; display: grid; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .row { display: flex; width: max-content; animation: drift 90s linear infinite; }
.marquee .row.reverse { animation-direction: reverse; animation-duration: 110s; }
.marquee picture { flex: none; margin-inline-end: 16px; }
.marquee img { width: 120px; height: 120px; border-radius: 30px; }
.lifts .marquee img { width: 160px; height: 160px; border-radius: 36px; }
@keyframes drift { to { transform: translateX(-50%); } }
:root[dir="rtl"] .marquee .row { animation-name: drift-rtl; }
@keyframes drift-rtl { to { transform: translateX(50%); } }

/* Free and Premium side by side, Premium the dark one. */
.tiers { padding-top: 104px; }
.tiers h2 { text-align: center; max-width: 16ch; margin: 0 auto 40px; }
.tiers .grid { display: grid; gap: 16px; max-width: 920px; margin: 0 auto; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 32px 28px; }
.tier h3 { font-size: 30px; }
.tier .sub { color: var(--muted); margin: 6px 0 24px; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tier li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.4; }
.tier li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; background: var(--carbs);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.7 7.2-5.5 6a1 1 0 0 1-1.4.1l-2.6-2.4 1.3-1.5 1.9 1.7 4.8-5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.7 7.2-5.5 6a1 1 0 0 1-1.4.1l-2.6-2.4 1.3-1.5 1.9 1.7 4.8-5.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tier.premium { background: var(--band); color: var(--band-ink); border-color: transparent; }
.tier.premium .sub { color: color-mix(in srgb, var(--band-ink) 62%, transparent); }
@media (prefers-color-scheme: dark) {
  .tier.premium { background: #232326; border-color: color-mix(in srgb, var(--protein) 32%, transparent); }
}
.tier.premium li::before { background: var(--protein); }

/* What you get without an account or an ad: a dark band on a phone, cards
   on a wide screen. */
.promises { margin-top: 88px; background: var(--band); color: var(--band-ink); border-radius: var(--radius); padding: 48px 28px; }
.promises h2 { color: var(--band-ink); margin-bottom: 32px; }
.promises ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.promises li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; font-size: 18px; line-height: 1.4; }
.promises li b { display: block; }
.promises li span { color: color-mix(in srgb, var(--band-ink) 62%, transparent); }
.promises svg { width: 24px; height: 24px; margin-top: 2px; }

/* Questions, each opening in place. */
.faq { padding-top: 104px; max-width: 760px; margin-inline: auto; }
.faq h2 { text-align: center; margin-bottom: 32px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; list-style: none;
  font-size: 19px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--faint);
  -webkit-mask: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  mask: linear-gradient(#000 0 0) center / 100% 2px no-repeat, linear-gradient(#000 0 0) center / 2px 100% no-repeat;
  transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; color: var(--muted); max-width: 62ch; }
.faq details a { color: var(--ink); text-underline-offset: 3px; }
.faq details, .faq section { scroll-margin-top: 84px; }
.faq .more { text-align: center; margin: 28px 0 0; }
.faq .more a { font-weight: 600; text-decoration: none; }
.faq .more a::after { content: " →"; }
:root[dir="rtl"] .faq .more a::after { content: " ←"; }

/* The questions page: the topics up top, then each topic's questions. */
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.topics a { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; color: var(--muted); text-decoration: none; }
.topics a:hover { color: var(--ink); }
.faq-head { max-width: 760px; margin-inline: auto; text-align: center; }
.faq-head .macros { margin-inline: auto; }
.faq-head .topics { justify-content: center; }
.faq-page { padding: 40px 0 96px; }
.faq-page section + section { margin-top: 48px; }
.faq-page h2 { text-align: start; font-size: 28px; margin-bottom: 14px; }

.cta { text-align: center; padding: 120px 0 112px; }
.cta h2 { max-width: 12ch; margin: 0 auto 28px; }
.cta .badges { justify-content: center; }

@media (min-width: 960px) {
  .intro { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 40px; align-items: center; padding-top: 40px; min-height: calc(100vh - 60px); }
  .pitch { text-align: left; }
  .pitch .macros, .pitch h1, .pitch .lead { margin-inline: 0; }
  .pitch h1 { font-size: clamp(48px, 4.5vw, 64px); max-width: 16ch; }
  .pitch .badges { justify-content: flex-start; }

  /* Without the script: a track to swipe, its dots jumping to a screen. */
  .screens { position: relative; --shot: 280px; }
  .track { padding-top: 28px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .track::-webkit-scrollbar { display: none; }
  .slide, .slide:first-child { flex: 0 0 100%; scroll-snap-align: center; padding: 8px 0 0; border: 0; gap: 26px; }
  .slide .shot { order: -1; width: 280px; }
  .slide h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; max-width: none; }
  .slide p { display: none; }
  .controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
  .js .screens { margin-top: 0; }
  .js .screens .track { overflow: visible; }
  .js .screens .slide h2 { font-size: 24px; max-width: none; }

  .library { padding-top: 120px; }
  .marquee img { width: 150px; height: 150px; border-radius: 36px; }
  .lifts .marquee img { width: 200px; height: 200px; border-radius: 44px; }
  .tiers { padding-top: 136px; }
  .tiers .grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .tier { padding: 40px; }
  .promises { margin-top: 136px; padding: 72px 64px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
  .promises h2 { margin: 0; }
  .faq { padding-top: 136px; }
}

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; color: var(--muted); }
.foot .wrap { display: grid; gap: 22px; }
.foot .row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.langs { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--faint); }
.langs a[aria-current] { color: var(--ink); font-weight: 600; }

/* ── Page not found ───────────────────────────────────────── */
.missing { min-height: 60vh; padding: 96px 0; text-align: center; }
.missing .macros { margin: 0 auto 28px; }
.missing .lead { margin: 20px auto 32px; }
.button { display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--ink); color: var(--bg);
  text-decoration: none; font-weight: 600; }

/* ── Long pages ─────────────────────────────────────────────
   Privacy and terms: the short version first, the contents beside the text
   on a wide screen (open) and above it on a phone (folded), numbered
   sections. */
.doc-head { padding: 64px 0 36px; }
.doc-head .macros { margin-bottom: 24px; }
.doc-head h1 { font-size: clamp(40px, 5.4vw, 64px); }
/* One long word ("Datenschutzerklärung", "конфиденциальности") fills a phone. */
@media (max-width: 480px) { .doc-head h1 { font-size: 8.6vw; } }
.doc-head p { color: var(--faint); margin: 14px 0 0; font-size: 15px; }
/* A doc's versions, like the language menu; it needs its script. */
.versions { position: relative; display: none; margin: 12px 0 0; margin-inline-start: -10px; }
.js .versions { display: inline-block; }
.versions summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; list-style: none;
  font-size: 15px; color: var(--muted); cursor: pointer; user-select: none; }
.versions summary::-webkit-details-marker { display: none; }
.versions summary:hover, .versions[open] summary { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.versions .chevron { width: 12px; height: 12px; transition: transform 0.2s ease; }
.versions[open] .chevron { transform: rotate(180deg); }
.versions ul { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 20; min-width: max(180px, 100%);
  width: max-content; max-width: calc(100vw - 32px);
  margin: 0; padding: 8px; list-style: none; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 44px rgba(20, 20, 20, 0.16); }
.versions li a { display: block; padding: 9px 12px; border-radius: 12px; font-size: 15px; text-decoration: none; white-space: nowrap; }
.versions li a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.versions li a[aria-current] { font-weight: 650; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gist" "toc" "prose"; padding-bottom: 96px; }
.gist { grid-area: gist; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px 26px 24px; margin-bottom: 28px; }
.gist h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px; }
.gist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gist li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.gist li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 9px; background: var(--carbs); }
.gist li:nth-child(3n+2)::before { background: var(--protein); }
.gist li:nth-child(3n)::before { background: var(--fat); }
.toc { grid-area: toc; font-size: 15px; border: 1px solid var(--line); border-radius: 20px; padding: 0 20px; margin-bottom: 8px; }
.toc summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.toc[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.toc ol { list-style: none; padding: 0 0 18px; margin: 0; display: grid; gap: 9px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { text-decoration: none; color: var(--muted); display: grid; grid-template-columns: 26px 1fr; }
.toc a::before { content: counter(t); color: var(--faint); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.prose { grid-area: prose; counter-reset: section; min-width: 0; }
.prose h2 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.2; margin: 52px 0 14px; scroll-margin-top: 84px;
  counter-increment: section; display: grid; grid-template-columns: 36px 1fr; }
.prose h2::before { content: counter(section); color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 650; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.prose ul { padding-inline-start: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--faint); }
.prose a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 18px 0; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: start; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

.prose.plain { counter-reset: none; }
.prose.plain h2 { display: block; }
.prose.plain h2::before { content: none; }
.doc.single { max-width: 68ch; }

/* ── Support ─────────────────────────────────────────────── */
.support { padding-bottom: 96px; }
.support-head { max-width: 760px; margin-inline: auto; text-align: center; }
.support-head .macros { margin-inline: auto; }
.support-head .lead { margin: 20px auto 0; max-width: 44ch; }
.support section { max-width: 920px; margin: 56px auto 0; }
.support h2 { font-size: 28px; text-align: center; margin-bottom: 22px; }
.quick ul { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.quick li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.quick li a::after { content: "→"; color: var(--faint); }
:root[dir="rtl"] .quick li a::after { content: "←"; }
.quick li a:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.support .more { text-align: center; margin: 22px 0 0; }
.support .more a { font-weight: 600; text-decoration: none; }
.cards { display: grid; gap: 14px; }
/* Each card as tall as its row, its address at the bottom. */
.card { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; }
.card b { font-size: 19px; letter-spacing: -0.01em; }
.card span { color: var(--muted); }
.card em { font-style: normal; font-weight: 600; margin-top: auto; padding-top: 10px; }
.card:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.emergency { text-align: center; margin-top: 28px; }

@media (min-width: 861px) {
  .doc { grid-template-columns: 240px minmax(0, 68ch); grid-template-areas: "toc gist" "toc prose"; column-gap: 64px; }
  .toc { position: sticky; top: 88px; align-self: start; border: 0; padding: 0; margin: 0; }
  .toc summary { pointer-events: none; padding: 0 0 12px; }
  .toc summary::after { display: none; }
  .gist { margin-bottom: 20px; }
  .doc.single { grid-template-columns: minmax(0, 68ch); grid-template-areas: "gist" "prose"; margin-inline: auto; }
  .doc-head:has(+ .doc.single) { max-width: 68ch; margin-inline: auto; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .top, .foot, .toc { display: none; }
  .doc { display: block; }
  body { background: #fff; color: #000; }
}

@media (max-width: 860px) {
  .top .links, .language .name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee .row { animation: none; }
  .js .screens .slide .shot, .js .screens .slide .copy { transition: opacity 0.3s ease; }
  .js .screens .dots a[aria-current]::after { animation: none; transform: scaleX(1); }
}