/*
 * DAPAR design tokens — the one place colour values live. The web app maps them into Tailwind
 * (web/src/theme.css, `@theme inline`); the public site gets this file prepended to site.css
 * (site/build.ts). Names follow shadcn/ui; DAPAR's own palette keeps its names beside them.
 */
:root {
  --radius: 0.5rem;

  /* Field map (2026-10-02 redesign): cream surfaces, dark-olive primary, brass main action */
  --background: #f7f1e3;
  --foreground: #22251a;
  --card: #fffdf7;
  --card-foreground: #22251a;
  --popover: #fffdf7;
  --popover-foreground: #22251a;
  --primary: #3d4a25;
  --primary-foreground: #ffffff;
  --secondary: #f2ead6;
  --secondary-foreground: #22251a;
  --muted: #f2ead6;
  --muted-foreground: #5b5a48;
  /* a third text level shadcn has no name for: hints, units, sub-lines */
  --subtle-foreground: #6b6a5a;
  --accent: #f2ead6;
  --accent-foreground: #22251a;
  --destructive: #c81e1e;
  --destructive-foreground: #ffffff;
  --destructive-bg: #fbefe9;
  --destructive-top: #c92a2a;
  --destructive-bottom: #b81c1c;
  --destructive-lip: #8f1717;
  --success: #0e7232;
  --success-foreground: #ffffff;
  --success-bg: #effaf2;
  --border: #efe3c6;
  --input: #e6dcc0;
  --ring: #1f2610;

  --olive: #5b6b3a;
  --olive-dark: #3d4a25;
  --olive-bg: #eef1e4;
  --olive-foreground: #ffffff;
  --olive-top: #687a43;
  --olive-bottom: #55653a;
  --olive-lip: #4a5830;
  --olive-chip: #e3e9cc;
  --gold: #c9a227;
  --gold-dark: #7c600f;
  --gold-bg: #faf3d9;
  --brass-top: #e6c24f;
  --brass-bottom: #d0a52a;
  --brass-lip: #b08d22;
  --brass-foreground: #2b2105;
  --cream-top: #fffdf7;
  --cream-bottom: #f7efdc;
  --cream-lip: #e6d9b8;
  --sand: #f2e3c4;
  --sand-deep: #e2c993;
  --sky: #cfe6f2;
  --tab-inactive: #7d6e4c;
  --switch-off: #918460;
  --flame: #c4161b;
  --beret-golani: #6b3f23;
  --beret-nahal: #7bae3c;
  --beret-givati: #5b2c83;
  --beret-tzanhanim: #a6192e;
  --beret-armour: #1f2937;
  --beret-engineering: #8a8f99;
  --beret-airforce: #7cc4e8;
  /* Realistic skin (2026-10-07): field-ops panels, a AAA military game at dusk */
  --ops-panel: rgb(18 16 14 / 0.78);
  --ops-panel-solid: rgb(24 22 18 / 0.95);
  --ops-line: rgb(201 166 58 / 0.35);
  --ops-text: #f6f1e2;
  --ops-muted: rgb(246 241 226 / 0.75);
  --ops-accent: #f0cf5e;
  --ops-brass-top: #f3d572;
  --ops-brass-mid: #c99a28;
  --ops-brass-bottom: #a97d1a;
}

/* The exam room: the mock-exam run sets data-surface="exam" on <html> (useSurface) so it, and the sheets
   it portals, read like the real test — neutral greys, no brass, no olive. Same names, plain values. */
[data-surface='exam'] {
  --background: #f5f5f4;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --primary: #1f2937;
  --secondary: #f3f4f6;
  --muted: #f3f4f6;
  --accent: #f3f4f6;
  --muted-foreground: #4b5563;
  --subtle-foreground: #5b6472;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #111827;
  --olive: #374151;
  --olive-dark: #1f2937;
  --olive-bg: #f3f4f6;
  --olive-chip: #e5e7eb;
  --olive-top: #4b5563;
  --olive-bottom: #374151;
  --olive-lip: #1f2937;
  --gold-dark: #374151;
  --gold-bg: #f3f4f6;
  --brass-top: #374151;
  --brass-bottom: #1f2937;
  --brass-lip: #111827;
  --brass-foreground: #ffffff;
  --cream-top: #ffffff;
  --cream-bottom: #f9fafb;
  --cream-lip: #e5e7eb;
  --sand: #f3f4f6;
  --sand-deep: #e5e7eb;
}
/* DAPAR public site — same tokens as the app (web/src/theme.css) so site → app feels continuous. */
@font-face { font-family: Heebo; font-weight: 400; font-display: swap; src: url('/fonts/heebo-hebrew-400-normal.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 700; font-display: swap; src: url('/fonts/heebo-hebrew-700-normal.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 800; font-display: swap; src: url('/fonts/heebo-hebrew-800-normal.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 400; font-display: swap; src: url('/fonts/heebo-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Heebo; font-weight: 700; font-display: swap; src: url('/fonts/heebo-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Heebo; font-weight: 800; font-display: swap; src: url('/fonts/heebo-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url('/fonts/manrope-latin-400-normal.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: Manrope; font-weight: 700; font-display: swap; src: url('/fonts/manrope-latin-700-normal.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: Manrope; font-weight: 800; font-display: swap; src: url('/fonts/manrope-latin-800-normal.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: Manrope; font-weight: 400; font-display: swap; src: url('/fonts/manrope-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url('/fonts/manrope-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url('/fonts/manrope-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Sora; font-weight: 700; font-display: swap; src: url('/fonts/sora-latin-700-normal.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: Sora; font-weight: 800; font-display: swap; src: url('/fonts/sora-latin-800-normal.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: Sora; font-weight: 700; font-display: swap; src: url('/fonts/sora-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Sora; font-weight: 800; font-display: swap; src: url('/fonts/sora-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Colours come from @dapar/shared/tokens.css, which site/build.ts prepends to this file. */
:root {
  --site-radius: 20px; --wrap: 1080px;
  /* the back phone leans away from the reading direction */
  --tilt: 6deg;
}
html[dir="rtl"] { --tilt: -6deg; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Manrope, Heebo, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.55; }
html[lang="he"] body { font-family: Heebo, "Segoe UI", system-ui, -apple-system, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive-dark); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1, h2, h3, .btn { font-family: Sora, Manrope, Heebo, "Segoe UI", system-ui, -apple-system, sans-serif; }
html[lang="he"] :is(h1, h2, h3, .btn) { font-family: Heebo, "Segoe UI", system-ui, -apple-system, sans-serif; }
html[lang="ru"] :is(h1, h2, h3, .btn) { font-family: Manrope, Heebo, "Segoe UI", system-ui, -apple-system, sans-serif; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 1em; }
/* the one highlighted phrase in the headline — a marker stroke under the words, drawn on load from the inline start. */
mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--brass-top) 72%, transparent) 58%) no-repeat 0 0 / 100% 100%; color: inherit; padding: 0 0.08em; }
html[dir="rtl"] mark { background-position: 100% 0; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 680px; }
.lead { font-size: 19px; color: var(--muted-foreground); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 14px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; }
/* brass: the one main call to action; cream: everything beside it — the app's buttons, lip and all */
.btn-primary { background: linear-gradient(var(--brass-top), var(--brass-bottom)); color: var(--brass-foreground); box-shadow: 0 3px 0 var(--brass-lip); }
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.04); }
.btn-ghost { background: linear-gradient(var(--cream-top), var(--cream-bottom)); color: var(--foreground); border-color: var(--border); box-shadow: 0 3px 0 var(--cream-lip); }
.btn-ghost:hover, .btn-ghost:focus-visible { filter: brightness(0.98); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: var(--card); background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav-row { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--foreground); text-decoration: none; flex-shrink: 0; }
.brand-tile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sand); }
.brand-tile svg { display: block; }
.brand-ai { color: var(--gold-dark); }
.globe { flex-shrink: 0; color: var(--olive-dark); }
.nav-links { display: flex; flex-wrap: nowrap; gap: 14px; margin-inline-start: auto; }
.nav-links a { color: var(--muted-foreground); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-links a, .brand { white-space: nowrap; }
.nav-links a:hover { color: var(--foreground); }
.nav-menu { display: none; }
.nav-menu summary { list-style: none; display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 22px; height: 2px; background: var(--foreground); }
.nav-sheet { position: absolute; inset-inline: 0; top: 64px; display: grid; gap: 14px; padding: 20px; background: var(--card); border-bottom: 1px solid var(--border); }
.nav-sheet a { display: flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; font-weight: 600; font-size: 18px; }

/* language combo box */
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.chev { width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.lang[open] .chev { transform: rotate(-135deg); }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 220px; display: grid; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12); padding: 6px; z-index: 20; }
.lang-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--foreground); text-decoration: none; font-weight: 600; }
.lang-list a:hover { background: color-mix(in oklab, var(--sand) 45%, var(--background)); }
/* like the app's picker: a flag coin, the language's own name, and below it its name in the page's language */
.lang-flag { display: inline-flex; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-names { display: grid; line-height: 1.25; }
.lang-sub { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
.nav-cta { min-height: 40px; padding: 8px 16px; font-size: 15px; white-space: nowrap; }
@media (max-width: 1120px) {
  .nav-links, .lang { display: none; }
  .nav-menu { display: block; margin-inline-start: auto; }
}
/* Spanish and Russian links run longer: their row needs ~1240px, so they fold into the menu sooner */
@media (max-width: 1260px) {
  html:is([lang="es"], [lang="ru"]) :is(.nav-links, .lang) { display: none; }
  html:is([lang="es"], [lang="ru"]) .nav-menu { display: block; margin-inline-start: auto; }
}
@media (max-width: 420px) {
  /* the brand tile and ".ai" are wider than the old logo: on a narrow phone the brand gives a little */
  .brand { gap: 8px; font-size: 18px; }
  .brand-tile { width: 30px; height: 30px; }
  html[lang="ru"] .nav-row { gap: 12px; }
  html[lang="ru"] .nav-cta { padding-inline: 6px; font-size: 13px; }
  /* the Spanish and French calls to action, set in Sora, fill a 360px row to the last pixel; leave room for wider font rendering (Linux) */
  html:is([lang="es"], [lang="fr"]) .nav-row { gap: 12px; }
  html:is([lang="es"], [lang="fr"]) .nav-cta { padding-inline: 10px; font-size: 14px; }
}
.nav-sheet .btn { width: 100%; justify-content: center; margin-bottom: 6px; }
/* the smallest phones (320px): narrower margins, a smaller brand and call to action, so the row never
   pushes the page sideways in any language */
@media (max-width: 360px) {
  .wrap { width: min(100% - 24px, var(--wrap)); }
  .nav-row { gap: 6px; }
  .brand { gap: 6px; font-size: 16px; }
  .brand-tile { width: 28px; height: 28px; }
  .brand-tile svg { width: 22px; height: 22px; }
  .nav-cta, html[lang] .nav-cta { min-height: 40px; padding-inline: 8px; font-size: 13px; }
  .nav-menu summary { width: 40px; }
}

/* hero */
/* clip, not hidden: the tilted phones and the scene must never widen the page or flash a scrollbar. */
/* golden hour (owner, 2026-10-08): a warm sky and a low sun glowing behind the phones; the land is a cached image
   over it. The sun follows the phones (it is the layout's light); the land never mirrors. */
.hero { position: relative; isolation: isolate; padding: 48px 0 max(84px, 14vw); overflow-x: clip;
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), #fff1c8 0, #fff1c8 50px, rgb(255 191 99 / 0.85) 95px, rgb(255 191 99 / 0) 380px),
    linear-gradient(#9cc3dc, #f3d9a8 55%, #f4c983 80%); }
.hero { --sun-x: 72%; --sun-y: 62%; }
html[dir="rtl"] .hero { --sun-x: 28%; }
.hero-grid { display: grid; gap: 32px; align-items: center; grid-template-columns: 1.1fr 0.9fr; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
/* the eyebrow and the trust chips: brass-tinted and cream pills over the sky */
.eyebrow { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--gold-bg); border: 1px solid var(--gold); color: var(--gold-dark); font-family: Sora, Manrope, Heebo, system-ui, sans-serif; font-size: 13px; font-weight: 800; }
html[lang="he"] .eyebrow { font-family: Heebo, system-ui, sans-serif; }
.chips { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(255 250 235 / 0.85); border: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.chips svg { flex-shrink: 0; color: var(--olive); }
.phones { position: relative; display: flex; justify-content: center; min-height: 420px; }
.phone { width: 220px; padding: 6px; background: #fff; border-radius: 32px; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 24px 48px -18px rgba(17, 24, 39, 0.28); }
/* the phones stand on the sand: a warm contact shadow under them (z-index 0: above the scene, which comes later
   in the hero at -1), and a deeper, warmer drop */
.phones::after { content: ""; position: absolute; inset-inline: 12% 4%; bottom: -48px; height: 48px; border-radius: 50%; background: radial-gradient(rgb(90 66 24 / 0.38), transparent 70%); z-index: 0; }
.phones .phone { box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 40px 60px -24px rgb(90 60 20 / 0.55), 0 10px 18px -8px rgb(90 60 20 / 0.3); }
/* the copy over the warmer sky */
.hero .lead { color: #3b3826; }
.phone img { border-radius: 26px; box-shadow: none; aspect-ratio: 375 / 812; object-fit: cover; }
.phone-back { position: absolute; inset-inline-end: 8%; top: 40px; transform: rotate(var(--tilt)) scale(0.9); opacity: 0.95; }
.phone-sm { width: 180px; margin: 0 auto 16px; }
/* the saluting robot in a cream disc, beside the phones */
.robot-disc { position: absolute; inset-inline-start: 2%; bottom: 6%; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(var(--cream-top), var(--cream-bottom)); box-shadow: 0 3px 0 var(--cream-lip), 0 14px 26px -12px rgba(80, 60, 20, 0.4); }
.robot-disc svg { display: block; }

/* ─── the hero scene ─────────────────────────────────────────────────────────
   A still picture from the shared art kit, behind the copy. It never mirrors (a
   picture, not text), so its pieces sit by physical left / right. The coins and
   the pin live in .scene-path, a box with the trail's own proportions, so their
   percentages land on the stones at every width. */
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.scene-band, .scene-land { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-land { object-fit: cover; object-position: 50% 100%; }
.scene svg { display: block; }
.scene-tower { position: absolute; right: 1%; bottom: 25%; width: clamp(80px, 12vw, 150px); }
.scene-tower svg, .scene-trail-img, .scene-coin svg, .scene-pin svg { display: block; width: 100%; height: auto; }
.scene-trail, .scene-path { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1040 / 120; }
.scene-coin, .scene-pin { position: absolute; width: clamp(30px, 5.6vw, 62px); translate: -50% -62%; }
.scene-coin:nth-of-type(1) { left: 12%; top: 72%; }
.scene-coin:nth-of-type(2) { left: 32%; top: 66%; }
.scene-coin:nth-of-type(3) { left: 55%; top: 45%; width: clamp(34px, 6.4vw, 72px); }
.scene-coin:nth-of-type(4) { left: 78%; top: 51%; }
.scene-pin { left: 55%; top: 45%; width: clamp(26px, 4.2vw, 44px); translate: -50% -205%; }
/* the tower stands behind the phones, never behind the words: in Hebrew the copy takes the right */
html[dir="rtl"] .scene-tower { right: auto; left: 1%; }
/* on a phone the robot disc stands where the tower would: the horizon keeps the trail alone */
@media (max-width: 860px) { .scene-tower { display: none; } }
@media (max-width: 860px) {
  .hero { padding-top: 32px; }
  .hero { --sun-x: 50%; --sun-y: 72%; }
  .hero-grid { grid-template-columns: 1fr; }
  .phones { min-height: 360px; }
  .phone { width: 180px; }
}
@media (max-width: 860px) { html[dir="rtl"] .hero { --sun-x: 50%; } }

/* bands */
section[id] { scroll-margin-top: 80px; }
.band { padding: 64px 0; }
/* a sand band that shows on the cream page (the old #f8efdc vanished on it) */
.band-sand { background: color-mix(in oklab, var(--sand) 45%, var(--background)); }
/* the land between sections: a dune edge where each sand band begins, and on a wide screen a few of the kit's
   plants and a crate standing in the empty side margins, never over the words */
.band { position: relative; }
.band-dune { position: absolute; inset-inline: 0; top: -1px; width: 100%; height: 34px; fill: var(--background); pointer-events: none; }
.prop { position: absolute; display: none; height: auto; pointer-events: none; }
@media (min-width: 1240px) { .prop { display: block; } }
.prop-acacia { inset-inline-end: 1%; bottom: 0; width: 84px; }
.prop-bush { inset-inline-end: 7.5%; bottom: 0; width: 40px; }
.prop-crate { inset-inline-end: 1.5%; top: 48px; width: 56px; }
.prop-cypress { inset-inline-start: 1.5%; bottom: 24px; width: 56px; }
.prop-rock { inset-inline-start: 5%; bottom: 22px; width: 36px; }
.prop-olive { inset-inline-end: 0.5%; bottom: 24px; width: 64px; }
.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; }
/* a card in the app's way: cream, a hairline and the soft sand lip */
.card, .tiles li, .story, #faq details, .table-scroll { background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 0 var(--cream-lip), 0 4px 10px rgb(80 60 20 / 0.06); }

/* why: the words beside a fact board (owner, 2026-10-08), each paragraph led by a coin of the exam's chapters */
.why-grid { display: grid; gap: 48px; align-items: center; grid-template-columns: 1.15fr 0.85fr; }
.why-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 18px; }
.why-list li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.why-list p { margin: 0; }
.why-coin svg { display: block; }
/* the board: an olive card with the app's dark lip, four tiles, a brass number over a short label */
.facts { position: relative; margin-top: 70px; padding: 22px; border-radius: 24px; background: linear-gradient(var(--olive-top), var(--olive-dark)); box-shadow: 0 4px 0 #2c361b, 0 20px 40px -16px rgb(40 50 20 / 0.5); color: #fff; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; container-type: inline-size; }
.fact { min-width: 0; padding: 16px; border-radius: 16px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.12); }
/* the number scales with the board and never breaks: "10–90" must stay one line in a 320px tile */
.fact b { display: block; font-family: Sora, Manrope, Heebo, system-ui, sans-serif; font-size: 30px; font-size: clamp(24px, 10cqi, 38px); font-weight: 800; line-height: 1; white-space: nowrap; color: var(--brass-top); }
.fact span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.facts-bot { position: absolute; inset-inline-end: 18px; top: -86px; width: 92px; height: auto; }
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .facts { margin-top: 0; }
  .facts-bot { display: none; }
}

/* how: brass number coins, and on a wide screen a dotted trail behind the row of steps */
.steps-wrap { position: relative; isolation: isolate; }
.how-trail { position: absolute; inset-inline: 0; top: calc(180px * 812 / 375 + 12px + 16px + 20px - 30px - 24px); width: 100%; height: 60px; z-index: -1; fill: none; stroke: var(--olive); stroke-width: 3; stroke-dasharray: 0.012 0.012; stroke-linecap: round; stroke-opacity: 0.45; }
.step-coin { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(var(--brass-top), var(--brass-bottom)); color: var(--brass-foreground); box-shadow: 0 3px 0 var(--brass-lip); font-family: Sora, Manrope, Heebo, system-ui, sans-serif; font-size: 18px; font-weight: 800; }
@media (max-width: 860px) { .how-trail { display: none; } }
.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
/* each step: the phone, then its coin centred under it (where the trail runs), then the title and the words */
.step { text-align: center; }
.step h3 { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tiles { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.tiles li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; border-radius: var(--site-radius); padding: 16px; font-weight: 600; }
/* the olive coin that leads a feature */
.tile-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(var(--olive), var(--olive-dark)); color: var(--olive-foreground); box-shadow: 0 2px 0 color-mix(in oklab, var(--olive-dark), #000 25%); }
.kid-title { margin-top: 48px; }
.kids { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.kids figure { margin: 0; text-align: center; }
.kids figcaption { color: var(--muted-foreground); }
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .steps, .kids { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

/* tables */
.table-scroll { overflow-x: auto; margin-top: 24px; border-radius: var(--site-radius); margin-bottom: 4px; }
table { border-collapse: collapse; width: 100%; border-radius: var(--site-radius); overflow: hidden; }
th, td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--sand); font-weight: 800; }
tbody th { font-weight: 600; }
/* the comparison is a checklist: each row a benefit, a tick for us, a cross and their short answer for them */
.compare th, .compare td { vertical-align: middle; }
.compare thead th.us { color: var(--olive-dark); }
.compare .us { background: var(--olive-bg); text-align: center; width: 120px; }
.compare td.them { width: 38%; color: var(--muted-foreground); font-size: 14px; }
.compare td.them .mark { margin-inline-end: 10px; }
.compare td.them .cap { vertical-align: middle; }
.mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.mark.ok { background: var(--olive); color: var(--olive-foreground); box-shadow: 0 2px 0 var(--olive-lip); }
.mark.no { background: color-mix(in oklab, var(--sand) 60%, var(--card)); color: var(--muted-foreground); }
/* a phone gives the benefit the room: a narrow tick column, smaller marks, their answer in small words */
@media (max-width: 520px) {
  .compare th, .compare td { padding: 12px 8px; }
  .compare tbody th { font-size: 15px; }
  .compare .us { width: 52px; }
  .compare td.them { width: 40%; font-size: 13px; }
  /* the cross above their answer, so the words keep the column's width */
  .compare td.them .mark { display: flex; margin: 0 0 6px; }
  .compare .mark { width: 22px; height: 22px; }
}
.yes { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--olive); color: #fff; font-weight: 700; font-size: 14px; }
.honest { margin-top: 20px; color: var(--muted-foreground); font-style: italic; }

/* story: a letter (the airmail edge in olive and brass) beside the question that started it */
.story-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: 1.2fr 0.8fr; }
.story { position: relative; padding: 28px 32px; border-radius: var(--site-radius); }
.story::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: var(--site-radius) var(--site-radius) 0 0; background: repeating-linear-gradient(90deg, var(--olive) 0 18px, var(--brass-top) 18px 36px); opacity: 0.85; }
.story p { font-size: 18px; }
.sign { color: var(--muted-foreground); font-weight: 700; }
.pull { margin: 0; text-align: center; }
.pull blockquote { margin: 0 0 18px; font-family: Sora, Manrope, Heebo, system-ui, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--olive-dark); }
html[lang="he"] .pull blockquote { font-family: Heebo, system-ui, sans-serif; }
html[lang="ru"] .pull blockquote { font-family: Manrope, Heebo, system-ui, sans-serif; }
.pull blockquote p { margin: 0; font-size: inherit; }
.pull blockquote::before { content: "\201C"; display: block; font-size: 80px; line-height: 0.6; color: var(--brass-bottom); }
.pull-bot { width: 140px; height: auto; margin: 0 auto; }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  /* on a phone the question comes first, as the hook; it repeats the letter's own words */
  .pull { order: -1; }
  .pull blockquote { font-size: 22px; }
  .pull-bot { display: none; }
}

/* pricing */
.cards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); align-items: start; }
.card { border-radius: var(--site-radius); padding: 22px; display: grid; gap: 8px; position: relative; }
.card-hero { border: 2px solid var(--brass-bottom); background: var(--gold-bg); }
/* raised with `top`: the scroll reveal owns `transform` and the hover owns `translate`, so neither undoes it */
@media (min-width: 1001px) { .card-hero { top: -8px; } }
.badge { position: absolute; top: -12px; inset-inline-start: 18px; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--olive-dark); color: var(--brass-top); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.card h3 { margin: 6px 0 0; }
.price { font-size: 30px; font-weight: 800; margin: 0; }
.price small { font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.term { color: var(--muted-foreground); margin: 0 0 6px; }
.card ul { margin: 0 0 12px; padding-inline-start: 20px; }
.card .btn { width: 100%; }
.soon { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 14px; border: 1.5px dashed var(--border); color: var(--muted-foreground); font-weight: 700; margin: 0; }
.monthly { font-size: 14px; color: var(--muted-foreground); margin: 10px 0 0; }
.quota { margin-top: 28px; }
.quota summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* faq */
#faq details { border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; }
#faq details[open] { background: var(--gold-bg); border-color: var(--gold); }
#faq summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; font-weight: 700; padding: 12px 0; }
#faq summary::-webkit-details-marker { display: none; }
/* the native marker cannot be rotated, so the disclosure arrow is a chevron of our own — the same corner-of-a-box shape as .chev. */
#faq summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--olive); border-bottom: 2px solid var(--olive); transform: rotate(-45deg); transition: transform 0.25s ease; }
#faq details[open] summary::before { transform: rotate(45deg); }
html[dir="rtl"] #faq summary::before { transform: rotate(135deg); }
html[dir="rtl"] #faq details[open] summary::before { transform: rotate(45deg); }
#faq p { margin: 4px 0 14px; color: var(--muted-foreground); }
/* opening slides the answer down. A browser without ::details-content simply opens it at once — the content is never hidden by us. */
#faq details::details-content { display: grid; grid-template-rows: 0fr; content-visibility: hidden; transition: grid-template-rows 0.25s ease, content-visibility 0.25s allow-discrete; }
#faq details[open]::details-content { grid-template-rows: 1fr; content-visibility: visible; }
.faq-body { overflow: hidden; }
/* the help card beside the questions: it stays in view on a wide screen, inside its own grid cell */
.faq-grid { display: grid; gap: 40px; align-items: start; grid-template-columns: 0.8fr 1.2fr; }
/* stuck at 150px: the robot stands 70px above the card, so it clears the 65px nav (final review) */
.help { position: sticky; top: 150px; padding: 26px; border-radius: var(--site-radius); background: linear-gradient(var(--cream-top), var(--cream-bottom)); border: 1px solid var(--border); box-shadow: 0 3px 0 var(--cream-lip); text-align: center; }
.help-bot { display: block; width: 120px; height: auto; margin: -70px auto 6px; }
.help p { color: var(--muted-foreground); }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 20px; }
  .help { position: static; }
  .help-bot { display: none; }
}

/* the last call: the hero's golden hour again, the trail and its coins at the foot, the footer's dune rising out of it */
.last { position: relative; overflow: hidden; padding: 72px 0 170px; text-align: center; background: linear-gradient(#9cc3dc, #f3d9a8 45%, #f4c983 75%, var(--sand-deep)); }
.last h2 { font-size: clamp(28px, 4vw, 40px); }
.last .lead { color: #3b3826; }
.last .cta-row { justify-content: center; }
.last-land { position: absolute; inset: auto 0 0; height: 150px; pointer-events: none; }
.last-trail { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; object-fit: cover; }
/* the coins take only the room the tower and the robot leave, so none of the three ever covers another (final review) */
.last-coins { position: absolute; left: 50%; bottom: 46px; width: min(444px, calc(100% - 2 * (9% + clamp(90px, 12vw, 160px)) - 16px)); height: auto; translate: -50% 0; }
.last-tower { position: absolute; left: 8%; bottom: 52px; width: clamp(64px, 9vw, 110px); height: auto; }
.last-bot { position: absolute; right: 9%; bottom: 40px; width: clamp(90px, 12vw, 160px); height: auto; }
@media (max-width: 560px) { .last-tower { display: none; } .last-bot { right: 2%; } .last-coins { left: 4%; translate: none; width: calc(94% - 98px); } }

/* footer */
.foot { position: relative; padding: 28px 0 36px; background: var(--olive-dark); color: color-mix(in oklab, var(--olive-foreground) 82%, var(--olive-dark)); font-size: 14px; }
/* the dune edge: the last call's sand reaching down over the footer's top */
.foot-dune { position: absolute; inset-inline: 0; top: -1px; width: 100%; height: 40px; fill: var(--sand-deep); }
.foot-row { position: relative; display: grid; gap: 8px; padding-top: 24px; }
.foot a { color: var(--olive-foreground); }
.foot-lang a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-inline-end: 12px; }
.foot-lang .lang-name { text-decoration: underline; }


/* ─── motion ─────────────────────────────────────────────────────────────────
   One orchestrated hero moment on load, a reveal for each piece as it scrolls
   in, short honest transitions on the things you can touch. Nothing is hidden by
   default: site.js marks <html> `js-reveal` once it is watching, so a reader
   whose script never runs — or who asked for stillness — gets the page at rest. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-scale { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* the hero's words arrive once, in reading order: headline, its marker, then the promise, the buttons and the chips. */
.hero h1 { animation: rise 0.6s ease-out both; }
.hero h1 mark { animation: draw 0.5s ease-out 0.5s both; }
.hero-copy .lead { animation: rise 0.5s ease-out 0.8s both; }
.hero .cta-row { animation: rise 0.5s ease-out 0.9s both; }
.hero .chips { animation: rise 0.5s ease-out 1s both; }


/* ─── hero motion ──────────────────────────────────────────────────────────────
   Played once on load, then still: every piece is at rest within 5 s, so nothing
   needs a pause control (WCAG 2.2.2) and no script runs. Transform and opacity
   only, through the individual `translate` / `scale` properties, so a piece's own
   tilt or centring (`transform`, `translate`) is never overwritten. A reader who
   asked for stillness gets none of it: every piece already sits in its place. */
@keyframes s-rise { from { opacity: 0; translate: 0 40px; } }
@keyframes s-spring { 0% { opacity: 0; scale: 0.6; } 60% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes s-pop { 0% { opacity: 0; scale: 0.4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes s-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes s-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* the pin keeps its centring above the coin while it hops and bobs */
@keyframes s-hop { 0% { opacity: 0; translate: -50% -205%; } 12% { opacity: 1; } 30% { translate: -50% -290%; } 55%, 100% { translate: -50% -205%; } 75% { translate: -50% -245%; } }
@keyframes s-pin-bob { 0%, 100% { translate: -50% -205%; } 50% { translate: -50% -225%; } }
@media (prefers-reduced-motion: no-preference) {
  /* the phones rise in, keeping their tilt, then drift once */
  .phones .phone { animation: s-rise 0.7s ease-out 0.1s both, s-drift 4s ease-in-out 1s; }
  .phones .phone-back { animation: s-rise 0.7s ease-out 0.25s both, s-drift 3.85s ease-in-out 1.15s; }
  /* the robot springs into its disc, then breathes once */
  .robot-disc { animation: s-spring 0.56s ease-out 0.8s both, s-bob 3.6s ease-in-out 1.4s; }
  /* the coins pop along the trail in turn, then the pin hops onto the current one */
  .scene-coin { animation: s-pop 0.42s ease-out both; }
  .scene-coin:nth-of-type(1) { animation-delay: 1s; }
  .scene-coin:nth-of-type(2) { animation-delay: 1.12s; }
  .scene-coin:nth-of-type(3) { animation-delay: 1.24s; }
  .scene-coin:nth-of-type(4) { animation-delay: 1.36s; }
  .scene-pin { animation: s-hop 1.1s ease-in-out 1.5s both, s-pin-bob 2.4s ease-in-out 2.6s; }
}

/* scroll reveals. site.js marks each piece `in` as it passes the lower part of the screen, with a `--beat` so
   pieces that arrive together play in reading order. Waiting is instant (no transition), so nothing fades out on
   load; arriving is timed, so it plays where the eye is, however fast the reader scrolls. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
  html.js-reveal .card-hero:not(.in) { transform: translateY(28px) scale(0.96); }
  /* the lift and shadow keep their own short timing for the hover */
  html.js-reveal .reveal.in { transition: opacity 0.6s ease-out var(--beat, 0s), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--beat, 0s), translate 0.2s ease, box-shadow 0.2s ease; }

  /* then each section's own moment, once its piece has landed, on the same beat (at most 0.63 s + 0.4 s) */
  html.js-reveal .why-list li:not(.in) .why-coin,
  html.js-reveal .tiles li:not(.in) .tile-icon,
  html.js-reveal .step:not(.in) .step-coin { opacity: 0; }
  .why-list li.in .why-coin { animation: s-pop 0.5s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.25s); }
  /* the board's numbers pop in turn once it lands */
  html.js-reveal .facts:not(.in) .fact b { opacity: 0; }
  .facts.in .fact b { animation: s-pop 0.45s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.3s); }
  .facts.in .fact:nth-child(2) b { animation-delay: calc(var(--beat, 0s) + 0.42s); }
  .facts.in .fact:nth-child(3) b { animation-delay: calc(var(--beat, 0s) + 0.54s); }
  .facts.in .fact:nth-child(4) b { animation-delay: calc(var(--beat, 0s) + 0.66s); }
  .tiles li.in .tile-icon { animation: s-pop 0.42s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.2s); }
  .step.in .step-coin { animation: s-pop 0.5s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.4s); }
  .step.in .phone { animation: s-rise 0.7s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.1s); }
  /* the comparison: a row's tick pops as the row scrolls in, the cross fades in after it */
  html.js-reveal .compare tr.check:not(.in) .mark { opacity: 0; }
  .compare tr.check.in .mark.ok { animation: s-pop 0.45s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.15s); }
  .compare tr.check.in .mark.no { animation: fade 0.4s ease-out both; animation-delay: calc(var(--beat, 0s) + 0.35s); }
  /* the recommended plan settles last, a touch larger, so the eye ends on it */
  .card-hero.in { animation: s-settle 0.6s ease-out 0.5s both; }
  /* the trail between the steps draws itself from the first step to the last */
  html.js-reveal .how-trail:not(.in) { clip-path: inset(0 100% 0 0); }
  html[dir="rtl"].js-reveal .how-trail:not(.in) { clip-path: inset(0 0 0 100%); }
  html.js-reveal .how-trail.in { transition: clip-path 1.2s ease-in-out 0.3s; }
}
@keyframes s-settle { 0% { scale: 1; } 50% { scale: 1.03; } 100% { scale: 1; } }

/* micro-interactions. The lift uses `translate` so it never fights a reveal's `transform`. */
.card { transition: translate 0.2s ease, box-shadow 0.2s ease; }
.card:hover, .card:focus-within { translate: 0 -2px; box-shadow: 0 2px 0 var(--cream-lip), 0 10px 24px rgb(80 60 20 / 0.12); }
.btn { transition: translate 0.08s ease, box-shadow 0.08s ease, filter 0.2s ease; }
.btn:active { scale: none; translate: 0 2px; box-shadow: none; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--olive); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.18s ease-out; }
html[dir="rtl"] .nav-links a::after { transform-origin: 100% 50%; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.lang summary, .nav-menu summary { transition: background 0.15s ease, border-color 0.15s ease; }
.nav-menu summary { border-radius: 10px; }
.lang summary:hover, .nav-menu summary:hover { background: color-mix(in oklab, var(--sand) 45%, var(--background)); }

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero-copy .lead, .hero .cta-row, .hero .chips { animation: fade 0.2s ease-out both; }
  .hero h1 mark { animation: none; }
  .card, .btn, .nav-links a::after, #faq summary::before, .lang summary, .nav-menu summary, #faq details::details-content { transition: none; }
  .card:hover, .card:focus-within { translate: none; }
  .btn:active { translate: none; }
}