/* Rubik, self-hosted (Hebrew + Latin subsets) */
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/rubik-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/rubik-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/rubik-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/rubik-hebrew-800-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:900;src:url(/fonts/rubik-hebrew-900-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/rubik-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:900;src:url(/fonts/rubik-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/rubik-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/rubik-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/rubik-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/rubik-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:900;src:url(/fonts/rubik-arabic-900-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/rubik-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/rubik-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/rubik-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/rubik-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:900;src:url(/fonts/rubik-cyrillic-900-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  color-scheme: light;
  --ink:#0F2A2E;
  --teal:#135764;
  --teal-dark:#0C3D46;
  --teal-soft:#E3F1F2;
  --bg:#F3F6F6;
  --line:#E3EAEA;
  --line-strong:#C9D4D5;
  --muted:#3F5457;
  --muted-2:#5B6E70;
  --yellow:#FFC53D;
  --yellow-dark:#C98E00;
  --yellow-ink:#3D2B00;
  --red-ink:#A93A20;
  --red-soft:#FDEBE5;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Rubik",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
[hidden]{display:none !important}

.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}

/* ---------- Header ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{width:34px;height:34px;display:block}
.brand-name{font-size:22px;color:var(--teal)}
.header-cta{display:none}
.header-actions{display:flex;align-items:center;gap:10px}
.lang-link{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:700;color:var(--teal);border:2px solid transparent;transition:background .15s,border-color .15s}
.lang-link:hover{background:#FFFFFF;border-color:var(--line)}
.lang-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Main (mobile first) ---------- */
.main{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding:8px 20px 28px}
.copy{display:contents}
.copy > .pill{order:1}
.copy > .title{order:2}
.copy > .lead{order:3}
.copy > .signup{order:4}
.hero{order:5}
.copy > .chips{order:6}
.copy > .stores{order:7}

.pill{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#FFF6DB;border:2px solid #FFE7A3;color:#8A6100;font-size:14px;font-weight:800}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow)}

.title{margin:0;font-size:min(36px,9.25vw);line-height:1.12;font-weight:900}
.title-accent{color:var(--teal)}

.lead{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.desk-only{display:none}

.chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{display:flex;align-items:center;padding:6px 12px;border-radius:10px;font-size:13px;font-weight:700}
.chip-signs{background:var(--red-soft);color:var(--red-ink)}
.chip-rules{background:var(--teal-soft);color:var(--teal)}
.chip-safety{background:#EFEBFA;color:#4E3690}
.chip-vehicle{background:#FBE9F2;color:#8A2A5B}

/* ---------- Signup form ---------- */
.signup{width:100%;scroll-margin-top:24px}
.signup-form{display:flex;flex-direction:column;gap:12px;width:100%}

.field-box{display:flex;flex-direction:column;gap:8px;padding:6px;border-radius:18px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;transition:border-color .15s}
.field-box:focus-within{border-color:var(--teal)}
.field-box.is-invalid{border-color:var(--red-ink)}

.email-input{flex:1;min-width:0;height:52px;border:0;outline:none;background:transparent;padding:0 12px;font-family:inherit;font-size:17px;color:var(--ink);text-align:right}
.email-input::placeholder{color:#8A9A9C}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border:0;border-radius:14px;background:var(--yellow);border-bottom:4px solid var(--yellow-dark);color:var(--yellow-ink);font-size:17px;font-weight:800;white-space:nowrap;cursor:pointer;transition:filter .15s}
.btn-primary:hover{filter:brightness(1.03)}
.btn-primary:active{transform:translateY(2px);border-bottom-width:2px}
.btn-primary:focus-visible,.btn-teal:focus-visible,.btn-link:focus-visible,.header-cta:focus-visible,.brand:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.btn-primary[disabled]{cursor:progress;opacity:.85;transform:none;border-bottom-width:4px}
.btn-spinner{display:none;width:18px;height:18px;border-radius:50%;border:3px solid rgba(61,43,0,.25);border-top-color:var(--yellow-ink);animation:spin .8s linear infinite}
.is-loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.consent{position:relative;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.consent-input{position:absolute;inset-inline-start:0;top:0;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
.consent-box{width:20px;height:20px;flex-shrink:0;margin-top:1px;border-radius:6px;border:2px solid var(--line-strong);background:#FFFFFF;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.consent-box svg{width:14px;height:14px;fill:none;stroke:#FFFFFF;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.consent-input:checked + .consent-box{background:var(--teal);border-color:var(--teal)}
.consent-input:checked + .consent-box svg{opacity:1}
.consent-input:focus-visible + .consent-box{outline:3px solid var(--teal);outline-offset:2px}
.consent.is-invalid .consent-box{border-color:var(--red-ink)}

.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}

/* Turnstile runs in "interaction-only" mode: usually invisible, so it must not add a flex gap */
.turnstile{margin-top:-12px}
.turnstile iframe{margin-top:12px !important}

.form-message{margin:0;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5}
.form-message.is-error{background:var(--red-soft);color:var(--red-ink)}
.form-message.is-info{background:var(--teal-soft);color:var(--teal)}

/* ---------- Success state ---------- */
.done{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:18px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;outline:none}
.done-head{display:flex;align-items:center;gap:14px}
.done-icon{width:56px;height:56px;flex-shrink:0;border-radius:50%;background:var(--teal);border-bottom:4px solid var(--teal-dark);box-shadow:0 0 0 6px var(--teal-soft);display:flex;align-items:center;justify-content:center;margin:6px}
.done-icon svg{width:28px;height:28px;fill:none;stroke:#FFFFFF;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.done-title{margin:0 0 4px;font-size:24px;font-weight:900}
.done-text{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.done-email{display:block;color:var(--ink);text-align:right;overflow-wrap:anywhere}

.btn-teal{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border:0;border-radius:14px;background:var(--teal);border-bottom:4px solid var(--teal-dark);color:#FFFFFF;font-size:16px;font-weight:700;cursor:pointer}
.btn-teal:active{transform:translateY(2px);border-bottom-width:2px}
.btn-teal svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-link{align-self:center;border:0;background:none;padding:4px 8px;font-size:15px;font-weight:700;color:var(--teal);cursor:pointer;border-radius:8px}

/* ---------- Store badges ---------- */
.stores{display:flex;justify-content:center;gap:12px;margin-top:8px}
/* Disabled look: the apps aren't out yet */
.store{position:relative;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:14px;background:#E3EAEA;border:2px solid #D3DCDD;color:#7C8E90;cursor:not-allowed;user-select:none;-webkit-user-select:none}
.store > svg{width:22px;height:22px;fill:none;stroke:#7C8E90;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.store-text{display:flex;flex-direction:column;line-height:1.15}
.store-small{font-size:11px;opacity:.75}
.store-name{font-size:15px;direction:ltr;text-align:right}
.store-soon{position:absolute;top:-9px;left:-8px;padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font-size:11px;font-weight:800;transform:rotate(-6deg)}

/* ---------- Hero phones (sizes scale with --h) ---------- */
/* Demo screens are pictures, not content: no selecting, dragging or long-press menus */
.hero,.hero *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hero img{pointer-events:none;-webkit-user-drag:none}
.hero{--h:clamp(280px,80.3vw,420px);position:relative;width:var(--h);height:var(--h);flex-shrink:0;align-self:center;margin-top:10px}
.hero-circle{position:absolute;left:50%;bottom:calc(var(--h) * -0.0179);width:calc(var(--h) * 0.8393);height:calc(var(--h) * 0.8393);transform:translateX(-50%);border-radius:50%;background:var(--teal-soft)}
.phone{box-sizing:content-box;position:absolute;background:var(--ink);box-shadow:0 24px 50px rgba(15,42,46,.22)}
.phone img{display:block;width:100%;height:auto}
.phone-left,.phone-right{top:calc(var(--h) * 0.1607);width:calc(var(--h) * 0.375);padding:max(5px,calc(var(--h) * 0.0125));border-radius:calc(var(--h) * 0.0571)}
.phone-left img,.phone-right img{border-radius:calc(var(--h) * 0.0446)}
.phone-left{left:calc(var(--h) * 0.0179);transform:rotate(-9deg)}
.phone-right{right:calc(var(--h) * 0.0179);transform:rotate(9deg)}
.phone-center{top:0;left:50%;z-index:2;width:calc(var(--h) * 0.4464);padding:calc(var(--h) * 0.016);border-radius:calc(var(--h) * 0.0679);margin-left:calc(var(--h) * -0.2232)}
.phone-center img{border-radius:calc(var(--h) * 0.0536)}

/* ---------- Footer ---------- */
.site-footer{margin-top:auto;display:flex;justify-content:space-between;padding:18px 20px 26px;border-top:2px solid var(--line);font-size:13px;color:var(--muted-2)}

/* ---------- Desktop ---------- */
@media (min-width:1000px){
  :root{--px:clamp(40px,8.34vw,120px)}
  .site-header{padding:24px var(--px)}
  .brand{gap:10px}
  .brand-logo{width:40px;height:40px}
  .brand-name{font-size:26px}
  .header-cta{display:flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;font-size:15px;font-weight:700;color:var(--teal)}
  .header-cta:active{transform:translateY(2px);border-bottom-width:2px}

  .main{flex:1;max-width:none;margin:0;flex-direction:row;align-items:center;gap:clamp(40px,5vw,72px);padding:0 var(--px)}
  .copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px;padding:24px 0}
  .main .copy > *{order:0}

  .title{font-size:clamp(42px,4.17vw,60px);line-height:1.1;letter-spacing:-.5px}
  .lead{max-width:520px;font-size:20px}
  .desk-only{display:inline}
  .chips{margin:0;justify-content:flex-start}

  .signup{max-width:470px}
  .field-box{flex-direction:row}
  .stores{justify-content:flex-start;margin-top:4px}

  .hero{--h:clamp(400px,39vw,560px);margin:0}

  .site-footer{margin-top:0;padding:22px var(--px);font-size:14px}
}
@media (min-width:1280px){
  html[lang=he] .title{white-space:nowrap}
}

/* ---------- Contact page ---------- */
.contact-main{flex:1;width:100%;max-width:600px;margin:0 auto;padding:12px 20px 48px;display:flex;flex-direction:column;gap:14px}
.contact-title{font-size:clamp(32px,6vw,48px);white-space:normal !important}
.contact-card{margin-top:8px;padding:20px;border-radius:18px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px}
.contact-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:14px;font-weight:700;color:var(--ink)}
.input{width:100%;height:50px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:#F8FAFA;font-family:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .15s,background .15s}
.input:focus{border-color:var(--teal);background:#FFFFFF}
.input.is-invalid{border-color:var(--red-ink)}
textarea.input{height:auto;min-height:150px;padding:12px 14px;line-height:1.55;resize:vertical}
.counter{align-self:flex-end;font-size:12px;color:var(--muted-2)}
.btn-block{width:100%}
.done-plain{padding:0;border:0}
.done-plain .btn-teal{margin-top:4px}
@media (min-width:1000px){
  .contact-main{padding-top:32px}
  .contact-card{padding:28px}
}

/* ---------- Content sections (below the fold) ---------- */
.section{padding:56px 20px}
.section-alt{background:#FFFFFF;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.section-inner{max-width:1200px;margin:0 auto}
.eyebrow{display:inline-block;font-size:14px;font-weight:800;color:var(--teal);background:var(--teal-soft);padding:5px 12px;border-radius:999px}
.section-title{margin:12px 0 10px;font-size:clamp(28px,3.4vw,42px);line-height:1.15;font-weight:900;letter-spacing:-.3px}
.section-lead{max-width:700px;margin:0 0 28px;font-size:17px;line-height:1.65;color:var(--muted)}
.card{background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px}
.section-alt .card{background:var(--bg)}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.feature-card{padding:22px}
.feature-card h3{margin:14px 0 6px;font-size:19px;font-weight:800;line-height:1.3}
.feature-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.icon-tile{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.icon-tile svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-teal{background:var(--teal-soft);color:var(--teal)}
.t-yellow{background:#FFF6DB;color:#8A6100}
.t-red{background:var(--red-soft);color:var(--red-ink)}
.t-purple{background:#EFEBFA;color:#4E3690}
.t-pink{background:#FBE9F2;color:#8A2A5B}
.t-ink{background:#E6ECEC;color:var(--ink)}

.topic-card{padding:18px}
.topic-card .chip{display:inline-flex}
.topic-card p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.note{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--muted-2)}

.license-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px}
.license-badge{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--teal);direction:ltr}
.license-card h3{margin:0;font-size:17px;font-weight:800}
.license-card p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.license-card.is-popular{border-color:var(--teal);background:var(--teal-soft)}
.license-card.is-popular .license-badge{background:var(--teal);color:#FFFFFF}
.tag{position:absolute;top:-10px;inset-inline-end:14px;padding:2px 10px;border-radius:999px;background:#FFF6DB;border:2px solid #FFE7A3;color:#8A6100;font-size:12px;font-weight:800}

.lang-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lang-pill{padding:10px 18px;font-size:17px;font-weight:700}
.lang-pill small{margin-inline-start:6px;font-size:12px;font-weight:700;color:#8A6100;background:#FFF6DB;padding:2px 8px;border-radius:999px}

.faq{display:flex;flex-direction:column;gap:10px;max-width:860px}
.faq details{padding:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:17px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;flex-shrink:0;border-right:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq details p{margin:0;padding:0 20px 18px;font-size:16px;line-height:1.7;color:var(--muted)}

.cta-band{max-width:1200px;margin:0 auto;padding:44px 24px;border-radius:24px;background:var(--teal);border-bottom:6px solid var(--teal-dark);text-align:center;color:#FFFFFF}
.cta-band h2{margin:0 0 10px;font-size:clamp(26px,3.2vw,38px);font-weight:900}
.cta-band p{margin:0 auto 22px;max-width:560px;font-size:17px;line-height:1.6;color:#CFE6E8}
.cta-band .btn-primary{display:inline-flex}

@media (min-width:640px){
  .grid-2,.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .main{min-height:calc(100vh - 92px);min-height:calc(100svh - 92px)}
  .section{padding:96px var(--px)}
  .section-lead{font-size:19px;margin-bottom:36px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:18px}
  .cta-band{padding:64px 40px}
  .section-cta{padding-top:0}
}

/* ---------- Licenses: vehicle illustrations ---------- */
.vehicle{height:120px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.license-card.is-popular .vehicle{background:#FFFFFF}
.vehicle svg{width:min(170px,80%);height:auto;overflow:visible;transition:transform .25s ease}
.vehicle .spin{transform-box:fill-box;transform-origin:center}
.license-card:hover .vehicle svg{transform:translateX(6px)}
.license-card:hover .spin{animation:spin .7s linear infinite}
.license-meta{display:flex;align-items:center;gap:12px;padding:0 4px}
.js .license-card.reveal-up .vehicle svg{opacity:0;transform:translateX(-46px);transition:transform .9s cubic-bezier(.2,.8,.25,1.05),opacity .5s ease;transition-delay:calc(var(--i,0) * 70ms + 150ms)}
.js .license-card.reveal-up.in .vehicle svg{opacity:1;transform:none}
.js .license-card.reveal-up .spin{animation:spin .45s linear 2;animation-play-state:paused}
.js .license-card.reveal-up.in .spin{animation-play-state:running}
.js .license-card.reveal-up.in:hover .vehicle svg{transform:translateX(6px);transition-delay:0s}
.js .license-card.reveal-up.in:hover .spin{animation:spin .7s linear infinite}

/* ---------- Theory test: facts + exam board ---------- */
.test-layout{display:grid;gap:28px;margin-bottom:28px}
.test-copy .section-lead{margin-bottom:22px}
.test-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.test-fact{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:var(--bg);border:2px solid var(--line)}
.fact-num{min-width:64px;font-size:40px;font-weight:900;line-height:1;color:var(--teal);text-align:center}
.test-fact b{display:block;font-size:17px;font-weight:800}
.test-fact div span{display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--muted)}

.exam-board{margin:0;padding:20px;border-radius:22px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;box-shadow:0 22px 44px rgba(15,42,46,.08)}
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:17px}
.board-timer{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;background:var(--bg);font-weight:800;color:var(--teal)}
.board-timer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.board-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.q{display:block;aspect-ratio:1;border-radius:7px;background:var(--teal);transition:background .3s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.q.bad{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red-ink)}
.js .exam-board.reveal-up .q{background:#E3EAEA;box-shadow:none;transform:scale(.85)}
.js .exam-board.reveal-up.in .q{background:var(--teal);transform:none;transition-delay:calc(var(--i) * 45ms + 300ms)}
.js .exam-board.reveal-up.in .q.bad{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red-ink)}
.board-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:14px;font-weight:700;color:var(--muted)}
.board-legend > span{display:inline-flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.dot-ok{background:var(--teal)}
.dot-bad{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red-ink)}
.board-result{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--teal-soft);color:var(--teal);font-size:16px;font-weight:800}
.board-pass{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.board-pass svg{width:17px;height:17px;fill:none;stroke:#FFFFFF;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.js .exam-board.reveal-up .board-result{opacity:0;transform:translateY(8px);transition:opacity .4s ease 1.8s,transform .4s ease 1.8s}
.js .exam-board.reveal-up.in .board-result{opacity:1;transform:none}
@media (min-width:1000px){
  .test-layout{grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;margin-bottom:40px}
  .exam-board{padding:28px}
  .board-grid{gap:8px}
}

/* ---------- Language menu ---------- */
.lang-menu{position:relative}
.lang-toggle{border:2px solid transparent;background:none;font-family:inherit;cursor:pointer}
.lang-chevron{width:14px !important;height:14px !important;transition:transform .2s}
.lang-toggle[aria-expanded="true"] .lang-chevron{transform:rotate(180deg)}
.lang-options{position:absolute;z-index:20;top:calc(100% + 6px);inset-inline-end:0;min-width:170px;margin:0;padding:6px;list-style:none;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;box-shadow:0 18px 40px rgba(15,42,46,.14)}
.lang-options button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;text-align:start}
.lang-options button:hover,.lang-options button:focus-visible{background:var(--bg);outline:none}
.lang-options button[aria-checked="true"]{color:var(--teal);background:var(--teal-soft)}
.lang-options button[aria-checked="true"]::after{content:"";width:6px;height:11px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
html.i18n-loading body{visibility:hidden}

/* Scroll-in animation for sections (only once JS is running) */
.js .reveal-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal-up.in{opacity:1;transform:none}
.feature-card,.license-card,.lang-pill{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.feature-card:hover,.license-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,42,46,.08)}

/* ---------- Language suggestion bar ---------- */
.lang-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 44px 10px 16px;background:var(--ink);color:#FFFFFF;font-size:14px;position:relative}
.lang-bar-go{border:0;background:none;padding:0;font-family:inherit;font-size:14px;color:var(--yellow);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lang-bar-close{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:#FFFFFF;font-size:22px;line-height:1;cursor:pointer;border-radius:8px}

/* ---------- English (LTR) adjustments ---------- */
[dir=ltr] .email-input,[dir=ltr] .done-email,[dir=ltr] .store-name{text-align:left}
[dir=ltr] .store-soon{left:auto;right:-8px}
[dir=ltr] .title-underline{right:auto;left:0}
[dir=ltr] .confetti i{right:auto;left:48px}
@media (min-width:1000px){
  /* English lines run longer than the Hebrew ones the design was sized for */
  html:not([lang=he]) .title{font-size:clamp(40px,3.6vw,52px);white-space:normal;text-wrap:balance}
}

/* ---------- Footer link ---------- */
.site-footer a{color:var(--muted-2);font-weight:500;transition:color .15s}
.site-footer a:hover{color:var(--teal)}
.footer-links{display:flex;gap:18px}

/* ======================================================================
   Motion
   ====================================================================== */

/* Staggered entrance for the copy column */
.reveal{animation:rise .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--d,0) * 90ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Logo: check mark draws itself */
.logo-check{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .6s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Pill dot pulse */
.pill-dot{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,197,61,.7)}80%,100%{box-shadow:0 0 0 8px rgba(255,197,61,0)}}

/* Hand-drawn underline under the accent line */
.title-accent{position:relative;display:inline-block}
.title-underline{position:absolute;right:0;bottom:-.14em;width:100%;height:.22em;overflow:visible}
.title-underline path{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1s .9s cubic-bezier(.6,0,.2,1) forwards}

/* Chips lift on hover */
.chip{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.chip:hover{transform:translateY(-3px) rotate(-2deg)}

/* Primary button: periodic shine */
.btn-primary{position:relative;overflow:hidden;transition:filter .15s,transform .15s}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s 2s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary[disabled]::after{display:none}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}

/* "בקרוב" stickers wiggle now and then */
.store-soon{animation:wiggle 5s 2.5s ease-in-out infinite}
@keyframes wiggle{0%,86%,100%{transform:rotate(-6deg)}89%{transform:rotate(4deg) scale(1.08)}92%{transform:rotate(-10deg)}95%{transform:rotate(-3deg)}}

/* Hero: circle grows, phones fan out, then float */
.hero-circle{animation:grow .9s .15s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes grow{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}

.phone-center{animation:popUp .9s .35s cubic-bezier(.2,.8,.25,1.15) both,float 6s 1.4s ease-in-out infinite alternate}
.phone-left{animation:fanLeft 1s .55s cubic-bezier(.2,.8,.25,1.1) both,float 5.2s 1.6s ease-in-out infinite alternate-reverse}
.phone-right{animation:fanRight 1s .55s cubic-bezier(.2,.8,.25,1.1) both,float 5.6s 1.8s ease-in-out infinite alternate}
@keyframes popUp{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes fanLeft{from{opacity:0;transform:translateX(35%) rotate(0deg) scale(.9)}to{opacity:1;transform:rotate(-9deg)}}
@keyframes fanRight{from{opacity:0;transform:translateX(-35%) rotate(0deg) scale(.9)}to{opacity:1;transform:rotate(9deg)}}
@keyframes float{from{translate:0 0}to{translate:0 calc(var(--h) * -0.022)}}

/* Success card */
.done:not([hidden]){animation:cardIn .55s cubic-bezier(.2,.8,.25,1.2) both;position:relative}
.done-icon{animation:bounceIn .7s .15s cubic-bezier(.3,1.7,.5,1) both}
.done-icon svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s .55s ease-out forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bounceIn{from{transform:scale(0)}to{transform:scale(1)}}

.confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:5}
.confetti i{position:absolute;top:40px;right:48px;width:8px;height:12px;border-radius:2px;opacity:0;animation:confetti 1.3s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--delay)}
@keyframes confetti{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}
}

/* Form error shake */
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .logo-check,.title-underline path,.done-icon svg path{stroke-dashoffset:0}
  .confetti{display:none}
  .js .reveal-up{opacity:1;transform:none}
  .btn-spinner{animation:spin 2s linear infinite !important}
}