/* =========================================================================
   4Action Media — Blog shared stylesheet (index + article pages)
   LIGHT HYBRID theme: white / #f3f8fd reading surfaces, navy hero + footer
   bands, signal-wave signature device. RTL-first (Hebrew / Heebo).
   WCAG 2.2 AA. prefers-reduced-motion gated. Authored by 4Action — no
   third-party CSS. Implements design-spec.md (2026-06-blog) faithfully.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS (from design-spec §1)
   ------------------------------------------------------------------------- */
:root{
  /* ---- light reading surfaces ---- */
  --bg:#ffffff;
  --surface:#f3f8fd;
  --surface-2:#eaf2fb;

  /* ---- ink on light ---- */
  --ink:#0a2540;          /* 15.5:1 on #fff */
  --ink-soft:#52617a;     /* 6.3:1 */
  --ink-muted:#6b7790;    /* 4.6:1 — lightest readable */

  /* ---- hairlines & borders ---- */
  --hairline:#e3ecf6;     /* decorative only */
  --border:#cdddf0;       /* meaningful borders ≥3:1 */
  --border-strong:#b6cce6;

  /* ---- action / accent ---- */
  --blue:#2D7DD2;
  --blue-link:#1f6fc0;    /* small body links 5.1:1 */
  --blue-light:#4da8f5;
  --teal:#38B6FF;         /* glow/accent fill only */
  --teal-ink:#0a6aa6;     /* small teal text 5.8:1 */
  --grad:linear-gradient(135deg,#5db4ff,#2D7DD2);
  --grad-rtl:linear-gradient(225deg,#5db4ff,#2D7DD2);

  /* ---- navy bands (hero IN, footer/form OUT) ---- */
  --navy:#0a1628;
  --navy-raised:#0d1e35;
  --navy-deep:#060e1c;
  --on-navy:#eaf2fb;      /* 16:1 */
  --on-navy-soft:#9fb3cc; /* 8.5:1 */
  --on-navy-line:rgba(91,180,255,.22);

  /* ---- shadows ---- */
  --shadow-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.04);
  --shadow-card:0 2px 8px rgba(10,37,64,.06),0 8px 24px rgba(45,125,210,.07);
  --shadow-hover:0 6px 16px rgba(10,37,64,.10),0 16px 40px rgba(45,125,210,.16);
  --shadow-navy:0 -8px 32px rgba(6,14,28,.18);

  /* ---- pillar colour-coding (text label always present) ---- */
  --pillar-a:#1f6fc0;     --pillar-a-fill:#e7f0fb;
  --pillar-b:#0a6aa6;     --pillar-b-fill:#e2f3fc;

  /* ---- type ---- */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body-lat:'Inter',system-ui,sans-serif;
  --font-body-he:'Heebo',system-ui,sans-serif;

  /* ---- spacing (8pt base; 4 fine) ---- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;--s-12:48px;--s-16:64px;

  /* ---- radius / layout ---- */
  --r-input:10px;--r-card:16px;--r-cta:12px;--r-pill:999px;
  --maxw:1200px;
  --measure:38rem;
  --gap:24px;

  /* ---- focus ---- */
  --focus:#1f6fc0;
  --focus-navy:#38B6FF;

  /* ---- form tokens (sticky lead desk) ---- */
  --form-bg:var(--navy);
  --form-border:var(--on-navy-line);
  --form-shadow:var(--shadow-navy);
  --input-bg:var(--navy-raised);
  --input-text:var(--on-navy);
  --input-ph:#8499b6;          /* placeholder on --navy-raised, ≥4.5:1 */
  --input-h:44px;--input-radius:var(--r-input);
  --cta-grad:var(--grad);--cta-grad-rtl:var(--grad-rtl);
  --cta-ink:#0a1628;
  --cta-radius:var(--r-cta);
  --form-focus:var(--focus-navy);
}
@media (prefers-reduced-motion:no-preference){ :root{ --t:.18s; } }
@media (prefers-reduced-motion:reduce){ :root{ --t:0s; } }

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  font-family:var(--font-body-he);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* room so the sticky lead desk never covers content */
  padding-block-end:0;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue-link); }
h1,h2,h3,h4{ font-family:var(--font-display),var(--font-body-he); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* skip link */
.skip-link{
  position:absolute; inset-inline-start:var(--s-4); inset-block-start:-60px;
  background:var(--navy); color:var(--on-navy); padding:10px 18px;
  border-radius:var(--r-cta); z-index:200; font-family:var(--font-display);
  transition:inset-block-start var(--t) ease;
}
.skip-link:focus{ inset-block-start:var(--s-4); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-6); }

/* -------------------------------------------------------------------------
   3. SIGNAL-WAVE SIGNATURE DEVICE
   ------------------------------------------------------------------------- */
/* reading-progress bar — fixed at very top, fills on scroll (RTL right→left) */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:120;
  background:var(--grad); transform-origin:right center;
  transform:scaleX(var(--p,0));
}
[dir="ltr"] .progress{ transform-origin:left center; background:var(--grad); }
@media (prefers-reduced-motion:reduce){ .progress{ transition:none; } }

/* faint signal wave inside navy bands */
.wave-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-repeat:repeat-x; background-position:bottom; background-size:1200px 140px;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140'%3E%3Cpath d='M0 70 C100 30 200 30 300 70 C400 110 500 110 600 70 C700 30 800 30 900 70 C1000 110 1100 110 1200 70' fill='none' stroke='%235db4ff' stroke-opacity='0.12' stroke-width='2'/%3E%3C/svg%3E");
}
.glow{
  position:absolute; z-index:0; pointer-events:none;
  width:480px; height:480px; border-radius:50%; filter:blur(80px);
  background:radial-gradient(circle,rgba(56,182,255,.16),transparent 70%);
  inset-block-start:-180px; inset-inline-start:-120px;
}
[dir="rtl"] .glow{ inset-inline-start:auto; inset-inline-end:-120px; }

/* -------------------------------------------------------------------------
   4. SITE NAV (matches main site)
   ------------------------------------------------------------------------- */
.nav{
  position:sticky; inset-block-start:0; z-index:100;
  background:var(--navy); color:var(--on-navy);
  border-block-end:1px solid var(--on-navy-line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); min-height:64px; }
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--on-navy); text-decoration:none; letter-spacing:-.01em;
}
.logo .mark4{ width:26px; height:auto; }
.logo .m4-fill{ fill:var(--on-navy); }
.logo .m4-signal{ stroke:var(--teal); stroke-width:4; }
.logo .media-pre{ color:var(--on-navy); }
.logo .media{ color:var(--teal); }
.nav-links{ display:flex; align-items:center; gap:var(--s-6); }
.nav-links a.link{
  color:var(--on-navy-soft); text-decoration:none; font-family:var(--font-body-he);
  font-size:.95rem; transition:color var(--t) ease;
}
.nav-links a.link:hover,.nav-links a.link[aria-current="page"]{ color:var(--on-navy); }
.nav-cta{
  background:var(--grad-rtl); color:var(--cta-ink); font-family:var(--font-display);
  font-weight:700; font-size:.9rem; padding:9px 16px; border-radius:var(--r-cta);
  text-decoration:none; white-space:nowrap; transition:filter var(--t) ease;
}
.nav-cta:hover{ filter:brightness(1.06); }
.nav-toggle{ display:none; }
/* language toggle — stays visible at every breakpoint (unlike .link) */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--on-navy-soft); text-decoration:none; font-family:var(--font-body-he);
  font-size:.95rem; line-height:1; padding:6px 8px; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--on-navy) 22%, transparent);
  transition:color var(--t) ease, border-color var(--t) ease;
}
.lang-toggle:hover,.lang-toggle:focus-visible{
  color:var(--on-navy); border-color:color-mix(in srgb, var(--on-navy) 45%, transparent);
}
.lang-toggle .globe{ width:15px; height:15px; flex:0 0 auto; }
@media (max-width:760px){
  .nav-links a.link{ display:none; }
  .nav-links{ gap:var(--s-3); }
}

/* -------------------------------------------------------------------------
   5. NAVY HERO BAND (index + article)
   ------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--on-navy);
  padding-block:clamp(var(--s-12),9vw,var(--s-16));
}
.hero .container{ position:relative; z-index:1; }
.hero__tag{
  display:inline-block; font-family:var(--font-display); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal);
  border:1px solid var(--on-navy-line); border-radius:var(--r-pill);
  padding:5px 14px; margin-block-end:var(--s-4);
}
.hero__title{
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.02em;
  color:var(--on-navy); margin:0 0 var(--s-4); max-width:22ch;
}
.hero__dek{
  font-family:var(--font-body-he); font-size:clamp(1.05rem,2.2vw,1.25rem);
  line-height:1.6; color:var(--on-navy-soft); max-width:60ch; margin:0;
}
.hero__meta{
  font-family:var(--font-body-he); font-size:.95rem; color:var(--on-navy-soft);
  margin-block-start:var(--s-6); display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center;
}
.hero__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--on-navy-soft); }

/* hero mood image bleed (article) */
.hero__art{
  position:absolute; inset-block:0; inset-inline-end:0; width:48%; max-width:640px;
  z-index:0; opacity:.4; object-fit:cover; height:100%;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent);
  mask-image:linear-gradient(270deg,#000,transparent);
}
[dir="ltr"] .hero__art{
  inset-inline-end:auto; inset-inline-start:0;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}

/* breadcrumb (article hero, on navy) — from design-spec §3.1 */
.breadcrumb{ margin-block-end:var(--s-6); }
.breadcrumb ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px; font-family:var(--font-body-he); font-size:.85rem; color:var(--on-navy-soft);
}
.breadcrumb li{ display:inline-flex; align-items:center; gap:6px; }
.breadcrumb li + li::before{ content:"›"; color:var(--on-navy-soft); opacity:.7; }
.breadcrumb a{ color:var(--on-navy-soft); text-decoration:none; transition:color var(--t) ease; }
.breadcrumb a:hover{ color:var(--on-navy); text-decoration:underline; text-underline-offset:2px; }
.breadcrumb [aria-current="page"]{ color:var(--on-navy); }
.breadcrumb a:focus-visible{ outline:2px solid var(--focus-navy); outline-offset:2px; border-radius:4px; }

/* -------------------------------------------------------------------------
   6. PILLAR FILTER CHIPS (index)
   ------------------------------------------------------------------------- */
.filters{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-block-start:var(--s-8); }
.chip{
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.02em;
  color:var(--on-navy); background:transparent;
  border:1px solid var(--on-navy-line); border-radius:var(--r-pill);
  padding:8px 18px; min-height:40px; cursor:pointer;
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease;
}
.chip:hover{ border-color:var(--teal); }
.chip[aria-pressed="true"]{
  color:var(--cta-ink); background:var(--grad-rtl); border-color:transparent;
  position:relative;
}
[dir="ltr"] .chip[aria-pressed="true"]{ background:var(--grad); }
.chip:focus-visible{ outline:2px solid var(--focus-navy); outline-offset:2px; }

/* -------------------------------------------------------------------------
   7. CARD GRID (index)  — from design-spec §2
   ------------------------------------------------------------------------- */
.grid-wrap{ padding-block:clamp(var(--s-12),6vw,var(--s-16)); }
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
}
@media (max-width:380px){
  .grid{ grid-template-columns:1fr; }
}
.card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--t) ease,box-shadow var(--t) ease,border-color var(--t) ease;
}
.card[hidden]{ display:none; }
.card__link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
.card__thumb{
  position:relative; aspect-ratio:16/9; background:var(--surface);
  border-block-end:1px solid var(--border); overflow:hidden;
}
.card__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t) ease;
}
.tag{
  position:absolute; inset-inline-start:14px; inset-block-start:14px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill);
}
.tag--a{ color:var(--pillar-a); background:var(--pillar-a-fill); border:1px solid var(--blue); }
.tag--b{ color:var(--pillar-b); background:var(--pillar-b-fill); border:1px solid var(--teal); }
.card__body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card__title{
  font-family:var(--font-display),var(--font-body-he); font-size:1.3rem; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__dek{
  font-family:var(--font-body-he); font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__foot{
  margin-block-start:auto; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-body-he); font-size:.85rem; color:var(--ink-muted);
}
.arrow{ color:var(--blue); transition:transform var(--t) ease; font-size:1.1em; }
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-hover); }
.card:hover .card__thumb img{ transform:scale(1.03); }
.card:hover .arrow{ transform:translateX(-6px); }     /* slides toward reading edge under RTL */
[dir="ltr"] .card:hover .arrow{ transform:translateX(6px); }
.card__link:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-card); }
@media (prefers-reduced-motion:reduce){
  .card,.card .arrow,.card__thumb img{ transition:none; }
  .card:hover{ transform:none; }
  .card:hover .arrow,.card:hover .card__thumb img{ transform:none; }
}

/* empty filter state */
.grid-empty{
  display:none; font-family:var(--font-body-he); color:var(--ink-soft);
  padding:var(--s-12) 0; text-align:center;
}

/* -------------------------------------------------------------------------
   8. LONG-FORM ARTICLE TYPOGRAPHY  — from design-spec §3.2
   ------------------------------------------------------------------------- */
.article-body{
  max-width:var(--measure); margin-inline:auto; padding-inline:var(--s-6);
  padding-block:clamp(var(--s-12),6vw,var(--s-16));
  font-family:var(--font-body-he); font-size:19px; line-height:1.75; color:var(--ink);
}
.article-body > .deck{
  font-size:clamp(1.15rem,2.4vw,1.35rem); line-height:1.6; font-weight:700;
  color:var(--ink); margin:0 0 var(--s-8);
}
.article-body p{ margin:0 0 1.25em; }
.article-body h2{
  font-family:var(--font-display),var(--font-body-he); font-size:30px; line-height:1.2;
  letter-spacing:-.01em; color:var(--ink); margin:var(--s-16) 0 var(--s-4);
}
.article-body h3{ font-size:24px; line-height:1.25; color:var(--ink); margin:var(--s-12) 0 var(--s-3); }
.article-body h4{ font-size:20px; line-height:1.3; color:var(--ink); margin:var(--s-8) 0 var(--s-2); }
.article-body ul,.article-body ol{ margin:0 0 1.25em; padding-inline-start:1.4em; }
.article-body li{ margin-block-end:.5em; }
.article-body a{ color:var(--blue-link); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ text-decoration-thickness:2px; }
.article-body strong{ font-weight:700; color:var(--ink); }
.article-body bdi{ direction:ltr; unicode-bidi:isolate; }
.article-body hr{ border:0; border-block-start:1px solid var(--hairline); margin:var(--s-12) 0; }

/* AI-Overview answer block (the "בקצרה" callout — snippet bait) */
.tldr{
  background:var(--surface); border:1px solid var(--border);
  border-inline-start:4px solid var(--teal); border-radius:var(--r-card);
  padding:var(--s-6); margin:0 0 var(--s-12);
  font-size:1.02rem; line-height:1.7; color:var(--ink);
}
.tldr strong{ color:var(--ink); }

/* pull-quote (signal-wave on the reading edge) */
.pullquote{
  margin:var(--s-12) 0; padding-inline-start:var(--s-6); padding-block:var(--s-2);
  font-size:26px; line-height:1.4; color:var(--ink);
  box-shadow:inset 3px 0 0 0 var(--blue);
}
[dir="ltr"] .pullquote{ box-shadow:inset -3px 0 0 0 var(--blue); padding-inline:0 var(--s-6); padding-inline-start:0; }
.pullquote cite{ display:block; margin-block-start:var(--s-3); font-size:1rem; font-style:normal; color:var(--ink-soft); }

/* big-number stat block */
.stat{ display:flex; flex-direction:column; gap:6px; margin:var(--s-8) 0; }
.stat__num{
  font-family:var(--font-display); font-size:clamp(2.5rem,7vw,4rem); line-height:1; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .stat__num{ color:var(--blue); -webkit-text-fill-color:initial; }
}
.stat__cap{ font-family:var(--font-body-he); font-size:15px; color:var(--ink-soft); }

/* in-body contextual CTA box */
.cta-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s-8); margin:var(--s-12) 0; text-align:start;
}
.cta-box p{ margin:0 0 var(--s-4); font-size:1.05rem; line-height:1.6; }
.cta-box .cta-inline{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  background:var(--grad-rtl); color:var(--cta-ink); font-family:var(--font-display); font-weight:700;
  padding:11px 22px; border-radius:var(--r-cta); text-decoration:none; transition:filter var(--t) ease;
}
[dir="ltr"] .cta-box .cta-inline{ background:var(--grad); }
.cta-box .cta-inline:hover{ filter:brightness(1.06); }

/* checklist */
.checklist{ list-style:none; padding:0; margin:0 0 1.25em; }
.checklist li{ display:flex; gap:var(--s-3); align-items:flex-start; margin-block-end:.75em; }
.checklist li::before{
  content:""; flex:0 0 auto; width:20px; height:20px; margin-block-start:3px;
  border:2px solid var(--border-strong); border-radius:5px; background:var(--surface);
}

/* -------------------------------------------------------------------------
   9. FAQ ACCORDION  — from design-spec §3.2
   ------------------------------------------------------------------------- */
.faq{ display:flex; flex-direction:column; gap:var(--s-3); margin-block:var(--s-8); }
.faq__item{ }
.faq__q{
  width:100%; text-align:start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--s-4) var(--s-6); min-height:44px;
  font-family:var(--font-display),var(--font-body-he); font-size:1.05rem; font-weight:700;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  cursor:pointer;
}
.faq__q:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.faq__chev{ flex:0 0 auto; color:var(--blue); transition:transform var(--t) ease; }
.faq__q[aria-expanded="true"] .faq__chev{ transform:rotate(180deg); }
.faq__a{
  padding:var(--s-4) var(--s-6) var(--s-6); font-family:var(--font-body-he);
  font-size:1.02rem; line-height:1.75; color:var(--ink);
}
.faq__a[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .faq__chev{ transition:none; } }

/* -------------------------------------------------------------------------
   10. NAVY FOOTER BAND (matches main site)
   ------------------------------------------------------------------------- */
.footer{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--on-navy);
  padding-block:clamp(var(--s-12),7vw,var(--s-16)) calc(var(--s-12) + 84px);
  border-block-start:1px solid var(--on-navy-line);
}
.footer .container{ position:relative; z-index:1; }
.foot-cta{ text-align:center; padding-block-end:var(--s-12); border-block-end:1px solid var(--on-navy-line); margin-block-end:var(--s-12); }
.foot-cta h2{ font-size:clamp(1.5rem,3.5vw,2.2rem); color:var(--on-navy); margin:0 0 var(--s-6); letter-spacing:-.01em; }
.foot-ghost{
  display:inline-block; border:1px solid var(--teal); color:var(--on-navy);
  font-family:var(--font-display); font-weight:700; padding:12px 24px; min-height:44px;
  border-radius:var(--r-cta); text-decoration:none; transition:background var(--t) ease;
}
.foot-ghost:hover{ background:rgba(56,182,255,.12); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 2fr; gap:var(--s-12); }
@media (max-width:680px){ .foot-grid{ grid-template-columns:1fr; gap:var(--s-8); } }
.foot-brand .logo{ margin-block-end:var(--s-4); }
.foot-tagline{ font-family:var(--font-body-he); color:var(--on-navy-soft); font-size:.95rem; line-height:1.6; max-width:42ch; }
.foot-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8); }
@media (max-width:480px){ .foot-links{ grid-template-columns:1fr 1fr; } }
.foot-col h5{ font-family:var(--font-display); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); margin:0 0 var(--s-4); }
.foot-col a{ display:block; color:var(--on-navy-soft); text-decoration:none; font-family:var(--font-body-he); font-size:.95rem; margin-block-end:var(--s-3); transition:color var(--t) ease; }
.foot-col a:hover{ color:var(--on-navy); }
.foot-bottom{
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  margin-block-start:var(--s-12); padding-block-start:var(--s-6);
  border-block-start:1px solid var(--on-navy-line);
  font-family:var(--font-body-he); font-size:.85rem; color:var(--on-navy-soft);
}

/* -------------------------------------------------------------------------
   11. STICKY LEAD DESK (navy bar on light page) — from design-spec §4
   ------------------------------------------------------------------------- */
.leadbar{
  position:sticky; inset-block-end:0; z-index:90;
  background:var(--form-bg); border-block-start:1px solid var(--form-border);
  box-shadow:var(--form-shadow);
  padding:var(--s-4) var(--s-6) calc(var(--s-4) + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap;
}
.leadbar__pitch{ flex:0 1 auto; min-width:180px; }
.leadbar__h{ font-family:var(--font-display); color:var(--on-navy); font-size:1rem; margin:0; line-height:1.3; }
.leadbar__sub{ font-family:var(--font-body-he); color:var(--on-navy-soft); font-size:.8rem; margin:2px 0 0; line-height:1.4; }
.leadbar__fields{ display:flex; gap:var(--s-3); flex:1; min-width:280px; align-items:stretch; }
.leadbar input{
  flex:1; min-width:120px; height:var(--input-h); border-radius:var(--input-radius);
  background:var(--input-bg); border:1px solid var(--form-border); color:var(--input-text);
  padding-inline:var(--s-4); font-family:var(--font-body-he); font-size:.95rem;
}
.leadbar input::placeholder{ color:var(--input-ph); }
.leadbar input:focus-visible{ outline:2px solid var(--form-focus); outline-offset:2px; border-color:transparent; }
.leadbar input:user-invalid,.leadbar input[aria-invalid="true"]{ border-color:#ff8a8a; }
.leadbar__cta{
  height:var(--input-h); padding-inline:var(--s-6); border:0; border-radius:var(--cta-radius);
  background:var(--cta-grad-rtl); color:var(--cta-ink); font-family:var(--font-display); font-weight:700;
  font-size:.95rem; cursor:pointer; white-space:nowrap;
  transition:filter var(--t) ease,box-shadow var(--t) ease;
}
[dir="ltr"] .leadbar__cta{ background:var(--cta-grad); }
.leadbar__cta:hover{ filter:brightness(1.06); box-shadow:0 6px 20px rgba(45,125,210,.45); }
.leadbar__cta:focus-visible{ outline:2px solid var(--on-navy); outline-offset:2px; }
.leadbar__cta[disabled]{ opacity:.6; cursor:progress; }
.leadbar__priv{
  font-family:var(--font-body-he); font-size:.75rem; color:var(--on-navy-soft);
  text-decoration:underline; text-underline-offset:2px; flex-basis:100%;
  display:inline-flex; align-items:center; gap:6px;
}
.leadbar__priv svg{ width:13px; height:13px; flex:0 0 auto; }
.leadbar__priv:hover{ color:var(--on-navy); }
.leadbar__status{ flex-basis:100%; font-family:var(--font-body-he); font-size:.85rem; color:var(--teal); margin:0; }

/* success state */
.leadbar--done .leadbar__fields,.leadbar--done .leadbar__priv{ display:none; }
.leadbar--done .leadbar__status{ color:var(--teal); font-size:1rem; }

/* MOBILE: collapse to pinned CTA pill → bottom-sheet */
.leadbar__expand{ display:none; }
@media (max-width:640px){
  .leadbar{
    flex-direction:column; align-items:stretch; gap:var(--s-3);
    transition:transform var(--t) ease;
  }
  /* collapsed: only the expand pill + privacy shows */
  .leadbar[data-state="collapsed"] .leadbar__pitch,
  .leadbar[data-state="collapsed"] .leadbar__fields,
  .leadbar[data-state="collapsed"] .leadbar__priv{ display:none; }
  .leadbar[data-state="collapsed"] .leadbar__expand{ display:flex; }
  .leadbar[data-state="open"] .leadbar__expand{ display:none; }
  .leadbar__expand{
    width:100%; min-height:48px; align-items:center; justify-content:center; gap:8px;
    background:var(--cta-grad-rtl); color:var(--cta-ink); border:0; border-radius:var(--cta-radius);
    font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer;
  }
  .leadbar__fields{ flex-direction:column; }
  .leadbar input,.leadbar__cta{ height:48px; }
  .leadbar__close{
    align-self:flex-end; background:none; border:0; color:var(--on-navy-soft);
    font-size:1.4rem; line-height:1; padding:4px 8px; min-height:44px; min-width:44px; cursor:pointer;
  }
}
@media (min-width:641px){ .leadbar__close{ display:none; } }
@media (prefers-reduced-motion:reduce){ .leadbar,.leadbar__cta{ transition:none; } }

/* -------------------------------------------------------------------------
   12. UTIL
   ------------------------------------------------------------------------- */
.section-label{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-ink); margin-block-end:var(--s-3);
}