/*
 * Dash Eat — dash-eat.app
 *
 * Tokens from apps/eat/src/theme.ts (« Crème chaude » + « Neutre + liseré »).
 * SAFFRON IS A FILL, NEVER A TEXT COLOUR ON LIGHT, AND NOTHING WHITE SITS ON
 * IT: espresso #2B1A0E on saffron is 7.2:1, white is 2.45:1. Saffron as words
 * is --accent-text (#A34E0B on cream, #F7A65A on charcoal).
 *
 * Unlike Move's dark-only site, Eat follows the system theme; the header
 * button overrides it (html[data-theme]).
 */
:root {
  color-scheme: light;
  --bg: #FBF6EF;
  --surface: #FFFDFA;
  --surface-2: #F7EEE3;
  --surface-3: #EFE3D3;
  --line: #EADCC9;
  --line-strong: #A08C78;
  --line-card: #EADCC9;
  --scan-bg: #fff;
  --plinth: var(--surface-2);
  --shot-filter: none;
  --text: #1E1712;
  --soft: #5E5246;
  --faint: #6B5E51;
  --accent: #F28C28;
  --accent-text: #A34E0B;
  --on-accent: #2B1A0E;
  --wash: #FFEBD6;
  --wash-2: #FFF4E8;
  --good: #17795D;
  --good-wash: #E1F4EC;
  --prot: #3E6FE0;
  --frame: #2B1A0E;
  --shadow: 0 1px 2px rgba(70, 45, 20, .06), 0 10px 30px rgba(70, 45, 20, .09);
  --shadow-lg: 0 2px 6px rgba(70, 45, 20, .08), 0 30px 60px -12px rgba(70, 45, 20, .22);
  --hero-glow: radial-gradient(60% 60% at 75% 30%, #FFE0BD 0%, rgba(255, 224, 189, 0) 70%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --radius-sm: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15120F;
    --surface: #1F1A15;
    --surface-2: #2A231C;
    --surface-3: #352C23;
    --line: #352C23;
    --line-strong: #7A6B5C;
    --line-card: #3A3027;
    --scan-bg: #EFE6DA;
    --plinth: #221C17;
    --shot-filter: none;
    --text: #F7F1E8;
    --soft: #BFB1A1;
    --faint: #A69686;
    --accent-text: #F7A65A;
    --wash: #33210F;
    --wash-2: #241A12;
    --good: #3FBF9A;
    --good-wash: #10261F;
    --prot: #5B8CFF;
    --frame: #000;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -12px rgba(0, 0, 0, .6);
    --hero-glow: radial-gradient(60% 60% at 75% 30%, #3A2410 0%, rgba(58, 36, 16, 0) 70%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15120F;
  --surface: #1F1A15;
  --surface-2: #2A231C;
  --surface-3: #352C23;
  --line: #352C23;
  --line-strong: #7A6B5C;
  --line-card: #3A3027;
  --scan-bg: #EFE6DA;
  --plinth: #221C17;
  --shot-filter: none;
  --text: #F7F1E8;
  --soft: #BFB1A1;
  --faint: #A69686;
  --accent-text: #F7A65A;
  --wash: #33210F;
  --wash-2: #241A12;
  --good: #3FBF9A;
  --good-wash: #10261F;
  --prot: #5B8CFF;
  --frame: #000;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -12px rgba(0, 0, 0, .6);
  --hero-glow: radial-gradient(60% 60% at 75% 30%, #3A2410 0%, rgba(58, 36, 16, 0) 70%);
}
:lang(ar) {
  --font: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
:lang(ar) body, body:lang(ar) { font-size: 18px; line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ico--dir { transform: scaleX(-1); }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 600px) { .wrap { padding-inline: 24px; } }
.wrap--narrow { max-width: 1160px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── header ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.top__in { display: flex; align-items: center; gap: 12px; min-height: 60px; }
@media (min-width: 860px) { .top__in { min-height: 64px; gap: 16px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font: 800 19px/1 var(--font-display); letter-spacing: -.02em; direction: ltr; }
.brand img { border-radius: 9px; }
.nav { display: none; gap: 4px; margin-inline-start: 12px; }
.nav a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: 15px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.tools__wide { display: none; align-items: center; gap: 8px; }
@media (min-width: 860px) {
  .nav, .tools__wide { display: flex; }
  .menu { display: none; }
}
.langs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 2px; }
.langs a { color: var(--soft); text-decoration: none; font: 700 12px/1 var(--font); letter-spacing: .04em; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.langs a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.theme .ico { width: 19px; height: 19px; }
.theme .ico--sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .ico--sun { display: block; } :root:not([data-theme="light"]) .theme .ico--moon { display: none; } }
:root[data-theme="dark"] .theme .ico--sun { display: block; }
:root[data-theme="dark"] .theme .ico--moon { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; border-radius: 999px; padding: 14px 22px; min-height: 44px; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(242, 140, 40, .6); }
.btn--sm { padding: 0 16px; font-size: 14px; white-space: nowrap; }
/* The phone menu: a <details>, so it opens without JavaScript. */
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .ico { width: 20px; height: 20px; }
.menu[open] summary { background: var(--surface-2); }
.menu__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 8px; }
.menu__nav { display: grid; }
.menu__nav a { color: var(--text); text-decoration: none; font-weight: 650; padding: 0 14px; min-height: 48px; display: flex; align-items: center; border-radius: 12px; }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { background: var(--surface-2); }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 4px; border-top: 1px solid var(--line); }

/* ── type ───────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font: 700 13px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
:lang(ar) .eyebrow { letter-spacing: 0; font-size: 15px; text-transform: none; }
.eyebrow--free { color: var(--good); }
.h2 { font: 800 clamp(1.875rem, 1.3rem + 2vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -.03em; max-width: 24ch; text-wrap: balance; }
.h3 { font: 750 1.25rem/1.25 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
:lang(ar) .h2, :lang(ar) .h3, :lang(ar) .display { letter-spacing: 0; line-height: 1.3; }
.lede { font-size: clamp(1.06rem, 1rem + .35vw, 1.19rem); color: var(--soft); max-width: 54ch; margin-top: 16px; }
.sect__lede { color: var(--soft); max-width: 62ch; margin-top: 16px; font-size: 1.06rem; }
.fine { color: var(--faint); font-size: 14px; margin-top: 16px; }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--soft); margin-top: 24px; max-width: 70ch; }
.note .ico { margin-top: .2em; color: var(--accent-text); }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }
.more { margin-top: 16px; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 22px 0 40px; background: var(--hero-glow); }
.hero__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) {
  .hero { padding: 56px 0 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; }
}
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--font); color: var(--good); background: var(--good-wash); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); padding: 8px 12px; border-radius: 999px; margin-bottom: 14px; }
@media (min-width: 960px) { .kicker { font-size: 14px; padding: 8px 14px; margin-bottom: 20px; } }
@media (max-width: 379px) { .kicker { font-size: 12px; padding: 7px 10px; gap: 6px; } }
.kicker .ico { width: 16px; height: 16px; }
.display { display: block; font: 850 clamp(2.6rem, 1.6rem + 3.6vw, 4.25rem)/1.02 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.display--page { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); max-width: 18ch; }
.display mark { background: none; color: var(--accent-text); position: relative; white-space: nowrap; }
.display mark::after {
  content: ""; position: absolute; inset-inline: -.04em; bottom: .02em; height: .14em; border-radius: .1em;
  background: var(--accent); transform-origin: left center; z-index: -1; opacity: .9;
}
[dir="rtl"] .display mark::after { transform-origin: right center; }
.display { position: relative; z-index: 0; isolation: isolate; }
.hero .lede { margin-top: 14px; }
@media (min-width: 960px) { .hero .lede { margin-top: 18px; } }

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
@media (min-width: 960px) { .badges { margin-top: 28px; } }
.badge { display: inline-block; border-radius: 12px; transition: transform .2s ease; }
.badge:hover { transform: translateY(-2px); }
.badge img { height: 52px; width: auto; }
/* Not on Google Play yet: a quiet line, never something that looks like a button. */
.soon { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--faint); font-weight: 600; font-size: 14px; }
.soon .ico { width: 16px; height: 16px; }
.get .badges { justify-content: center; }

.split { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; font-size: 15px; color: var(--soft); line-height: 1.45; max-width: 54ch; }
.split li { display: flex; gap: 10px; align-items: flex-start; }
.split .tag { margin-top: 1px; flex: none; text-transform: uppercase; }
.tag--free { background: var(--good-wash); color: var(--good); }

/* the plate: the photo first, the result floating over its corner */
.demo { margin: 0; position: relative; width: 100%; max-width: 560px; justify-self: center; }
@media (min-width: 960px) { .demo { max-width: 540px; justify-self: end; padding-bottom: 44px; } }
.demo__photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-3); box-shadow: var(--shadow-lg);
  /* the boxes are placed on the 4:3 photo; a 16:10 crop at 60% moves and stretches them */
  --ky: 1.2; --oy: -12%; }
.demo__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (min-width: 960px) { .demo__photo { aspect-ratio: 4 / 3; border-radius: 28px; --ky: 1; --oy: 0%; } }
.demo__scan { position: absolute; inset-inline: 0; top: 0; height: 22%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 140, 40, 0) 0%, rgba(242, 140, 40, .28) 75%, rgba(255, 196, 120, .95) 98%, rgba(242, 140, 40, 0) 100%); }
.demo__status { position: absolute; inset-inline-start: 12px; top: 12px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 13px; font-weight: 650; padding: 6px 10px; border-radius: 999px; opacity: 0; }
.boxes { position: absolute; inset: 0; }
.box { position: absolute; left: var(--x); top: calc(var(--y) * var(--ky) + var(--oy)); width: var(--w); height: calc(var(--h) * var(--ky)); border: 2px solid #F28C28; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.box b { position: absolute; top: -11px; left: 6px; background: #F28C28; color: #2B1A0E; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 6px; white-space: nowrap; font-weight: 800; }
/* the mango's label sits under its box, clear of the carrot's */
.box:nth-child(4) b { top: auto; bottom: -11px; }
.demo__pro { position: absolute; top: 12px; inset-inline-end: 12px; }
.demo__pill { position: absolute; inset-inline-start: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(21, 18, 15, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); color: #F7F1E8; font-size: 13px; font-weight: 650; }
.demo__pill b { font: 800 17px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.demo__pill .tag--ai { background: #33210F; color: #F7A65A; }
.demo__sheet { display: none; }
@media (min-width: 960px) {
  .demo__pill { display: none; }
  .demo__sheet { display: block; position: absolute; inset-inline-start: -44px; bottom: 0; width: 272px; background: var(--surface); border: 1px solid var(--line-card); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 14px 16px 16px; }
}
.tag { display: inline-flex; align-items: center; gap: 5px; font: 800 11px/1 var(--font); letter-spacing: .06em; padding: 5px 8px; border-radius: 7px; vertical-align: middle; }
.tag--pro { background: var(--accent); color: var(--on-accent); }
.tag--ai { background: var(--wash); color: var(--accent-text); letter-spacing: .02em; font-size: 12px; }
.tag--ai .ico { width: 13px; height: 13px; }
.demo__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); margin-bottom: 4px; }
.demo__rows { list-style: none; margin: 0; padding: 0; }
.demo__rows li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.row__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.row__txt b { font-size: 15px; font-weight: 650; }
.row__txt small { font-size: 13px; color: var(--faint); }
.row__kcal { font: 750 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.demo__total { display: flex; flex-direction: column; margin: 10px 0 0; }
.demo__total span { font: 800 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.demo__total small { color: var(--faint); font-size: 13px; }
.demo figcaption { font-size: 13px; color: var(--faint); margin-top: 10px; text-align: center; }
@media (min-width: 960px) { .demo figcaption { position: absolute; inset-inline-end: 0; bottom: 8px; width: calc(100% - 252px); text-align: end; margin: 0; } }

/* ── free vs pro ────────────────────────────────────────────────────── */
.cmp { margin-top: 32px; border: 1px solid var(--line-card); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.cmp table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.cmp th, .cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: start; font-weight: 400; }
.cmp tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp thead th, .cmp thead td { background: var(--surface-2); font: 800 15px/1.2 var(--font); }
.cmp thead small { display: block; font-weight: 600; color: var(--faint); font-size: 13px; margin-top: 3px; }
.cmp th[scope="row"] { color: var(--text); }
.cmp th[scope="row"] small { display: block; color: var(--faint); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.cmp td, .cmp thead th { text-align: center; width: 56px; padding-inline: 4px; }
.cmp th[scope="row"], .cmp thead td { padding-inline-start: 14px; }
@media (max-width: 767px) {
  .cmp { margin-top: 24px; }
  .cmp table { font-size: 15px; }
  .cmp th, .cmp td { padding-block: 10px; }
  .cmp th[scope="row"] small { display: none; }
  .cmp thead small { font-size: 12px; }
  .cmp__grp th { padding-block: 8px; }
}
@media (min-width: 720px) { .cmp th, .cmp td { padding: 13px 20px; } .cmp td, .cmp thead th { width: 20%; } }
.cmp__grp th { background: var(--wash-2); font: 800 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 10px 16px; }
:lang(ar) .cmp__grp th { letter-spacing: 0; font-size: 14px; }
.cmp .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.cmp .yes { color: var(--good); display: inline-flex; }
.cmp .yes--pro { color: var(--accent-text); }
.cmp .no { color: var(--faint); display: inline-flex; }
.cmp .part { color: var(--faint); font-size: 14px; }

/* ── sections ───────────────────────────────────────────────────────── */
/* One rhythm: 56px (phone) / 80px (desktop); two sections on the same
   background do not stack two paddings into a void. */
.sect { padding: 56px 0; }
.sect--top { padding-top: 24px; }
.sect--warm { background: linear-gradient(180deg, var(--wash-2), var(--bg)); }
.sect--flush { padding-bottom: 32px; }
.sect:not(.sect--warm) + .sect:not(.sect--warm):not(.sect--top) { padding-top: 24px; }
@media (min-width: 960px) {
  .sect { padding: 80px 0; } .sect--top { padding-top: 32px; } .sect--flush { padding-bottom: 40px; }
  .sect:not(.sect--warm) + .sect:not(.sect--warm):not(.sect--top) { padding-top: 32px; }
}

.free { display: grid; gap: 32px; margin-top: 32px; align-items: start; }
@media (min-width: 1080px) { .free { grid-template-columns: 1fr 270px; gap: 40px; } }
.cards { display: grid; gap: 16px; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card, .panel, .trust li, .topics li { background: var(--surface); border: 1px solid var(--line-card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card h3, .trust h3 { font: 750 1.12rem/1.3 var(--font-display); margin: 14px 0 6px; text-wrap: balance; }
.card p, .trust p, .panel p, .topics p { color: var(--soft); font-size: 15.5px; }
.card__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--good-wash); color: var(--good); }
.card__ico .ico { width: 22px; height: 22px; }
.card__ico--pro { background: var(--wash); color: var(--accent-text); }
.trust .card__ico, .panel .card__ico, .mailcard .card__ico { background: var(--wash); color: var(--accent-text); }
.trust .link { margin-top: 4px; }
.scan { position: relative; margin-top: 16px; background: var(--scan-bg); border-radius: 12px; padding: 8px 12px; overflow: hidden; border: 1px solid var(--line); }
.scan svg { width: 100%; height: 56px; fill: #1E1712; }
.scan__line { position: absolute; inset-inline: 6px; top: 50%; height: 2px; background: #E5484D; box-shadow: 0 0 10px 2px rgba(229, 72, 77, .55); border-radius: 2px; }

/* Phone: the comparison table above already lists every free feature, so the
   free cards would only repeat it. */
@media (max-width: 767px) { #free { display: none; } }
/* Phone: the free cards and the trust cards become one compact list card. */
@media (max-width: 559px) {
  .cards { gap: 0; background: var(--surface); border: 1px solid var(--line-card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .cards .card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .cards .card:last-child { border-bottom: 0; }
  .cards .card__ico { width: 40px; height: 40px; border-radius: 12px; grid-row: span 2; }
  .cards .card h3 { margin: 0 0 2px; font-size: 1.04rem; }
  .cards .card p { font-size: 15px; }
  .cards .scan { display: none; }
}
@media (max-width: 639px) {
  .trust { gap: 0; background: var(--surface); border: 1px solid var(--line-card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .trust li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .trust li:last-child { border-bottom: 0; }
  .trust .card__ico { width: 40px; height: 40px; border-radius: 12px; grid-row: span 3; }
  .trust li > h3, .trust li > .h3 { margin: 0 0 2px; font-size: 1.04rem; }
  .trust li > p, .trust li > .link { grid-column: 2; }
}

.phone { border-radius: 36px; border: 7px solid var(--frame); background: var(--frame); overflow: hidden; box-shadow: var(--shadow-lg); width: 100%; max-width: 270px; justify-self: center; }
.phone img { width: 100%; border-radius: 29px; filter: var(--shot-filter); }
.phone--tilt { transform: rotate(-2.5deg); }
[dir="rtl"] .phone--tilt { transform: rotate(2.5deg); }
@media (max-width: 1079px) { .free .phone { display: none; } }

.pros { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 720px) { .pros { grid-template-columns: 1fr 1fr; } }
.pro { position: relative; background: var(--surface); border: 1px solid var(--line-card); border-radius: 28px; padding: 24px 24px 0; overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; }
.pro h3 { font: 800 clamp(1.375rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--font-display); margin: 14px 0 8px; letter-spacing: -.015em; }
.pro p { color: var(--soft); }
.pro .phone { margin-top: 22px; max-width: 250px; max-height: 330px; border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 -2px 30px -6px rgba(70, 45, 20, .18); align-self: end; }
.pro .phone img { border-end-start-radius: 0; border-end-end-radius: 0; }
.pro::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 60px; background: linear-gradient(to top, var(--surface), transparent); pointer-events: none; }
/* Phone: a sideways, snapping row; the next card peeks in. No JavaScript. */
/* Phone: a compact sideways row that snaps each card to the 16px gutter.
   The gap equals the gutter, so a snapped card never shows a sliver of the
   previous one; the next card peeks in on the other side. */
@media (max-width: 719px) {
  .pros { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 24px -16px 0; padding: 0 16px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pros::-webkit-scrollbar { display: none; }
  .pro { flex: 0 0 min(80%, 300px); scroll-snap-align: start; padding: 16px 16px 0; border-radius: 22px; }
  .pro .card__ico { width: 36px; height: 36px; border-radius: 11px; }
  .pro .card__ico .ico { width: 18px; height: 18px; }
  .pro h3 { margin: 10px 0 4px; font-size: 1.375rem; }
  .pro p { font-size: 14.5px; line-height: 1.5; }
  .pro .phone { max-width: 150px; max-height: 150px; margin-top: 12px; border-width: 5px; border-radius: 24px; box-shadow: none; outline: 1px solid var(--line-card); }
  .pro .phone img { border-radius: 19px 19px 0 0; }
  .pro::after { height: 28px; }
}

.step__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 850 20px/1 var(--font-display); margin-bottom: 14px; }

/* marquee */
.marquee { margin-top: 32px; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { list-style: none; margin: 0; padding: 6px 0 12px; display: flex; gap: 16px; width: max-content; }
.marquee li { width: 250px; flex: none; background: var(--surface); border: 1px solid var(--line-card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.marquee img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-3); }
.marquee span { display: flex; flex-direction: column; padding: 10px 14px 12px; line-height: 1.3; }
.marquee b { font-size: 15px; }
.marquee small { color: var(--faint); font-size: 13px; }
.marquee li[lang], .marquee :lang(ar) { direction: rtl; }
:lang(ar) .marquee span { direction: rtl; text-align: right; }
.marquee__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marquee__foot .fine { margin: 0; }
.marquee__toggle { display: none; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-card); background: var(--surface); color: var(--text); place-items: center; cursor: pointer; padding: 0; }
.motion .marquee__toggle { display: inline-grid; }
.marquee__toggle .ico { width: 18px; height: 18px; }
.marquee__toggle .ico--play, .marquee__toggle[aria-pressed="true"] .ico--pause { display: none; }
.marquee__toggle[aria-pressed="true"] .ico--play { display: block; }

.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 4px 16px; margin-inline: -4px; scrollbar-width: thin; }
.shelf figure { margin: 0; scroll-snap-align: center; background: var(--plinth); border-radius: 32px; padding: 20px 16px 14px; }
.shelf .phone { max-width: 230px; box-shadow: var(--shadow); }
.shelf figcaption { text-align: center; margin-top: 12px; font-weight: 700; color: var(--soft); }

.trust { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } .trust--two { grid-template-columns: 1fr 1fr; } }

.faq { margin-top: 24px; display: grid; gap: 10px; max-width: 820px; }
.qa { background: var(--surface); border: 1px solid var(--line-card); border-radius: 18px; }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 20px; min-height: 56px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 700 1.05rem/1.4 var(--font); flex: 1; }
.qa__ico { width: 22px; height: 22px; color: var(--accent-text); transition: transform .25s ease; }
.qa[open] .qa__ico { transform: rotate(45deg); }
.qa p { padding: 0 20px 20px; color: var(--soft); max-width: 70ch; }

.get { padding: 8px 0 56px; }
@media (min-width: 960px) { .get { padding: 24px 0 80px; } }
.get__in { text-align: center; display: flex; flex-direction: column; align-items: center; background: radial-gradient(80% 120% at 50% 0%, var(--wash) 0%, var(--surface) 70%); border: 1px solid var(--line-card); border-radius: 32px; padding: 48px 20px; box-shadow: var(--shadow); max-width: 1112px; }
.get__icon { border-radius: 22px; box-shadow: var(--shadow); margin-bottom: 20px; }
.get .h2 { max-width: none; }
.get p { color: var(--soft); margin-top: 10px; }
.get .badges { justify-content: center; }
@media (min-width: 600px) { .get__in { width: calc(100% - 48px); } }

/* ── sub-pages ──────────────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 14px; color: var(--faint); }
.crumbs a { color: var(--soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .ico { width: 14px; height: 14px; }
.pagehead { padding: 24px 0 32px; background: var(--hero-glow); }
.pagehead__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .pagehead__grid { grid-template-columns: 1.3fr .7fr; } .pagehead { padding: 40px 0 48px; } }
.pagehead .phone { max-width: 250px; }
.howstep { display: grid; gap: 24px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--line); }
.howstep:last-child { border-bottom: 0; }
@media (min-width: 820px) { .howstep { grid-template-columns: 1.2fr .8fr; gap: 56px; } .howstep--alt .howstep__txt { order: 2; } }
.howstep__t { font: 800 clamp(1.375rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
:lang(ar) .howstep__t { letter-spacing: 0; line-height: 1.35; }
.howstep .step__n { margin-bottom: 12px; }
.howstep__txt p { color: var(--soft); margin-top: 10px; max-width: 60ch; }
.howstep .phone { max-width: 240px; }
@media (max-width: 819px) { .howstep .phone { max-width: 200px; } }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--soft); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 18px; height: 18px; border-radius: 6px; background: var(--good-wash); box-shadow: inset 0 0 0 2px var(--good); }
.ticks strong { color: var(--text); }
.duo { display: grid; gap: 16px; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }
.panel .h3 { margin: 14px 0 8px; }
.panel .h3:first-child { margin-top: 0; }
.numbered { margin: 12px 0 0; padding-inline-start: 1.3em; color: var(--soft); display: grid; gap: 8px; }
/* Narrow content keeps the page's left edge (never re-centred). */
.wrap--narrow > * { max-width: 820px; }
.care { display: flex; gap: 12px; align-items: flex-start; background: var(--wash); border-radius: var(--radius-sm); padding: 16px 18px; color: var(--text); }
.care .ico { color: var(--accent-text); margin-top: .25em; }
.mailcard { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; background: var(--surface); border: 1px solid var(--line-card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); max-width: 640px; }
.mailcard__label { font-weight: 700; color: var(--soft); font-size: 14px; }
.mailcard__addr { font: 800 clamp(1.2rem, 1rem + 1.2vw, 1.6rem)/1.3 var(--font-display); word-break: break-all; direction: ltr; display: inline-block; padding-block: 10px; }
.mailcard__hint { color: var(--faint); font-size: 14px; margin-top: 4px; }
.topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .topics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .topics { grid-template-columns: repeat(3, 1fr); } }
.topics .h3 { font-size: 1.08rem; margin-bottom: 6px; }
.docs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.trust li > .h3 { margin: 14px 0 6px; }
@media (max-width: 639px) { .trust li > .h3 { margin: 0 0 2px; } }

/* The legal documents (text from the API, chrome from here). */
.legal { padding-block: 16px 48px; }
.legal > * { max-width: 70ch; }
.legal h1 { font: 800 clamp(2rem, 1.4rem + 2.2vw, 3rem)/1.12 var(--font-display); letter-spacing: -.03em; text-wrap: balance; margin: 8px 0 8px; }
:lang(ar) .legal h1 { letter-spacing: 0; line-height: 1.35; }
.legal .updated { color: var(--faint); font-size: 14px; margin-bottom: 8px; }
.legal h2 { font: 750 1.35rem/1.3 var(--font-display); margin: 36px 0 8px; }
.legal h3 { font: 700 1.05rem/1.35 var(--font); margin: 22px 0 6px; }
.legal p, .legal li { color: var(--soft); margin: 8px 0; }
.legal strong { color: var(--text); }
.legal ul, .legal ol { padding-inline-start: 22px; }
.legal a { overflow-wrap: anywhere; }
.legal__more { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--line); }
.legal__more a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }

/* 404: the home page, said out loud. */
.lost { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 16px 0 0; line-height: 1.4; background: var(--wash); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 16px; padding: 12px 16px; color: var(--text); }
.lost .ico { color: var(--accent-text); width: 22px; height: 22px; }
.lost b { flex: 1 1 14em; }
.lost a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); background: var(--surface); padding: 40px 0 32px; font-size: 15px; }
@media (min-width: 960px) { .foot { padding-top: 48px; } }
.foot__grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.foot__brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .foot__brand { grid-column: auto; } }
.foot__brand p { color: var(--soft); margin-top: 12px; }
.foot__made a { color: var(--soft); font-size: 14px; display: inline-block; padding-block: 12px; }
.foot nav { display: flex; flex-direction: column; }
.foot nav h2 { font: 800 13px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
:lang(ar) .foot nav h2 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.foot nav a { color: var(--text); text-decoration: none; overflow-wrap: normal; padding-block: 12px; line-height: 1.25; }
.foot nav a:hover { text-decoration: underline; }
.foot__base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--faint); font-size: 14px; }

/* "This page exists in your language": a slim bar under the header, never over the page. */
.langhint { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 0 8px 0 16px; font-size: 14px; }
.langhint a { color: var(--accent-text); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.langhint button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: none; color: var(--soft); font-size: 20px; cursor: pointer; }

/* The phone's download bar (site.js): appears once the hero's badge has
   gone, only while scrolling UP or resting after an upward scroll, never over
   the page's own download block or the footer. While it shows, the body gets
   the same room at the bottom, so nothing can be stuck under it. */
.sticky { display: none; }
@media (max-width: 859px) {
  .sticky { position: fixed; z-index: 25; inset-inline: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 2px 0 8px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-card); box-shadow: var(--shadow-lg); transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .sticky.on { transform: none; visibility: visible; transition: transform .25s ease; }
  html.sticky-on body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sticky > img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
  .sticky p { flex: 1; min-width: 0; margin: 0; line-height: 1.2; }
  .sticky b { display: block; font-size: 15px; }
  .sticky small { display: block; color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky .badge img { height: 38px; width: auto; }
  .sticky__x { width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--faint); border-radius: 999px; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .sticky__x .ico { width: 18px; height: 18px; }
}
@media (max-width: 359px) { .sticky small { display: none; } }

/* ── motion: only when site.js added .motion (never with reduced motion) ── */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delay, 0ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion .display mark::after { transform: scaleX(0); animation: swash .7s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
@keyframes swash { to { transform: scaleX(1); } }
.motion .kicker, .motion .hero .lede, .motion .hero .badges, .motion .hero .split { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.motion .hero .lede { animation-delay: .1s; }
.motion .hero .badges { animation-delay: .18s; }
.motion .hero .split { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* The hero plays ONCE (photo → scan → boxes → result). Its resting state is
   the last, crisp frame: the keyframes only run while .play is fresh, so a
   page that never plays (no JS, no IntersectionObserver) is never blurred. */
.motion .demo.play .demo__scan { animation: scan 1.6s ease-in-out forwards; }
.motion .demo.play .demo__status { animation: status 1.9s ease forwards; }
.motion .demo.play .box { animation: boxIn .45s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(1.25s + var(--i) * .14s); }
.motion .demo.play .demo__sheet { animation: sheetIn .6s cubic-bezier(.2, .7, .2, 1) 1.7s backwards; }
.motion .demo.play .demo__pill { animation: fadeIn .45s ease 1.9s backwards; }
.motion .demo.play .demo__rows li { animation: rowIn .4s ease backwards; animation-delay: calc(2s + var(--i) * .16s); }
@keyframes boxIn { from { opacity: 0; transform: scale(.85); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes scan { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(460%); } }
@keyframes status { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* The barcode line sweeps a few times, then rests. */
.motion .card--barcode.live .scan__line { animation: barcode 2.2s ease-in-out 4 alternate; }
@keyframes barcode { from { transform: translateY(-26px); } to { transform: translateY(26px); } }

.motion .marquee.live .marquee__track { animation: marquee 70s linear infinite; }
.motion .marquee:hover .marquee__track, .motion .marquee:focus-within .marquee__track, .motion .marquee.paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Without motion the strip is a plain sideways scroller. */
html:not(.motion) .marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
html:not(.motion) .marquee__track { padding-inline: 16px; }
html:not(.motion) .marquee li { scroll-snap-align: start; }
html:not(.motion) .marquee li[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}