/* סופר ללא גלוטן — the customer app page. Brand green + the logo's gold as a fill only; Heebo for Hebrew (served from here),
   the phone's own Arabic face for Arabic. Light + dark by the phone's setting. RTL throughout. */
@font-face{ font-family:"Heebo"; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/heebo-hebrew.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:"Heebo"; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/heebo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
  --bg:#f3f7f3; --card:#ffffff; --tint:#e5f1e8; --line:#d9e5dc; --ink:#13221a; --ink2:#3a4a41; --muted:#56655c;
  --green:#055c2e; --green2:#0b7a40; --on-green:#ffffff; --gold:#f2c230; --ok:#0b7a40; --ok-bg:#e3f4e8;
  --sh:0 1px 2px rgba(8,40,22,.06), 0 10px 28px -14px rgba(8,40,22,.22);
  --r:18px; --font:"Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color-scheme:light;
}
html[lang="ar"]{ --font:"SF Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif; }
@media (prefers-color-scheme: dark){ :root{
  --bg:#0d1611; --card:#16231b; --tint:#1b2e22; --line:#27392e; --ink:#e8efe9; --ink2:#c6d1ca; --muted:#9daea4;
  --green:#2f9a5c; --green2:#3aae6a; --on-green:#ffffff; --ok:#6fd398; --ok-bg:#183323;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.75); color-scheme:dark; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a{ color:var(--green2); text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--green2); outline-offset:3px; border-radius:10px; }
.wrap{ max-width:460px; margin:0 auto; padding:calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:18px; }
.logo{ width:128px; height:128px; border-radius:30px; background:#fff; box-shadow:var(--sh); display:block; }
.hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:6px; }
h1{ margin:6px 0 0; font-size:1.6rem; line-height:1.25; font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
h2{ margin:0 0 6px; font-size:1.08rem; font-weight:800; }
.lead{ margin:0; color:var(--ink2); font-size:1.02rem; text-wrap:pretty; }
.muted{ color:var(--muted); }
.small{ font-size:.86rem; line-height:1.55; }
.block{ display:block; margin-top:2px; }
.perks{ list-style:none; margin:0; padding:14px; display:flex; flex-direction:column; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }
.perks li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); line-height:1.4; }
.pi{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--green2); }
.pi svg{ width:22px; height:22px; }
.actions{ display:flex; flex-direction:column; gap:10px; }
.btn{ appearance:none; border:0; width:100%; min-height:54px; padding:12px 18px; border-radius:16px; background:var(--green); color:var(--on-green);
  font:800 1.06rem/1.2 var(--font); cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 20px -10px rgba(5,92,46,.7); transition:transform .12s ease, filter .12s ease; }
.btn:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.6; cursor:wait; }
.btn.ghost{ background:var(--card); color:var(--green2); border:1.5px solid var(--line); box-shadow:none; font-weight:700; }
.link{ appearance:none; background:none; border:0; color:var(--muted); font:600 .9rem var(--font); text-decoration:underline; cursor:pointer; padding:6px; align-self:center; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh); }
.card p{ margin:0; color:var(--ink2); }
.card .btn{ margin-top:12px; }
.steps{ list-style:none; counter-reset:s; margin:8px 0 10px; padding:0; display:flex; flex-direction:column; gap:12px; }
.steps li{ counter-increment:s; position:relative; padding-inline-start:44px; min-height:32px; line-height:1.45; }
.steps li::before{ content:counter(s); position:absolute; inset-inline-start:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--green); color:var(--on-green); font-weight:800; display:grid; place-items:center; font-size:.95rem; }
.ico-share{ width:22px; height:22px; vertical-align:-5px; color:var(--green2); margin-inline-start:4px; }
.status{ margin:0; padding:10px 14px; border-radius:14px; background:var(--tint); color:var(--ink); font-weight:600; text-align:center; }
.status.ok{ background:var(--ok-bg); color:var(--ok); }
.status.tester{ background:#fff4d6; color:#7a5400; font-size:.88rem; }
@media (prefers-color-scheme: dark){ .status.tester{ background:#3a2f12; color:#f4d48a; } }
footer{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-top:4px; }
footer p{ margin:0; }
.lang{ font-weight:700; text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); }
.splash, .sheet{ min-height:70vh; min-height:70dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
.sheet .btn{ max-width:360px; }
.spin{ width:28px; height:28px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--green2); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin{ animation:none; } .btn{ transition:none; } }