/* =============================================================================
 *  css/style.css  —  the page's own stylesheet.
 *
 *  In the skeleton it contains ONLY the site-wide chrome and the page layout:
 *      @import block        (keep it first — order matters)
 *      .header              freesbe turquoise bar (mobile only)
 *      .cookie-banner       site-wide notice
 *      .main-container      the page column, sized against the fixed aside
 *      .contact-wrap        floating phone + whatsapp
 *      .footer              legal + accessibility
 *      .aside-container     the LEAD FORM panel — full styling, all breakpoints
 *
 *  THE LAYOUT IN ONE SENTENCE: `.aside-container` is position:fixed on the
 *  inline-end edge and always visible on desktop, so `.main-container` is
 *  narrowed by exactly the aside's width; on mobile the aside becomes a
 *  full-screen panel that slides in (.hide/.show) from the .cta-wrapper button.
 *  If you change one width you must change the other.
 *
 *  ADD CAMPAIGN CSS BELOW THE MARKER AT THE BOTTOM — one block per design
 *  section, matching the component files in components/. Never restyle the
 *  aside/form internals: their class names are wired to the validation JS.
 * ========================================================================== */

@import url(components/common.css);
@import url(components/fonts.css);
@import url(components/variables.css);
@import url(components/scrollbar.css);
@import url(components/animations.css);

/* ── freesbe bar (mobile only; hidden on desktop further down) ────────────── */
.header {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: var(--freesbe-turquoise);
  height: 40px;
  width: 100%;

  .logo {
    width: 67px;
    height: 20px;
    object-fit: cover;
    margin-inline-end: 3vw;
  }
}

/* ── the page column ─────────────────────────────────────────────────────── */
.main-container {
  padding-bottom: 6vw;
  height: auto;
}

/* ── Cookie Banner ───────────────────────────────────────────────────────── */
.cookie-banner {
  width: 77.2vw;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0.8vw 3vw;
  direction: rtl;
}

@media screen and (min-width: 769px) and (max-width: 1599px) {
  .cookie-banner {
    width: 72vw;
  }
}

.mobile .cookie-banner {
  padding: 3vw 4vw;
  align-items: flex-start;
  bottom: 14vw;
  width: auto;
  z-index: 4;
}

.cookie-banner__close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-size: calc(0.6vw + 10px);
  line-height: 1;
  padding: 0;
  width: 2.2vw;
  height: 2.2vw;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2vw;
  padding-top: 5px;
}

.cookie-banner__content a {
  color: #1a1a1a;
  text-decoration: underline;
}

/* ── floating contact buttons ────────────────────────────────────────────── */
.contact-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 60px;
  position: fixed;
  z-index: 2;

  .contact-button {
    .icon {
      width: 60px;
      height: 50px;
    }
  }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.accessibility {
  display: flex;
}

.footer {
  color: #000;
  padding-inline: 7%;

  .text {
    gap: 5px;

    &:not(:last-of-type) {
      margin-bottom: 10px;
      font-size: 0.94vw;
      font-weight: 700;
    }
  }

  .link {
    color: #000;
    text-decoration: underline;
    text-decoration-skip-ink: none;

    &.underline {
      text-decoration: underline;
      width: 8vw;
    }
  }
}

/* =============================================================================
 *  THE LEAD FORM PANEL — treat as LOCKED.
 *  Every class below is referenced either by components/form.php or by the
 *  validation in scripts/global-script.js (.error / .success-input /
 *  .has-content / .placeholder-text / .success are toggled from JS).
 *  Recolour via the variables in css/components/variables.css; do not rename.
 * ========================================================================== */
.aside-container {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  background: #000;
  color: #fff;
  overflow: auto;
  padding-bottom: 2vw;

  .aside-top-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--freesbe-turquoise);
    width: 100%;
    height: 40px;
  }

  .logo-icon {
    width: 95px;
  }

  .aside-logo {
    object-fit: cover;
    margin-inline: auto;
    display: block;
    margin-top: 20px;
  }

  .title {
    max-width: 60vw;
    width: 100%;
    text-wrap: balance;
    line-height: 1;
    margin-inline: auto;
    text-align: center;
    direction: ltr;
    margin-top: 1rem;
    font-weight: 400;
  }

  .subtitle {
    text-align: center;
    margin-top: 10px;
    font-weight: 400;
  }

  .mandatory-text {
    margin-top: 2rem;
  }

  .form {
    display: flex;
    flex-direction: column;

    .input-placeholder {
      position: absolute;
      inset-inline-start: 1rem;
      z-index: 0;
      font-size: 24px;
    }

    .input-wrap {
      position: relative;

      &:has(.success-input) {
        .input {
          border-bottom: 1px solid var(--freesbe-turquoise);
        }
      }
    }

    .input {
      background-color: transparent;
      outline: none;
      border: none;
      border-bottom: 1px solid #fff;
      width: 100%;
      color: #fff;
      position: relative;
      z-index: 1;
      font-size: 24px;
      direction: rtl;

      &:focus ~ .input-placeholder,
      &.has-content ~ .input-placeholder {
        top: -18px;
        inset-inline-start: 0;
        font-size: 18px;
        transition: 0.3s;
        z-index: 0;
      }
    }

    .placeholder-text {
      font-size: 18px;
      position: absolute;
      display: none;
      color: #fff;
      z-index: 3;

      &.active {
        display: block;
      }
    }

    .dropdown-wrap {
      display: flex;
      flex-direction: column;
      position: relative;

      .input-placeholder {
        top: 0;
        z-index: 3;
      }

      &:has(.success-input) {
        .placeholder-text {
          display: block;
        }
      }
    }

    .select-place {
      background-color: #000;
      color: #fff;
      border: none;
      border-bottom: 1px solid #fff;
      overflow: auto;
      position: absolute;
      width: 100%;
      z-index: 2;
      padding-inline-start: 0.5vw;
      font-size: 24px;

      &.success-input {
        outline: none;
        border-color: var(--freesbe-turquoise);
      }
    }

    .active ~ .select-place {
      border-color: var(--freesbe-turquoise);
    }

    .error-text {
      color: #ff3939;
      position: absolute;
      z-index: 1;
      inset-inline-end: 0;
      display: none;
      font-weight: 700;
    }

    .success {
      display: none;
      position: absolute;
      color: #fff;
      z-index: 3;
      top: 0;

      &.active {
        display: block;
      }
    }

    .input-label:has(.error) {
      .error-text {
        display: block;
      }
    }

    .extra-info {
      .url {
        margin-inline-start: 0.2vw;
        color: white;
        text-decoration: underline;
      }

      .form-checkbox {
        position: relative;

        .checkbox-label {
          display: flex;
          align-items: baseline;
          gap: 0.6vw;
          position: relative;
        }

        .checkbox {
          display: none;

          &:checked ~ .checkbox-v::before {
            display: block;
          }
        }

        .checkbox-v {
          background-color: transparent;
          flex-shrink: 0;
          position: relative;
          cursor: pointer;
          padding: 0;
          border: 1px solid #fff;
          top: 0.7vw;
          inset-inline-start: 0;

          &:before {
            content: "✓";
            position: absolute;
            inset-inline-start: 0.2vw;
            display: none;
          }
        }

        .checkbox-text {
          color: #fff;
          text-wrap: pretty;
          line-height: 1.2;
          font-size: 16px;

          .url {
            color: #fff;
          }
        }
      }
    }
  }
}

/* ══════════════════════════ MOBILE (≤768px) ══════════════════════════════ */
@media screen and (max-width: 768px) {
  .contact-wrap {
    inset-inline-end: 2vw;
    bottom: 32vw;
  }

  /* leaves room for the fixed .cta-wrapper + cookie banner */
  .footer {
    padding-bottom: 50vw;
    padding-inline: 3%;
    padding-top: 4vw;

    .text {
      align-items: end;
    }
  }

  /* the form becomes a sliding full-screen panel; .hide/.show are toggled by
     #buttonDetails / #closeForm in scripts/global-script.js — LOCKED */
  .aside-container {
    width: 100%;
    transition: 0.7s ease-in-out;
    padding-bottom: 15vw;
    z-index: 5;
    direction: ltr;

    &::-webkit-scrollbar-track {
      background: #000;
    }

    &::-webkit-scrollbar-thumb {
      background: #efefef !important;
    }

    .close-x {
      top: -10px;
      inset-inline-start: unset;
      inset-inline-end: 5vw;
    }

    .aside-logo {
      width: 28.8vw;
    }

    &.hide {
      transform: translateY(100%);
    }

    &.show {
      transform: translateY(0);
    }

    .inner-wrapper {
      position: relative;
      padding-inline: 20px;
      padding-top: 1vw;
      direction: rtl;
    }

    .title {
      font-size: 27.75px;
    }

    .subtitle {
      font-size: 20.65px;
    }

    .mandatory-text,
    .error-text {
      font-size: 4.3vw;
    }

    .error-text {
      top: 10vw;
    }

    .select-place ~ .error-text {
      top: 7vw;
    }

    .form {
      gap: 11vw;
      margin-top: 6.6vw;

      .input-placeholder {
        top: -2vw;
      }

      .form-checkbox {
        .checkbox-v {
          width: 4vw;
          height: 4vw;
          top: 1.6vw;

          &::before {
            font-size: 3.8vw;
          }
        }

        .checkbox-label {
          gap: 8px;
        }
      }

      .placeholder-text {
        top: -6.8vw;
      }

      .dropdown-wrap {
        margin-bottom: 6.6vw;
      }

      .success {
        font-size: 5vw;
        inset-inline-end: 12vw;
      }

      .form-footer {
        margin-top: -6vw;
      }
    }
  }

  /* click-to-call is a mobile-only affordance (handle_c2c1.js may hide it) */
  .contact-button.phone {
    display: flex;
  }
}

/* ══════════════════════════ DESKTOP (≥769px) ═════════════════════════════ */
@media screen and (min-width: 769px) {
  .header {
    display: none;
  }

  .inner-container {
    position: relative;
  }

  .contact-wrap {
    top: 27vw;
    inset-inline-end: 2vw;
  }

  .footer {
    display: flex;
    gap: var(--space-inline);
    align-items: baseline;
    padding-top: var(--margin-50px);
    padding-bottom: 3vw;

    .text {
      align-items: baseline;
      font-size: 0.94vw;
      font-weight: 700;
    }

    .icon-accessibility {
      margin-top: -15px;
      width: 35px;
      margin-inline-start: 5px;
    }
  }

  .aside-container {
    height: 100vh;
    z-index: 2;

    .close-x {
      top: -10px;
      inset-inline-start: 1.5vw;
    }

    .aside-logo {
      width: 5.8vw;
    }

    .inner-wrapper {
      padding-inline: 1vw;

      .close-x {
        display: none;
      }
    }

    .title {
      font-size: var(--font-size-35px);
    }

    .subtitle {
      font-size: 1.25vw;
    }

    .mandatory-text {
      font-size: 0.85vw;
    }

    .error-text {
      font-size: 1.12vw;
    }

    #placeDropdown ~ .error-text {
      top: 1.6vw;
    }

    .form {
      gap: 1.9vw;
      margin-top: 1.6vw;

      .input-placeholder {
        top: 0;
      }

      .form-checkbox {
        .checkbox-v {
          width: 1.2vw;
          height: 1.2vw;

          &:before {
            font-size: 0.95vw;
            top: 0;
          }
        }

        .checkbox-label {
          gap: 0.6vw;
        }
      }

      .placeholder-text {
        top: -1.6vw;
      }

      .dropdown-wrap {
        margin-bottom: 1vw;
      }

      .success {
        font-size: 1vw;
        inset-inline-end: 2vw;
      }
    }

    &::-webkit-scrollbar-track {
      background: #000;
    }

    &::-webkit-scrollbar-thumb {
      background: #efefef !important;
    }
  }

  /* no click-to-call on desktop */
  .contact-button.phone {
    display: none;
  }
}

/* ── laptop: aside 27.396vw ≈ 395px, so the page column subtracts 395px ──── */
@media screen and (min-width: 769px) and (max-width: 1599px) {
  .main-container {
    width: calc(100vw - 395px);

    .inner-container {
      width: 104%;
    }
  }

  .aside-container {
    width: 27.396vw;

    .error-text {
      top: 3.2vw;
    }
  }

  .contact-wrap {
    inset-inline-end: 30vw;
    top: 38vw;
  }
}

/* ── large desktop: aside 22.396vw, page column subtracts 22.8vw ─────────── */
@media screen and (min-width: 1600px) {
  .main-container {
    width: calc(100vw - 22.8vw);
  }

  .aside-container {
    width: 22.396vw;

    .error-text {
      top: 2.2vw;
    }
  }

  .contact-wrap {
    inset-inline-start: 2vw;
  }
}

/* ── iOS Safari fixes kept from the reference project ───────────────────── */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 768px) {
    .form .error-text {
      top: 13vw;
    }

    .form .select-place ~ .error-text {
      top: 12vw;
    }
  }

  .contact-wrap {
    width: 60px;
  }

  .contact-wrap .contact-button {
    width: 80px;
  }

  .contact-wrap .contact-button .icon {
    width: 60px;
    height: 50px;
  }
}

/* =============================================================================
 *  ▼▼▼  CAMPAIGN STYLES — everything for the new design goes below this line.
 *
 *  - one commented block per design section, in the same order as the
 *    components required in index.php;
 *  - sizes in the --font-size-* / --space-* variables, not raw px;
 *  - campaign colours in css/components/variables.css, referenced here as
 *    var(--brand-color) etc.;
 *  - if this grows past a few hundred lines, split it into
 *    css/components/<section>.css and @import it at the top.
 * ========================================================================== */

/* ── PAGE SHELL OVERRIDES ─────────────────────────────────────────────────────
 *  This campaign has no lead form (see the note in index.php), so the page
 *  column is no longer narrowed by the fixed .aside-container, and the freesbe
 *  bar is visible on desktop too — the Figma shows it on both breakpoints.
 * ─────────────────────────────────────────────────────────────────────────── */
.main-container {
  width: 100%;
  padding-bottom: 0;

  .inner-container {
    width: 100%;
  }
}

.header {
  justify-content: center;
  display: flex;
  height: 3.698vw;              /* 71px @1920 */
  min-height: 44px;

  .logo {
    width: 4.948vw;             /* 95px @1920 */
    min-width: 70px;
    height: auto;
    margin-inline-end: 0;
    object-fit: contain;
  }
}

/* Shared scroll-reveal, taken from the Figma prototype: sections fade + rise as
   they enter the viewport. .is-visible is added by scripts/script.js.
   FAIL-SAFE: the hidden state only applies once script.js has put .js-reveal on
   <html>, so a JS error can never leave the page blank. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
 *  01 · HERO
 * ========================================================================== */
.hero {
  background-color: var(--light-gray-bg);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  align-items: center;
  position: relative;
}

.hero__content {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.hero__title {
  color: var(--brand-color);
  font-weight: 700;
  font-size: var(--font-size-80px);
  line-height: 1;
}

.hero__kicker {
  color: var(--brand-color);
  font-weight: 700;
  font-size: var(--font-size-40px);
  line-height: 1;
}

.hero__lead-line {
  color: var(--text-color);
  font-weight: 400;
  font-size: var(--font-size-40px);
  line-height: 1.1;
}

.hero__lead-line--strong {
  font-weight: 700;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================================================
 *  04 · HOW IT WORKS  —  three cards
 * ========================================================================== */
.how {
  background-color: var(--white);
}

/* Centred red line above the three cards. It carries the section's top
   padding, which is why .how__inner drops its own below. */
.how__lead {
  color: var(--brand-color);
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}

.how__inner {
  display: flex;
  margin-inline: auto;
}

.how__card {
  background-color: var(--light-gray-bg);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how__icon {
  display: block;
  object-fit: contain;
}

.how__title {
  color: var(--brand-color);
  font-weight: 700;
  line-height: 1.1;
}

.how__body {
  color: var(--text-color);
  font-weight: 400;
}

.how__body strong {
  font-weight: 700;
}

/* ── icon animations (from the Figma prototype) — they run once the card is
      revealed, so the motion is what you see while scrolling ─────────────── */
.how__card.is-visible .how__icon--download {
  animation: icon-drop 2.4s ease-in-out 0.35s infinite;
}

.how__card.is-visible .how__icon--trophy {
  animation: icon-pop 2.8s ease-in-out 0.35s infinite;
}

.how__card.is-visible .how__icon--info {
  animation: icon-pulse 2.6s ease-in-out 0.35s infinite;
}

@keyframes icon-drop {
  0%, 55%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-16%); }
  38%           { transform: translateY(14%); }
}

@keyframes icon-pop {
  0%, 60%, 100% { transform: scale(1) rotate(0deg); }
  15%           { transform: scale(1.12) rotate(-6deg); }
  32%           { transform: scale(1.12) rotate(6deg); }
  46%           { transform: scale(1.04) rotate(0deg); }
}

@keyframes icon-pulse {
  0%, 60%, 100% { transform: scale(1); opacity: 1; }
  25%           { transform: scale(1.14); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .how__card.is-visible .how__icon {
    animation: none !important;
  }
}

/* =============================================================================
 *  03 · COUNTDOWN  —  ring + copy + app CTA
 * ========================================================================== */
.countdown {
  background-color: var(--white);
}

.countdown__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* ── the ring ─────────────────────────────────────────────────────────────── */
.ring {
  position: relative;
  aspect-ratio: 1;
}

.ring__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ring__stop-start { stop-color: var(--ring-start); }
.ring__stop-end   { stop-color: var(--ring-end); }

.ring__track,
.ring__progress {
  fill: none;
  stroke-width: 12;
}

.ring__track {
  stroke: var(--light-gray-bg);
}

.ring__progress {
  stroke: url(#ringGradient);
  stroke-linecap: round;
  /* start at 12 o'clock (rotate) then mirror, so the arc runs anti-clockwise
     the way it does in the Figma */
  transform: scaleX(-1) rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.8s ease;
}

.ring__values {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ring__num {
  color: var(--text-color);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ring__label {
  color: var(--muted-text);
  font-weight: 400;
  line-height: 1.1;
}

/* ── the copy block ───────────────────────────────────────────────────────── */
.countdown__copy {
  display: flex;
  flex-direction: column;
}

.countdown__title {
  color: var(--brand-color);
  font-weight: 700;
  line-height: 1.1;
}

.countdown__lead {
  color: var(--text-color);
  font-weight: 700;
  line-height: 1.1;
}

.countdown__text {
  color: var(--text-color);
  font-weight: 400;
  line-height: 1.1;
}

.countdown__mobile-title {
  color: var(--text-color);
  font-weight: 700;
  text-align: center;
}

/* ── the app-download button (desktop inline + mobile sticky bar) ─────────── */
.app-cta {
  background-color: var(--brand-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.app-cta:hover,
.app-cta:focus-visible {
  background-color: var(--brand-color-dark);
}

.app-cta__text {
  color: var(--white);
  font-weight: 700;
  line-height: 1;
}

.app-cta__chevron {
  filter: brightness(0) invert(1);   /* the exported chevron is dark */
  transition: transform 0.25s ease;
}

.app-cta:hover .app-cta__chevron {
  transform: translateX(-4px);
}

/* ══════════════════════════ CAMPAIGN · MOBILE (≤768px) ═══════════════════ */
@media screen and (max-width: 768px) {

  /* ── freesbe bar: the mobile Figma's "SECTION" is 84px tall with the 70×20
        logo sitting at y=48, i.e. bottom-aligned — not the 44px default. The
        full height matters beyond the bar itself: it is what puts the hero at
        y≈83 and every section below it on its Figma offset. ───────────────── */
  .header {
    height: 11.2vw;                      /* 42px @375 — half the Figma's 84px,
                                            per client request */
    min-height: 0;
    align-items: flex-end;
    padding-bottom: 2.133vw;             /* 8px below the logo (halved with it) */
  }

  .header .logo {
    width: 18.667vw;                     /* 70px */
    min-width: 0;
    height: 5.333vw;                     /* 20px */
  }

  /* ── hero: the photo is the section background ─────────────────────────── */
  .hero__inner {
    min-height: 150.9vw;                 /* 566px @375 */
    padding-inline: var(--page-inline);
    padding-top: 0;
    align-items: stretch;
  }

  /* the photo fills the whole 566px section (Figma: "01 · Hero", STRETCH) and is
     centred, so the torii + car composition stays in the middle of the crop.
     No overlay: the copy sits directly on the photo. */
  /* the portrait mobile export fills the 566px frame with no distortion: it is
     scaled to the section width (375 → 680 tall) and anchored to the top, which
     is exactly how the fill sits in the mobile Figma — the crop falls on the
     wet path below the car. */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__image {
    object-position: center top;
  }

  /* Figma puts a very soft light haze behind the title so the blossoms on both
     sides stop fighting the red type. Measured off the Figma render: the photo
     is lifted ~16% towards white with a slight blur down to y≈150px, where it
     fades out completely. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 30%;                         /* ~170px of the 566px section */
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }

  .hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    justify-content: space-between;
    /* the title starts ~47px into the section so the blossoms at the top of the
       photo stay visible above it, as in the mobile Figma */
    padding-block: 12.533vw 8vw;
  }

  .hero__brand {
    display: none;                       /* not in the mobile Figma */
  }

  /* mobile Figma sets the title on ONE line — smaller than the desktop 80px,
     so "ניסאן קשקאי e-POWER" fits the 335px column */
  .hero__title {
    font-size: var(--font-size-32px);
  }

  .hero__title br {
    display: none;
  }

  .hero__kicker {
    font-size: var(--font-size-28px);
    font-weight: 400;
  }

  /* on mobile the lead sits on the photo, so it is white (not the desktop dark) */
  .hero__lead-line {
    color: var(--white);
    font-size: var(--font-size-28px);
    line-height: 1.05;
  }

  /* ── how it works: cards stack ─────────────────────────────────────────── */
  .how__lead {
    font-size: var(--font-size-32px);
    padding-inline: var(--page-inline);
    padding-block-start: 1.067vw;        /* 4px */
  }

  .how__inner {
    flex-direction: column;
    gap: 3.733vw;                        /* 14px */
    padding-inline: var(--page-inline);
    padding-block: 2.667vw 0;            /* 10px */
  }

  /* 26px inline as in the Figma; the block padding is trimmed to 19px because
     our line boxes run a little taller than Figma's, which was pushing all
     three cards ~13px over their designed 256 / 326 / 224px heights. */
  .how__card {
    padding: 5.067vw 6.933vw;            /* 19px / 26px */
    gap: 4.267vw;                        /* 16px */
  }

  .how__icon {
    width: 14.933vw;                     /* 56px */
    height: 14.933vw;
  }

  .how__icon--info {
    width: 13.333vw;                     /* 50px */
    height: 13.333vw;
  }

  .how__title {
    font-size: var(--font-size-28px);
  }

  .how__body {
    font-size: var(--font-size-18px);
    line-height: 1.33;
  }

  /* ── countdown ─────────────────────────────────────────────────────────── */
  .countdown__inner {
    flex-direction: column;
    padding-inline: var(--page-inline);
    padding-block: 10.667vw 0;           /* 40px */
    gap: 5.333vw;                        /* 20px */
  }

  .countdown__mobile-title {
    font-size: var(--font-size-28px);
    margin-bottom: 2.667vw;
  }

  .ring {
    width: 46vw;                         /* ~172px @375 */
  }

  .ring__values {
    gap: 2.133vw;
  }

  .ring__num {
    font-size: var(--font-size-30px);
  }

  .ring__label {
    font-size: var(--font-size-14px);
  }

  .countdown__copy {
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .countdown__title {
    font-size: var(--font-size-28px);
  }

  .countdown__lead,
  .countdown__text {
    font-size: var(--font-size-18px);
  }

  /* ── sticky bar (Figma: "סרגל CTA דביק") ───────────────────────────────── */
  .cta-wrapper {
    background: var(--white);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 4.8vw var(--page-inline);   /* 18px / 20px */
    /* + the notched-iPhone home indicator, so the 52px button is never clipped */
    padding-bottom: calc(4.8vw + env(safe-area-inset-bottom));
  }

  .app-cta {
    width: 100%;
    height: 13.867vw;                    /* 52px */
    gap: 2.667vw;
  }

  .app-cta__text {
    font-size: var(--font-size-18px);
  }

  .app-cta__chevron {
    width: 3.467vw;                      /* 13px */
    height: 5.333vw;
  }

  /* the inline button is desktop-only — on mobile it lives in the sticky bar.
     Needs to out-rank the .app-cta{display:flex} rule further up this file. */
  .app-cta.desktop-only {
    display: none;
  }

  /* room for the sticky bar (the Figma's 90px "מרווח לסרגל דביק") */
  .footer {
    padding-bottom: 40vw;
  }

  /* The skeleton footer sizes its type in vw tuned for desktop (0.94vw / 8vw),
     which collapses to ~3px text and a wrapped "הצהרת נגישות" link at 375px.
     Chrome markup untouched — this only makes it legible on mobile. */
  .footer .text:not(:last-of-type) {
    font-size: var(--font-size-14px);
  }

  .footer .text {
    font-size: var(--font-size-14px);
  }

  .footer .link.underline {
    width: auto;
    white-space: nowrap;
  }
}

/* ══════════════════════════ CAMPAIGN · DESKTOP (≥769px) ══════════════════ */
@media screen and (min-width: 769px) {

  /* ── hero ──────────────────────────────────────────────────────────────── */
  .hero__inner {
    height: 33.333vw;                    /* 640px @1920 */
    padding-inline: var(--page-inline);  /* 128px */
  }

  /* The Figma copy block is 497px tall while its four children only add up to
     433px — the remaining 64px is bottom padding. Reproducing it matters
     because the block is vertically centred in the 640px band: without it the
     whole column sits 32px low and LOGO_NISSAN misses its y=142. */
  .hero__content {
    width: 50%;
    gap: 2.083vw;                        /* 40px */
    padding-inline-end: 0;
    padding-bottom: 3.333vw;             /* 64px */
  }

  .hero__brand {
    width: 4.167vw;                      /* 80px */
    height: auto;
    align-self: flex-start;              /* inline-start = right in RTL */
  }

  .hero__titles,
  .hero__lead {
    display: flex;
    flex-direction: column;
  }

  .hero__media {
    width: 50%;
    height: 27.083vw;                    /* 520px @1920 */
    flex-shrink: 0;
  }

  .hero__image {
    border-radius: 16px;
  }

  /* ── how it works ──────────────────────────────────────────────────────── */
  /* The lead + the gap below it together fill the section's original 128px of
     top padding, so the white band above the cards is unchanged. */
  .how__lead {
    font-size: var(--font-size-50px);
    padding-inline: var(--page-inline);
    padding-block-start: 2.083vw;        /* 40px */
  }

  .how__inner {
    padding-inline: var(--page-inline);
    padding-block: 1.667vw 6.667vw;      /* 32px / 128px */
    gap: 1.667vw;                        /* 32px */
    align-items: stretch;
  }

  .how__card {
    flex: 1 1 0;
    padding: 2.083vw;                    /* 40px */
    gap: 1.25vw;
  }

  .how__icon {
    width: 2.917vw;                      /* 56px */
    height: 2.917vw;
  }

  .how__title {
    font-size: var(--font-size-40px);
  }

  .how__body {
    font-size: var(--font-size-24px);
    line-height: 1.35;
  }

  /* ── countdown ─────────────────────────────────────────────────────────── */
  .countdown__inner {
    padding-inline: var(--page-inline);
    padding-bottom: 6.667vw;             /* 128px */
    gap: 6.667vw;                        /* 128px */
  }

  .ring {
    width: 20.833vw;                     /* 400px @1920 */
  }

  .ring__values {
    gap: 1.042vw;
  }

  .ring__num {
    font-size: var(--font-size-72px);
  }

  .ring__label {
    font-size: var(--font-size-32px);
  }

  .countdown__copy {
    /* Exactly the Figma frame: 650px. Copy 650 + gap 128 + ring 400 = 1178,
       centred in 1920 → the block starts at x=371 and the ring lands on its
       designed x=1149. The earlier 36.5vw was what pushed the ring 25px over. */
    width: 33.854vw;                     /* 650px @1920 */
    text-align: start;
    align-items: flex-start;
  }

  /* One line in the Figma, and our FbPractica metrics need a hair more than the
     650px block to keep it there. Letting just this line run past the block is
     safe: it grows into the empty 128px gap before the ring, nowhere near the
     page gutter, so it costs no horizontal overflow. */
  .countdown__lead {
    white-space: nowrap;
  }

  .countdown__title {
    font-size: var(--font-size-80px);
  }

  .countdown__lead,
  .countdown__text {
    font-size: var(--font-size-40px);
  }

  .countdown__lead {
    margin-top: 0.5vw;
  }

  .app-cta {
    width: 18.75vw;                      /* 360px @1920 */
    height: 3.125vw;                     /* 60px */
    gap: 0.833vw;
    margin-top: 2.083vw;                 /* 40px */
  }

  .app-cta__text {
    font-size: var(--font-size-24px);
  }

  .app-cta__chevron {
    width: 0.677vw;                      /* 13px */
    height: 1.042vw;
  }
}