/* =========================================================================
   RouteMatch AI — עיצוב המערכת
   נבנה כמערכת עיצוב קטנה: צבעים כמשתנים, שתי ערכות (כהה/בהיר),
   מצבי נגישות (ניגודיות גבוהה, הגדלת טקסט, צמצום אנימציות) וכיווניות
   דו-כיוונית (RTL/LTR) שנשענת על תכונות לוגיות ולא על ימין/שמאל.
   ========================================================================= */

/* הפלטה: לילה על הכביש, לא לוח בקרה.
   הכחול-ציאן שהיה כאן הוא ברירת המחדל של כל מוצר תוכנה, והוא לא אמר
   כלום על האפליקציה הזאת. הענבר לקוח מהלוגו, הוא נקרא טוב בחושך,
   והוא הצבע שנהג מזהה מהכביש - תמרור, פנס, מונית. */
:root {
  --ink-950: #0d0e11;
  --ink-900: #14161a;
  --ink-850: #1b1e24;
  --ink-800: #22262e;
  --ink-700: #2c313a;
  --ink-600: #3a414d;
  --line: #2c313a;
  --text: #eceef2;
  --text-dim: #a8aeba;
  --text-mute: #7c8491;
  --brand: #f0a92b;
  --brand-2: #4ec98a;
  --accent: #ffd166;
  --danger: #e5604f;
  --ok: #4ec98a;
  --warn: #f0a92b;
  --bg: var(--ink-900);
  --panel: var(--ink-850);
  --panel-2: var(--ink-800);
  --radius: 12px;
  --radius-sm: 8px;
  /* צללים עדינים: צל כבד מסגיר תבנית, ובממשק צפוף הוא רק מוסיף רעש */
  --shadow: 0 6px 20px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .25);
  --focus: #ffd166;
  --maxw: 1180px;
  --fs: 16px;
  --font: "Assistant", "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif;
}

/* הערכה הבהירה חמה במכוון. לבן כחלחל נראה כמו גיליון אלקטרוני;
   נהג פותח את זה באור יום, ועין נחה יותר על נייר ולא על מסך. */
html[data-theme="light"] {
  --ink-950: #eae7e1;
  --ink-900: #f7f6f4;
  --ink-850: #ffffff;
  --ink-800: #f1efec;
  --ink-700: #e5e1da;
  --ink-600: #d6d1c8;
  --line: #e2ded8;
  --text: #1b1d21;
  --text-dim: #5b6069;
  --text-mute: #797f88;
  --brand: #9a5d04;
  --brand-2: #0f7a4e;
  --accent: #8a5a00;
  --danger: #b03326;
  --ok: #0f7a4e;
  --warn: #8a5a00;
  --shadow: 0 6px 18px rgba(40, 32, 20, .08);
  --shadow-sm: 0 1px 3px rgba(40, 32, 20, .07);
  --focus: #9a5d04;
}

html[data-contrast="high"] {
  --text: #ffffff;
  --text-dim: #ffffff;
  --text-mute: #e8eefc;
  --line: #ffffff;
  --panel: #000000;
  --panel-2: #0a0a0a;
  --bg: #000000;
  --brand: #ffc34d;
  --accent: #ffd84d;
}
html[data-contrast="high"][data-theme="light"] {
  --text: #000000; --text-dim: #000000; --text-mute: #1a1a1a; --line: #000000;
  --panel: #ffffff; --panel-2: #ffffff; --bg: #ffffff; --brand: #6b3f00; --accent: #6b3f00;
}

html[data-fs="lg"] { --fs: 18px; }
html[data-fs="xl"] { --fs: 21px; }

html[data-motion="reduce"] *, html[data-motion="reduce"] *::before {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
html[data-links="underline"] a { text-decoration: underline !important; }

* { box-sizing: border-box; }
html { font-size: var(--fs); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.6; letter-spacing: 0; -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
body.has-cookiebar { padding-block-end: 92px; }
/* רשת ביטחון מול גלישה אופקית, שמורגשת במיוחד ב-RTL */
html, body { overflow-x: clip; max-width: 100%; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
small { font-size: .85em; color: var(--text-mute); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code, kbd { font-family: ui-monospace, Consolas, monospace; background: var(--panel-2);
  padding: .1em .35em; border-radius: 6px; font-size: .9em; }

:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}

.wrap { width: min(var(--maxw), 100% - 2rem); margin-inline: auto; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: -100%; inset-inline-start: 1rem; z-index: 100;
  background: var(--accent); color: #11203a; padding: .6rem 1rem; border-radius: 0 0 10px 10px;
  font-weight: 700;
}
.skip-link:focus { inset-block-start: 0; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink-950) 92%, transparent);
  backdrop-filter: blur(10px); border-block-end: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text);
  text-decoration: none; font-size: 1.1rem; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; color: var(--brand); }
.brand-text strong { letter-spacing: -.02em; }
.brand-he {
  font-size: .72em; font-weight: 600; margin-inline-start: .35rem; color: var(--accent);
  letter-spacing: .02em;
}
img.brand-mark { border-radius: 7px; object-fit: cover; }
/* הלוגו ממלא את כל רוחב העמודה שלו. הוא 1024 פיקסלים רוחב, ולכן גם
   במסך רחב הוא לא נמתח מעבר לרזולוציה שלו ולא מטשטש. הפינות והמסגרת
   גורמות לרקע הכהה שלו להיראות כמו חלק מהעיצוב ולא כמו תמונה מודבקת */
.hero-logo {
  display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto;
  margin-block-end: 1rem; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.mainnav { display: flex; gap: .15rem; flex: 1 1 auto; flex-wrap: wrap; }
.mainnav a {
  color: var(--text-dim); text-decoration: none; padding: .45rem .7rem; border-radius: 9px;
  font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.mainnav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.mainnav a[aria-current="page"] { background: var(--panel-2); color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand); }
.topbar-tools { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }
.lang-select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: .35rem .5rem; font-family: inherit; font-size: .9rem;
}

.a11y-panel { border-block-start: 1px solid var(--line); background: var(--panel); }
.a11y-grid { display: grid; gap: .75rem; padding: 1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.a11y-group { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .8rem; }
.a11y-group h3 { font-size: .85rem; text-transform: none; color: var(--text-mute); margin-bottom: .4rem; }
.a11y-row { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.05rem; border-radius: 11px; border: 1px solid transparent;
  background: var(--brand); color: #14161a; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none; min-height: 44px;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-2); }
.btn-accent { background: var(--accent); color: #241a00; }
/* רק לכפתור מלא. btn-ghost שקוף, וטקסט לבן עליו נעלם על רקע בהיר */
html[data-theme="light"] .btn:not(.btn-ghost):not(.btn-danger) { color: #ffffff; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-sm { padding: .35rem .7rem; min-height: 36px; font-size: .88rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--text-dim); cursor: pointer; font-family: inherit;
}
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: var(--brand); color: var(--text); font-weight: 700; }
.chip-static { cursor: default; }

/* ------------------------------------------------------------------ layout */
.section { padding: 2.6rem 0; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm);
}
.card + .card { margin-block-start: 1rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-block-end: .6rem; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.center { text-align: center; }
.stack > * + * { margin-block-start: .75rem; }
.tag {
  display: inline-block; padding: .14rem .5rem; border-radius: 6px; font-size: .76rem;
  font-weight: 700; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
}
.tag-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.tag-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.tag-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.tag-brand { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }

/* ------------------------------------------------------------------- forms */
.field { margin-block-end: .9rem; }
.field > label, .label {
  display: block; font-weight: 600; font-size: .92rem; margin-block-end: .3rem; color: var(--text-dim);
}
.req::after { content: " *"; color: var(--danger); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="time"], input[type="search"], select, textarea {
  width: 100%; padding: .62rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; min-height: 44px;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--text-mute); opacity: 1; }
.hint { font-size: .84rem; color: var(--text-mute); margin-block-start: .25rem; }
.err { font-size: .86rem; color: var(--danger); margin-block-start: .25rem; font-weight: 600; }
.switch { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
.switch input { inline-size: 20px; block-size: 20px; min-height: 0; accent-color: var(--brand); }
.switch span { font-size: .95rem; }
.inline-fields { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { padding: 0 .4rem; font-weight: 700; font-size: .92rem; color: var(--text-dim); }

/* --------------------------------------------------------------- hero/landing */
.hero { padding: 3.2rem 0 2.2rem; position: relative; overflow: hidden; }
/* במקום הילה זוהרת - קו ענבר דק אחד. אומר "יש כאן כיוון" בלי להשתלט */
.hero::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 3px; block-size: 72px; background: var(--brand); border-radius: 2px;
}
.hero-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  font-size: .82rem; color: var(--brand); letter-spacing: .02em; margin-block-end: .6rem; }
.lead { font-size: 1.1rem; color: var(--text-dim); max-width: 60ch; }
.hero-points { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; }
.hero-points li { display: flex; gap: .55rem; align-items: flex-start; color: var(--text-dim); }
/* וי ירוק ליד כל שורה הוא החתימה של דף נחיתה מתבנית. קו ענבר קצר
   עושה את אותה עבודה - מסמן פריט ברשימה - בלי לצעוק */
.hero-points li::before {
  content: ""; flex: 0 0 auto; inline-size: 14px; block-size: 2px;
  background: var(--brand); border-radius: 1px; margin-block-start: .65em;
}
.stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-block-start: 1.4rem; }
.stat b { display: block; font-size: 1.5rem; color: var(--text); }
.stat span { font-size: .85rem; color: var(--text-mute); }

/* מתג הקהל: נהג עצמאי מול מנהל צי */
.aud-switch {
  display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .7rem; margin-block-end: 1.1rem;
}
.aud-switch > span { font-size: .85rem; }
.plan > .tag { align-self: flex-start; margin-block-end: .4rem; }

.demo-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow); }
.demo-out { margin-block-start: .8rem; display: grid; gap: .5rem; }
.kv { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem .55rem;
  background: var(--panel-2); border-radius: 8px; font-size: .9rem; }
.kv b { font-weight: 700; }
.samples { display: flex; gap: .4rem; flex-wrap: wrap; margin-block-start: .5rem; }

.steps { counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand); color: #04121d; font-weight: 800; margin-block-end: .6rem;
}
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem; }
.feature h3 { display: flex; align-items: center; gap: .45rem; }

/* אייקונים: גודל ביחס לטקסט שלצידם, כדי שלא "יתפחו" בשום הקשר */
.ico { inline-size: 1.15em; block-size: 1.15em; flex: 0 0 auto; color: var(--brand);
  vertical-align: -.15em; }
.feature .ico, .eyebrow .ico { inline-size: 1.35em; block-size: 1.35em; }
.stat b .ico { inline-size: 1.6rem; block-size: 1.6rem; }
.lead-meta .ico, .card-head .ico, h2 > .ico, h3 > .ico { inline-size: 1.05em; block-size: 1.05em; }

/* ------------------------------------------------------------------ pricing */
.price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.plan .amount { font-size: 2rem; font-weight: 800; }
.plan .amount small { font-size: .5em; color: var(--text-mute); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; gap: .35rem; flex: 1 1 auto; }
.plan li { font-size: .92rem; color: var(--text-dim); display: flex; gap: .45rem; }
.plan li::before { content: "·"; font-weight: 800; color: var(--brand-2); }

/* -------------------------------------------------------------------- leads */
.lead-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; display: grid; gap: .6rem;
}
.lead-card.is-hot { border-inline-start: 4px solid var(--accent); }
/* הציון חייב להישאר בשורת המסלול. עם flex-wrap הוא נדד לשורה משלו
   בטלפון, וכרטיס אחד תפס חצי מסך */
.lead-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; flex-wrap: nowrap; }
.lead-top > div:first-child { min-inline-size: 0; flex: 1 1 auto; }
.route { font-size: 1.12rem; font-weight: 700; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.route .arrow { color: var(--brand); }
.score {
  display: grid; place-items: center; min-width: 54px; height: 54px; border-radius: 14px;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--panel-2) 0);
  position: relative; font-weight: 800; flex: 0 0 auto;
}
.score::after {
  content: attr(data-score) "%"; position: absolute; inset: 4px; display: grid; place-items: center;
  background: var(--panel); border-radius: 11px; font-size: .82rem;
}
.lead-meta { display: flex; gap: .5rem .9rem; flex-wrap: wrap; font-size: .9rem; color: var(--text-dim); }
.lead-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.reasons li { font-size: .87rem; color: var(--text-mute); display: flex; gap: .4rem; }
.reasons li::before { content: "•"; color: var(--brand-2); }
.raw-quote {
  background: var(--panel-2); border-inline-start: 3px solid var(--line); padding: .55rem .7rem;
  border-radius: 8px; font-size: .9rem; color: var(--text-dim); white-space: pre-wrap;
}
.lead-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.empty {
  text-align: center; padding: 2.4rem 1rem; color: var(--text-mute);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ------------------------------------------- זמינות, משמרות וביקוש */
.status-bar { display: grid; gap: .7rem; border-inline-start: 4px solid var(--brand-2); }
.status-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.dot { inline-size: 12px; block-size: 12px; border-radius: 50%; flex: 0 0 auto; }
.dot-on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.dot-off { background: var(--text-mute); }
.status-bar .field { margin-block-end: 0; }

.shift-grid { display: grid; gap: .4rem; margin-block-start: .6rem; }
.shift-row {
  display: grid; gap: .5rem; align-items: center;
  grid-template-columns: minmax(104px, 1fr) minmax(94px, auto) auto minmax(94px, auto);
}
.shift-row .switch { padding: 0; }
.shift-row input[type="time"] { min-height: 40px; padding: .35rem .5rem; }

.hour-bars {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end;
  block-size: 120px; margin-block-start: .6rem;
}
.hour-bar { display: flex; flex-direction: column; justify-content: flex-end;
  block-size: 100%; text-align: center; }
.hour-bar > i { display: block; min-block-size: 2px; border-radius: 3px 3px 0 0;
  background: var(--brand); }
.hour-bar > span { font-size: .62rem; color: var(--text-mute); padding-block-start: 2px; }

.quick-reply { margin-block-start: .6rem; background: var(--panel-2); }
.price-hint { margin: 0; }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .6rem .7rem; text-align: start; border-block-end: 1px solid var(--line); }
th { background: var(--panel-2); font-size: .85rem; color: var(--text-dim); position: sticky; inset-block-start: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
caption { caption-side: top; text-align: start; padding: .5rem .7rem; color: var(--text-mute); font-size: .88rem; }

.metric { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.metric b { display: block; font-size: 1.65rem; line-height: 1.2; }
.metric span { font-size: .85rem; color: var(--text-mute); }
.bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-block-start: .5rem; }
.bar > i { display: block; height: 100%; background: var(--brand); }

.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-block-end: 1px solid var(--line);
  margin-block-end: 1rem; }
.tabs button {
  background: transparent; border: 0; border-block-end: 2px solid transparent; color: var(--text-dim);
  padding: .55rem .8rem; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0;
}
.tabs button[aria-selected="true"] { color: var(--text); border-block-end-color: var(--brand); }

/* ------------------------------------------------------------------ footer */
.site-footer { border-block-start: 1px solid var(--line); background: var(--ink-950); margin-block-start: 3rem; }
.footer-grid { display: grid; gap: 1.5rem; padding: 2rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.site-footer h3 { font-size: .9rem; color: var(--text-mute); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.site-footer a { color: var(--text-dim); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.footer-legal { border-block-start: 1px solid var(--line); padding: .9rem 0; font-size: .84rem;
  color: var(--text-mute); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* ------------------------------------------------------- cookies and toasts */
.cookie-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; background: var(--panel);
  border-block-start: 1px solid var(--line); box-shadow: var(--shadow); padding: 1rem;
}
.cookie-inner { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; width: min(var(--maxw), 100% - 1rem); margin-inline: auto; }
.cookie-inner p { margin: 0; font-size: .92rem; color: var(--text-dim); }
.cookie-opts { display: flex; gap: .75rem; flex-wrap: wrap; margin-block-start: .4rem; }
.toast-stack { position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; z-index: 80;
  display: grid; gap: .5rem; max-width: 380px; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-inline-start: 4px solid var(--brand);
  border-radius: 10px; padding: .7rem .9rem; box-shadow: var(--shadow); font-size: .92rem;
}
.toast.err { border-inline-start-color: var(--danger); }
.toast.ok { border-inline-start-color: var(--ok); }

.loader { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line);
  border-block-start-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--panel-2), var(--panel), var(--panel-2));
  background-size: 200% 100%; animation: sheen 1.3s linear infinite; border-radius: 10px; height: 92px; }
@keyframes sheen { to { background-position: -200% 0; } }

.prose { max-width: 78ch; }
.prose h2 { margin-block-start: 1.8rem; }
.prose h3 { margin-block-start: 1.2rem; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li { margin-block-end: .35rem; color: var(--text-dim); }
.prose table { margin: 1rem 0; }
.noscript { padding: 2rem 0; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .split, .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-grid; }
  /* בעברית הסרגל העליון צפוף יותר: מקצרים ומאפשרים גלישה לשורה שנייה */
  .topbar-inner { flex-wrap: wrap; row-gap: .35rem; padding-block: .35rem; }
  .topbar-tools { margin-inline-start: auto; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 26px; height: 26px; }
  .nav-auth { min-height: 38px; padding: .35rem .65rem; font-size: .85rem; }
  .icon-btn { width: 36px; height: 36px; }
  .toast-stack { max-width: calc(100vw - 2rem); }
  .mainnav {
    display: none; position: absolute; inset-inline: 0; inset-block-start: 64px;
    background: var(--panel); border-block-end: 1px solid var(--line); flex-direction: column;
    padding: .6rem; gap: .2rem; box-shadow: var(--shadow);
  }
  .mainnav.open { display: flex; }
  .mainnav a { padding: .7rem .8rem; }
  .cookie-inner { grid-template-columns: 1fr; }
  .lang-select { max-width: 92px; }
}
@media print {
  .topbar, .site-footer, .cookie-bar, .toast-stack, .lead-actions { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------- יום עבודה משורשר */
.plan-list { display: flex; flex-direction: column; gap: .6rem; }
.plan-step {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: .8rem;
  padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.plan-step + .plan-step { position: relative; }
.plan-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-time strong { font-size: 1.1rem; }
.plan-body p { margin: .2rem 0 0; }
@media (max-width: 560px) {
  .plan-step { grid-template-columns: 1fr; gap: .3rem; }
}

/* ------------------------------------------------------ מפת ביקוש */
.heatmap { font-size: .72rem; }
.heatmap th { padding: .25rem .3rem; font-size: .7rem; white-space: nowrap; }
.heatmap td.heat {
  padding: .3rem .2rem; text-align: center; min-width: 1.6rem;
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}
/* חמש דרגות, כדי שגם מי שאינו מבחין בגוונים יראה הבדל ברור */
.heat-0 { background: var(--panel-2); }
.heat-1 { background: color-mix(in srgb, var(--brand) 18%, var(--panel-2)); }
.heat-2 { background: color-mix(in srgb, var(--brand) 38%, var(--panel-2)); }
.heat-3 { background: color-mix(in srgb, var(--brand) 60%, var(--panel-2)); color: #fff; }
.heat-4 { background: color-mix(in srgb, var(--brand) 85%, var(--panel-2)); color: #fff;
  font-weight: 600; }

/* חוות דעת על מחיר בתוך כרטיס פנייה */
.price-verdict { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.price-verdict .suggest { font-weight: 600; }

/* ------------------------------------------------- שיתוף מיקום חי */
.loc-block {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; margin-block: .7rem;
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}
.loc-block p { margin: 0 0 .35rem; }
.loc-block .btn-row { margin-block-start: .5rem; align-items: center; }

/* ------------------------------------- יעד הכנסה ומצב נהיגה */
.focus-row {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; margin-block-end: .8rem;
  background: var(--panel-2);
}
.focus-row.focus-slim { border: 0; background: none; padding: 0; }
.focus-row .goal-head { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin-block-end: .4rem; }
.focus-row .bar { margin-block: .3rem .5rem; }
.focus-row p { margin: .2rem 0; }
.focus-row .btn-row { margin-block-start: .5rem; align-items: center; flex-wrap: wrap; }
.dnd-on { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-block-start: .5rem; }
.warn-note { color: var(--warn, #d49a2a); }
.dest-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-block: .6rem; }

/* ===================================================== רדאר ביקוש */
.radar-card { position: relative; overflow: hidden; }
/* ההילה הייתה בסדר בכחול חיוור; בענבר היא הפכה לכתם כתום שגונב את
   העין מהנתונים עצמם. 20% ירדו ל-7%, וזה מספיק כדי לרמז על עומק */
.radar-card::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -20%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%);
  pointer-events: none;
}
.radar-headline {
  font-size: 1.05rem; font-weight: 600; margin-block: .2rem .7rem;
  color: var(--text);
}
.forecast-card { border-inline-start: 4px solid var(--brand); }

.radar-map { width: 100%; height: auto; max-height: 230px; display: block;
  margin-block: .5rem .9rem; }
.radar-bg { fill: var(--panel-2); }
.radar-grid { stroke: var(--line); stroke-width: .5; opacity: .55; }
.radar-halo { fill: color-mix(in srgb, var(--brand) 16%, transparent); }
.radar-dot { fill: color-mix(in srgb, var(--brand) 70%, transparent); }
.radar-dot.is-top { fill: var(--accent, var(--brand)); }
.radar-val { font-size: 9px; font-weight: 700; text-anchor: middle; fill: #fff; }
/* text-anchor מתהפך ב-RTL, ולכן direction מוגדר במפורש */
.radar-label { font-size: 8.5px; text-anchor: middle; fill: var(--text-dim);
  direction: rtl; }
.radar-me { fill: none; stroke: var(--ok, #35c37d); stroke-width: 2.5; }
.radar-me-label { fill: var(--ok, #35c37d); font-weight: 700; }

.area-list { display: flex; flex-direction: column; gap: .55rem; }
.area-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .7rem; background: var(--panel);
}
.area-card.is-top { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.area-top { display: flex; align-items: center; gap: .7rem; }
.area-num { text-align: center; min-width: 54px; }
.area-num b { display: block; font-size: 1.6rem; line-height: 1; }
.area-num small { font-size: .7rem; color: var(--text-mute); }
.area-name { display: flex; flex-direction: column; }
.area-name strong { font-size: 1.05rem; }
.area-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin-block-start: .35rem; }
.area-why { margin-block-start: .3rem; }
@media (max-width: 480px) {
  .area-num b { font-size: 1.35rem; }
  .radar-map { max-height: 190px; }
}

/* ------------------------------------------------- שורת מצב מצומצמת */
.status-bar { padding: .75rem .9rem; }
.status-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.status-spacer { flex: 1 1 auto; }
.status-more { margin-block-start: .6rem; border-block-start: 1px solid var(--line);
  padding-block-start: .6rem; }
.status-more > summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-dim);
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem 0; min-height: 32px;
}
.status-more > summary::-webkit-details-marker { display: none; }
.status-more > summary::before {
  content: ""; inline-size: 7px; block-size: 7px; border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .15s ease; margin-block-end: 3px;
}
.status-more[open] > summary::before { transform: rotate(-135deg); margin-block-end: -3px; }
.status-more > summary:hover { color: var(--text); }
.status-more-body { padding-block-start: .5rem; display: grid; gap: .75rem; }

/* --------------------------------------------- יעד יומי ומצב נהיגה */
.focus-slim { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding-block-end: .55rem; margin-block-end: .55rem;
  border-block-end: 1px solid var(--line); }
.dnd-pick { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.dnd-pick .chip { min-inline-size: 38px; justify-content: center; font-variant-numeric: tabular-nums; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--brand);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--accent); }

/* ------------------------------------------- כותרת מסך: קטנה בטלפון */
@media (max-width: 560px) {
  .section > .wrap > h1 { font-size: 1.45rem; margin-block-end: .25rem; }
  /* תת-הכותרת מסבירה את המסך, ואחרי פעם אחת היא רק גוזלת גובה */
  .section > .wrap > h1 + p.muted { font-size: .88rem; margin-block-end: .7rem; }
  .cookie-inner p { font-size: .85rem; }
  body.has-cookiebar { padding-block-end: 118px; }
}

/* ------------------------------------------------- באנר עוגיות מצומצם */
.cookie-details > summary {
  cursor: pointer; font-size: .85rem; color: var(--text-dim);
  padding: .3rem 0; min-height: 30px; display: inline-flex; align-items: center;
}
.cookie-details > summary:hover { color: var(--text); }
.cookie-details .cookie-opts { margin-block-start: .5rem; }
.cookie-details[open] .cookie-opts { display: flex; }

/* ------------------------------------------------- כרטיס פנייה בטלפון */
@media (max-width: 560px) {
  .lead-card { padding: .85rem .9rem; gap: .45rem; }
  .route { font-size: 1.05rem; }
  .score { min-width: 44px; height: 44px; border-radius: 11px; font-size: .9rem; }
  .lead-meta { gap: .35rem .7rem; font-size: .86rem; }
  /* שורת הפעולות גוללת לרוחב במקום להישבר לארבע שורות */
  .lead-actions {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .4rem;
    padding-block-end: .25rem; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .lead-actions::-webkit-scrollbar { display: none; }
  .lead-actions > * { flex: 0 0 auto; }
  .lead-actions input { inline-size: 96px; }
}

/* ציטוט ההודעה המקורית: שתי שורות מספיקות כדי לזהות את הפנייה.
   לחיצה פותחת את כולה - לפעמים הפרט החשוב מסתתר בסוף */
.raw-quote { cursor: pointer; }
.raw-quote:not(.is-open) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------- תפריט בטאבלט ובמסך בינוני
   מעל 760 התפריט המלא מוצג, ועם 11 פריטים בעברית הוא נשבר לשלוש שורות
   ודוחף את התוכן אל מחוץ למסך. רצועה אחת שנגללת לצד שומרת על הגובה
   ועל הגישה לכל הפריטים. */
@media (min-width: 761px) and (max-width: 1150px) {
  .mainnav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; mask-image: linear-gradient(
      to left, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: 0 0 auto; }
}

/* ------------------------------------------------- התאמה למכשיר מגע
   הקובע הוא סוג הקלט ולא רוחב המסך: טאבלט גדול הוא מכשיר מגע גם ב-1200
   פיקסלים, ועכבר נשאר מדויק גם במסך צר. pointer: coarse מזהה אצבע. */
@media (pointer: coarse) {
  .chip, .linkish, summary,
  /* ספציפיות גבוהה יותר נדרשת כאן: לכללים האלה יש גובה משלהם במקום אחר */
  .status-more > summary, .cookie-details > summary,
  .icon-btn, .menu-btn, .nav-auth {
    min-block-size: 44px;
  }
  .icon-btn, .menu-btn { min-inline-size: 44px; }
  summary { display: flex; align-items: center; }
  .chip { padding-inline: .9rem; }
  .linkish { display: inline-flex; align-items: center; }
  /* ריווח בין יעדי מגע סמוכים, כדי שלא ילחצו על הסמוך בטעות */
  .dnd-pick { gap: .5rem; }
  .lead-actions { gap: .55rem; }
  .btn-sm { min-height: 44px; }
  /* טווח נגיעה גדול יותר לקישורים בתוך טקסט */
  .site-footer a, .hint a { padding-block: .25rem; display: inline-block; }
}

/* --------------------------------------------- בלוק קוד להעתקה */
pre.codeblock {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .75rem; margin: .4rem 0; overflow-x: auto;
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem;
  color: var(--text); direction: ltr; text-align: start; white-space: pre;
}

/* ------------------------------------------- שורת הצעה / מבקש */
.offer-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; padding-block: .6rem;
  border-block-start: 1px solid var(--line);
}
.offer-row:first-of-type { border-block-start: 0; }
.offer-row > div:first-child { min-inline-size: 0; flex: 1 1 auto; }
@media (max-width: 560px) {
  .offer-row { flex-direction: column; align-items: stretch; gap: .5rem; }
}

/* ------------------------------------------------------------------- tempo */
/* שעון המרוץ על כרטיס הפנייה: מספרים בעמודה יציבה, בלי קפיצות ברוחב */
.tag.race { font-variant-numeric: tabular-nums; }

.tempo-pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .75rem; margin-block: .4rem .8rem;
}
.tempo-stat { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.tempo-num {
  font-size: 1.55rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tempo-stat .tag { align-self: flex-start; }
.tempo-vs { color: var(--text-dim); font-size: .85rem; }
@media (max-width: 400px) {
  .tempo-num { font-size: 1.3rem; }
}

/* --------------------------------------------------------------- landing */
.section-lead { max-inline-size: 60ch; }

/* הודעה אמיתית מקבוצה, ומתחתיה מה שיצא ממנה. הבועה נשארת בכיוון
   הטקסט המקורי כדי שהיא תיראה כמו שהיא נראית בקבוצה */
.proof-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.proof-case {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.proof-msg {
  margin: 0; padding: .7rem .85rem; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  font-size: .95rem; line-height: 1.5;
}
.proof-arrow { color: var(--text-dim); text-align: center; font-size: 1.1rem; line-height: 1; }
.proof-out {
  margin: 0; font-weight: 700; line-height: 1.55;
  border-inline-start: 3px solid var(--ok); padding-inline-start: .7rem;
}
.proof-out.is-noise {
  border-inline-start-color: var(--text-dim); font-weight: 600; color: var(--text-mute);
}
.proof-note { margin: 0; color: var(--text-dim); font-size: .88rem; }

.edge-list { display: grid; gap: 1.6rem; }
.edge-item { max-inline-size: 72ch; }
.edge-item h3 { margin-block-end: .3rem; }
.edge-item p { margin: 0; line-height: 1.72; }

/* רשימת יכולות ולא כרטיסים: שורה לכל דבר, בלי למתוח אותו לפסקה */
.spec-list { list-style: none; padding: 0; margin-block-start: 1rem;
  display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.spec-list li {
  display: flex; flex-direction: column; gap: .1rem;
  padding-inline-start: .85rem; border-inline-start: 2px solid var(--line);
}
.spec-list b { font-size: .97rem; }
.spec-list .muted { font-size: .87rem; line-height: 1.5; }

.faq { display: grid; gap: .5rem; max-inline-size: 78ch; }
.faq-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1.05rem;
}
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-item[open] summary { margin-block-end: .5rem; }
.faq-item p { margin: 0; line-height: 1.7; color: var(--text-mute); }

.rider-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  background: var(--panel); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.rider-band h3 { margin: 0 0 .2rem; }
.rider-band p { margin: 0; max-inline-size: 62ch; }

.pilot-card { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.pilot-contact { font-size: 1.02rem; }
.pilot-contact a { color: inherit; }

.stop-row { display: flex; gap: .5rem; align-items: center; }
.stop-row select { flex: 1 1 auto; min-inline-size: 0; }
.rider-extra { margin-block: .6rem; }
.rider-extra summary { cursor: pointer; font-weight: 700; }
.when-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.when-pick input[disabled] { opacity: .45; }