/* ============================================================
   freesbe rental — Components
   Every block mirrors a Figma node; node ids are noted in comments.
   ============================================================ */

/* ------------------------------------------------------------
   Page width.

   The design exists at 1440 only. The page used to BE a 1440 box
   (width: min(100%, --page-width)), which on a 1920 screen framed the
   whole site — hero photo included — in a 1440 window with 240px of
   empty page either side.

   Above 1440 the box is gone: the photo, the washes and the section
   grounds run edge to edge, and every content block keeps exactly the
   width it has at 1440 and centres. Nothing below 1441 changes, and
   1440 itself renders byte for byte as before.

   Widening the content column was tried as well (1240 -> 1653, the same
   86% of the viewport the design uses at 1440) and rejected: the card
   rows, the advantage grid, the offers carousel and the hero search
   panel all carry Figma's fixed widths inside them, so a wider column
   only opened gaps — a 615px CTA, arrows stranded at the edges, a text
   band floating in the middle of itself. The screenshots are in the
   changes panel's notes.
   ------------------------------------------------------------ */
.page {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
}

/* The three blocks that were sized by subtracting a padding from the PAGE
   rather than by a container — so they tracked the viewport instead of
   stopping at the design width. The caps below are the widths they already
   have at 1440: header 1440-80, faq 1440-48, footer 1440 with its own 40
   of padding. */
.site-header__inner { max-width: var(--container-wide); }
.site-footer__top   { max-width: var(--page-width); margin-inline: auto; }
.faq                { max-width: 1392px; }

/* the pre-change page, behind the changes panel's toggle */
:root[data-pre-wide] .page { width: min(100%, var(--page-width)); }
:root[data-pre-wide] .site-header__inner,
:root[data-pre-wide] .site-footer__top,
:root[data-pre-wide] .faq { max-width: none; }

/* ============================================================
   Buttons  (shared)
   ============================================================ */

/* Main button — yellow  (I…;4194:81242) */
.btn-yellow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 54px;
  padding: 10px var(--sp-16) var(--sp-8);
  border-radius: var(--r-8);
  background: var(--main-yellow);
  color: var(--gs-black);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  transition: filter .15s ease, transform .15s ease;
}
.btn-yellow:hover { filter: brightness(.94); }
.btn-yellow:active { transform: translateY(1px); }

/* Main button — turquoise  (19364:13647) */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  width: 100%;
  height: 40px;
  padding: 10px var(--sp-22) var(--sp-8);
  border-radius: var(--r-4);
  background: var(--main-primary);
  color: var(--gs-black);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  transition: filter .15s ease, transform .15s ease;
}
.btn-primary:hover { filter: brightness(.94); }
.btn-primary:active { transform: translateY(1px); }

/* Ghost text button with chevron  (18564:3992) */
.btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 40px;
  padding: 10px var(--sp-22) var(--sp-8);
  border-radius: var(--r-4);
  color: var(--gs-black);
  font-size: 22px;
  line-height: var(--h5-lh);
  direction: ltr;
  transition: opacity .15s ease;
}
.btn-link:hover { opacity: .65; }
.btn-link .icon { --icon-size: 20px; }
/* The full-width variant — the "see all" line under a section. The node
   (18564:3992) reads 18px in Third gray with a 4px gap, not the 22px/8 the
   base class carries; checked on both of this page's two instances
   (12117:163104 and 13260:173939). Scoped to --block so the inline .btn-link
   in a .sec-head, which comes from a different node, is left alone. */
.btn-link--block {
  width: 100%;
  gap: var(--sp-4);
  font-size: var(--font-size-18, 18px);
  color: var(--gs-gray-3rd);
  line-height: normal;
}

/* ============================================================
   Header   (12220:157506 · desktop/rental/header)
   ============================================================ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 100px;
  padding: 30px var(--sp-40);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__inner {
  direction: ltr;
  flex: 1 0 0;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__utils { display: flex; align-items: center; gap: var(--sp-8); height: 40px; }

.util-pill {
  height: 40px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  color: var(--gs-white);
  font-size: var(--h4-size);
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.util-pill:hover { background: var(--glass-fill-hover); }
.util-pill--circle { width: 40px; }
.util-pill--wide   { width: 84px; padding: var(--sp-12) var(--sp-16); gap: var(--sp-4); }

.header__nav { display: flex; align-items: center; gap: 21px; }
.nav-pill {
  height: 40px;
  padding: var(--sp-12) 18px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  color: var(--gs-white);
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  white-space: nowrap;
  transition: background .15s ease;
}
/* The set (19412:4238) holds exactly two variants — the glass Default
   and active (19412:4239) — so hover and the current-page state share
   the one active fill. Measured off a ×4 export of 19412:4239: the
   implied alpha came out 0.602 / 0.602 / 0.600 against Turq 4, which
   is rgba(14,132,130,.6) on the nose. This replaces an earlier
   rgba(255,255,255,.22) hover that was my guess, not a Figma value. */
.nav-pill:hover,
.nav-pill.is-active { background: var(--turq4-60); }
.nav-pill .icon { --icon-size: 24px; }

.header__logo { width: 180px; display: flex; flex-direction: column; align-items: flex-end; }
.header__logo img { width: 128.289px; height: 37.361px; }

/* ------------------------------------------------------------
   Currency dropdown  (19364:13849 · desktop&MOBILE/rental/pricing dropdown)
   Closed it is a glass pill. Open, the trigger squares off its
   bottom corners and the list hangs 4px below it — the same 4px
   gap the Figma component uses between trigger and menu.
   ------------------------------------------------------------ */
.cur { position: relative; width: 84px; }
.cur__trigger {
  width: 84px;
  height: 40px;
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  color: var(--gs-white);
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  white-space: nowrap;
  transition: background .15s ease, border-radius .18s ease;
}
.cur__trigger:hover { background: var(--glass-fill-hover); }
.cur.is-open .cur__trigger { border-radius: 24px 24px 0 0; }
.cur__trigger .icon { --icon-size: 24px; transition: transform .2s ease; }
.cur.is-open .cur__trigger .icon { transform: rotate(180deg); }

.cur__menu {
  position: absolute;
  top: calc(100% + var(--sp-4));
  inset-inline: 0;
  z-index: 30;
  padding: var(--sp-4);
  border-radius: 0 0 var(--r-8) var(--r-8);
  background: var(--dropdown-bg);
  flex-direction: column;
  display: none;
}
.cur.is-open .cur__menu { display: flex; }

/* one row  (19364:13844) — Default, and Variant2 on hover */
.cur__row {
  width: 100%;
  height: 40px;
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--dropdown-bg);
  color: var(--gs-black);
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.cur__row:hover { background: var(--turq4-32); color: var(--gs-white); }
/* the footer sits on light grey, so its trigger takes the dark ink */
.cur--dark .cur__trigger { color: var(--gs-black); }

/* ------------------------------------------------------------
   Language toggle  (19364:13837 · desktop&mobile/rental/language)
   FALSE keeps the knob at the start of the track and reads עב;
   TRUE slides it to the end and reads EN.
   ------------------------------------------------------------ */
.lang-toggle {
  position: relative;
  width: 76px;
  height: 40px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  transition: background .15s ease;
}
.lang-toggle:hover { background: var(--glass-fill-hover); }
.lang-toggle__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  font-size: var(--h4-size);
  line-height: normal;
  color: var(--gs-white);
  transition: left .25s cubic-bezier(.4, 0, .2, 1);
}
.lang-toggle.is-en .lang-toggle__knob { left: 36px; }   /* 76 − 40 */
.lang-toggle--dark .lang-toggle__knob { color: var(--gs-black); }
@media (prefers-reduced-motion: reduce) {
  .lang-toggle__knob { transition: none; }
}

/* ============================================================
   Hero   (12220:157342)
   ============================================================ */
.hero {
  position: relative;
  height: 820px;
  overflow: hidden;
}
/* 13281:174977 — the photo is wider than the hero and sits shifted left, so it
   is placed rather than cover-fitted: 130.34% wide against the hero's width,
   pulled back 6.27%. Both are percentages of the hero, so the crop holds at
   every width. The source is 1600x699 and 130.34% x 100% keeps that ratio to
   within 0.003%, which is why nothing stretches. */
.hero__bg {
  position: absolute;
  left: -6.27%;
  top: 0;
  width: 130.34%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
/* 13281:175147 — two washes, not one. The yellow bloom at the very bottom was
   already here; the dark one under it is the new half, and it is what gives the
   upper area its contrast: transparent along the bottom edge, rising to 28%
   black by 27% of the height and holding that to the top. Order matters —
   the yellow is listed first because it sits above. */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 241, 117, 0)    90.248%,
      rgba(255, 241, 120, 0.05) 92.686%,
      rgba(255, 241, 123, 0.10) 95.124%,
      rgba(255, 242, 126, 0.15) 97.562%,
      rgba(255, 242, 129, 0.20) 100%),
    linear-gradient(0deg,
      rgba(255, 255, 255, 0)  0%,
      rgba(0, 0, 0, 0.28)     27.045%);
}
.hero__glow {
  position: absolute;
  left: 783.33px;
  top: 756.36px;
  width: 270.642px;
  height: 78.367px;
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: var(--sp-40);
  right: var(--sp-40);
  top: 156px;
  width: auto;
  max-width: var(--container-wide);
  margin-inline: auto;
  height: 615px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  width: 100%;
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hero__title p {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: normal;
  color: var(--gs-white);
  text-align: center;
  text-transform: uppercase;
}
.hero__title-1 { width: 474.619px; }
.hero__title-2 {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.hero__title-2 img { width: 169.341px; height: 49.317px; }

/* ---------- Search panel  (19364:13744 · desktop/rental/search fileds) ---------- */
.search-panel {
  width: 100%;
  max-width: var(--container-wide);
  padding: var(--sp-16) var(--sp-20) var(--sp-32);
  border-radius: var(--r-16);
  /* the fill checks out: solved row by row against the canvas it is a flat
     0.644 white, no gradient. The canvas ALSO shows a 1px brighter rim around
     the panel — but it is not reproduced here, because the photo behind the
     panel's own edges is the one place this page still disagrees with Figma,
     and every rim value fitted against it came out different on each side
     (0.39 left and top, 0.62 right, negative at the bottom). Guessing one
     would be painting over that gap instead of reporting it. Open. */
  background: var(--white-64);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--sp-24);
}
.search-panel__row {
  direction: ltr;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
  width: 100%;
}
.search-panel__cta {
  flex: 1 0 0;
  min-width: 0;
  padding-top: 41px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.search-panel__cta .btn-yellow { width: 100%; }

.search-panel__fields {
  /* 13256:172765 — fixed 1134; the CTA column is whatever the 1320 inner row has
     left over (162), so the button narrowed without anyone setting its width */
  width: 1134px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--sp-16);
}
/* full width, or the flex-1 toggle field has no free space to claim and the
   whole row shrinks to its content and drifts right */
.search-panel__line { display: flex; align-items: flex-end; gap: var(--sp-24); width: 100%; }

/* date + time cluster */
.date-group { display: flex; align-items: center; gap: var(--sp-8); width: 705px; }
.date-pair  { flex: 1 0 0; min-width: 0; display: flex; align-items: center; }

.date-cell {
  width: 174.75px;
  height: 55px;
  padding: var(--sp-6) var(--sp-16);
  background: var(--gs-white);
  direction: ltr;          /* so the glyph sits after the texts, as on the canvas */
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* the group hugs the cell's right edge, 16px in */
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.date-cell:hover { background: #f4feff; }
.date-cell--start { border-radius: var(--r-8) 0 0 var(--r-8); margin-right: -1px; }
.date-cell--end   { border-radius: 0 var(--r-8) var(--r-8) 0; border-left: 2.5px solid var(--gs-gray-2); }
/* the cell content is a row: the two stacked texts, then the glyph
   to their right  (19364:13762 — 129.5 wide = 111.5 text + 2 gap + 16 icon) */
.date-cell__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
}
.date-cell__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-6);
  line-height: var(--h5-lh);
  text-align: right;
}
.date-cell__label {
  width: 111.5px;
  direction: rtl;          /* Hebrew shapes right-to-left inside the LTR row */
  text-align: right;
  font-size: var(--h7-size);
  font-weight: 300;
  line-height: var(--h5-lh);
  color: var(--gs-gray-3rd);
}
.date-cell__value {
  text-align: right;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.date-cell .icon { --icon-size: 16px; color: var(--gs-black); }

/* ------------------------------------------------------------
   Toggle field  (19364:13713 · desktop/rental/toggle field)

   Default  295x98, gap 12 — one 295px field, text 16px, glyph 24px
   active   295x94, gap  8 — TWO fields side by side, text 12px,
                             glyph 16px, and the label changes to
                             "החזרה לאותו סניף"
   ------------------------------------------------------------ */
.toggle-field {
  /* fills what Date1 leaves of the 1134 column — 405 at this width */
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-12);
  overflow: clip;
}
.toggle-field.is-active { gap: var(--sp-8); }

.switch-row {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
}
.switch-row span {
  direction: rtl;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-gray-3rd);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* iOS Toggle/glass — the track is translucent white, not grey, and the
   ON track is turquoise at 24% over it. Off shows an "O" ring on the
   right, On a 1x10 bar on the left. */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  border-radius: 15.5px;
  background: rgba(255, 254, 254, .42);   /* two stacked 24% rects */
  transition: background .2s ease;
}
.switch::before {                          /* Off Label: r4.5 ring at cx 38.5 */
  content: "";
  position: absolute;
  top: 50%;
  left: 38.5px;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid #B2B2B2;
  border-radius: 50%;
  transition: none;
}
.switch::after {                           /* Knob: 27x27, 2px inset */
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 13.5px;
  background: var(--gs-white);
  transition: left .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.switch[aria-checked="true"] {
  background:
    linear-gradient(rgba(0, 214, 209, .24), rgba(0, 214, 209, .24)),
    rgba(255, 254, 254, .24);
}
.switch[aria-checked="true"]::before {     /* On Label: 1x10 bar at x 11 */
  left: 11px;
  width: 1px;
  height: 10px;
  margin: -5px 0 0 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.switch[aria-checked="true"]::after {
  left: 22px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .12);
}
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

/* the single field  (19364:13719) */
.location-input {
  width: 100%;
  height: 55px;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-8);
  background: var(--gs-white);
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
}
.location-input input {
  flex: 1 0 0;
  min-width: 0;
  height: 23px;
  border: 0;
  outline: none;
  background: transparent;
  direction: rtl;
  text-align: right;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
}
.location-input input::placeholder { color: var(--gs-black); }
/* 16px here, against 24 in the older component */
.location-input img { width: 16px; height: 16px; flex-shrink: 0; }

/* the pair that replaces it when the switch is on  (19364:13730) */
.loc-pair {
  direction: ltr;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  width: 100%;
}
.loc-field {
  flex: 1 0 0;
  min-width: 0;
  height: 55px;
  /* Figma has padding 6/10 and gap 8, which leaves 99.5px for the text.
     At the 16px Ben asked for, "שם תחנת והורדה" needs 105.2px, so the
     padding and gap give back the 8px it needs. */
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-8);
  background: var(--gs-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
}
.loc-field input {
  flex: 1 0 0;
  min-width: 0;
  height: 23px;
  border: 0;
  outline: none;
  background: transparent;
  direction: rtl;
  text-align: right;
  /* Figma has 12px here; raised to 16px on Ben's call so it matches
     the rest of the panel */
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
}
.loc-field input::placeholder { color: var(--gs-black); }
.loc-field img { width: 16px; height: 16px; flex-shrink: 0; }

/* second line — coupon + age */
.search-panel__line2 {
  direction: ltr;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--sp-8);
  width: 100%;
}

/* 20096:8536 — the small button beside the coupon. 52 wide is not a chosen
   number: 16 padding + a 20px glyph + 16 padding. Same translucent white as the
   coupon beside it, so the two read as one cluster. */
.sp-arrow {
  height: 54px;
  padding: var(--sp-6) var(--sp-16);
  border: 0;
  border-radius: var(--r-8);
  /* glass, like the panel it sits on: a vertical 16→34% white with a 1px rim,
     which is what the exported flat 24% is the midpoint of */
  background: linear-gradient(180deg, var(--chip-glass-top), var(--chip-glass-bottom));
  box-shadow: inset 0 0 0 1px var(--chip-rim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
/* the node reports one named style, Greayscale/Third gray — the arrow is #595959,
   not black. Measured off the canvas: the glyph's ink mass matches a 1px stroke
   at #595959 (17.4px²) and not one at #262626 (12.9px² for the same geometry). */
.sp-arrow .icon { --icon-size: 20px; color: var(--gs-gray-3rd); transform: scaleX(-1); }
/* ------------------------------------------------------------
   Discount code  (19364:13779 · desktop&mobile/rental/discount code)
   Three states in the component set:
     FALSE  143.5x54  rgba(255,255,255,.08), ink #262626, glyph #595959
     hover  143.5x54  rgba(14,132,130,.32),  ink #FFFEFE
     TRUE   186x54    #FFFEFE, an ✕ appears at the start and the label
                      becomes the field's placeholder
   The stroke is drawn inside the shape in Figma, so it is an inset
   shadow here — a real border would grow the 54px box.
   ------------------------------------------------------------ */
.coupon {
  width: 143.5px;
  height: 54px;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 .5px var(--turq-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  white-space: nowrap;
  cursor: pointer;
  transition: width .22s cubic-bezier(.4, 0, .2, 1),
              background .15s ease, color .15s ease;
}
/* the glyph is mirrored on the canvas */
.coupon .icon--coupon { --icon-size: 20px; color: var(--gs-gray-3rd); transform: scaleX(-1); }

/* hover  (20016:4693) */
.coupon:hover { background: var(--turq4-32); color: var(--gs-white); }
.coupon:hover .icon--coupon { color: var(--gs-white); }

/* open  (19364:13783) */
.coupon.is-open {
  width: 186px;
  background: var(--gs-white);
}
/* the hero panel overrides the component default: 24% white, so the coupon and
   the arrow beside it read as one translucent cluster on the photo */
.search-panel .coupon.is-open {
  /* same glass chip as .sp-arrow beside it, so the two read as one cluster */
  background: linear-gradient(180deg, var(--chip-glass-top), var(--chip-glass-bottom));
  box-shadow: inset 0 0 0 1px var(--chip-rim);
  color: var(--gs-black);
  cursor: default;
}
.coupon.is-open .icon--coupon { color: var(--gs-gray-3rd); }

.coupon__label { pointer-events: none; }
.coupon.is-open .coupon__label { display: none; }

/* Two things an <input> gets wrong here that a Figma text node does not.
   Chrome gives every input 1px 2px of padding of its own: with only 2px of
   slack left in the 186px box that was enough to shave the first letter off
   "הכניסו". And the canvas node is [text-box-trim:trim-both], which centres the
   CAP box in the 42px content area; an input centres the full line box instead
   and lands 2px high. The asymmetric padding puts those 2px back — it cannot be
   done with `text-box`, which does not reach an input's inner text. */
.coupon__input {
  display: none;
  flex: 1 0 0;
  min-width: 0;
  padding: 4px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  text-align: right;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
}
.coupon__input::placeholder { color: var(--gs-black); }
.coupon.is-open .coupon__input { display: block; }

/* the ✕ (13249:170774) is a 16px button holding the bare cross — see
   .icon--close-x. The mask is already drawn at 45°, so nothing is rotated here. */
.coupon__close {
  display: none;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  /* Third gray, like the tag glyph on the other end — the ✕ reads a shade
     lighter than the placeholder beside it. Same ink-mass measurement as the
     arrow button: 17.4px² of coverage, which is #595959, not #262626. */
  color: var(--gs-gray-3rd);
  transition: opacity .15s ease;
}
.coupon__close .icon { --icon-size: 16px; }
.coupon__close:hover { opacity: .6; }
.coupon.is-open .coupon__close { display: block; }

@media (prefers-reduced-motion: reduce) {
  .coupon { transition: background .15s ease, color .15s ease; }
}

.age-group { width: 202px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-8); }
.age-group__label {
  width: 100%;
  text-align: right;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-gray-3rd);
}
.age-dropdown {
  position: relative;
  width: 100%;
  height: 54px;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-8);
  background: var(--gs-white);
  border: .5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  transition: background .15s ease;
}
.age-dropdown:hover { background: var(--turq-3); }

/* dropdown list (behaviour) */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 20;
  background: var(--gs-white);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) 0;
  display: none;
}
.dropdown.is-open .dropdown__menu { display: block; }
.dropdown__item {
  display: block;
  width: 100%;
  padding: 10px var(--sp-16);
  text-align: right;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  border-bottom: .5px solid var(--gs-gray-2);
  transition: background .12s ease;
}
.dropdown__item:last-child { border-bottom: 0; }
.dropdown__item:hover { background: var(--turq-3); }

/* ---------- Quick search  (11162:112477) ---------- */
.quick-search {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--r-16);
  background: var(--black-33);
}
.quick-search__chips { display: flex; align-items: center; gap: var(--sp-12); }
/* Quick search tab  (19364:13903 Default · 19364:13907 active)
   The set has exactly two variants, so hover and selected share the
   one active look. The stroke is inset rather than a border: Figma
   draws it inside, so a real border pushes the 16px padding out by
   1px and the "7 מקומות" chip measures 117 instead of 115. */
.chip {
  height: 34px;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-40);
  background: var(--white-60);
  box-shadow: inset 0 0 0 1px var(--turq-4);
  color: var(--gs-black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  transition: background .15s ease, color .15s ease;
}
.chip:hover,
.chip.is-selected {
  background: var(--turq4-60);
  color: var(--gs-white);
}
.chip:focus-visible {
  outline: 2px solid var(--gs-white);
  outline-offset: 2px;
}
/* both the mask icon and the label take the chip's own colour, so the
   one rule above flips them together */
.chip .icon { --icon-size: 14px; color: inherit; }
.chip span {
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  color: inherit;
  text-shadow: var(--shadow-text);
  white-space: nowrap;
}
.quick-search__label { display: flex; align-items: center; gap: var(--sp-8); }
.quick-search__label span {
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  color: var(--gs-white);
  text-shadow: var(--shadow-text);
  white-space: nowrap;
}
.quick-search__label .icon { --icon-size: 14px; color: var(--gs-white); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.body-sections {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding-top: 70px;
}
/* The wash carried down from the hero. It was yellow here on the assumption
   that the hero's glow continues below it; the canvas says otherwise. Read off
   the render of 12117:163063, whose top row sits 70px into this band: solving
   each row for the colour and the length that produce it over the page wash
   gives #BFDCDC fading out over 171px, with a residual under 2 per channel
   across the whole ramp — a pale turquoise, not a yellow. */
.body-sections::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 171px;
  pointer-events: none;
  background: linear-gradient(180deg, #BFDCDC 0%, rgba(191, 220, 220, 0) 100%);
}
.body-sections > * { position: relative; }
.sec { display: flex; flex-direction: column; align-items: center; }
/* The two section widths the design uses. --bleed runs edge to edge,
   --wrap is the 1240 container held off the edges by the gutter. Both
   resolve to exactly the old pixel values at a 1440 viewport. */
.sec--bleed { width: 100%; }
.sec--wrap  { width: min(100% - 2 * var(--gutter), var(--container)); }
.sec-title  { max-width: 100%; }
.sec-title {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  color: var(--gs-black);
  text-align: center;
  text-transform: uppercase;
}
/* title + "see all" link on one line */
.sec-head {
  direction: ltr;
  width: 1243.351px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec-head .sec-title { white-space: nowrap; }

/* logo inline inside a heading */
.title-with-logo { direction: ltr; display: flex; align-items: center; gap: var(--sp-8); }
.title-with-logo img { width: 169.341px; height: 49.317px; }

/* ============================================================
   Car card   (19364:13620 · desk top&mobile/car cards)
   ============================================================ */
.car-card {
  position: relative;
  width: 286px;
  padding: var(--sp-20) 0;
  border-radius: var(--r-8);
  background: var(--gs-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  filter: drop-shadow(var(--shadow-card));
  transition: transform .2s ease;
}
.car-card:hover { transform: translateY(-4px); }

.car-card__img { width: 100%; aspect-ratio: 600 / 350; object-fit: cover; }

/* placeholder card — line-art car instead of a photo */
.car-card--outline {
  height: 479.724px;
  overflow: clip;
  filter: none;
  box-shadow: var(--shadow-card-l);
}
.car-card__outline {
  width: 100%;
  height: 166.83px;
  padding: 10px 44px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 335.393 x 100.307 is the PATH's box; the exported SVG also carries the stroke
   that hangs outside it, which Figma places with inset -2.11% top and bottom and
   -0.62/-0.63% left and right (12117:163071). Drawing the file at the path's own
   size squeezed the stroke inside it and the car came out 4px short. */
.car-card__outline img { width: 339.585px; height: 104.54px; max-width: none; transform: scaleX(-1); }

.car-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-4) 9px;
  border-radius: 0 0 var(--r-8) var(--r-8);
  background: var(--main-yellow);
  font-size: var(--h6-size);
  line-height: normal;
  color: var(--gs-black);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
.car-card__tag {
  position: absolute;
  right: 0;
  top: 174.83px;
  padding: 10px var(--sp-14) 10px 23px;
  border-top-left-radius: var(--r-16);
  background: var(--gs-gray-3);
  font-size: var(--h6-size);
  line-height: normal;
  color: var(--gs-black);
  white-space: nowrap;
}

.car-card__body {
  width: 100%;
  padding: var(--sp-24) var(--sp-20) 0;
  /* drawn inside the shape on the canvas, so it must not grow the body by 1px
     and push everything below it down */
  box-shadow: inset 0 1px 0 var(--gs-gray-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.car-card__name {
  width: 100%;
  height: 53px;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  text-align: right;
}
.car-card__name b { font-weight: 700; font-size: 22px; color: var(--gs-black); }
.car-card__name span { font-size: var(--h5-size); color: var(--gs-gray-3rd); }
/* first card in the row carries the smaller type from the design */
.car-card--sm .car-card__name b,
.car-card--sm .car-card__name span { font-size: var(--h5-size); }
/* 16px in a 129px box does not fit "מחיר מיוחד ל 30+ ימים", and the canvas does
   not wrap it — the node carries whitespace-nowrap and simply lets the line run
   past the box to the left (12117:163067 · I…;19364:13645). Wrapping it here was
   adding a second line and 17px to the card. */
.car-card--sm .car-card__price-label { font-size: var(--h5-size); white-space: nowrap; }
.car-card--sm .car-card__price { font-size: var(--h5-size); }
.car-card--sm .car-card__price .num { font-size: var(--h5-size); }
.car-card--sm .spec span { font-size: var(--h5-size); }
/* the badge and the body-type tag go up with the rest of this card's type */
.car-card--sm .car-card__badge,
.car-card--sm .car-card__tag { font-size: var(--h5-size); }

.car-card__stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 53px;
}
.car-card__specs { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-12); }
.car-card__specs-row {
  direction: ltr;
  width: 246px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-6);
}
/* Figma draws the stroke inside the shape, so it must not grow the box */
.spec {
  padding: var(--sp-8) var(--sp-14);
  box-shadow: inset 0 0 0 .7px var(--gs-gray-2);
  border-radius: var(--r-75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
}
.spec img  { width: 14.891px; height: 14.891px; }
.spec .icon { --icon-size: 14.891px; color: var(--gs-black); }
.spec span { font-size: var(--h6-size); line-height: normal; color: var(--gs-black); white-space: nowrap; }

/* Figma's items-end is ABSOLUTE — it means the right edge. This box is inside
   the RTL document, where align-items:flex-end resolves to the LEFT, which is
   where the whole price block had been sitting: 129px wide against the wrong
   side of the card. flex-start is the right here. */
.car-card__foot { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
.car-card__pricebox {
  width: 129px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-6);
  text-align: right;
  text-transform: uppercase;
}
.car-card__price-label { font-size: var(--h6-size); line-height: 1.4; color: var(--gs-gray-3rd); width: 100%; }
/* the 28px price sets the block metrics — that is what the cap-trim measures */
.car-card__price { width: 100%; font-size: 28px; line-height: 1.4; color: var(--gs-black); }
.car-card__price .unit { font-size: var(--h5-size); }
.car-card--sm .car-card__price { font-size: var(--h5-size); }

/* cards that carry the extra "all family cars" link (cars section) */
.car-card--linked { padding-bottom: 0; }
.car-card__all {
  width: calc(100% + 40px);
  margin: -13px -20px 0;   /* cancels the 13px body gap — Figma butts it up */
  font-size: var(--h6-size);
}

/* ============================================================
   Advantage card   (19364:13860 · advantages)
   ============================================================ */
.advantages-grid { display: flex; flex-direction: column; gap: var(--sp-32); width: 100%; }
.advantages-row  { direction: ltr; display: flex; align-items: center; justify-content: center; gap: var(--sp-32); }

.advantage {
  width: 390px;
  height: 224.33px;
  padding: var(--sp-24) var(--sp-16);
  border: .5px solid var(--main-primary);
  border-radius: var(--r-16);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-12);
  transition: background .2s ease, transform .2s ease;
}
.advantage:hover { background: var(--primary-04); transform: translateY(-2px); }
.advantage__icon {
  width: 74px;
  height: 74px;
  border-radius: var(--r-100);
  background: var(--turq-3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.advantage__icon img { width: 48px; height: 48px; object-fit: contain; }
.advantage__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
  color: var(--gs-black);
  text-align: right;
  text-transform: uppercase;
}
.advantage__text h3 { width: 100%; font-size: var(--h3-size); font-weight: 400; }
.advantage__text p  { width: 100%; font-size: var(--h4-size); }

/* ============================================================
   SEO band   (11483:120514 · desktop/rental/seo card)
   ============================================================ */
.seo-band {
  position: relative;
  width: 100%;                   /* already inside a .sec--wrap */
  height: 207.317px;
  padding: var(--sp-24) 100px;
  border-radius: var(--r-8);
  background: var(--primary-04);
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.seo-band__title { direction: ltr; display: flex; align-items: center; gap: var(--sp-8); }
.seo-band__title img { width: 169.341px; height: 49.317px; }
.seo-band__title h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.seo-band p {
  width: 540.017px;
  font-size: var(--h4-size);
  line-height: 1.4;
  text-align: center;
  color: var(--gs-black);
}
.seo-band__deco {
  /* 11483:120519. Figma does not stretch this artwork into the box — it draws it
     at its own 216.425 x 227.839, turns it 18.97°, and centres it in the box the
     insets describe (274.28 x 281.35 at -67.7, -44). Solving the hypot() sizes
     against that box gives 212.92 x 224.32 for the path plus its stroke bleed,
     which is the SVG's natural size to within 0.02%. It used to be stretched to
     the full box with no rotation, which is why the strokes sat up to 40px right
     of where the canvas has them. */
  position: absolute;
  left: -38.77px;
  top: -17.23px;
  width: 216.425px;
  height: 227.839px;
  transform: rotate(18.97deg);
  pointer-events: none;
}

/* ============================================================
   Branch card   (19364:13601 · desktop/rental/branch card)
   ============================================================ */
/* ============================================================
   Branch card   (13260:173926 · 13280:174848)

   A photo with the info panel riding 53px up over its bottom edge —
   the design does it with a negative bottom margin on the photo, and
   so does this.

   The panel is NOT one flat colour. Its fill is 44% of Secondart/Turq 4,
   and behind the top 111px of it sits an opaque Gray 2 block, so the
   panel reads in two tones: over the grey it renders (127,179,178) and
   below the grey, straight over the page wash, (143,197,197). Both were
   sampled off the canvas render and both match the arithmetic to the
   unit, which is why the two layers are reproduced instead of being
   flattened into one swatch.
   ============================================================ */
/* The rail is the full page width, not the 1240 column, because the canvas
   lets the overflowing card bleed past the section and clips it at the page
   edge — the export carries exactly 100px of that bleed at 1440, which is the
   section's own left margin. The column is reproduced as padding instead, so
   the first card still lands flush with the 1240 right edge while the rail
   itself scrolls to the viewport edge. The padding is a percentage of the
   rail, never a vw: vw counts the scrollbar, which is what put .page 15px off
   centre once already. */
.branches-rail {
  direction: rtl;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: calc((100% - min(100% - 2 * var(--gutter), var(--container))) / 2);
}
.branches-rail::-webkit-scrollbar { display: none; }
.branches-strip { display: flex; gap: var(--sp-32); width: max-content; }
.branches-foot { width: min(100% - 2 * var(--gutter), var(--container)); }
/* 20 between the heading row, the rail and the link — the gap the section
   carried as an inline style until the panel needed to override it */
#branches { gap: var(--sp-20); }

/* 13446:162902 — the heading row. The canvas puts the two rail arrows at the
   LEFT and the title at the RIGHT of one 1240 line, so the row is ordered ltr
   and pushed apart; the title keeps its own ltr order (wordmark, then words). */
.branches-head {
  direction: ltr;
  width: min(100% - 2 * var(--gutter), var(--container));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.branches-nav { display: flex; align-items: center; gap: var(--sp-16); }
.branches-nav__btn {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: var(--r-40);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* a 0.5px stroke, drawn inside the shape. Chrome snaps a 0.5px BORDER up to a
     full pixel at full strength; the canvas paints it at half — the rim samples
     (167,168,169), which is exactly #595959 at 50% over the page wash. Half the
     alpha at the declared half pixel reproduces that. */
  box-shadow: inset 0 0 0 .5px rgba(89, 89, 89, .5);
  transition: background .15s ease;
}
.branches-nav__btn:hover { background: rgba(89, 89, 89, .06); }
.branches-nav__btn .icon { --icon-size: 24px; color: var(--gs-gray-3rd); }
/* no disabled styling: the canvas draws both arrows at full strength, so the
   rail simply clamps at its ends instead of fading a button out. */

/* before/after for the heading row alone: the centred title, no arrows */
:root[data-pre-branchhead] #branches { gap: var(--sp-32); }
:root[data-pre-branchhead] .branches-head { justify-content: center; }
:root[data-pre-branchhead] .branches-nav { display: none; }

.branch-card {
  flex: 0 0 376px;
  scroll-snap-align: end;
  display: flex;
  flex-direction: column;
}

.branch-card__photo {
  position: relative;
  height: 344px;
  margin-bottom: -53px;
  border-radius: var(--r-16);
}
.branch-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-16);
  pointer-events: none;
}

.branch-card__panel {
  position: relative;
  z-index: 1;                       /* over the photo it overlaps */
  width: 100%;
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  /* Figma's items-end is the RIGHT edge, absolutely. In this RTL document
     that is flex-START — flex-end would stack the whole panel to the left. */
  align-items: flex-start;
  gap: var(--sp-16);
}
/* the two layers, bottom first: Gray 2 for the top 111px, then the 44%
   turquoise across the whole panel. Explicit z-index because ::after would
   otherwise paint over the text, which comes before it in the box tree. */
.branch-card__panel::before,
.branch-card__panel::after {
  content: "";
  position: absolute;
  border-radius: var(--r-16) var(--r-16) 0 0;
}
.branch-card__panel::before { inset: 0 0 auto 0; height: 111px; background: var(--gs-gray-2); z-index: 0; }
.branch-card__panel::after  { inset: 0; background: var(--turq4-44); z-index: 1; }
.branch-card__panel > * { position: relative; z-index: 2; }

.branch-card__city {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-black);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.branch-card__meta { width: 258px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.branch-card__meta > div {
  /* ltr so the line keeps the design's order — text first, glyph after it */
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
}
.branch-card__meta > div:last-child { width: 100%; }
.branch-card__meta span {
  font-size: var(--h5-size);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-black);
  text-align: right;
  white-space: nowrap;
}
.branch-card__meta .icon { --icon-size: 18px; color: var(--gs-black); }

.branch-card__cta {
  width: 100%;
  height: 40px;
  padding: 10px var(--sp-22) var(--sp-8);
  border-radius: var(--r-4);
  background: var(--gs-white);
  color: var(--gs-black);
  font-size: var(--h6-size);
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  transition: filter .15s ease;
}
.branch-card__cta:hover { filter: brightness(.96); }

/* ------------------------------------------------------------
   The pre-13260:173926 section, kept only so the changes panel can
   show a before/after. Every rule below is the old one, scoped to
   .branches-before so it cannot reach the live section.
   ------------------------------------------------------------ */
.branches-before .branches { direction: ltr; display: flex; gap: var(--sp-32); width: 100%; }
.branches-before .branches__col { display: flex; flex-direction: column; width: 604px; }
.branches-before .branches__col--a > *:nth-child(1) { height: 156px; margin-bottom: var(--sp-32); }
.branches-before .branches__col--a > *:nth-child(2) { height: 156px; margin-bottom: var(--sp-32); }
.branches-before .branches__col--a > *:nth-child(3) { height: 280px; }
.branches-before .branches__col--b > *:nth-child(1) { height: 344px; margin-bottom: 29px; }
.branches-before .branches__col--b > *:nth-child(2) { height: 283px; }
/* the new card declares flex:0 0 376px, which in these column tracks would
   become a 376px HEIGHT; the old cards size themselves from the rules above */
.branches-before .branch-card { flex: 0 1 auto; scroll-snap-align: none; }
.branches-before .branch-card {
  position: relative;
  width: 604px;
  border-radius: var(--r-16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.branches-before .branch-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.branches-before .branch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-44);
  pointer-events: none;
  transition: background .2s ease;
}
.branches-before .branch-card:hover::after { background: rgba(0, 0, 0, 0.3); }
.branches-before .branch-card > *:not(.branch-card__bg) { position: relative; z-index: 1; }
.branches-before .branch-card__city {
  padding: var(--sp-12) var(--sp-16);
  background: var(--gs-black);
  border-radius: 0 var(--r-16) 0 var(--r-16);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-white);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
.branches-before .branch-card__foot {
  direction: ltr;
  width: 100%;
  padding: 0 var(--sp-16) var(--sp-16);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.branches-before .branch-card__cta {
  width: 113px;
  height: 32px;
  padding: 0 var(--sp-22);
  border-radius: var(--r-4);
  background: var(--main-primary);
  color: var(--gs-black);
  font-size: var(--h6-size);
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  transition: filter .15s ease;
}
.branches-before .branch-card__cta:hover { filter: brightness(.94); }
.branches-before .branch-card__meta { width: 258px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); }
.branches-before .branch-card__meta > div {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
  width: 100%;
}
.branches-before .branch-card__meta span {
  font-size: var(--h5-size);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-white);
  text-align: right;
  white-space: nowrap;
}
.branches-before .branch-card__meta .icon { --icon-size: 18px; color: var(--gs-white); }

/* before/after for the changes panel: the old two-column grid.
   Driven by a class, not the hidden attribute — this sheet carries a
   [hidden]{display:none !important} further down, which no attribute-based
   toggle can win against. */
.branches-before { display: none; }
:root[data-pre-branches] .branches-before { display: contents; }
:root[data-pre-branches] #branches { display: none; }

/* ============================================================
   Need-help card   (19364:13595 · desktop/rental/need help card)
   ============================================================ */
.needhelp {
  width: min(100% - 2 * var(--gutter), var(--container));
  padding: 36px 83px;
  border-radius: var(--r-16);
  background: var(--primary-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.needhelp h2 {
  font-size: var(--h2b-size);
  font-weight: var(--h2b-weight);
  line-height: normal;
  color: var(--gs-black);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.needhelp__row { direction: ltr; width: 100%; padding: 0 118px; display: flex; align-items: flex-start; }
.needhelp__btn {
  flex: 1 0 0;
  min-width: 0;
  height: 40px;
  padding: 10px var(--sp-22) var(--sp-8);
  border-radius: var(--r-16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  transition: background .15s ease;
}
.needhelp__btn:hover { background: rgba(255, 255, 255, .5); }
.needhelp__btn .icon { --icon-size: 21px; }
/* the WhatsApp glyph is an <img>, so the icon-size var misses it and it
   rendered at its intrinsic 18.13 next to two 21s */
.needhelp__btn img { width: 21px; height: 21px; }

/* ============================================================
   Travel / article card   (19364:13591)
   ============================================================ */
.media-grid { direction: ltr; display: flex; align-items: center; gap: var(--sp-32); }
.media-rows { display: flex; flex-direction: column; gap: var(--sp-32); }

.media-card {
  width: 392px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .2s ease;
}
.media-card:hover { transform: translateY(-4px); }
.media-card__img {
  position: relative;
  width: 100%;
  height: 212px;
  border-radius: var(--r-16) var(--r-16) 0 0;
  overflow: hidden;
}
.media-card__img img { width: 100%; height: 100%; object-fit: cover; }
.media-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(102, 102, 102, .24), rgba(0, 0, 0, .24));
}
.media-card__cap {
  width: 100%;
  padding: var(--sp-20) 10px;
  border-radius: 0 0 var(--r-16) var(--r-16);
  background: var(--turq4-24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--h4-size);
  line-height: 1.4;
  color: var(--gs-black);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   FAQ   (19364:13867 · faq dropdown)
   ============================================================ */
.faq { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.faq-item {
  border-radius: var(--r-16);
  background: var(--primary-08);
  overflow: hidden;
  transition: background .15s ease;
}
.faq-item:hover { background: rgba(0, 214, 209, .14); }
.faq-item__head {
  direction: ltr;
  width: 100%;
  padding: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}
.faq-item__head .icon { --icon-size: 24px; color: var(--gs-gray-3rd); transition: transform .25s ease; }
.faq-item.is-open .faq-item__head .icon { transform: rotate(180deg); }
.faq-item__head span {
  font-size: var(--h6-size);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-black);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel > div { overflow: hidden; }
.faq-item__panel p {
  padding: 0 var(--sp-16) var(--sp-16);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  text-align: right;
}

/* ============================================================
   SEO split   (19364:13876 · desktop/rental/seo card)
   ============================================================ */
.seo-split { direction: ltr; width: min(100% - 2 * var(--gutter), var(--container)); height: 684px; display: flex; align-items: center; }
.seo-split__text {
  width: 597px;
  height: 100%;
  padding: 54px 52px 0;
  border-radius: var(--r-16) 0 0 var(--r-16);
  background: var(--primary-04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
}
.seo-split__text h2 {
  width: 100%;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.seo-split__body { direction: rtl; width: 100%; font-size: var(--h4-size); line-height: 1.4; text-align: right; text-transform: uppercase; }
.seo-split__img {
  width: 643px;
  height: 100%;
  border-radius: 0 var(--r-16) var(--r-16) 0;
  object-fit: cover;
}

/* ============================================================
   Footer   (11356:115431)
   ============================================================ */
.site-footer {
  width: 100%;
  min-height: 491px;
  margin-top: var(--section-gap);
  padding-top: var(--sp-40);
  border-top: 1px solid var(--gs-gray-2);
  background: var(--footer-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
}
.site-footer__top {
  flex: 1 0 0;
  width: 100%;
  padding: 0 var(--sp-40) 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-24);
}
.footer__bar { direction: ltr; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.footer__top-btn {
  height: 40px;
  padding: var(--sp-12) 18px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--h4-size);
  line-height: 1.4;
  color: var(--gs-black);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s ease;
}
.footer__top-btn:hover { background: rgba(0, 0, 0, .06); }
.footer__top-btn .icon { --icon-size: 24px; }
.footer__selects { direction: ltr; display: flex; align-items: center; gap: var(--sp-12); }
.footer__select {
  height: 40px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-size: var(--h4-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  transition: background .15s ease;
}
.footer__select:hover { background: rgba(0, 0, 0, .06); }
.footer__select--currency { width: 84px; padding: var(--sp-12) var(--sp-16); }
.footer__select--lang { width: 76px; justify-content: flex-start; }  /* the knob sits at the start of the track */
.footer__select--lang > span {
  width: 40px;
  height: 40px;
  border-radius: var(--r-45);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__select .icon { --icon-size: 24px; }

.footer__cols { direction: ltr; display: flex; align-items: flex-end; gap: 93px; }
/* The column and its link group carry direction:rtl further down this sheet,
   so the Hebrew shapes correctly — which turns Figma's items-end (the RIGHT
   edge) into flex-START here. With flex-end they were pinned to the left of
   their own column, and the whole block stopped 200px short of the footer's
   right edge. */
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-18); width: 334px; }
.footer__col h4 { font-size: var(--h5-size); font-weight: 700; line-height: 21.344px; color: var(--grey-black); white-space: nowrap; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
.footer__links--a { width: 133px; }
.footer__links--b { width: 155px; }
.footer__links a {
  border-bottom: 1px solid var(--grey-black);
  font-size: var(--h5-size);
  line-height: normal;
  color: var(--gs-black);
  white-space: nowrap;
  transition: opacity .15s ease;
}
.footer__links a:hover { opacity: .6; }
.footer__cols-inner { direction: ltr; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; }

.footer__bottom {
  width: 100%;
  height: 110px;
  padding: var(--sp-20) var(--sp-40);
  background: var(--main-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-14);
}
.footer__bottom-row { direction: ltr; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.footer__social { display: flex; align-items: center; justify-content: center; gap: 17px; }
.footer__social-icons { display: flex; align-items: flex-start; gap: var(--sp-12); }
.footer__social-icons a { display: block; width: 29.87px; height: 29.87px; transition: opacity .15s ease; }
.footer__social-icons a:hover { opacity: .7; }
/* LinkedIn ships as the disc and the glyph in two files; the other three
   carry the disc inside their own svg. Stacked rather than redrawn. */
.footer__social-li { position: relative; }
.footer__social-li img { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer__social-li img:last-child { inset: 50% auto auto 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); }
.footer__social > span { font-size: var(--h4-size); line-height: 1.4; color: var(--gs-black); text-transform: uppercase; white-space: nowrap; }
.footer__legal { direction: ltr; display: flex; align-items: center; justify-content: center; gap: var(--sp-24); }
.footer__legal a { font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--gs-black); text-align: center; white-space: nowrap; transition: opacity .15s ease; }
.footer__legal a:hover { opacity: .65; }
/* the rule samples (0,107,104) over the bar's (0,214,209) — exactly black at
   50%, not the .18 it carried */
.footer__rule { width: 100%; height: 1px; background: rgba(0, 0, 0, .5); }
.footer__powered { direction: ltr; display: flex; align-items: center; gap: var(--sp-6); }
.footer__powered span { font-size: var(--h7-size); line-height: var(--h7-lh); letter-spacing: var(--h7-ls); color: var(--gs-black); opacity: .7; }
.footer__powered img { height: 12px; }

/* ============================================================
   Utilities
   ============================================================ */
.pill-note {
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-40);
  background: var(--turq-3);
  font-size: var(--h4-size);
  line-height: 1.4;
  color: var(--gs-black);
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Cap-height trim.
   Figma marks these nodes [text-box-trim:trim-both]
   [text-box-edge:cap_alphabetic] — reproducing it is what keeps
   every section at the exact height it has on the canvas.
   ------------------------------------------------------------ */
.sec-title,
.seo-band__title h2,
.seo-split__text h2,
.media-card__cap,
.branch-card__city,
.car-card__tag,
.car-card__price-label,
.car-card__price,
.spec span,
.date-cell__value,
.chip span,
.quick-search__label span,
.age-group__label,
.switch-row span,
.faq-item__head span,
.faq-item__panel p {
  text-box: trim-both cap alphabetic;
}

/* the "30 יום ומעלה" badge is NOT in that list, and that is the point: the
   canvas node carries leading-normal with no trim (I…;19364:13649), so the
   4px of padding sits on the full line box. Trimming it to the cap height
   was making the badge 16px tall where the design draws 23. */

/* the trimmed nodes below are laid out as blocks so the padding
   from the design still resolves to the Figma height */
.media-card__cap,
.branch-card__city,
.car-card__tag,
.car-card__badge { display: block; }
.media-card__cap { text-align: center; }

/* layered advantage icons (two-part SVGs from Figma) */
.icon-stack img { position: absolute; }
.icon-stack--location .l-pin  { left: 13.55%; right: 12.67%; top: 12.54%; bottom: 13.67%; width: auto; height: auto; }
.icon-stack--location .l-base { left: -4.77%; right: -4.77%; top: 78.94%; bottom: 12.54%; width: auto; height: auto; }
.icon-stack--people   .p-group { left: 5.56%; right: 5.56%; top: 12.5%; bottom: 12.5%; width: auto; height: auto; }
.icon-stack--people   .p-dot   { left: 36.28%; right: 36.28%; top: calc(50% - 9.28px); width: auto; height: auto;
                                 aspect-ratio: 1; transform: translateY(-50%) scaleX(-1); }

/* advantages reveal (Figma annotation: "אנימציה")
   Cards are visible by default; the hidden state is only applied once JS has
   armed the observer, so a blocked/throttled IntersectionObserver can never
   leave the section blank. */
.advantages-grid.is-armed .advantage { opacity: 0; transform: translateY(16px); }
.advantages-grid.is-armed .advantage.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, background .2s ease;
}
.advantages-grid.is-armed .advantage.is-in:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .advantages-grid.is-armed .advantage { opacity: 1; transform: none; }
}

/* ============================================================
   Popovers — date picker / time picker
   ============================================================ */
.popover {
  position: absolute;
  z-index: 100;
  background: var(--gs-white);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-card);
  padding: var(--sp-12);
  direction: rtl;
  font-size: var(--h6-size);
  color: var(--gs-black);
}
.popover--cal { width: 268px; }
.cal__head {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-8);
}
.cal__head strong { font-size: var(--h5-size); font-weight: 700; }
.cal__head button {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--gs-black);
  transition: background .12s ease;
}
.cal__head button:hover { background: var(--turq-3); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow span { text-align: center; font-size: var(--h7-size); color: var(--gs-gray-3rd); padding: 4px 0; }
.cal__grid button {
  height: 32px;
  border-radius: var(--r-8);
  font-size: var(--h6-size);
  color: var(--gs-black);
  transition: background .12s ease;
}
.cal__grid button:hover { background: var(--turq-3); }
.cal__grid button.is-sel { background: var(--main-primary); font-weight: 700; }

.popover--times { padding: var(--sp-8); }
.times {
  max-height: 240px;
  width: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.times button {
  padding: 7px 10px;
  border-radius: var(--r-8);
  text-align: center;
  font-size: var(--h6-size);
  transition: background .12s ease;
}
.times button:hover { background: var(--turq-3); }
.times button.is-sel { background: var(--main-primary); font-weight: 700; }

/* ------------------------------------------------------------
   Fixes found while diffing the render against the Figma canvas
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* Figma rotates Arrow-Left-2 by 90° inside the quick-search chip */


/* ------------------------------------------------------------
   Bidi: several containers are LTR only so their *children* sit
   in the Figma order. The Hebrew text inside them must stay RTL,
   otherwise numbers ("5 מקומות", "₪179", "132") flip to the
   wrong end of the line.
   ------------------------------------------------------------ */
.media-card,
.car-card,
.branch-card__city,
.branch-card__meta span,
.advantage,
.chip span,
.spec span,
/* .date-cell handles its own direction — the row is LTR so the glyph
   lands right of the texts, and the label alone is RTL */
.age-dropdown,
.coupon-btn,
.switch-row span,
.quick-search__label span,
.needhelp__btn,
.footer__col,
.footer__legal a,
.seo-band__title h2,
.sec-title { direction: rtl; }

/* ---------- footer corrections ---------- */
/* 12584:409719 — the agents link is the one bold, underlined item in the row */
.footer__legal--agents { font-weight: 700; text-decoration: underline; }

/* Figma lays the footer's upper block out LTR and pins it to the right */
.site-footer__top { direction: ltr; }
/* Arrow-Up is exported pointing down and rotated 180° in the design */

/* currency pill holds "∨ ILS ₪" on one line */
.footer__select--currency { width: auto; min-width: 84px; white-space: nowrap; }
/* 11.247 on the canvas (12584:409731). At 22 the lower block grew and, with
   the bar centring its content, pushed the whole row 4px up. */
.footer__powered img { height: 11.25px; width: auto; }

/* ============================================================
   Banners  (12449:225177 one-up · 12220:157406 two-up)

   The two views share one component, `marketing/card`, from two
   different masters:

     one-up  12449:225181 — 1108×167 master, scale 1
     two-up  12220:157412 — 340.8×167 master, scale 1.549

   That scale is why Figma's own export reports the two-up card at
   57.6px/33.6px type: the exporter applies the instance scale to
   font sizes that are *already* scaled. Measuring the identical
   subtitle string in both exports settles it — band height 15 in
   both, ratio 1.000 — so the rendered type is 38/21 either way and
   only the box, padding, radius and badge scale by 1.549.
   Everything below is either a Figma value or a measurement off a
   ×4 export; the two are marked apart where they disagree.
   ============================================================ */
.banners {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.banners__stage {
  width: 100%;                   /* the row has to reach the full 1240 so
                                    justify-between can push the arrows out */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.banners__row {
  direction: ltr;                /* arrow · track · arrow, left to right */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* nav arrow  (11149:112575) — 44×44 = 10px padding round a 24px glyph.
   The fill and the 0.5px stroke are both Third gray; the fill alpha
   solved to 0.038 off the export, i.e. the 0.04 Figma declares. */
.banner-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--r-40);
  background: rgba(89, 89, 89, 0.04);
  box-shadow: inset 0 0 0 0.5px var(--gs-gray-3rd);
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-nav .icon { --icon-size: 24px; color: var(--gs-gray-3rd); }

.banners__track {
  display: flex;
  align-items: center;
  gap: 51px;
  width: 1108px;
}

/* slider dots  (11162:112599 Default · 11162:112601 active)
   Solved off the export: Default is Third gray at 0.04 — the same
   fill as the nav arrow — and active is Turq 4 at 0.24, which is
   already a token here. */
.banners__dots { display: flex; align-items: center; gap: 5px; }
.banners__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(89, 89, 89, 0.04);
}
.banners__dots i.is-active { background: var(--turq4-24); }

/* ---------- card shell ---------- */
.mcard {
  position: relative;
  flex: 0 0 auto;
  overflow: clip;                /* the road art runs into the bottom corner */
  display: flex;
  align-items: center;
}

/* ---------- freesbe card  (11162:112233) ---------- */
.mcard--freesbe {
  width: 527.896px;
  height: 259.667px;
  border-radius: 12.394px;
  padding: 49.575px 29.435px 18.591px 77.461px;
  justify-content: center;
  /* Figma reports a flat rgba(255,254,254,.08), which does match the
     middle of the card — but the export's corners run 238 top-left to
     252 bottom-right, so there is an effect on it the exporter drops.
     These three stops are read straight off those pixels. */
  background: linear-gradient(135deg, #EEF1F2 0%, #F6F9F9 40%, #FCFFFF 100%);
}
.mcard__fs-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  width: 399px;
  color: var(--turq-4);
  text-align: center;
}
.mcard__fs-brand {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}
/* 441px of text in a 399px block — Figma lets it overflow the block
   rather than wrap, and the block is centred so it spills evenly */
.mcard__fs-head {
  font-size: 38px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.mcard__fs-sub  { font-size: var(--h3-size); font-weight: 400; line-height: normal; }
/* raster lifted from Figma's own ×4 export with the card ground keyed
   out — the group is 30-odd vectors and the asset server would not
   hand over the composed SVG */
.mcard__road {
  position: absolute;
  left: 1.8px;
  top: 178.5px;
  width: 132.2px;
  height: 81.5px;
}

/* ---------- promo card  (12449:225181 one-up · 12220:157412 two-up) ----------
   `--s` is the instance scale. Type stays 38/21 in both views; the box,
   padding, radius, gaps and badge ride the scale. */
.mcard--promo {
  --s: 1;
  width: 1108px;
  height: 167px;
  border-radius: calc(8px * var(--s));
  padding: calc(32px * var(--s)) calc(19px * var(--s))
           calc(12px * var(--s)) calc(50px * var(--s));
  gap: calc(9px * var(--s));
  background: linear-gradient(60.4768deg,
              #00D6D1 4.4725%, #2DA6E8 52.798%, #D362FC 107.81%);
}
[data-banner-stage="two"] .mcard--promo {
  --s: 1.549;
  width: 527.896px;
  height: 259.667px;
  /* Figma re-solves the gradient handles for the narrower box */
  background: linear-gradient(80.1558deg,
              #00D6D1 4.4725%, #2DA6E8 52.798%, #D362FC 107.81%);
}
.mcard__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(14px * var(--s));
}
.mcard__toprow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(46px * var(--s));
  width: 100%;
}
.mcard__cta,
.mcard__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6.184px * var(--s));
  padding: calc(6px * var(--s)) calc(8px * var(--s));
  border-radius: calc(38px * var(--s));
  background: rgba(221, 255, 237, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(0, 214, 209, 0.8);
  font-size: calc(14px * var(--s));
  font-weight: 700;
  line-height: normal;
  color: var(--gs-white);
  white-space: nowrap;
}
.mcard__badge {
  position: absolute;
  left: calc(-42.48px * var(--s));
  top: calc(-18.24px * var(--s));
}
/* Ellipse 1175 — a ring round the arrow. Figma's is an arc with two
   small breaks in it; this is a plain ring, the one simplification in
   this section. */
.mcard__orb {
  flex-shrink: 0;
  width: calc(29px * var(--s));
  height: calc(29px * var(--s));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--gs-white);
  display: grid;
  place-items: center;
}
.mcard__orb .icon {
  --icon-size: calc(17.333px * var(--s));
  color: var(--gs-white);
}
.mcard__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(6px * var(--s));
  width: 100%;
  color: var(--gs-white);
  text-align: right;
}
.mcard__title { font-size: 38px; font-weight: 700; line-height: normal; }
.mcard__sub   { font-size: 21px; font-weight: 400; line-height: normal; }
[data-banner-stage="one"] .mcard__title,
[data-banner-stage="one"] .mcard__sub { white-space: nowrap; }
/* The art is the same size in both views — only its corner moves. Figma
   reports the two-up wrapper as 148.979×106.454 against the one-up's
   150.034×119.98, but those are the same drawing at two slightly
   different rotations (10.19° vs 11.37°); the exported asset carries the
   one-up rotation baked in, so it keeps that box in both. These two
   offsets are Figma's own and must NOT ride --s — they are already
   resolved in the scaled instance. */
.mcard__gift {
  position: absolute;
  left: 20.32px;
  top: 73.48px;
  width: 150.034px;
  height: 119.98px;
}
[data-banner-stage="one"] .mcard__gift {
  left: 75.06px;
  top: 23.51px;
}

/* what the toggle hides */
[data-banner-stage="one"] .mcard--freesbe,
[data-banner-stage="one"] .banners__dots { display: none; }

/* ---------- preview-only view switch (not in the design) ---------- */
.banners__demo {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  font-size: var(--h7-size);
}
.banners__demo > span { color: var(--gs-gray-3rd); }
.banners__demo button {
  padding: 5px 12px;
  border-radius: var(--r-40);
  background: var(--gs-white);
  box-shadow: inset 0 0 0 1px var(--gs-gray-2);
  color: var(--gs-gray-3rd);
  font-size: var(--h7-size);
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.banners__demo button:hover { background: var(--turq-3); }
.banners__demo button.is-on {
  background: var(--turq-4);
  box-shadow: inset 0 0 0 1px var(--turq-4);
  color: var(--gs-white);
}

/* ============================================================
   MOBILE  ≤767      (mobile/rental/home page · 11168:114861)

   Not a reflow of the desktop: Figma ships a separate mobile set
   (header, details, quick search, cards, footer). The tokens, the
   icons and the interactive components carry over unchanged — what
   changes is the layout and the type scale.
   ============================================================ */
@media (max-width: 767px) {

  /* ---------- skeleton ---------- */
  :root {
    --gutter: 20px;              /* mobile page is 375 with 335 of content */
    --section-gap: 60px;
    /* the mobile type scale, read off 11168:114861: section titles come
       out 17px cap-trimmed (= 28px at cap 0.59) and the hero title 19px
       (= 32px) */
    --h1-size: 32px;
    --h2-size: 28px;
    --h2b-size: 22px;
    --h3-size: 18px;
    --h4-size: 16px;
  }
  .sec--bleed, .sec--wrap { width: min(100% - 2 * var(--gutter), 335px); }
  .body-sections { padding-top: 40px; }
  .sec-head, .sec-title { width: 100% !important; max-width: 100%; }

  /* ---------- header  (mobile/rental/header · 11984:138045) ----------
     86 tall: BC on the left, logo centred, burger on the right. The nav
     pills and the currency pill move into the burger (still to build). */
  .site-header { height: 86px; padding: 0 var(--gutter); }
  .header__nav, .cur { display: none; }
  .header__utils { order: 0; }
  .header__logo { order: 1; width: auto; align-items: center; }
  .header__logo img { width: 108px; height: auto; }
  .burger { order: 2; display: flex; }

  /* ---------- hero ---------- */
  .hero { height: 772px; }
  .hero__content {
    left: var(--gutter);
    right: var(--gutter);
    top: 92px;
    height: auto;
    /* details ends at y390 and quick search starts at y398 — the two are
       separate cards with the hero photo showing through the 8px between
       them. The rounded corners face outward only, so the pair still
       reads as one block. */
    gap: var(--sp-8);
  }
  .hero__head { width: 100%; gap: 0; }
  /* Figma: line 1 is 19 tall (32px cap-trimmed), then 16, then the
     logo row at 28.26 — 63.26 for the block, and the panel starts at
     75.26 from the top of the content, i.e. 12 below the title. */
  .hero__title { align-items: center; width: 100%; gap: var(--sp-16); }
  .hero__title-1 {
    width: 100%;
    text-align: center;
    text-box: trim-both cap alphabetic;
  }
  .hero__title-2 { justify-content: center; align-items: center; }
  /* "עם" untrimmed ran 33.5 tall at 32px and dragged the whole hero down
     5px; trimmed it is 18.88 and the logo's own 28.26 sets the row */
  .hero__title-2 p { text-box: trim-both cap alphabetic; }
  .hero__title-2 img { width: 97px; height: auto; }
  .hero__glow { display: none; }

  /* ---------- search panel  (mobile/rental/details · 11730:140090) ----
     A solid 64% white card, not the desktop glass, and only the top two
     corners are round — the quick-search card butts on underneath. */
  .search-panel {
    max-width: none;
    /* measured from the title's bottom, not the content's top */
    margin-top: var(--sp-12);
    padding: var(--sp-20);
    border-radius: var(--r-16) var(--r-16) 0 0;
    background: var(--white-64);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .search-panel__row { flex-direction: column; align-items: flex-end; gap: var(--sp-16); }
  .search-panel__fields { width: 100%; gap: var(--sp-16); }
  .search-panel__cta { order: 1; width: 100%; }
  .search-panel__cta .btn-yellow {
    width: 100%;
    height: 40px;
    border-radius: var(--r-4);
    padding: 10px var(--sp-16) var(--sp-8);
  }
  .btn-yellow .lbl-wide { display: none; }
  .btn-yellow .lbl-narrow { display: inline; }

  .search-panel__line { flex-direction: column; align-items: flex-end; gap: var(--sp-16); width: 100%; }
  .toggle-field { order: -1; width: 295px; }
  .toggle-field .location-input { width: 100%; }

  /* the four cells become a 2×2 grid: dates in the right column, times
     in the left, pick-up on the first row. Figma keeps the 0.5px #D8D8D8
     dividers and rounds only the four outer corners. */
  .date-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 295px;
  }
  .date-pair { display: contents; }
  .date-pair:nth-child(1) > .date-cell { grid-row: 2; }   /* החזרה */
  .date-pair:nth-child(2) > .date-cell { grid-row: 1; }   /* איסוף  */
  .date-cell--end   { grid-column: 1; }                   /* dates, right */
  .date-cell--start { grid-column: 2; }                   /* times, left  */
  .date-cell {
    width: auto;
    padding: var(--sp-6) var(--sp-16);
    border-radius: 0;
    box-shadow: inset -0.5px -0.5px 0 0 var(--gs-gray-2);
  }
  .date-pair:nth-child(2) > .date-cell--end   { border-radius: var(--r-8) 0 0 0; }
  .date-pair:nth-child(2) > .date-cell--start { border-radius: 0 var(--r-8) 0 0; }
  .date-pair:nth-child(1) > .date-cell--end   { border-radius: 0 0 0 var(--r-8); }
  .date-pair:nth-child(1) > .date-cell--start { border-radius: 0 0 var(--r-8) 0; }
  .date-cell__label { width: 111.5px; }

  /* coupon left, age right — Figma's order, so the row goes LTR */
  .search-panel__line2 { direction: ltr; gap: var(--sp-8); width: 100%; }
  .coupon { flex: 0 0 143.5px; height: 54px; }
  /* The desktop node 13256:172765 brought two things the mobile frame does not
     have: a 52px arrow button beside the coupon, and the coupon standing OPEN.
     Together they take 246 of the 295 this row has, which squeezed the age
     dropdown to 41px and collapsed its value to nothing. Until there is a
     mobile frame for that state, this width keeps the layout Figma does show
     here: the coupon closed at 143.5, the age dropdown taking the rest. */
  .search-panel .sp-arrow { display: none; }
  .search-panel .coupon.is-open { width: 143.5px; }
  .search-panel .coupon.is-open .coupon__input,
  .search-panel .coupon.is-open .coupon__close { display: none; }
  .search-panel .coupon.is-open .coupon__label { display: inline; }
  .age-group { flex: 1 0 0; min-width: 0; width: auto; }
  .age-group__label { display: none; }
  .age-dropdown { height: 54px; }

  /* ---------- quick search  (11174:114197) ----------
     Heading bar on top with its own 54% white ground and the slider
     shadow, then the chips on one scrolling line. */
  .quick-search {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-20);
    width: 100%;
    padding: 0 0 var(--sp-20);
    border-radius: 0 0 var(--r-16) var(--r-16);
    background: var(--white-64);
    overflow: clip;
  }
  .quick-search__label {
    order: -1;
    height: 33px;
    padding: var(--sp-8) var(--sp-20) 0;
    background: rgba(255, 255, 255, 0.54);
    box-shadow: var(--shadow-slider);
    justify-content: center;
    gap: 0;
  }
  .quick-search__label span {
    font-size: var(--h5-size);
    font-weight: 700;
    color: var(--gs-black);
    text-shadow: none;
  }
  .quick-search__label .icon { display: none; }
  .quick-search__chips {
    gap: var(--sp-4);
    padding: 0 var(--sp-20);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .quick-search__chips::-webkit-scrollbar { display: none; }
  .chip {
    flex-shrink: 0;
    background: var(--primary-04);            /* mobile fill, not white 60 */
  }
  .chip span { font-size: var(--h6-size); }   /* 14 on mobile, 18 on desktop */

  /* ---------- grids ---------- */
  .advantages-grid { gap: var(--sp-8); }
  .advantages-row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); width: 100%; }
  .advantage { width: auto; height: auto; min-height: 194px; padding: var(--sp-12); }

  /* the old two-column grid — only the kept copy behind the panel toggle uses it */
  .branches-before .branches { flex-direction: column; gap: var(--sp-8); width: 100%; }
  .branches-before .branches__col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); width: 100%; }
  .branches-before .branches__col > * { height: 194px !important; margin-bottom: 0 !important; }

  .media-grid, .media-rows { width: 100% !important; }
  .media-rows { flex-direction: column; gap: var(--sp-20); }
  .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  .media-card { width: auto; }


  /* ---------- banners: one card, no arrows, no dots  (11168:114908) --- */
  .banners__row { justify-content: center; }
  .banner-nav, .banners__dots, .banners__demo { display: none; }
  .banners__track { width: 100%; gap: 0; }
  .mcard--freesbe { display: none; }
  .mcard--promo { --s: 1; width: 100%; height: 168px; }
  .mcard__gift { left: 8px; top: 40px; width: 110px; height: 88px; }

  /* ---------- footer ---------- */
  .footer__cols { flex-direction: column; align-items: flex-end; gap: var(--sp-24); width: 100% !important; }
  .footer__col { width: 100%; }
  .footer__bottom-row { flex-direction: column; gap: var(--sp-16); }
}

/* ---------- burger + the CTA's two labels (base = desktop) ---------- */
.burger { display: none; }
.btn-yellow .lbl-narrow { display: none; }
@media (max-width: 767px) {
  .burger {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: inset 0 0 0 1px var(--glass-rim);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
  }
  .burger span {
    width: 18px; height: 1.5px;
    border-radius: 1px;
    background: var(--gs-white);
  }
  .site-header__inner { justify-content: space-between; }
}

/* ============================================================
   MOBILE ≤767 — round 2, from measuring 375
   ============================================================ */
@media (max-width: 767px) {

  /* the cells were forced to 161.5 by their own content: label 111.5 +
     32 padding + 16 glyph + 2 gap. Let the label shrink instead. */
  .date-cell { min-width: 0; }
  .date-cell__label { width: auto; max-width: 100%; }
  .date-cell__value { font-size: var(--h5-size); }

  /* the two-up rule is [attr] + class, so it outranked a bare class */
  [data-banner-stage] .mcard--promo,
  [data-banner-stage="two"] .mcard--promo {
    --s: 1;
    width: 100%;
    height: 168px;
    border-radius: var(--r-8);
    padding: var(--sp-16) var(--sp-12) var(--sp-12) var(--sp-20);
    gap: var(--sp-8);
  }
  .mcard__title { font-size: var(--h2b-size); }     /* 22 on mobile */
  .mcard__sub   { font-size: var(--h7-size); }
  .mcard__badge, .mcard__cta { font-size: var(--h7-size); }
  .mcard__orb { width: 22px; height: 22px; }
  .mcard__orb .icon { --icon-size: 13px; }
  .mcard__copy, .mcard__body, .mcard__toprow { width: 100%; }
  .mcard__toprow { gap: var(--sp-8); }
  .mcard__badge { left: -8px; top: -10px; }

  /* branch cards were still carrying their desktop 604 */
  .branches-before .branch-card,
  .branches-before .branch-card__bg,
  .branches-before .branch-card__foot { width: 100% !important; }
  .branches-before .branch-card { min-width: 0; }

  /* advantage cards: Figma's mobile card is 165×194 with a smaller type
     scale than the desktop 390-wide one */
  .advantage__text h3 { font-size: var(--h4-size); }
  .advantage__text p  { font-size: var(--h7-size); line-height: 1.25; }
  .advantage__icon { width: 48px; height: 48px; }

  /* long paragraphs that were sized for the desktop container */
  .seo-band p, .seo-split__text p, .seo-split__text h2,
  .seo-band__title h2, .footer__legal { width: 100% !important; max-width: 100%; }
  .footer__legal { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-8); }
  .seo-split { flex-direction: column; height: auto; }
  .seo-split__text { width: 100% !important; padding: var(--sp-24) var(--sp-20) 0; }
  .seo-band { height: auto; padding: var(--sp-20); }
}

/* ============================================================
   MOBILE ≤767 — round 3
   ============================================================ */
@media (max-width: 767px) {
  /* the desktop CTA carries padding-top:41 to line the yellow button up
     with the fields row; stacked, that padding is 41px of dead space and
     it was what made the panel 431 instead of 390 */
  .search-panel__cta { padding: 0; }
  /* the base .btn-yellow .lbl-narrow rule is (0,2,0) and was beating the
     bare class in the media query, so both labels ended up hidden */
  .search-panel__cta .btn-yellow .lbl-wide   { display: none; }
  .search-panel__cta .btn-yellow .lbl-narrow { display: inline; }
}

/* ---------- age dropdown glyphs  (19608:22960 · 11174:113656) ----------
   Chevron on the left, value in the middle, profile on the right, with
   the value between them. This was missing at BOTH breakpoints — the desktop
   button held only the value.
   The three sit in one packed row, gap 4, NOT pushed apart: on the canvas the
   row's own width (24+4+value+4+24) is exactly the 170px content box, so
   space-between had nothing to distribute at the design width and silently
   re-centred the value 5px to the left of where Figma draws it. Packed from the
   start, with the value at its natural width, reproduces both. */
.age-dropdown { justify-content: flex-end; gap: var(--sp-4); }
.age-dropdown .icon { --icon-size: 24px; color: var(--gs-black); }
.age-dropdown > span { flex: 0 1 auto; min-width: 0; text-align: right; white-space: nowrap; }
/* the label pair: wide wording by default */
.date-cell__label .lbl-narrow { display: none; }

@media (max-width: 767px) {
  /* Figma's mobile header carries only BC beside the logo */
  .util-pill[data-lang-swap] { display: none; }
  .date-cell__label .lbl-wide   { display: none; }
  .date-cell__label .lbl-narrow { display: inline; }
}

/* .age-dropdown sits in the global direction:rtl list, which flipped the
   glyphs: Figma puts the chevron on the LEFT and the profile on the
   RIGHT at both breakpoints. Order the box LTR, keep the value RTL so
   "גיל 24+" does not reverse. */
.age-dropdown { direction: ltr; }
.age-dropdown > span { direction: rtl; }

/* ============================================================
   MOBILE ≤767 — peek carousel  (11168:114871 · 11168:114916)
   The two car rows stop being rows and become a snap carousel: the
   centre card is 286 like the design, the neighbours sit 232-odd wide
   and peek in from either edge. Native scroll-snap, so the swipe is
   the platform's own — no JS, no momentum to re-implement.
   ============================================================ */
@media (max-width: 767px) {
  .advantages-row:has(.car-card) {
    display: flex;
    grid-template-columns: none;
    /* break out of the 335 section back to the full 375 bleed */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: var(--sp-12);
    /* the first and last card still land dead centre */
    padding-inline: calc((100vw - 286px) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .advantages-row:has(.car-card)::-webkit-scrollbar { display: none; }
  .advantages-row .car-card {
    flex: 0 0 286px;
    width: 286px;
    scroll-snap-align: center;
  }
}

/* ============================================================
   MOBILE ≤767 — "השכרה לטווח ארוך במחירים מיוחדים"
   title 11168:114869 · carousel 11168:114871 · button 11168:114905
   ============================================================ */
@media (max-width: 767px) {

  /* 28px Bold over two lines in a 276.9 box, centred in the 375 —
     Figma's own token here is literally named mobile/h2 = 28 */
  #longterm .sec-title {
    width: 276.9px !important;
    max-width: 276.9px;
    margin-inline: auto;
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: normal;
  }
  #longterm { gap: var(--sp-20) !important; }

  /* the peeks sit 8 from the centre card, not 12, and every card is the
     same height — the desktop row centres them, which left them ragged */
  .advantages-row:has(.car-card) {
    gap: var(--sp-8);
    align-items: stretch;
    /* The desktop row is justify-content:center. Once the content is
       wider than the box that centring splits the overflow across BOTH
       sides, and a scroller cannot reach what spills off its start —
       the first card sat at offsetLeft -416 with scrollWidth reading
       816 instead of 1257, so it could never be scrolled to. */
    justify-content: flex-start;
    /* RTL page, RTL carousel: card 1 is rightmost and is what the
       scroller opens on, and swiping right-to-left brings the next. */
    direction: rtl;
  }
  .advantages-row .car-card { height: auto; }

  /* Figma draws the neighbours at 232.36 against the centre card's 286,
     i.e. 0.8125. Driven off the scroll position itself, so the card that
     is snapped to centre is the one at full size — no observer, and it
     degrades to plain full-size cards where the timeline is unsupported. */
  @supports (animation-timeline: view()) {
    .advantages-row:has(.car-card) .car-card {
      animation: car-peek linear both;
      animation-timeline: view(inline);
      animation-range: contain 0% contain 100%;
      transform-origin: center center;
    }
    @keyframes car-peek {
      0%, 100% { transform: scale(0.8125); }
      50%      { transform: scale(1); }
    }
  }

  /* "לצפייה בכל הדגמים" — 14px with a 20px chevron, no fill, edge to edge */
  .btn-link { font-size: var(--h6-size); }
  .btn-link--block {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .advantages-row:has(.car-card) .car-card { animation: none; transform: none; }
}

/* ============================================================
   MOBILE ≤767 — car card  (desk top&mobile/car cards · 11771:141799)
   Figma's mobile carousel puts the standard 286×479.72 card in every
   slide. `.car-card--sm` shrinks the whole type scale to 16 and only
   exists for the desktop row, where the first card is the small one.
   Left on, it pushed "מחיר מיוחד ל 30+ ימים" onto a second line and
   the card came out 496.99 instead of 479.72.
   ============================================================ */
@media (max-width: 767px) {
  .car-card--sm .car-card__name b        { font-size: 22px; }
  .car-card--sm .car-card__name span     { font-size: var(--h5-size); }
  .car-card--sm .car-card__price-label   { font-size: var(--h6-size); }
  .car-card--sm .car-card__price,
  .car-card--sm .car-card__price .num    { font-size: 28px; }
  .car-card--sm .car-card__price .unit   { font-size: var(--h5-size); }
  .car-card--sm .spec span               { font-size: var(--h6-size); }
  /* the price column is 129 wide in the design, which is what keeps the
     label on one line */
  .car-card__pricebox { width: 129px; }
}

/* ---------- <picture> wrapper keeps the desktop crop working ---------- */
.seo-split__img { display: block; overflow: clip; }
.seo-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the expand/collapse controls are mobile-only */
.seo-more, .seo-less { display: none; }

/* ============================================================
   MOBILE ≤767 — "למי מתאימה השכרת רכב?"   (19389:3808)
   The desktop's side-by-side panel becomes one card: photo on top
   with the title over it, and the copy collapsed behind a
   "המשך לקרוא..." teaser that opens to the full text and "סגור".
   Colours and sizes read off the ×3 export.
   ============================================================ */
@media (max-width: 767px) {
  .seo-split {
    position: relative;
    flex-direction: column;
    width: min(100% - 2 * var(--gutter), 335px);
    height: auto;
    border-radius: var(--r-16);
    overflow: clip;
    /* mobile/rental/seo card 4 (12492:388041) is a glass material:
       fill 00D6D1 at 4% — which is --primary-04 already in the tokens —
       over Frost 4. Composited on the page's #ECECEC that solves to
       (226.6, 235.1, 234.9), and the export reads (227, 236, 235).
       I had reverse-engineered the composite as a flat gradient; this
       is the declared material instead. */
    background: var(--primary-04);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* photo box — 420 tall in both states */
  .seo-split__img {
    order: -1;
    width: 100%;
    height: 420px;
    border-radius: 0;
  }
  /* scrim so the white type holds on the photo */
  .seo-split::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    background: linear-gradient(to top,
      rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,0) 46%);
    z-index: 1;
    pointer-events: none;
  }

  .seo-split__text {
    width: 100% !important;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    gap: 0;
    align-items: stretch;
  }

  /* title sits on the photo, 44 up from its bottom edge */
  .seo-split__text h2 {
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    margin: 0;
    padding: 0 var(--sp-20) 44px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    text-align: right;
    text-transform: none;
    color: var(--gs-white);
    z-index: 2;
    pointer-events: none;
  }

  /* the teaser line, 15 up from the photo's bottom */
  .seo-more {
    display: flex;
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    padding: 0 var(--sp-20) 15px;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--sp-4);
    font-size: var(--h6-size);
    line-height: normal;
    color: var(--gs-white);
    text-align: right;
    z-index: 3;
  }
  .seo-more__teaser { white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .seo-more__link { color: var(--main-primary); white-space: nowrap; }

  /* collapsed by default */
  .seo-split__body { display: none; padding: var(--sp-20) var(--sp-20) 0; }
  .seo-split[data-seo].is-open .seo-split__body {
    display: block;
    direction: rtl;
    font-size: var(--h5-size);
    line-height: 1.1;            /* the export sets 15 lines on a 17px pitch */
    color: var(--gs-black);
    text-align: right;
    text-transform: none;
  }
  .seo-split__body p + p { margin-top: 0; }
  .seo-split[data-seo].is-open .seo-more { display: none; }
  .seo-split[data-seo].is-open .seo-less {
    display: block;
    margin: var(--sp-12) var(--sp-20) 11px;
    font-size: var(--h6-size);
    /* Leech change 2 asked for 800; EricaSansFOT ships 300/400/700 only,
       so 800 resolves to 700 — measured identical glyph widths (77.56).
       700 is the weight that actually exists. */
    font-weight: 700;
    color: var(--main-primary);
    text-align: left;
    align-self: flex-start;
  }
}

/* ============================================================
   Lead modal   desktop/popup/registration encouragement
                (11149:115462)  —  335 × 581

   Every number below is Figma's. The vertical stack adds up:
   24 pad + 24 close row + 24 gap + 485 body + 24 pad = 581, and
   body = title 64 + 32 + form 389.
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-20);
}
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: var(--black-44); }

.lead {
  position: relative;
  width: 335px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: clip;
  border-radius: var(--r-16);
  /* from-[#e7f6f8] to-white to-[38.358%] */
  background: linear-gradient(to bottom, #E7F6F8 0%, var(--grey-white) 38.358%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-24) 0;
}

/* the close glyph is a Plus turned 45°, 24px, sitting 24 in from the left */
.lead__close-row {
  direction: ltr;
  display: flex;
  align-items: center;
  padding-left: var(--sp-24);
  width: 100%;
}
.lead__close { width: 24px; height: 24px; display: grid; place-items: center; }
.lead__close .icon { --icon-size: 24px; color: var(--gs-black); transform: rotate(45deg); }

.lead__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
  padding: 0 var(--sp-24);
  width: 100%;
}

/* ---------- title ---------- */
.lead__title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-16);
  width: 100%;
}
.lead__title h2 {
  width: 100%;
  font-size: var(--h3-size);          /* 24 */
  font-weight: 700;
  line-height: normal;
  text-align: center;
  color: var(--gs-black);
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}
.lead__title p {
  width: 100%;
  font-size: var(--h5-size);          /* 16 */
  line-height: normal;
  text-align: center;
  color: var(--gs-gray-3rd);
}
.lead__cap { text-transform: capitalize; }

/* ---------- form ---------- */
.lead__form  { display: flex; flex-direction: column; gap: var(--sp-18); width: 100%; }
.lead__stack { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; }
.lead__fields{ display: flex; flex-direction: column; gap: var(--sp-18); width: 100%; }

.lead__input {
  width: 100%;
  height: 50px;
  padding: var(--sp-16);
  border: 1px solid var(--gs-gray-2);
  border-radius: var(--r-8);
  background: transparent;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
  text-align: right;
  outline: none;
}
.lead__input::placeholder { color: var(--gs-black); opacity: 1; }
.lead__input:focus-visible { border-color: var(--main-primary); }

/* 127 + 33 + 127 = 287 */
.lead__names { display: flex; align-items: center; gap: 33px; width: 100%; }
.lead__names .lead__input { flex: 1 0 0; min-width: 0; }

/* 110 + 12 + 165 = 287, country box on the left */
.lead__phone { display: flex; align-items: flex-start; gap: var(--sp-12); width: 100%; }
.lead__phone .lead__input { flex: 1 0 0; min-width: 0; }
.lead__cc {
  direction: ltr;
  flex: 0 0 110px;
  height: 50px;
  padding: var(--sp-16);
  border: 1px solid var(--gs-gray-2);
  border-radius: var(--r-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lead__flag { width: 24px; height: 15px; }
.lead__cc-code { display: flex; align-items: center; gap: var(--sp-4); }
.lead__cc-code span {
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-black);
}
/* Figma flips the polygon so it points down */
.lead__cc-code img { width: 11px; height: 7px; transform: scaleY(-1); }

/* ---------- legal + consent ---------- */
.lead__legal { display: flex; flex-direction: column; gap: var(--sp-24); width: 100%; }
.lead__legal p {
  width: 100%;
  font-size: var(--h7-size);          /* 12 */
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--gs-gray-3rd);
  text-align: right;
  white-space: pre-wrap;
}
.lead__legal a { text-decoration: underline; text-underline-position: from-font; }
.lead__consent { display: flex; align-items: flex-start; gap: var(--sp-8); width: 100%; }
.lead__consent p { flex: 1 0 0; min-width: 0; white-space: normal; }
.lead__check {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border: 1.148px solid var(--main-primary);
  border-radius: var(--r-4);
  background: var(--main-primary);
  position: relative;
}
.lead__check img { position: absolute; left: 4.59px; top: 4.59px; width: 14px; height: 14px; }
.lead__check[aria-checked="false"] { background: transparent; }
.lead__check[aria-checked="false"] img { display: none; }

/* ---------- CTA ---------- */
/* Figma ships it in the disabled skin: E2F1F1 on Third gray */
.lead__cta {
  width: 100%;
  height: 47px;
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-4);
  background: var(--btn-primary-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  color: var(--gs-gray-3rd);
  transition: background .15s ease;
}
.lead__cta .icon { --icon-size: 20px; color: var(--gs-gray-3rd); }
.lead__cta:hover { background: var(--turq-3); }

body.is-locked { overflow: hidden; }

/* Figma puts the consent checkbox at x266 of the 287 row — on the RIGHT,
   with the copy to its left. In an RTL row the paragraph came first and
   took that side, so the box is ordered ahead of it. */
.lead__check { order: -1; }

/* ============================================================
   MOBILE ≤767 — "צריכים עזרה? אנחנו כאן בשביל זה"  (11180:112579)
   375×256: 24/20 padding, gap 18 down to the button stack, and the
   stack itself on gap 12. 24 + 46 + 18 + 144 + 24 = 256.
   ============================================================ */
@media (max-width: 767px) {
  .needhelp {
    width: min(100% - 2 * var(--gutter), 335px);
    padding: var(--sp-24) var(--sp-20);
    gap: var(--sp-18);                 /* title -> stack */
    align-items: center;
  }
  /* two lines, and 28 Bold — Figma's token here is literally mobile/h2 */
  .needhelp h2 {
    width: 100%;
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: normal;
    text-transform: none;
    white-space: normal;
    text-box: trim-both cap alphabetic;
  }
  .needhelp h2 span { display: block; }

  .needhelp__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-12);
    padding: 0;
    width: 100%;
  }
  .needhelp__btn { flex: 0 0 auto; width: 100%; }
  /* the secondary button carries a 0.5px stroke Figma draws inside, so
     an inset shadow rather than a border — a border would grow the 40 */
  .needhelp__btn { box-shadow: inset 0 0 0 0.5px var(--gs-black); }
}

/* ============================================================
   Segment landing pages  (electric / family / 7-seater / luxury / mini)

   No new design: every one of them is the home page's header, hero,
   search panel, car row and footer re-assembled. These few rules are
   only what the three differences need — a real <h1> in the hero, the
   quick-search chips as links, and the SEO copy block.
   ============================================================ */

/* the hero title is styled on the <p>; the segment pages carry an <h1>
   there instead, for the one heading a landing page must own */
.hero__title h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: normal;
  color: var(--gs-white);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}
/* 474.619 is the width the home page's own title was measured at; a segment
   name is a different length, so it sizes to its text instead */
.hero__title--seg .hero__title-1 { width: auto; max-width: 900px; }

/* The segment heroes are their own crop. The home photo is 1600x699 and is
   PLACED — 130.34% wide, pulled back 6.27% — because it is a wider frame than
   the hero box. These five are 1024x583, which is 1.7564 against the hero box's
   1440x820 = 1.7561: they were cut for this box, so they simply fill it. */
.hero__bg--seg { left: 0; width: 100%; height: 100%; object-fit: cover; }

/* the chips become links between the five pages — same pill, and the page
   you are on is the selected one and is not a link */
a.chip { text-decoration: none; }
span.chip { cursor: default; }

/* The SEO band on a segment page is 12117:163131, the same component the home
   page's "כל מה שזז" uses. Two differences: no wordmark in the title — it belongs
   to that one headline, not to a segment's — and the height is auto rather than
   the canvas's fixed 207.317, so a longer line is never clipped. Everything else
   (the 4% primary ground, the 8px radius, the squiggle, the 540px text column)
   is the component's own. */
.seo-band--seg { height: auto; min-height: 207.317px; }
/* the title row on the canvas is 49.317 tall because the wordmark sets it. With
   the wordmark gone the row would collapse to the h2's own height and pull the
   paragraph 13px up, so the row keeps the height the design gives it. */
.seo-band--seg .seo-band__title { min-height: 49.317px; justify-content: center; }
.seo-band--seg .seo-band__title h2 { text-align: center; }

/* the footer's third column — five short links, so it does not need the
   334px the other two carry */
/* .footer__cols bottom-aligns its columns, which never showed while the two
   existing ones were the same height. The categories column is shorter, so it
   would hang 60px low and its heading would not line up with the other two. */
.footer__col--cat { align-self: flex-start; }
.footer__links--cat { width: auto; min-width: 150px; }

@media (max-width: 767px) {
  .hero__title--seg .hero__title-1 { max-width: 100%; }
}

/* ============================================================
   Search-panel pickers
   branch list  12400:162087 · calendar 13246:169372 (ranges
   13464:163106 within a week, 13464:163427 across one) ·
   hours 11167:114345 · field states 19364:13760

   All three hang off a field in the search panel and are built by
   search.js rather than written into the markup, so the five segment
   pages and the home page cannot drift apart.
   ============================================================ */
.sp-pop {
  position: absolute;
  z-index: 60;
  background: var(--gs-white);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-card);
  overflow: hidden;              /* so the 8px radius clips the rows inside */
  display: none;
}
.sp-pop.is-open { display: block; }
.search-panel { position: relative; }

/* ---------- the field's own states (19364:13760) ---------- */
.date-cell:hover,
.location-input:hover { background: var(--turq-3); }
.date-cell.is-active,
.location-input.is-active { background: var(--turq-3); }

/* ---------- branch list (12400:162087) ---------- */
.sp-branches { width: 373px; overflow: hidden; }
.sp-branch {
  /* 24 / 10 padding, the two lines 8 apart — a 64px row */
  width: 100%;
  padding: 10px var(--sp-24);
  background: #fff;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  cursor: pointer;
  text-align: right;
  transition: background .12s ease;
}
.sp-branch:hover { background: var(--turq-3); }
.sp-branch__name { font-size: var(--h5-size); line-height: 1.1; color: var(--grey-black); white-space: nowrap; }
.sp-branch__addr {
  direction: ltr;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
}
.sp-branch__addr span { flex: 1 0 0; min-width: 0; font-size: var(--h5-size); line-height: 1.1; color: var(--gs-gray-3rd); text-align: right; }
.sp-branch__addr .icon { --icon-size: 16px; color: var(--gs-gray-3rd); }

/* ---------- hours (11167:114345) ---------- */
.sp-hours { width: 175px; max-height: 332px; overflow-y: auto; padding: var(--sp-12) var(--sp-20); }
.sp-hour {
  width: 100%;
  padding: var(--sp-8) 0;
  border: 0;
  border-bottom: 1px solid var(--turq-3);
  background: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: background .12s ease;
}
.sp-hour__in {
  direction: ltr;
  flex: 1 0 0;
  min-width: 0;
  padding: 0 var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
}
/* Light, not Regular — the canvas sets EricaSansFOT:Light at 20 here */
.sp-hour__in span { font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--gs-black); text-box: trim-both cap alphabetic; }
.sp-hour .icon { --icon-size: 24px; color: var(--gs-black); }
.sp-hour:hover { background: var(--turq-3); }
.sp-hour.is-on { background: var(--turq-4); }
.sp-hour.is-on .sp-hour__in span,
.sp-hour.is-on .icon { color: var(--gs-white); }

/* ---------- calendar (13246:169372) ---------- */
.sp-cal {
  /* ltr, so the DOM order lands where the glyphs point: the prev button with
     the left chevron on the left, next with the right chevron on the right.
     Inherited rtl was placing the first child on the right and swapping them. */
  direction: ltr;
  width: 705px;
  padding: 16px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sp-cal__nav {
  flex: none;
  width: 20px;
  height: 175px;
  margin-top: 63px;           /* the arrows sit at y=79 of the 333 panel */
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gs-black);
}
.sp-cal__nav .icon { --icon-size: 20px; }
.sp-cal__nav:disabled { opacity: .3; cursor: default; }
.sp-cal__months { direction: ltr; display: flex; gap: 16px; }
.sp-cal__m { width: 295px; }
/* the day names and the day cells share the 7 x 42.142857 track the canvas uses */
.sp-cal__dow, .sp-cal__grid { direction: rtl; display: grid; grid-template-columns: repeat(7, 42.142857px); }
.sp-cal__dow span {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--h5-size);
  line-height: 1.4;
  color: var(--gs-gray-3rd);
}
.sp-cal__head { height: 25px; margin-top: 16px; font-size: var(--h5-size); font-weight: 700; line-height: 1.4; color: var(--gs-black); text-align: right; }
.sp-cal__grid { margin-top: 6px; }
.sp-cal__d {
  height: 42px;
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--h5-size);
  line-height: 1.4;
  color: var(--gs-black);
  cursor: pointer;
  position: relative;
}
.sp-cal__d:disabled { color: var(--gs-gray-2); cursor: default; }
.sp-cal__d--pad { visibility: hidden; }
/* today — a grey ring, no fill */
.sp-cal__d.is-today::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--gs-gray-2);
  border-radius: 50%;
}
/* the range. Every day in it turns turquoise and carries the track's top and
   bottom edge; the caps are drawn only on the day the range starts and ends,
   so a range that crosses a week leaves its rows open where it continues. */
.sp-cal__d.in-range { color: var(--turq-4); box-shadow: inset 0 1px 0 var(--turq-4), inset 0 -1px 0 var(--turq-4); }
.sp-cal__d.in-range.range-start { box-shadow: inset 0 1px 0 var(--turq-4), inset 0 -1px 0 var(--turq-4), inset -1px 0 0 var(--turq-4); border-radius: 0 21px 21px 0; }
.sp-cal__d.in-range.range-end   { box-shadow: inset 0 1px 0 var(--turq-4), inset 0 -1px 0 var(--turq-4), inset 1px 0 0 var(--turq-4); border-radius: 21px 0 0 21px; }
.sp-cal__d.in-range.range-start.range-end { border-radius: 21px; box-shadow: inset 0 0 0 1px var(--turq-4); }

@media (max-width: 767px) {
  .sp-cal { width: min(100vw - 32px, 705px); overflow-x: auto; }
  .sp-branches { width: min(100vw - 32px, 373px); }
}