/* ============================================================
   CAR PRO — v2
   ============================================================ */

:root {
  --bg:           #F3F3F0;
  --surface:      #FFFFFF;
  --ink:          #111111;
  --ink-2:        #2E2E2E;
  --muted:        #6B6B66;
  --line:         #DCDCD6;
  --accent:       #E2EB70;
  --accent-hover: #D5DF55;
  --whatsapp:     #25D366;
  --paid:         #34C759;
  --due:          #FF9500;
  --error:        #D93036;

  --font-display: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-xl: 32px;
  --radius-md: 12px;
  --notch-r:   28px;   /* inverse-corner radius where panels meet the page */
}

html[lang="ar"] {
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-mono:    'Cairo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2B2B2B; }

.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent svg { transition: transform .2s; }
.btn-accent:hover svg { transform: translate(2px, -2px); }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }
[dir="rtl"] .btn-accent:hover .icon-flip { transform: scaleX(-1) translate(2px, -2px); }

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ===== HEADER ===== */
.site-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 96px;
  z-index: 10;
}

.brand {
  display: inline-flex;
  justify-self: start;
}
.brand-logo { width: auto; height: 54px; }

.site-nav { position: relative; display: flex; gap: 12px; }
.site-nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-chev { opacity: .4; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.site-nav a:hover .nav-chev,
.site-nav a[aria-expanded="true"] .nav-chev { opacity: 1; }
.site-nav a[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
/* white pill that slides under the hovered link (v2.js sets --px / --pw) */
.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--pw, 0px);
  height: 42px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(17, 17, 17, .3);
  opacity: 0;
  transform: translate(var(--px, 0px), -50%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1), opacity .2s;
  pointer-events: none;
}
.site-nav.has-hover .nav-pill { opacity: 1; }
.site-nav.no-slide .nav-pill { transition: opacity .2s; }

/* ===== NAV FLYOUT (desktop) =====
   One white card under the header: it glides, resizes and swaps its content as the
   pointer moves across the links (v2.js sets --x, --w, --h and --caret). */
.nav-flyout { display: none; }
@media (min-width: 1041px) {
  .nav-flyout {
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
    right: 0;
    z-index: 30;
    display: block;
    height: 0;
  }
  .nf-box {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--w, 600px);
    height: var(--h, 300px);
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--x, 0px), 10px) scale(.98);
    transform-origin: var(--caret, 50%) 0;
    transition:
      transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1),
      opacity .2s ease, visibility 0s linear .2s;
  }
  .nav-flyout.is-open .nf-box {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--x, 0px), 0) scale(1);
    transition:
      transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1),
      opacity .25s ease;
  }
  .nav-flyout.no-slide .nf-box { transition-property: opacity, visibility; }
  .nf-caret {
    position: absolute;
    top: -6px;
    left: var(--caret, 50%);
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 3px;
    background: var(--surface);
    box-shadow: -1px -1px 0 rgba(17, 17, 17, .07);
    transform: rotate(45deg);
    transition: left .45s cubic-bezier(.2, .8, .2, 1);
  }
  .nav-flyout.no-slide .nf-caret { transition: none; }
  .nf-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 34px 80px -24px rgba(17, 17, 17, .32), 0 0 0 1px rgba(17, 17, 17, .07);
  }
  .nf-panel {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(var(--off, 0px));
    transition: opacity .18s ease, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
  }
  .nf-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2, .8, .2, 1);
  }

  .nf-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-top: 6px;
    padding: 12px 8px 4px;
    border-top: 1px solid var(--bg);
  }
  .nf-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font: 600 13px/1.3 var(--font-mono);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
  }
  .nf-more svg { transition: transform .2s; }
  .nf-more:hover svg { transform: translate(2px, -2px); }
  [dir="rtl"] .nf-more:hover .icon-flip { transform: scaleX(-1) translate(2px, -2px); }
  .nf-at {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 99px;
    background: var(--bg);
    color: var(--ink);
    font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
    direction: ltr;
    transition: background-color .2s;
  }

  /* — Fonctionnalités — */
  .nf-features { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; width: 800px; }
  .nf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
  .nf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 12px;
    border-radius: 16px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color .2s;
  }
  .nf-item:hover,
  .nf-item:focus-visible { background: var(--bg); outline: none; }
  .nf-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg);
    transition: background-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-item:hover .nf-ico { background: var(--accent); transform: rotate(-6deg) scale(1.05); }
  .nf-item:hover .nf-at { background: var(--ink); color: var(--accent); }
  .nf-item-text { min-width: 0; }
  .nf-item-text b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
  .nf-item-text small .nf-at { margin-inline-start: 2px; vertical-align: 1px; }
  html[lang="ar"] .nf-item-text b { font-weight: 800; }
  .nf-item-text small { display: block; margin-top: 4px; color: var(--muted); font: 12.5px/1.45 var(--font-mono); }
  html[lang="ar"] .nf-item-text small { font-size: 13.5px; }
  .nf-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 100%;
    padding: 16px;
    overflow: hidden;
    border-radius: 18px;
    background: #0B0B0B;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
  }
  .nf-feature img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .82));
  }
  .nf-feature:hover img { transform: scale(1.07); }
  .nf-feature-tag {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 99px;
    background: var(--accent);
    color: var(--ink);
    font: 600 11.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  }
  .nf-feature-play {
    position: absolute;
    top: 42%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 0 0 7px rgba(226, 235, 112, .25);
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-feature-play svg { margin-left: 2px; }
  .nf-feature:hover .nf-feature-play { transform: translate(-50%, -50%) scale(1.1); }
  .nf-feature-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
  .nf-feature-sub { color: rgba(255, 255, 255, .72); font: 12px/1.4 var(--font-mono); }
  .nf-features .nf-foot { grid-column: 1 / -1; }

  /* — Tarifs — */
  .nf-pricing { width: 560px; }
  .nf-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nf-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 18px;
    background: var(--bg);
  }
  .nf-plan.is-best { background: var(--accent); }
  .nf-plan-name { font: 600 13px/1 var(--font-mono); }
  .nf-plan-badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    padding: 5px 9px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--accent);
    font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  }
  .nf-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 0; }
  .nf-price b { font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
  .nf-price span { color: var(--ink-2); font: 500 13px/1 var(--font-mono); }
  .nf-plan-note { flex: 1; margin: 8px 0 0; color: var(--ink-2); font: 12.5px/1.5 var(--font-mono); }
  html[lang="ar"] .nf-plan-note { font-size: 13.5px; }
  .nf-pick { justify-content: center; height: 42px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
  .nf-incl { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font: 500 12.5px/1.3 var(--font-mono); }
  .nf-incl svg { flex: none; padding: 3px; border-radius: 50%; background: var(--paid); color: #fff; box-sizing: content-box; }

  /* — Démos — */
  .nf-demos { width: 640px; }
  .nf-resume {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 10px 12px 10px 10px;
    padding-inline: 10px 12px;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
  }
  .nf-resume-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-resume-ico svg { margin-left: 2px; }
  .nf-resume:hover .nf-resume-ico { transform: scale(1.1); }
  .nf-resume-text { flex: 1; min-width: 0; }
  .nf-resume-text small { display: block; color: var(--accent); font: 600 11.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
  .nf-resume-text b { display: block; overflow: hidden; margin-top: 3px; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .nf-resume-bar { flex: none; width: 90px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .2); }
  .nf-resume-bar i { display: block; height: 100%; background: var(--accent); }
  .nf-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .nf-video {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color .2s;
  }
  .nf-video:hover,
  .nf-video:focus-visible { background: var(--bg); outline: none; }
  .nf-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1920 / 1094;
    overflow: hidden;
    border-radius: 9px;
    background: #1A1A1A;
  }
  .nf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .nf-video:hover .nf-thumb img { transform: scale(1.08); }
  .nf-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 6v12l9.5-6z' fill='%23111'/%3E%3C/svg%3E") center / 13px no-repeat;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
    transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-video:hover .nf-thumb::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .nf-dur {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(17, 17, 17, .82);
    color: #fff;
    font: 600 10px/1.2 'IBM Plex Mono', ui-monospace, monospace;
  }
  .nf-seen {
    position: absolute;
    top: 4px;
    left: 4px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paid);
    color: #fff;
  }
  .nf-prog { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, .3); }
  .nf-prog i { display: block; height: 100%; background: var(--accent); }
  .nf-vtext { min-width: 0; }
  .nf-vtext b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  html[lang="ar"] .nf-vtext b { font-size: 14.5px; font-weight: 700; }
  .nf-vtext small { display: block; margin-top: 3px; color: var(--muted); font: 11.5px/1.3 var(--font-mono); }
  .nf-count { color: var(--ink-2); font: 500 12.5px/1 var(--font-mono); }
  .nf-count b { color: var(--ink); font-weight: 600; }

  /* — Contact — */
  .nf-contact { width: 420px; }
  .nf-live { display: flex; align-items: center; gap: 10px; margin: 2px 6px 8px; color: var(--ink-2); font: 500 12.5px/1.3 var(--font-mono); }
  .nf-row { display: flex; align-items: center; gap: 6px; padding-inline-end: 8px; border-radius: 16px; transition: background-color .2s; }
  .nf-row:hover { background: var(--bg); }
  .nf-row-main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 10px; color: var(--ink); text-decoration: none; }
  .nf-row-main:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 14px; }
  .nf-row-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--bg);
    color: var(--ink);
    transition: background-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .nf-row:hover .nf-row-ico { background: var(--accent); transform: rotate(-6deg); }
  .nf-row-ico.is-wa,
  .nf-row:hover .nf-row-ico.is-wa { background: var(--whatsapp); color: #fff; }
  .nf-row-text { min-width: 0; }
  .nf-row-text b { display: block; font-size: 14.5px; font-weight: 700; }
  .nf-row-text small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font: 12.5px/1.3 var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
  html[lang="ar"] .nf-row-text small[dir="ltr"] { text-align: right; }
  .nf-copy {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
  }
  .nf-copy:hover { border-color: var(--ink); }
  .nf-copy svg { grid-area: 1 / 1; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
  .nf-copy svg:last-child { opacity: 0; transform: scale(.5); }
  .nf-copy.is-done { border-color: var(--paid); background: var(--paid); color: #fff; }
  .nf-copy.is-done svg:first-child { opacity: 0; transform: scale(.5); }
  .nf-copy.is-done svg:last-child { opacity: 1; transform: none; }
  .nf-cta { justify-content: center; width: 100%; height: 48px; margin-top: 10px; font-weight: 600; }
}
@media (min-width: 1041px) and (prefers-reduced-motion: reduce) {
  .nf-box,
  .nav-flyout.is-open .nf-box { transform: translate(var(--x, 0px), 0); transition: opacity .15s, visibility 0s; }
  .nf-panel,
  .nf-panel.is-active { transform: none; transition: opacity .15s, visibility 0s; }
  .nf-caret,
  .nav-pill { transition: opacity .15s; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-family: 'Cairo', var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.lang-toggle:hover { border-color: var(--ink); background: var(--surface); }

/* phones & tablets only (see "MOBILE HEADER & MENU" at the end) */
.lang-pill,
.menu-btn,
.mobile-menu { display: none; }

/* ===== HERO ===== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 72px;          /* room for the badge hanging below the panels */
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(600px, 40vw, 680px);
  padding: clamp(36px, 4.6vw, 72px);
  padding-bottom: 44px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
html[lang="ar"] .hero-title { font-weight: 800; line-height: 1.25; letter-spacing: 0; }

.hero-sub {
  margin: 32px 0 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
html[lang="ar"] .hero-sub { font-size: 18px; }
.flag-ma {
  display: inline-block;
  width: 1.4em;
  height: .93em;
  margin-inline-start: .4em;
  vertical-align: -0.1em;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .18);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.hero-ctas .btn { height: 50px; padding: 0 20px; font-weight: 600; }

.hero-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 48px;
  /* keep clear of the badge notch, which reaches ~92px into the card */
  padding-inline-end: max(0px, calc(92px - clamp(36px, 4.6vw, 72px)));
}
.store-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s;
}
.store-pill:hover { border-color: var(--ink); }

/* Visual panel */
.hero-visual {
  position: relative;
  min-height: clamp(600px, 40vw, 680px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(255, 255, 255, .45), transparent 60%),
    var(--accent);
  overflow: hidden;
  isolation: isolate;
}

.hero-phone {
  position: absolute;
  top: 120px;
  inset-inline-end: 7%;
  width: clamp(270px, 54%, 390px);
  filter: drop-shadow(0 30px 40px rgba(40, 44, 0, .28));
}

.glass-card {
  position: absolute;
  top: 40px;
  inset-inline-start: 7%;
  z-index: 2;
  width: 250px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px -8px rgba(40, 44, 0, .18);
}
.gc-label { font-size: 13px; color: var(--muted); }
.gc-value {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gc-value span { font-size: 16px; color: var(--muted); }
[dir="rtl"] .gc-value { text-align: right; }
.gc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.gc-dot { width: 8px; height: 8px; border-radius: 2px; }
.gc-dot-paid { background: var(--paid); }
.gc-dot-due  { background: var(--due); margin-inline-start: 8px; }

/* Feature list in the free space left of the phone */
.feature-stack {
  position: absolute;
  top: 188px;
  inset-inline-start: 7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-stack li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* thin rail joining the icon tiles */
.feature-stack li + li:not(.fs-more)::before {
  content: "";
  position: absolute;
  bottom: 100%;
  inset-inline-start: 19.5px;
  width: 1px;
  height: 18px;
  background: rgba(17, 17, 17, .16);
}
.fs-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -6px rgba(40, 44, 0, .2);
  color: var(--ink);
}
.fs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-title { font-size: 15px; font-weight: 500; line-height: 1.25; }
.fs-sub   { font-size: 12.5px; line-height: 1.3; color: rgba(17, 17, 17, .58); }
.fs-more { padding-inline-start: 52px; margin-top: -2px; }
.fs-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, .3);
  text-underline-offset: 4px;
}
.fs-more a:hover { text-decoration-color: currentColor; }

/* Bottom corner tab, cut out of the panel with inverse corners */
.hero-tab {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 3;
  margin: 0;
  padding: 18px 0 0;
  padding-inline: 32px 0;
  border-start-start-radius: var(--notch-r);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: end;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hero-tab::before,
.hero-tab::after {
  content: "";
  position: absolute;
  width: var(--notch-r);
  height: var(--notch-r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - .5px), var(--bg) var(--notch-r));
}
.hero-tab::before { bottom: 100%; inset-inline-end: 0; }
.hero-tab::after  { bottom: 0; inset-inline-end: 100%; }
[dir="rtl"] .hero-tab::before,
[dir="rtl"] .hero-tab::after {
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch-r) - .5px), var(--bg) var(--notch-r));
}

/* Notch between the two panels holding the rotating badge */
.hero-notch {
  --size: 176px;
  --hang: 64px;               /* how far the notch drops below the panels */
  position: absolute;
  left: 50%;
  bottom: calc(var(--hang) * -1);
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  border-radius: 40px;
  background: var(--bg);
}
.hero-notch::before,
.hero-notch::after {
  content: "";
  position: absolute;
  top: calc(var(--size) - var(--hang) - var(--notch-r));
  width: var(--notch-r);
  height: var(--notch-r);
}
.hero-notch::before {
  right: 100%;
  background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - .5px), var(--bg) var(--notch-r));
}
.hero-notch::after {
  left: 100%;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch-r) - .5px), var(--bg) var(--notch-r));
}

.hero-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  text-decoration: none;
}
.badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.badge-ring text {
  direction: ltr;
  unicode-bidi: plaintext;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--ink);
}
.badge-arrow { transition: transform .25s; }
.hero-badge:hover .badge-arrow { transform: translateY(4px); }

/* ===== APPROACH ===== */
.intro {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 0 120px;
  text-align: center;
}
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
}
.intro-title {
  margin: 32px 0 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[lang="ar"] .intro-title { font-weight: 800; line-height: 1.45; letter-spacing: 0; }
.intro-text {
  max-width: 62ch;
  margin: 28px auto 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}
html[lang="ar"] .intro-text { font-size: 18px; }

/* ===== FEATURES ===== */
.features {
  display: grid;
  gap: 0;
  padding-bottom: 120px;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
/* add .is-reversed to put the image on the other side */
.feature-row.is-reversed .feature-media { order: 2; }
.feature-row.is-reversed .feature-copy {
  padding-inline-start: clamp(0px, 3vw, 48px);
  padding-inline-end: clamp(0px, 4vw, 64px);
}

.feature-media {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(180deg, #B9B9B5 0%, #9D9D99 100%);
  overflow: hidden;
  isolation: isolate;
}
.feature-media.is-accent {
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .4), transparent 70%),
    var(--accent);
}
.feature-media img {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 46%;
  transform: translateX(-50%);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .3));
}

/* hand-held phone: wrist rises from the bottom edge, phone centred */
.feature-media .media-hand {
  top: auto;
  bottom: -1%;
  width: 48%;
  transform: translateX(-52%);
}

/* wide laptop shot: larger, sitting low, keyboard edges bleed out */
.feature-media .media-laptop {
  top: auto;
  bottom: 9%;
  width: 118%;
  max-width: none;
  filter: drop-shadow(0 30px 40px rgba(40, 44, 0, .28));
}

.feature-copy { max-width: 600px; padding-inline-start: clamp(0px, 4vw, 64px); }
.feature-copy .eyebrow-pill { height: 40px; padding: 0 14px; font-size: 15px; }
.feature-title {
  margin: 24px 0 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[lang="ar"] .feature-title { font-weight: 800; line-height: 1.4; letter-spacing: 0; }
.feature-text {
  max-width: 40ch;
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
html[lang="ar"] .feature-text { font-size: 18px; }

/* ===== ALL FEATURES (card grid) ===== */
.all-features { padding-bottom: 120px; }
.section-head { max-width: 860px; margin: 0 auto; text-align: center; }
.section-head .intro-title { font-size: clamp(2rem, 3.6vw, 3rem); }

.fgrid-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--ink-2);
  font: 500 13.5px/1.4 var(--font-mono);
  text-align: center;
}
html[lang="ar"] .fgrid-hint { font-size: 15px; }
.fgrid-hint-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.fcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.fcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(17, 17, 17, .18); }
.fcard.is-accent { background: var(--accent); }

.fcard-icon {
  display: grid;
  flex: none;
  place-items: center;
  align-self: flex-start;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
}
.fcard.is-accent .fcard-icon { border-color: transparent; background: var(--surface); }

.fcard-title {
  margin: 22px 0 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
html[lang="ar"] .fcard-title { font-weight: 800; letter-spacing: 0; }
.fcard-text {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
html[lang="ar"] .fcard-text { font-size: 15px; }

/* video moments: each line opens the demo player at that second */
.fcard-moments { margin: 14px 0 18px; padding: 0; list-style: none; }
.fcard-moments li + li { border-top: 1px solid var(--bg); }
.fcard.is-accent .fcard-moments li + li { border-top-color: rgba(17, 17, 17, .1); }
.fm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
html[lang="ar"] .fm { font-size: 14.5px; }
.fm-t {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-width: 56px;
  padding: 5px 8px;
  border-radius: 99px;
  background: var(--bg);
  font: 600 11.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  transition: background-color .2s, color .2s;
}
.fm-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm:hover .fm-t { background: var(--accent); }
.fm:hover .fm-label { text-decoration: underline; text-underline-offset: 3px; }
.fm:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.fcard.is-accent .fm-t { background: var(--surface); }
.fcard.is-accent .fm:hover .fm-t { background: var(--ink); color: var(--accent); }

.fcard-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-top: auto;
  padding: 0 6px 0 12px;
  padding-inline: 12px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s;
}
.fcard-link:hover { background: var(--accent-hover); }
.fcard-dur {
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(17, 17, 17, .1);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* the Scan card: lime, two columns wide, with a video frame */
.fcard.is-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
}
.fcard-main { display: flex; flex-direction: column; min-width: 0; }
.fcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcard-badge {
  padding: 7px 11px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--accent);
  font: 600 12px/1 var(--font-mono);
  white-space: nowrap;
}
.fcard.is-wide .fcard-moments { margin-bottom: 0; }
.fcard-media {
  position: relative;
  display: block;
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: #0B0B0B;
  isolation: isolate;
}
.fcard-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.fcard-media:hover img { transform: scale(1.04); }
.fcard-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.fcard-play svg { margin-left: 3px; }
.fcard-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.fcard-media:hover .fcard-play { transform: translate(-50%, -50%) scale(1.08); }
.fcard-media:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.fcard-at {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(17, 17, 17, .78);
  color: #fff;
  font: 600 12px/1 var(--font-mono);
}

/* features without a video yet, and the link to every demo */
.fmore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
  padding: 14px 14px 14px 20px;
  padding-inline: 20px 14px;
  border-radius: 22px;
  background: var(--surface);
}
.fmore-label { color: var(--muted); font: 600 13px/1 var(--font-mono); }
.fmore-list { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fmore-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  color: var(--ink-2);
  font: 500 13px/1 var(--font-mono);
  text-decoration: none;
  white-space: nowrap;
}
html[lang="ar"] .fmore-pill { font-size: 14px; }
.fmore-pill.is-video { border-color: var(--ink); color: var(--ink); transition: background-color .2s, border-color .2s; }
.fmore-pill.is-video:hover { border-color: var(--accent); background: var(--accent); }
.fmore-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: 600 13px/1 var(--font-mono);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}
.fmore-all:hover { background: #2B2B2B; }

/* "watch it" buttons in the feature rows and under the 3 steps */
.feature-demo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 5px 6px 5px 5px;
  padding-inline: 5px 6px;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  color: var(--ink);
  font: 600 14px/1 var(--font-mono);
  text-decoration: none;
  transition: background-color .2s;
}
html[lang="ar"] .feature-demo { font-size: 15px; }
.feature-demo:hover { background: var(--surface); }
.feature-demo-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.feature-demo-ico svg { margin-left: 2px; }
.feature-demo:hover .feature-demo-ico { transform: scale(1.08); }
.feature-demo-t {
  padding: 7px 9px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--accent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.feature-demo-alt {
  display: table;
  margin-top: 14px;
  color: var(--ink-2);
  font: 500 13.5px/1.4 var(--font-mono);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.feature-demo-alt:hover { color: var(--ink); }
.ez-cta { display: flex; justify-content: center; margin-top: 8px; }

/* ===== EASY TO USE (3 steps that play like a story) =====
   v2.js adds .is-live, marks the current step .is-active and pauses with .is-paused.
   Without JS the three phones simply sit side by side. */
.ez { padding-bottom: 120px; }
.ez-player { margin-top: 56px; }

.ez-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
  padding: clamp(48px, 5vw, 72px) clamp(20px, 3vw, 48px) clamp(36px, 4vw, 52px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle, rgba(17, 17, 17, .09) 1.2px, transparent 1.7px) 0 0 / 22px 22px,
    var(--surface);
  overflow: hidden;
  isolation: isolate;
}

.ez-phone {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ez-shot {
  position: relative;
  width: clamp(160px, 17vw, 250px);
  isolation: isolate;
}
.ez-shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 30px rgba(17, 17, 17, .22));
  user-select: none;
  -webkit-user-drag: none;
}
/* lime glow behind the phone in focus */
.ez-shot::before {
  content: "";
  position: absolute;
  inset: 4% -42% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 235, 112, .95), rgba(226, 235, 112, 0));
  opacity: 0;
  transition: opacity .6s;
}
.ez-phone.is-active .ez-shot::before { opacity: 1; }

.ez.is-live .ez-phone { cursor: pointer; }
.ez.is-live .ez-phone.is-active { cursor: default; transform: translateY(-14px); }
.ez.is-live .ez-phone:not(.is-active) { opacity: .5; transform: scale(.94); }
@media (hover: hover) {
  .ez.is-live .ez-phone:not(.is-active):hover { opacity: .8; }
}

/* floating result tags, one per phone */
.ez-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding-inline: 6px 14px;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: 0 14px 30px -12px rgba(17, 17, 17, .32), 0 0 0 1px rgba(17, 17, 17, .06);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .35s, transform .5s cubic-bezier(.2, .7, .2, 1);
}
html[lang="ar"] .ez-tag { font-size: 14px; }
.ez-tag-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paid);
  color: #fff;
}
.ez-tag.is-scan   { top: 30%; inset-inline-end: -24%; }
.ez-tag.is-sign { top: 58%; inset-inline-start: -24%; }
.ez-tag.is-sign .ez-tag-icon { background: var(--accent); color: var(--ink); }
.ez-tag.is-wa     { bottom: 15%; inset-inline-end: -20%; }
.ez-tag.is-wa .ez-tag-icon { background: var(--whatsapp); }
.ez.is-live .ez-phone:not(.is-active) .ez-tag { opacity: 0; transform: translateY(10px) scale(.88); }
.ez.is-live .ez-phone.is-active .ez-tag { transition-delay: .25s; }

/* hand-drawn arrows between the phones */
.ez-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: clamp(48px, 6vw, 92px);
  height: auto;
  color: var(--muted);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ez-arrow.is-1 { left: 33.6%; }
.ez-arrow.is-2 { left: 66.4%; }
[dir="rtl"] .ez-arrow { transform: translate(-50%, -50%) scaleX(-1); }
.ez-arrow .ez-dash { stroke-dasharray: 5 6; }

/* the steps: a story bar on top of each */
.ez-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin: 28px 0 0;
  padding: 0 clamp(20px, 3vw, 48px);
  list-style: none;
}
.ez-step-btn {
  display: block;
  width: 100%;
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: color .3s;
}
.ez-step-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 6px; }
.ez-bar {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.ez-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left center;
}
[dir="rtl"] .ez-bar i { transform-origin: right center; }
.ez.is-live .ez-step:not(.is-active):not(.is-done) .ez-bar i { transform: scaleX(0); }

.ez-head { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ez-num {
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 9px;
  border: 1.5px solid currentColor;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  transition: background-color .3s, color .3s, border-color .3s;
}
.ez-step.is-active .ez-num { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.ez-title {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
html[lang="ar"] .ez-title { font-weight: 800; }
.ez-text {
  display: block;
  max-width: 36ch;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  transition: color .3s;
}
html[lang="ar"] .ez-text { font-size: 16px; }
.ez.is-live .ez-step:not(.is-active) .ez-step-btn,
.ez.is-live .ez-step:not(.is-active) .ez-text { color: var(--muted); }
.ez.is-live .ez-step:not(.is-active) .ez-step-btn:hover,
.ez.is-live .ez-step:not(.is-active) .ez-step-btn:hover .ez-text { color: var(--ink); }

/* ===== WHY CAR PRO ===== */
.why { padding-bottom: 120px; }

/* Heading accents: "paperasse" gets struck out, "sérénité" highlighted */
.mark-strike { position: relative; white-space: nowrap; }
.mark-strike::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 54%;
  height: .085em;
  border-radius: 99px;
  background: var(--due);
  transform: rotate(-2.5deg);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1) .45s;
}
[dir="rtl"] .mark-strike::after { transform-origin: right center; }
.mark-glow {
  padding: 0 .08em;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 86% / 100% .36em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .8s cubic-bezier(.2, .7, .2, 1) .8s;
}
[dir="rtl"] .mark-glow { background-position: 100% 86%; }
.can-reveal [data-reveal]:not(.is-in) .mark-strike::after { transform: scaleX(0) rotate(-2.5deg); }
.can-reveal [data-reveal]:not(.is-in) .mark-glow { background-size: 0% .36em; }

/* Before / after comparison.
   --b   share of the "before" photo (0–100, set by v2.js)
   --pos handle position from the left edge (mirrored in RTL) */
.ba {
  --b: 50;
  --pos: var(--b);
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  max-height: min(82vh, 820px);
  margin-top: 56px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  background: #DAD8D2;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .ba { --pos: calc(100 - var(--b)); }

.ba-layer { position: absolute; inset: 0; }
.ba-layer img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba-before {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
  will-change: clip-path;
}
[dir="rtl"] .ba-before { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }

/* Frosted captions live inside each photo layer, so the divider cuts them too */
.ba-caption {
  position: absolute;
  bottom: 24px;
  max-width: min(320px, 40%);
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 34px -14px rgba(17, 17, 17, .45);
}
.ba-before .ba-caption { inset-inline-start: 24px; }
.ba-after .ba-caption  { inset-inline-end: 24px; }
.ba-caption strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ba-caption span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.ba-chip {
  position: absolute;
  top: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 24px -12px rgba(17, 17, 17, .45);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.ba-chip:hover { background: #fff; }
.ba-chip:active { transform: scale(.96); }
.ba-chip.is-before { inset-inline-start: 20px; }
.ba-chip.is-after  { inset-inline-end: 20px; }
.ba-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.is-before .ba-dot { background: var(--due); }
.is-after .ba-dot  { background: var(--paid); }

.ba-handle {
  position: absolute;
  inset-block: 0;
  left: calc(var(--pos) * 1%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  margin-left: -32px;
  outline: none;
  cursor: ew-resize;
  touch-action: none;
}
.ba-handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(17, 17, 17, .08), 0 0 24px rgba(17, 17, 17, .35);
}
.ba-knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 14px 30px -8px rgba(17, 17, 17, .55);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.ba-knob::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.ba-handle:hover .ba-knob,
.ba.is-dragging .ba-knob { transform: scale(1.08); }
.ba-handle:focus-visible .ba-knob {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink), 0 14px 30px -8px rgba(17, 17, 17, .55);
}
.ba-hint {
  position: absolute;
  top: calc(50% + 46px);
  left: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.ba.is-touched .ba-hint { opacity: 0; transform: translate(-50%, 6px); }

/* Sans / Avec comparison: rows line up across both cards (subgrid) */
.vs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(5, auto) auto;
  column-gap: 16px;
  margin-top: 16px;
}
.vs-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  padding: clamp(28px, 3vw, 40px) clamp(32px, 3.5vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.vs-card.is-after { background: var(--accent); }

.vs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 22px;
}
.vs-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
html[lang="ar"] .vs-title { font-weight: 800; letter-spacing: 0; }
.vs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vs-card.is-before .vs-tag { color: var(--muted); }
.vs-card.is-after .vs-tag  { border-color: rgba(17, 17, 17, .2); }

.vs-list {
  display: grid;
  grid-row: 2 / span 5;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vs-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
}
html[lang="ar"] .vs-list li { font-size: 16.5px; }
.vs-card.is-before .vs-list li { color: var(--muted); }
.vs-card.is-after .vs-list li  { border-top-color: rgba(17, 17, 17, .12); font-weight: 500; }
.vs-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.vs-card.is-before .vs-mark { background: var(--bg); color: var(--muted); }
.vs-card.is-after .vs-mark  { background: var(--ink); color: var(--accent); }

.vs-foot {
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.vs-foot strong { color: var(--ink); font-weight: 600; }
.vs-card.is-after .vs-foot { border-top-color: rgba(17, 17, 17, .12); }
.vs-foot .btn { font-weight: 600; }
.vs-foot .btn svg { transition: transform .2s; }
.vs-foot .btn:hover svg { transform: translate(2px, -2px); }
[dir="rtl"] .vs-foot .btn:hover .icon-flip { transform: scaleX(-1) translate(2px, -2px); }

/* Round badge sitting in a cut-out between the two cards */
.vs-swap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 8px solid var(--bg);
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
}
[dir="rtl"] .vs-swap svg { transform: scaleX(-1); }

/* ===== PRICING ===== */
.pricing { padding-bottom: 120px; }

/* Day / month / year switch with a sliding lime thumb (--i set by v2.js) */
.period { margin: 40px 0 0; padding: 0; border: 0; min-width: 0; }
.period-switch {
  --i: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.period-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 3);
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
[dir="rtl"] .period-thumb { left: auto; right: 5px; transform: translateX(calc(var(--i) * -100%)); }
.period label { position: relative; z-index: 1; cursor: pointer; }
.period input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.period label span {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color .25s;
}
.period input:checked + span { color: var(--ink); font-weight: 600; }
.period input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.plans2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: stretch;
  max-width: 1120px;
  margin: 32px auto 0;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.pcard.is-featured { background: var(--ink); color: #fff; }

.is-featured .pcard-head { padding-inline-end: 132px; }
.pcard-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-bottom: 16px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.pcard-name { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.015em; }
html[lang="ar"] .pcard-name { font-weight: 800; letter-spacing: 0; }
.pcard-tag { margin: 6px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.is-featured .pcard-tag { color: rgba(255, 255, 255, .6); }

.pcard-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 28px;
}
.pcard-amount {
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.is-featured .pcard-amount { color: var(--accent); }
.pcard-unit { font-family: var(--font-mono); font-size: 15px; color: var(--muted); }
.is-featured .pcard-unit { color: rgba(255, 255, 255, .65); }
.pcard-was {
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, .45);
  text-decoration: line-through;
  text-decoration-color: var(--due);
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
.pcard-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
}
.is-featured .pcard-note { color: rgba(255, 255, 255, .8); }
.pcard-note svg { flex: none; color: var(--accent); }
.pcard-cta { justify-content: center; height: 52px; margin-top: 24px; font-weight: 600; }
.pcard-cta svg { transition: transform .2s; }
.pcard-cta:hover svg { transform: translate(2px, -2px); }
[dir="rtl"] .pcard-cta:hover .icon-flip { transform: scaleX(-1) translate(2px, -2px); }

.pcard-body {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.is-featured .pcard-body { border-top-color: rgba(255, 255, 255, .12); }
.pcard-lead {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.is-featured .pcard-lead { color: rgba(255, 255, 255, .5); }
.pcard-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pcard-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.45;
}
html[lang="ar"] .pcard-list li { font-size: 16px; }
.pcard-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
}
.is-featured .pcard-check { background: var(--accent); }

/* Spinning "-37%" sticker on the yearly plan */
.pcard-badge {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 16px 34px -14px rgba(226, 235, 112, .55);
}
.pcard-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pcard-badge-ring text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--ink);
}
.pcard-badge strong { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }

/* 12-month savings bars */
.save {
  margin-top: 24px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}
.save-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}
.save-head strong { flex: none; font-family: var(--font-display); font-size: 22px; font-weight: 700; white-space: nowrap; color: var(--accent); }
.save-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .7);
}
.save-val { text-align: end; color: #fff; }
.save-track {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}
.save-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w);
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .35s;
}
.save-row.is-annual .save-fill { background: var(--accent); }
.save-row.is-annual .save-track::after {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-end: 0;
  width: calc(37.5% - 4px);
  border: 1.5px dashed rgba(226, 235, 112, .55);
  border-radius: 99px;
}
.can-reveal [data-reveal]:not(.is-in) .save-fill { width: 0; }

.assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
}
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure svg { flex: none; color: var(--paid); }

/* ===== CONTACT ===== */
.contact { padding-bottom: 120px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: stretch;
}
.contact-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: #fff;
}
.eyebrow-pill.is-light { border-color: rgba(255, 255, 255, .85); color: #fff; }
.contact-title {
  margin: 24px 0 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
html[lang="ar"] .contact-title { font-weight: 800; line-height: 1.35; letter-spacing: 0; }
.contact-text {
  max-width: 44ch;
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
}
html[lang="ar"] .contact-text { font-size: 17px; }

/* WhatsApp-style conversation that plays when the panel scrolls in */
.chat { display: grid; gap: 10px; align-self: stretch; margin: 32px 0; }
.bubble {
  position: relative;
  max-width: 86%;
  margin: 0;
  padding: 12px 14px 24px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
}
.bubble time {
  position: absolute;
  bottom: 6px;
  inset-inline-end: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: .6;
}
.bubble.is-out { justify-self: end; border-end-end-radius: 6px; background: var(--accent); color: var(--ink); }
.bubble.is-in  { justify-self: start; border-end-start-radius: 6px; background: rgba(255, 255, 255, .1); color: #fff; }
.chat-reply { display: grid; }
.chat-reply > * { grid-area: 1 / 1; }
.bubble.is-typing {
  display: none;
  align-self: start;
  justify-self: start;
  gap: 5px;
  padding: 14px 16px;
  border-end-start-radius: 6px;
  background: rgba(255, 255, 255, .1);
}
.bubble.is-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  animation: typing-dot 1s ease-in-out infinite;
}
.bubble.is-typing i:nth-child(2) { animation-delay: .15s; }
.bubble.is-typing i:nth-child(3) { animation-delay: .3s; }
.can-reveal .contact-aside .bubble.is-typing { display: inline-flex; opacity: 0; }
.can-reveal .contact-aside:not(.is-in) .bubble.is-out,
.can-reveal .contact-aside:not(.is-in) .bubble.is-in { opacity: 0; }
.can-reveal .contact-aside.is-in .bubble.is-out    { animation: bubble-in .5s cubic-bezier(.2, .7, .2, 1) .5s both; }
.can-reveal .contact-aside.is-in .bubble.is-typing { animation: typing-life 1.5s ease 1.15s both; }
.can-reveal .contact-aside.is-in .bubble.is-in     { animation: bubble-in .5s cubic-bezier(.2, .7, .2, 1) 2.6s both; }

.contact-methods { display: grid; gap: 6px; align-self: stretch; margin: auto 0 0; padding: 0; list-style: none; }
.contact-methods a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 16px;
  text-decoration: none;
  transition: background-color .2s;
}
.contact-methods a:hover { background: rgba(255, 255, 255, .06); }
.cm-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--accent);
  transition: background-color .2s, color .2s;
}
.contact-methods a:hover .cm-ico { background: var(--accent); color: var(--ink); }
.cm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-txt > span { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .55); }
.cm-txt strong { font-size: 16px; font-weight: 500; overflow-wrap: break-word; }
[dir="rtl"] .cm-txt strong[dir="ltr"] { text-align: right; }
.contact-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}
.live-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paid);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--paid);
}

/* Form */
.cform {
  --cform-pad: clamp(28px, 3.4vw, 48px);
  padding: var(--cform-pad);
  border-radius: var(--radius-xl);
  background: var(--surface);
  scroll-margin-top: 16px;   /* "Contact" links land just above the form */
}
.cform-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.015em; }
html[lang="ar"] .cform-title { font-weight: 800; letter-spacing: 0; }
.cform-sub { margin: 8px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.cform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 28px;
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field.is-wide { grid-column: 1 / -1; }
.field > label,
.field > legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.field > legend { margin-bottom: 8px; }
.field b { color: var(--due); font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 112px; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #A3A39C; }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field input:hover,
.field textarea:hover { border-color: var(--line); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(226, 235, 112, .6);
}
.field.is-invalid input { border-color: var(--error); background: #FFF6F6; }
.field.is-invalid input:focus { box-shadow: 0 0 0 4px rgba(217, 48, 54, .15); }
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--error);
}
.field-error:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip span::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  transition: background-color .2s, opacity .2s, transform .2s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip input:checked + span::before { background: var(--accent); opacity: 1; transform: scale(1.15); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.chip.is-flash span { animation: chip-flash .8s ease 2; }
/* phone pickers (see "CONTACT FORM ON PHONES" at the end): hidden on larger screens */
.pick-btn,
.pick-head,
.lbl-short { display: none; }

.cform-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
}
.cform-submit { position: relative; height: 54px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.cform-submit .send-ico { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.cform-submit:hover .send-ico { transform: translate(3px, -3px); }
[dir="rtl"] .cform-submit .send-ico { transform: scaleX(-1); }
[dir="rtl"] .cform-submit:hover .send-ico { transform: scaleX(-1) translate(3px, -3px); }
.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(17, 17, 17, .25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.cform-submit.is-loading { pointer-events: none; }
.cform-submit.is-loading .send-ico { display: none; }
.cform-submit.is-loading .spinner { display: block; }
.cform-legal {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.cform-legal a { color: var(--ink-2); text-underline-offset: 3px; }

/* ===== FAQ ===== */
.faq { padding-bottom: 120px; }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-side { position: sticky; top: 32px; }
.faq-title {
  margin: 24px 0 0;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
html[lang="ar"] .faq-title { font-weight: 800; line-height: 1.35; letter-spacing: 0; }
.faq-text {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
html[lang="ar"] .faq-text { font-size: 17px; }
.faq-help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 32px;
  padding: 24px;
  border-radius: 24px;
  background: var(--accent);
}
.faq-help p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.faq-help strong { font-size: 20px; font-weight: 700; }
.faq-help p span { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.faq-help .btn { font-weight: 600; }

.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: 22px; background: var(--surface); transition: box-shadow .3s; }
.faq-item[open] { box-shadow: 0 20px 44px -28px rgba(17, 17, 17, .35); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 22px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.faq-num {
  flex: none;
  width: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.faq-q { flex: 1; font-size: 18px; font-weight: 500; line-height: 1.35; }
html[lang="ar"] .faq-q { font-weight: 600; }
.faq-icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .3s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--ink);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item summary:hover .faq-icon { background: var(--line); }
.faq-item[open] .faq-icon { background: var(--accent); transform: rotate(135deg); }
.faq-a { padding: 0 24px 24px calc(24px + 22px + 16px); }
.faq-a p {
  max-width: 62ch;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
html[lang="ar"] .faq-a p { font-size: 16.5px; }
/* Smooth open / close where the browser can animate to height: auto */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) 0;
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: #fff;
}
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 48px;
}
.ft-logo { width: auto; height: 48px; filter: brightness(0) invert(1); }
.ft-tagline {
  max-width: 32ch;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
}
.ft-social { display: flex; gap: 8px; margin-top: 24px; }
.ft-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color .2s, color .2s, transform .2s;
}
.ft-social a:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ft-col h3 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.ft-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ft-col a {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color .2s;
}
.ft-col a:hover { color: var(--accent); }
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.ft-bottom p { display: flex; align-items: center; gap: 8px; margin: 0; }
.ft-heart { color: #FF5A5F; }
.ft-made .flag-ma { margin: 0; }
.ft-up {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ft-up:hover { background: var(--accent); color: var(--ink); }
.ft-up svg { transition: transform .25s; }
.ft-up:hover svg { transform: translateY(-2px); }

/* Giant wordmark, cropped by the bottom edge; letters lift on hover */
.ft-mark {
  margin: clamp(24px, 4cqw, 48px) 0 -.2em;
  color: var(--accent);
  font-size: 22cqw;
  font-weight: 700;
  line-height: .78;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
html[lang="ar"] .ft-mark { font-size: 19cqw; font-weight: 800; letter-spacing: 0; line-height: 1.15; margin-bottom: -.12em; }
.ft-mark span { display: inline-block; transition: transform .5s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 45ms); }
.ft-mark:hover span { transform: translateY(-.1em); }

/* ===== FLOATING CONTACT DOCK ===== */
.dock {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 20px 44px -18px rgba(17, 17, 17, .4), 0 0 0 1px rgba(17, 17, 17, .06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 40px));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s, visibility 0s .5s;
}
.dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s, visibility 0s;
}
.dock-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform .2s, background-color .2s, color .2s;
}
.dock-btn:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.dock-wa { background: var(--whatsapp); }
.dock-wa:hover { background: #1FBE5A; color: #fff; }
.dock-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--whatsapp);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.dock-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.dock-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.dock-wa:hover .dock-tip,
.dock-wa:focus-visible .dock-tip { opacity: 1; transform: translate(-50%, 0); }
.dock-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s;
}
.dock-cta:hover { background: var(--accent-hover); }
.dock-cta svg { transition: transform .2s; }
.dock-cta:hover svg { transform: translate(2px, -2px); }
[dir="rtl"] .dock-cta:hover .icon-flip { transform: scaleX(-1) translate(2px, -2px); }

/* Scroll reveal (enabled by v2.js only when motion is allowed) */
.can-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.can-reveal .intro-title[data-reveal] { transition-delay: .08s; }
.can-reveal .intro-text[data-reveal]  { transition-delay: .16s; }
.can-reveal .feature-title[data-reveal] { transition-delay: .08s; }
.can-reveal .feature-text[data-reveal]  { transition-delay: .16s; }
.can-reveal .fcard:nth-child(4n+2)[data-reveal] { transition-delay: .06s; }
.can-reveal .fcard:nth-child(4n+3)[data-reveal] { transition-delay: .12s; }
.can-reveal .fcard:nth-child(4n+4)[data-reveal] { transition-delay: .18s; }
.can-reveal .vs-card.is-after[data-reveal] { transition-delay: .12s; }
.can-reveal .pcard.is-featured[data-reveal] { transition-delay: .1s; }
/* the form only fades in: it is the target of every "Contact" link, so it must not be moving when the page scrolls to it */
.can-reveal .cform[data-reveal] { transform: none; transition-delay: .1s; }
.can-reveal .faq-item:nth-child(2)[data-reveal] { transition-delay: .05s; }
.can-reveal .faq-item:nth-child(3)[data-reveal] { transition-delay: .1s; }
.can-reveal .faq-item:nth-child(4)[data-reveal] { transition-delay: .15s; }

/* ===== MOTION ===== */
@media (prefers-reduced-motion: no-preference) {
  .badge-ring { animation: spin 18s linear infinite; }
  .hero-badge:hover .badge-ring { animation-duration: 6s; }

  .hero-card,
  .hero-visual { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-visual { animation-delay: .08s; }
  .hero-phone  { animation: rise 1s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .glass-card  { animation: pop .6s cubic-bezier(.2, .7, .2, 1) .55s both; }
  .feature-stack li { animation: pop .5s cubic-bezier(.2, .7, .2, 1) both; }
  .feature-stack li:nth-child(1) { animation-delay: .7s; }
  .feature-stack li:nth-child(2) { animation-delay: .78s; }
  .feature-stack li:nth-child(3) { animation-delay: .86s; }
  .feature-stack li:nth-child(4) { animation-delay: .94s; }
  .feature-stack li:nth-child(5) { animation-delay: 1.02s; }
  .hero-notch  { animation: fade .6s ease .4s both; }
  .ba:not(.is-touched) .ba-knob::after { animation: ba-pulse 2.4s cubic-bezier(.2, .7, .2, 1) 2s infinite; }
  .pcard-badge-ring { animation: spin 20s linear infinite; }
  .live-dot::after { animation: live-ping 2s cubic-bezier(.2, .7, .2, 1) infinite; }
  .dock.is-visible .dock-wa::after { animation: dock-ping 2.6s cubic-bezier(.2, .7, .2, 1) 1s infinite; }
  .dock.is-hello .dock-wa svg { animation: wiggle .9s ease .45s; }
  /* the step's bar fills, then v2.js moves on (animationend) */
  .ez.is-live .ez-step.is-active .ez-bar i { animation: ez-fill 4.6s linear both; }
  .ez.is-paused .ez-step.is-active .ez-bar i { animation-play-state: paused; }
  .ez-arrow .ez-dash { animation: ez-march 1.1s linear infinite; }
  .fcard-play::after { animation: ba-pulse 2.4s cubic-bezier(.2, .7, .2, 1) 1s infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes pop  { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fade { from { opacity: 0; } }
@keyframes ba-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }
@keyframes wiggle { 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
@keyframes dock-ping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes live-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes typing-life { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes chip-flash { 50% { box-shadow: 0 0 0 5px rgba(226, 235, 112, .9); } }
@keyframes ez-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ez-march { to { stroke-dashoffset: -11; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1260px) {
  .label-long { display: none; }
  .fs-title { font-size: 14px; }
  .fs-sub { font-size: 12px; }
}

@media (max-width: 1180px) {
  .site-nav { gap: 2px; }
  .site-nav a { padding: 0 13px; }
  .hero-card,
  .hero-visual { min-height: 560px; }
  .glass-card { width: 224px; }
  .gc-value { font-size: 26px; }
  .hero-stores { gap: 8px; }
  .store-pill { gap: 6px; padding: 0 12px; font-size: 13px; }
  .feature-stack { top: 176px; gap: 16px; }
  .feature-stack li + li:not(.fs-more)::before { height: 16px; }
  .fs-sub,
  .fs-more { display: none; }
  .ft-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav,
  .header-actions > .lang-toggle,
  .header-actions > .btn-dark { display: none; }

  .hero { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 32px; }
  .hero-card { min-height: 0; }
  .hero-ctas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    align-self: stretch;
  }
  .hero-ctas .btn { justify-content: center; }
  .hero-stores { padding-top: 40px; padding-inline-end: 0; }
  .store-pill { gap: 8px; padding: 0 14px; font-size: 14px; }

  .hero-visual { min-height: 0; height: clamp(440px, 100vw, 620px); }
  .hero-phone { top: 84px; inset-inline-end: 10%; width: min(60%, 340px); }
  .hero-notch { display: none; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-sub,
  .fs-more { display: revert; }
  .fs-more { display: list-item; list-style: none; }

  .plans2 { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .pcard.is-featured { order: -1; }
  .contact-grid,
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
}

@media (max-width: 860px) {
  .shell { padding: 0 16px 16px; }
  .site-header { height: 80px; }
  .brand-logo { height: 44px; }

  .hero-card { padding: 36px 24px 28px; border-radius: 28px; }
  .hero-sub { margin-top: 24px; font-size: 15px; }
  .hero-ctas { margin-top: 32px; }
  .hero-stores { padding-top: 32px; }

  .hero-visual { border-radius: 28px; }
  .glass-card { top: 24px; inset-inline-start: 16px; width: 200px; padding: 12px 14px; border-radius: 14px; }
  .gc-value { font-size: 22px; margin-top: 6px; }
  .gc-row { font-size: 11px; }
  .hero-tab { font-size: 11px; padding-top: 14px; padding-inline-start: 22px; }
  .intro { padding: 32px 4px 80px; }
  .eyebrow-pill { height: 40px; font-size: 14px; }
  .intro-title { margin-top: 24px; }
  .intro-text { margin-top: 20px; font-size: 15px; }

  .features { gap: 64px; padding-bottom: 80px; }
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature-row.is-reversed .feature-media { order: 0; }
  .feature-media { border-radius: 28px; }
  .feature-media img { width: 52%; }
  .feature-copy,
  .feature-row.is-reversed .feature-copy { padding-inline: 0; }
  .feature-text { font-size: 15px; }
  .feature-stack { top: 148px; inset-inline-start: 16px; }

  /* easy to use: the three phones become a swipeable deck */
  .ez { padding-bottom: 80px; }
  .ez-player { margin-top: 36px; }
  .ez-stage { border-radius: 28px; }
  .ez-shot { width: min(100%, 250px); }
  .ez:not(.is-live) .ez-tag,
  .ez-arrow { display: none; }
  .ez.is-live .ez-stage {
    display: block;
    height: min(calc(109vw + 21px), 561px);
    padding: 0;
    touch-action: pan-y;
  }
  .ez.is-live .ez-phone {
    position: absolute;
    top: 28px;
    left: 50%;
    z-index: 1;
    display: block;
    width: min(54%, 250px);
  }
  .ez.is-live .ez-shot { width: 100%; }
  .ez.is-live .ez-phone[data-pos="active"] { z-index: 2; transform: translateX(-50%); }
  .ez.is-live .ez-phone[data-pos="prev"] { transform: translateX(-112%) rotate(-7deg) scale(.82); }
  .ez.is-live .ez-phone[data-pos="next"] { transform: translateX(12%) rotate(7deg) scale(.82); }
  [dir="rtl"] .ez.is-live .ez-phone[data-pos="prev"] { transform: translateX(12%) rotate(7deg) scale(.82); }
  [dir="rtl"] .ez.is-live .ez-phone[data-pos="next"] { transform: translateX(-112%) rotate(-7deg) scale(.82); }
  .ez-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 28px; padding: 0 4px; }
  /* the step on screen sits first, right under the deck (order set by v2.js) */
  .ez-step { position: relative; order: var(--ez-order, 0); background: var(--bg); }
  .ez-head { margin-top: 16px; }
  .ez-text { max-width: none; margin-top: 10px; }

  .why { padding-bottom: 80px; }
  .ba { margin-top: 36px; border-radius: 28px; }
  .ba-chip { top: 12px; height: 32px; gap: 6px; padding: 0 11px; font-size: 12px; }
  .ba-chip.is-before { inset-inline-start: 12px; }
  .ba-chip.is-after  { inset-inline-end: 12px; }
  .ba-knob { width: 48px; height: 48px; }
  .ba-knob svg { width: 18px; height: 18px; }
  .ba-hint { top: calc(50% + 36px); padding: 5px 10px; font-size: 11px; }
  .ba-caption { bottom: 12px; max-width: 46%; padding: 9px 12px; border-radius: 14px; }
  .ba-before .ba-caption { inset-inline-start: 12px; }
  .ba-after .ba-caption  { inset-inline-end: 12px; }
  .ba-caption strong { font-size: 13px; }
  .ba-caption span { display: none; }

  .vs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-top: 12px; }
  .vs-card { display: block; grid-row: auto; padding: 28px 24px; border-radius: 28px; }
  .vs-list { display: block; }
  .vs-head { padding-bottom: 18px; }
  .vs-list li { padding: 14px 0; font-size: 14px; }
  html[lang="ar"] .vs-list li { font-size: 15.5px; }
  .vs-foot { padding-top: 20px; }
  .vs-foot .btn { flex: 1; justify-content: center; }
  .vs-swap {
    position: relative;
    top: auto;
    left: auto;
    justify-self: center;
    width: 68px;
    height: 68px;
    margin: -26px 0;
  }
  .vs-swap svg,
  [dir="rtl"] .vs-swap svg { transform: rotate(90deg); }

  .pricing,
  .contact,
  .faq { padding-bottom: 80px; }
  .period { margin-top: 28px; }
  .contact-aside,
  .cform,
  .site-footer { border-radius: 28px; }
  /* form chips: one row each that swipes sideways, running to the card's edges
     (the block padding leaves room for the focus ring and the plan "flash") */
  .chips {
    flex-wrap: nowrap;
    margin: -6px calc(-1 * var(--cform-pad));
    padding: 6px var(--cform-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--cform-pad);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cform-pad), #000 calc(100% - var(--cform-pad)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--cform-pad), #000 calc(100% - var(--cform-pad)), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }
  .faq-grid { gap: 28px; }
  .faq-item summary { gap: 12px; padding: 18px; }
  .faq-a { padding: 0 18px 20px calc(18px + 22px + 12px); }
  .faq-q { font-size: 16.5px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

@media (max-width: 640px) {
  .feature-stack { display: none; }
}

@media (max-width: 560px) {
  .is-featured .pcard-head { padding-inline-end: 100px; }
  .pcard-badge { top: 18px; inset-inline-end: 18px; width: 96px; height: 96px; }
  .pcard-badge strong { font-size: 20px; }
  .save { padding: 16px 14px 14px; }
  .save-head { flex-direction: column; gap: 2px; }
  .save-row { grid-template-columns: 100px minmax(0, 1fr) 40px; gap: 8px; }
  .cform-submit { flex: 1 1 100%; justify-content: center; }
  .faq-a { padding-inline-start: 18px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .ba { aspect-ratio: 4 / 3; }
  .ba-layer img { object-position: 74% 40%; }
  .all-features { padding-bottom: 80px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 12px; }
  .fcard.is-wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fcard-media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .fcard-title { margin-top: 18px; }
  .fgrid-hint { margin-top: 20px; font-size: 12.5px; }
  .fmore { padding: 16px; }
  .fmore-all { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .dock { inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .dock-cta { flex: 1; min-width: 0; padding: 0 12px; font-size: 13.5px; }
  .dock-tip { display: none; }
}

/* Phones: the three app links become equal tiles on one row */
@media (max-width: 520px) {
  .hero-stores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    gap: 8px;
  }
  .store-pill {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 6px;
    height: 68px;
    padding: 0 6px;
    font-size: 12.5px;
  }
}

/* ===== CONTACT FORM ON PHONES =====
   The whole form fits on one screen, send button included: a one-line title,
   two fields per row, and fleet size / plan as two buttons that open a sheet
   (the radios inside stay the source of truth; v2.js fills the buttons). */
@media (max-width: 640px) {
  .cform { --cform-pad: 20px; }
  .cform-title {
    overflow: hidden;
    font-size: min(22px, calc((100vw - 72px) / 14.8));   /* the title is ~14.4em wide: one line from 320px up */
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cform-sub { display: none; }
  .cform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 18px; }
  .field { gap: 6px; }
  .field > label,
  .field > legend {
    overflow: hidden;
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .field > legend { margin-bottom: 6px; }
  .field input { min-height: 46px; padding: 10px 13px; text-overflow: ellipsis; }   /* 16px text: no iOS zoom */
  .field textarea { min-height: 72px; padding: 10px 13px; }
  .field.pick { grid-column: auto; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  .cform-foot { gap: 10px; margin-top: 16px; }
  .cform-submit { height: 52px; }
  .cform-legal { font-size: 11px; line-height: 1.5; text-align: center; }

  /* the button looks like the other fields until a choice is made, then like a checked chip */
  .pick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding-block: 0;
    padding-inline: 13px 10px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: var(--bg);
    color: #A3A39C;
    font: inherit;
    font-size: 16px;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
  }
  .pick-value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pick-chev { flex: none; color: var(--ink-2); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .pick.has-value .pick-btn { border-color: var(--ink); background: var(--ink); color: #fff; }
  .pick.has-value .pick-chev { color: rgba(255, 255, 255, .7); }
  .pick.has-value .pick-value::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: 1px;
  }
  .pick-btn:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(226, 235, 112, .6); }
  .pick.is-open .pick-chev { transform: rotate(180deg); }
  .pick-btn.is-flash { animation: chip-flash .8s ease 2; }

  /* the sheet: slides up over a dimmed page (the fieldset's ::before) */
  .pick::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .pick.is-open::before { opacity: 1; pointer-events: auto; touch-action: none; }
  .chips.pick-sheet {
    position: fixed;
    inset: auto 0 0;
    z-index: 81;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    max-height: 85vh;
    margin: 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    border-radius: 28px 28px 0 0;
    background: var(--surface);
    box-shadow: 0 -24px 60px -24px rgba(17, 17, 17, .4);
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: none;
    touch-action: none;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
  }
  .pick.is-open .pick-sheet {
    transform: none;
    visibility: visible;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1);
  }
  .pick-sheet::before {
    content: "";
    flex: none;
    align-self: center;
    width: 40px;
    height: 5px;
    margin-bottom: 2px;
    border-radius: 99px;
    background: var(--line);
  }
  .pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 2px 6px; padding-inline: 4px 0; }
  .pick-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
  html[lang="ar"] .pick-title { font-weight: 800; letter-spacing: 0; }
  .pick-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
  }
  .pick-sheet .chip { display: block; flex: none; }
  .pick-sheet .chip span { display: flex; width: 100%; height: 56px; gap: 14px; padding: 0 18px; border-radius: 16px; font-size: 15px; }
  .pick-sheet .chip span::before { width: 18px; height: 18px; border: 2px solid currentColor; background: transparent; opacity: .35; }
  .pick-sheet .chip input:checked + span::before {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--ink);
    opacity: 1;
    transform: none;
  }
  html.is-picking { overflow: hidden; }
}

/* ===== MOBILE HEADER & MENU (≤ 1040px) =====
   Bar: logo · FR|ع switch · round menu button (its two lines turn into an ×).
   Menu: full-screen dark panel revealed as a circle growing from the button
   (--mx/--my/--mr set by v2.js); links, then the contact card, rise in turn. */
@media (max-width: 1040px) {
  .header-actions { gap: 8px; }

  /* language switch: the black knob slides to the active language */
  .lang-pill {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 86px;
    height: 42px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    direction: ltr;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s, box-shadow .3s;
  }
  .lang-pill::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--ink);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s;
  }
  html[lang="ar"] .lang-pill::before { transform: translateX(100%); }
  .lang-pill-opt {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: color .3s;
  }
  .lang-pill-opt.is-fr { font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; }
  .lang-pill-opt.is-ar { padding-bottom: 3px; font: 700 18px/1 'Cairo', system-ui, sans-serif; }
  html[lang="fr"] .lang-pill .is-fr,
  html[lang="ar"] .lang-pill .is-ar { color: #fff; }
  .lang-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* menu button */
  .menu-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .35s, color .35s, transform .2s;
  }
  .menu-btn:active { transform: scale(.92); }
  .menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .menu-btn-lines { position: relative; width: 18px; height: 12px; }
  .menu-btn-lines i {
    position: absolute;
    inset-inline-start: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    /* closing: straighten first, then part the lines */
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), top .22s ease .2s, width .22s ease .2s;
  }
  .menu-btn-lines i:first-child { top: 1px; width: 18px; }
  .menu-btn-lines i:last-child { top: 9px; width: 11px; }
  .menu-btn[aria-expanded="true"] { background: var(--accent); color: var(--ink); }
  .menu-btn[aria-expanded="true"] .menu-btn-lines i {
    top: 5px;
    width: 18px;
    /* opening: join the lines first, then turn them into an × */
    transition: top .2s ease, width .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.3) .18s;
  }
  .menu-btn[aria-expanded="true"] .menu-btn-lines i:first-child { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn-lines i:last-child { transform: rotate(-45deg); }

  /* while open: the header sits on the dark panel */
  html.menu-open { overflow: hidden; }
  /* the header (and the panel inside it) rise above the dock; they come back down once the panel has closed */
  .site-header { transition: z-index 0s linear .55s; }
  html.menu-open .site-header { z-index: 70; transition-delay: 0s; }
  .brand,
  .header-actions { position: relative; z-index: 61; }   /* logo, switch and button stay above the panel */
  .brand-logo { transition: filter .35s ease .1s; }
  html.menu-open .brand-logo { filter: brightness(0) invert(1); }
  html.menu-open .lang-pill { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
  html.menu-open .lang-pill::before { background: var(--accent); }
  html.menu-open .lang-pill-opt { color: rgba(255, 255, 255, .6); }
  html.menu-open[lang="fr"] .lang-pill .is-fr,
  html.menu-open[lang="ar"] .lang-pill .is-ar { color: var(--ink); }

  /* the panel */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 96px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(90% 50% at 100% 0%, rgba(226, 235, 112, .14), transparent 70%),
      var(--ink);
    color: #fff;
    visibility: hidden;
    clip-path: circle(0 at var(--mx, calc(100% - 40px)) var(--my, 40px));
    transition: clip-path .5s cubic-bezier(.7, 0, .3, 1), visibility 0s linear .5s;
  }
  [dir="rtl"] .mobile-menu { background: radial-gradient(90% 50% at 0% 0%, rgba(226, 235, 112, .14), transparent 70%), var(--ink); }
  .mobile-menu.is-open {
    visibility: visible;
    clip-path: circle(var(--mr, 150vmax) at var(--mx, calc(100% - 40px)) var(--my, 40px));
    transition: clip-path .65s cubic-bezier(.7, 0, .2, 1);
  }

  .mm-list { margin: 0; padding: 0; list-style: none; }
  .mm-list li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .mm-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-num { flex: none; min-width: 22px; color: var(--accent); font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; }
  .mm-label {
    font-size: clamp(26px, 7.4vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  html[lang="ar"] .mm-label { font-weight: 800; line-height: 1.35; letter-spacing: 0; }
  .mm-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 99px;
    background: var(--accent);
    color: var(--ink);
    font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
  }
  .mm-arrow {
    flex: none;
    margin-inline-start: auto;
    color: rgba(255, 255, 255, .35);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .3s;
  }
  .mm-list a:hover .mm-arrow,
  .mm-list a:focus-visible .mm-arrow,
  .mm-list a:active .mm-arrow { color: var(--accent); transform: translate(3px, -3px); }
  [dir="rtl"] .mm-list a:hover .mm-arrow,
  [dir="rtl"] .mm-list a:focus-visible .mm-arrow,
  [dir="rtl"] .mm-list a:active .mm-arrow { transform: scaleX(-1) translate(3px, -3px); }
  .mm-list a:active .mm-label { transform: translateX(6px); }
  [dir="rtl"] .mm-list a:active .mm-label { transform: translateX(-6px); }
  .mm-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

  .mm-cta {
    margin-top: auto;
    padding: 20px;
    border-radius: 24px;
    background: var(--accent);
    color: var(--ink);
  }
  .mm-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1.2 var(--font-mono); }
  .mm-cta-title { margin: 12px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
  html[lang="ar"] .mm-cta-title { font-weight: 800; letter-spacing: 0; }
  .mm-cta-actions { display: flex; gap: 10px; margin-top: 16px; }
  .mm-contact { flex: 1; justify-content: center; height: 52px; font-weight: 600; }
  .mm-wa {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--whatsapp);
    color: #fff;
  }

  .mm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
  .mm-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .mm-stores a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 99px;
    color: #fff;
    font: 500 12.5px/1 var(--font-mono);
    text-decoration: none;
  }
  .mm-social { display: flex; gap: 8px; }
  .mm-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
  }

  /* links, card and footer rise in turn once the circle has opened */
  .mm-list li,
  .mm-cta,
  .mm-foot {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .mobile-menu.is-open .mm-list li,
  .mobile-menu.is-open .mm-cta,
  .mobile-menu.is-open .mm-foot {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease calc(.22s + var(--i, 0) * .055s), transform .6s cubic-bezier(.2, .8, .2, 1) calc(.22s + var(--i, 0) * .055s);
  }
}
/* short phones: tighter rows so the contact card shows sooner */
@media (max-width: 1040px) and (max-height: 700px) {
  .mobile-menu { gap: 16px; padding-top: 88px; }
  .mm-list a { padding: 11px 2px; }
}
/* tablets: bigger type and more air */
@media (min-width: 641px) and (max-width: 1040px) {
  .mobile-menu { padding: 112px 32px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .mm-list a { gap: 20px; padding: 20px 2px; }
  .mm-num { font-size: 14px; }
  .mm-label { font-size: clamp(40px, 6.6vw, 60px); }
  .mm-cta { padding: 28px; }
  .mm-cta-title { font-size: 30px; }
  .mm-foot { justify-content: space-between; }
}
@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open { clip-path: none; transition: opacity .2s, visibility 0s; }
  .mobile-menu { opacity: 0; }
  .mobile-menu.is-open { opacity: 1; }
  .mm-list li,
  .mm-cta,
  .mm-foot,
  .mobile-menu.is-open .mm-list li,
  .mobile-menu.is-open .mm-cta,
  .mobile-menu.is-open .mm-foot { opacity: 1; transform: none; transition: none; }
}